css基础

CSS 基础

一、CSS介绍

• 内容表现分离
• 网页的表现统一，容易修改
• 丰富的样式，使得页面布局更加灵活
• 减少网页代码量，增加网页的浏览速度、节省网络带宽
• 运用独立于平面的css,有利于网页被搜索引擎收录

二、CSS语法

选择器{
    属性名：值；
    属性名：值；
    ......
}

三、引入CSS

1. 行内样式

   在HTML标签内，使用style属性引入CSS样式

   示例

   <p style='color:red;'>
       style属性的应用
   </p>
   

   优点

   ​ 直接作用在标签上，比较直观。

   缺点

   ​ 只能对一个标签起作用，无法实现复用，不利于样式与内容分离

2. 内部样式

   将css代码写在HTML文件的

CSS 选择器

一、基础选择器

1. 标签选择器

   作用：选择一类标签

   语法

   标签名{}
   

2. 类（class）选择器

   作用：选择所有class属性一致的标签

   语法

   .类名{}
   

3. ID选择器

   作用：通过标签的ID选择元素，全局唯一

   语法

   #id名{}
   

4. 基础选择器优先级

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

二、层次选择器

1. 后代选择器

   body p{
       background: blue;
   }
   

2. 子选择器

   body>p{
       background: blue;
   }
   

3. 相邻兄弟选择器

   .active+p{
       background: blue;
   }
   

4. 相邻通用选择器

   .active~p{
       background: blue;
   }
   

三、结构伪类选择器

1. 选择作为父元素的第一个子元素

   ul li:first-child{
       background: blue;
   }
   

2. 选择作为父元素的最后一个子元素

   ul li:last-child{
       background: blue;
   }
   

3. 选择父元素的第n个子元素 （n可以是1，2，3）

   .active p:nth-child(1){
       background: blue;
   }
   

4. 选择父元素内具有指定类型的第一个元素

   ul li:first-of-type{
        background: blue;
   }
   

5. 选择父元素内具有指定类型的最后一个元素

   ul li:last-of-type{
        background: blue;
   }
   

6. 选择父元素内具有指定类型的第n个元素

   ul li:nth-of-type(1){
        background: blue;
   }
   

   使用:nth-child(n)和:nth-of-type(n)的关键

   • :nth-child(n)在父级里从第一个元素开始查找，不分类类型
   • :nth-of-type(n)在父级里先看类型，再看位置。

四、属性选择器

1. E[attr]，选择匹配具有属性attr的E元素

   a[id]{
       background: yellow;
   }
   

2. E[attr=val],选择匹配具有attr的E元素，并且属性值为val（其中val区分大小写）

   a[href=http]{
       background: yellow;
   }
   

3. E[attr^=val],选择匹配元素E,且E元素定义了属性val，其属性值是以val开头的任意字符

   a[href^=http]{
       background: yellow;
   }
   

4. E[attr$=val],选择匹配元素E,且E元素定义了属性attr，其属性值是以val结尾的任意字符串

   a[href$=http]{
       background: yellow;
   }
   

5. E[attr*=val],选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val"

   a[href*=mice]{
       background: yellow;
   }