css的使用方法和css选择器

逃离我推掉我的手 2021-10-18 19:26 344阅读 0赞

1.css的使用方式  
　　1.行内样式（内联样式）  
　　　　<标签 style="属性名1:属性值1;属性名2:属性值2;..."></标签>  
  
　　2.页面嵌入（内部样式表）  
　　　　在head标签里面增加一个子标签  
　　　　<style>  
　　　　　　选择器\{  
　　　　　　属性名1:属性值1;  
　　　　　　属性名2:属性值2;  
　　　　　　......  
　　　　　　\}  
　　　　</style>  
  
  
　　3.外部文件（外部样式表）  
　　　　在head标签里面增加一个子标签  
　　　　<link rel="stylesheet" href="css文件的路径" />  
  
　　4.外部导入样式  
　　主要用在样式初始化。因为有一些标签有自己的样式，我们需要清空，方便自己计算  
  
　　@import url("reset.css");表示在一个css文件中导入另一个css文件  
　　css语法： （符号都是英文的）  
　　选择器\{  
　　属性名1:属性值1;  
　　属性名2:属性值2;  
　　......  
　　\}  
2.css中常用选择器  
　　1.ID选择器  
　　　　使用id选择器：在元素上面增加一个id属性,id属性的属性值不用用数字开头  
　　　　一个页面中只能有一个id属性值  
　　　　css中id选择的表示方法用 \# 表示  
　　2.class选择器  
　　　　使用class选择器：在元素上增加一个class属性，class属性的属性值不能用数字开头  
　　　　一个页面中可以有多个class属性值  
　　　　css中class选择器的表示方法用 . 表示  
　　3.标签选择器  
　　　　直接写标签名  
　　4.组合选择器  
　　　　选择器直接用,分隔开即可  
　　5.子代选择器  
　　　　> 只针对子代  
　　6.后代选择器  
　　　　用空格表示，包含着子代选择器  
　　7.通用选择器  
　　　　\* 针对于所有的标签  
　　8.:hover 叫伪类选择器  
　　　　当你的鼠标放上去的时候，会变化成的样子  
　　　　权值 10  
3.选择器的权中重  
　　　内联样式 1000  
　　　　　　id 100  
　　　　　class 10  
　　　　　　标签 1  
　　　　　　通用 0  
　　　　boss !important 只要出现，就以这个为主  
　　div\{  
　　　　width: 500px!important;  
　　　　height: 500px!important;  
　　　　color: \#f00!important;  
　　　　background-color: \#ff0!important;  
　　　\}  
  
  
权重越高，冲突部分的样式就以权重高的为主，并不是说这个选择器没有用了，而是里面冲突的样式  
权重仅仅只能作为参考  
  
权重的计算  
不需要管子代和后代的  
如果权重相同，就近原则。以后定义的为准

转载于:https://www.cnblogs.com/Godfather-twq/p/11211444.html