前端-3-css（注意css选择器）

一、基础

1. css：层叠样式表（Cascading Style Sheets）
2. 语法结构

   选择器{
   	属性:值;
   }
   

二、css样式分类

1. 行内样式：标签内

   在标签内使用style属性进行设置

2. 内部样式表：style标签内

   在style标签内通过选择器设置

   <style type="text/css">
    
    </style>
   

3. 外部样式表：css文件

   在css文件内通过选择器设置
   <link rel=“stylesheet” href="…/css/css1.css" type=“text/css”>
   href 文件路径；rel 使用外部样式表；type 文件类型

   注意：
   导入css文件有两种方式：链接式和导入式

   1. <link/>链接属于XHTML，@import属于css2.1
   2. 使用<link>链接的css文件先加载到网页中，再进行编译显示。
   3. 使用@import导入的css文件，客户端显示HTML结构，再把css文件加载到网页当中。
   4. @import 是属于css2.1独有的，对于不兼容css2.1的浏览器来说是无效的。

三、css选择器(很多，100+)

css选择器:就对页面控件进行选择的工具，对页面中与该选择去匹配的控件 进行设置

优先级：id选择器 > 类选择器 > 标签选择器 > 通配符

1. 标签选择器
   以html标签命名的，只针对于该名称的标签起作用

   h1{
   	color:red;
   	font-size:20px;
   }
   

2. 类选择器
   针对于标签名不同但是用于相同样式的控件

   .className{
     	属性:值;
    }
    必须通过控件的 class 属性 进行引用
    如果一个控件要同时 拥有多个类样式，直接以空格 隔开
   

   如果出现相同的属性定义了，后面的会自动覆盖前面的：

   .font{
   	color:red;
   	font-size:12px;
   }
   .bg{
   	color:blue;
   	width:100px;
   	height:100px;
   }
   <div class="font bg">哈哈哈</div>
   
   最终看到的是 ：字体颜色为 blue
   

3. id选择器
   针对的是控件id相同的元素，通常只应用于一个控件；如果 仅仅需要某一个控件 采用改样式 尽量使用 id 选择器

   #idName{
   	属性:值;
   }
   必须通过控件的 id 属性进行引入，有且只能使用一个
   

4. 属性选择器

   件	说明
   p[attr]	当标签p属性 id有设置时，即<p id="…">
   [ attr = “val”]	当标签p属性 id有设置时，且<p id=“val”>
   [attr^ = “val”]	以val开头的
   [attr$ = “val”]	以val结尾的
   [ attr ～= “val“]	当标签p多个属性有设置时，且有任意一个属性值为val，即<p …=“val”>

   p[id]{
       color:red;
   }
   p[class]{
       color:blue;
   }
   
   <p>国破山河在，城春草木深。</p>	<!--不变-->
   <p id="two">感时花溅泪，恨别鸟惊心。</p>		<!--变红-->
   <p id="one1">烽火连三月，家书抵万金。</p>	<!--变红-->
   <p class="sakld">测试</p>	<!--变蓝-->
   

5. 后代选择器
   嵌套多层的话，这样可以方便找到，清楚
   外层标签 内层标签
   且【内层标签可以是外层标签的子标签、孙标签】（即不一定为亲儿子）

   .div_big{
   	font-size:20px;
   }
   .div_big .div02{
   	color:red;
   	font-size:14px;
   }
   
   <div class="div_big">
   	我是div
   	<div class="div02">我是div02</div>
   </div>
   

6. 子集选择器???[测试没用？]
   标签一>标签二
   【标签元素的第一代子元素】

   .div0 > ul{
       color: red;
   }
   
   <div class="div0">
       <ul>
           <li> List Item
               <ul>
                   <li> Child </li>
               </ul>
           </li>
           <li> List Item </li>
           <li> List Item </li>
           <li> List Item </li>
       </ul>
   </div>
   

7. 交集选择器
   第一个必须为标签选择器，第二个为类选择器或id选择器
   即 p.txt 或 p#test
   之间无空格
   标签一标签二【系统所找到的标签必须满足：既有标签一的特点，也有标签二的特点。才会变成该标签的样式】

   <!--即必须是div标签且class="txt"才会改变成一下样式-->
   div.txt{
       font-size: 30px;
       color: red;
   }
   <div class="txt">
       我是交集选择器	<!--变红-->
   </div>
   <div>
       我是测试一	<!--不变红-->
   </div>
   <p class="txt">我是测试二</p>	<!--不变红-->
   

8. 并集选择器
   标签一,标签二,标签三,…
   【所有的满足标签1，或者满足标签2的标签。就会变成该标签的样式】

   div,p,.h_class,#id_css{
   	color:red;
   	font-size:20px;
   }
   

9. 兄弟选择器
   标签一+标签二
   【标签二紧接在标签一后面，且标签一和标签二有共同父标签，此时标签二改变为选择器样式】

   div +.p0{
       color:red;
   }
   
   <div>
       <p class="p0">我是测试一</p>	<!--不变红-->
       <div><p class="p0">我是测试二</p></div>		<!--不变红-->
       <p class="p0">我是兄弟选择器</p>	<!--变红-->
   </div>
   

10. 通配符 * ：所有样式 （不建议用，效率低，且优先级低）

    *{
    	color:blue;
    }
    

四、伪类选择器

设置伪类顺序 a:link->a:visited->a:hover->a:active

1. a:link：未单击时的样式
2. a:visited：单击后的样式
3. a:hover：鼠标悬浮时的样式
4. a:active：鼠标单击时的样式

选择的文档块中的部分：

1. : : first-line 选择文档块中的第一行

2. : : first-letter 选择文档块的首字母

3. : : before 在选中元素的内容之前插入内容

4. : : after 在选中元素的内容之后插入内容

   # p:hover:after  意思为  当鼠标指到p标签上后，p标签后面插入content中的内容
   p{
       color: pink;
   }
   p:hover:after{
       color: chartreuse;
       content: '在p标签之后插入内容';
   }
   
   <p>测试</p>
   

五、常用的css样式属性

字体属性：

属性名	含义
font-family	字体类型
font-size	字体大小
font-style	字体风格
font-weight	字体粗细
font	在一个声明中设置所有字体属性

文本属性：

属性	含义
color	文本颜色
text-align	元素对齐方式
text-indent	首行文本缩进
line-height	文本行高
text-decoration	文本装饰

背景：

属性	含义
background-color	背景颜色
background-image	背景图像
background-repeat	背景重复方式
background-position	背景定位

列表样式：

属性	含义
list-style-type	none(无标记符号) disc(实心圆)