css学习小记

3年的大学生活已经结束，趁着暑假给自己充电，把HTMl的东西再看下“只有提升自己的能力，才可以让自己变的更加的强大”。加油骚年。

一、CSS和HTML的结合方式

CSS和HTML的结合方式有3种：

1. 行级样式表：采用style属性，范围只针对此标签适用
   <div style = "border:1px solid red;">行级样式表</div>

2. 内嵌样式表：采用 style标签完成，范围是此页面

3. 外部样式表：采用建立样式表文件，多个页面都可以使用的，采用标签

<link rel = "stylesheet" type ＝＂text/css＂ href = "a.css"</link>

二、CSS选择器

选择器分为2类

1、 基本选择器

1. 标签选择器：指的就是选择器的名字代表html页面上的标签

   p{
   color:red;
   border:1px dashed green;
   }
   

2. 类选择器：规定用圆点.来定义，用class来对它进行引用

   .one{
   background-color:#ff0099;
   }
   

3. ID选择器：规定用#来定义

   #one{
   cursor:hand;
   }
   

4. 通用选择器：用*定义，代表页面上的所有的标签

   *{
   font-size:30px;
   margin-left:0px;
   margin-top:0px;
   }
   

2、 扩展选择器

1. 组合选择器：采用逗号隔开

   p,h1,h1,.one{
       color:red;
       }
   

2. 关联选择器：采用空格隔开

   h4 span i{
       color:red;
   }
   

3. 伪选择器：
   1)：静态伪类：规定是用：来定义，只有2个，只能用于超链接：link表示超链接点击之前的颜色，visited表示连接点击之后的颜色。

   a:link{color:red}
   a:visited{color:yellow}
   

   注意：

   a:link{}定义的样式针对所有的写了href属性的超链接（不包括锚）

   a{}定义的样式针对所有的超链接（包括锚）

   ---

   2):动态伪类：针对所有的标签都适用：

   hover：移动到某个标签上的时候
   focus：某个标签获得焦点的时候
   active：点击某个标签没有放松鼠标的时候

   label:hover{color:#00ff00; }
   input:focus{
           background-color:#ff9999;
           border:1px solid red;
           }
   a:active{
           color:blue;
           }
   

三、CSS各种选择器的冲突

1. ID选择器 > 类选择器 > 标签选择器

2. 行级样式表 > 内嵌样式表 > 外部样式表外部样式表的ID选择器 > 内嵌样式表的标签选择器

   原则： 就近原则