css简介以及css选择器的使用

css

css简介

html   -超文本语言
css    -层叠样式表
         -网页实际上是一个多层的结构，通过css可以分别为网页的每一层结构做样式,而最终我们能看到的只有最上面一层
         -设置网页中元素的样式

css书写位置

第一种方式：内联样式/行内样式
        书写位置：开始标签 style属性，将css样式写在style属性值里面，可以写多个样式，只要用分隔号;隔开即可。
        优缺点：
优点：有针对性
缺点：1、结构和表现耦合了
           2、修改起来不方便
注意：不推荐使用

<div style="color: red; font-size: 32px; background-color: green;">
        任意文字
    </div>

第二种方式：内部样式表
        书写的位置：head标签内部，写一个style标签，通过选择器选中对应的html结构， 在花括号{}里面书写css样式,可以写多组样式，样式之间用;隔开，最后一个样式后可以不加分隔号，但是一般都加上。
        优缺点：
缺点：复用率不高
注意：css比较多的时候，不推荐使用

<style>
        p{
            color: purple;
            font-size: 15px;
            background-color: pink;
        }
    </style>

第三种方式：外部样式表
        书写位置：在html文件外，新建一个.css文件，在css文件李通过选中对应的html结构，在花括号里书写css样式,然后在head标签内写一个link标签将对应的css文件引入到html文件内。
        注意：推荐使用

<link rel="stylesheet" href="./02.css书写位置.css">

css语法

css语法：样式名，样式值
        color：设置字体的颜色 red green yellow
        font-size：设置字体的大小 px
        background-color：设置背景颜色 red green yellow
选择器：声明块
        选择器：有多种选择器；
        声明快：具体的css样式，是写在花括号里面；
        样式的结构：名值对结构（样式名：样式值；）可以写多组样式，用分隔号；隔开。

常用选择器

1、元素选择器（标签选择器）
作用：选中对应标签的内容
语法：标签名{css样式…}
例子：h1{}，h3{}，p{}

<style>
h1{
            color: red;
        }
        h3{
            background-color: green;
        }
        p{
            font-size: 20px;
        }
</style>

2、id选择器
作用：选中对应id属性值的内容
语法：#id属性值{}
例子：#j1{}，#j2{}
注意：id的属性值不能重复使用

<style>
#j1{
            color: green;
        }
        #j2{
            color: red;
        }
        </style>

3、class选择器
class选择器的用法跟id选择器是一样的，只不过class属性值可以重复使用
作用：选中对应class属性值的内容
语法：.class属性值{}
注意：class属性值可以取多个，中间用空格
例子：.s1{}、.ss{}.pp{}

<style>
.s1{
            color: orange;
        }
</style>

4、通配选择器
选中所有的标签，进行设置

<style>
*{
            font-size: 24px;
        }
</style>

css复合选择器

1、交集选择器
作用：选中同时符合多个条件的内容
语法：选择器1选择器2选择器3…{}
注意：如果选择器中有元素选择器，元素选择器必须要放在最前面
例子：p#p1.pp{}，div.ss{}

<style>
.red{
            color: red;
        }
        div{
            font-size: 24px;
        }
        div.red{
            font-size: 34px;
        }
</style>

2、并集选择器（群组选择器）
作用：同时选中对应的内容
语法：选择器1，选择器2，选择器3…{}
例子：.red，#red1，div，p{}

<style>
h1,h3{
            color: orange;
        }
</style>

关系选择器

1、子元素选择器
作用：通过指定的父元素找到指定的子元素
语法：父元素>子元素{}
例子：#red>.green{}，.pp>em{}

<style>
div>h2{
            color: red;
        }
</style>

2、后代选择器
作用：通过指定的祖先元素找到指定的后代元素
语法：祖先元素 后代元素{}
例子：.class .red{}，#red p{}

<style>
#dcs span{
            font-size: 30px;
        }
</style>

3、下一个兄弟选择器
作用：选择下一个兄弟（紧挨着我的一个）
语法：兄+弟{}

<style>
.p1+span{
            background-color: pink;
        }
</style>

4、选择下面所有的兄弟（前面的不选）
作用：通过指定的兄长找到下面所有的兄弟
语法：兄~弟{}
例子：#red~.p1{}

<style>
.p1~span{
            color: brown;
        }
</style>

各种选择器

选择器1，选择器2{}（并集）
选择器1选择器2{}（交集）
选择器1 选择器2{}（后代）
选择器1>选择器2{}（子元素）
选择器1+选择器2{}（下一个兄弟）
选择器1~选择器2{}（下面所有兄弟）

属性选择器

属性选择器：
通过确定属性以及属性值来选中对应的内容，例如id属性，class属性，src属性，href属性
语法：[属性名]{} 选择含有指定属性的元素
[属性名=属性值]{} 选择含有指定属性和属性值的元素
[属性名^=属性值]{} 选择属性值以指定值开头的元素
[属性名$=属性值]{} 选择属性值以指定值结尾的元素
[属性名*=属性值]{} 选择属性值含有某值的元素

<style>
[id] {
        background-color: green;
      }
      p[title] {
        color: red;
      }
      [title=ab]{
        color: orange;
      }
      [title^=ab]{
        font-size: 30px;
      }
      [title$=ab]{
        background-color: pink;

      } 
       [title*=abc]{
        color: palevioletred;
      }
</style>