CSS-概述-选择器

1、CSS概念
CSS是Cascading Style Sheets（级联样式表）。
级联: 关联 两个事物之间的关系 指的是网页内容 和 修饰网页内容的css语法
理念是将网页和样式分离 这样重复的样式只需要定义一次即可.

样式表:修饰网页内容的语法的集合
作用:修饰网页内容的外观 文本 背景 列表 定位 …

关系:
HTML网页内容
CSS 网页的样式,外观…
2、CSS基本语法
三种样式表
行内(行级)样式表

 <p style="color: red; font-size: 24px;">床前明月光,</p>

内嵌样式表

 <style type="text/css">
p{
      color: green;
      font-size: 20px;
       }
 </style>

外部样式表

  <!-- 导入外部的样式表 -->
<link href="css/out.css" rel="stylesheet"/>

三种方式的比较

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，优先级高	效率低	较少	控制一个标签
内嵌样式表	部分结构和样式分离	没有彻底分离	较多	控制一个页面
外部样式表	完全结构和样式分离	需要引入	最多	控制一个站点

3、CSS选择器
标签选择器

语法：标签名{

​			}

类选择器

.pclass{
	color:black;
	font-size:50px;
}

Id

#p1{
	color:red;
	font-size:10px;
}

组合
通配
注意优先级

后代
子标签
相邻兄弟
兄弟

样式的继承
子标签会从父标签继承样式.
标签之间的关系
父标签：直接包含子标签的标签
子标签：直接被父标签包含的标签
color: #FF0000;后代标签：直接或间接被祖先标签包含的标签，子标签也是后代标签
兄弟标签：拥有相同父标签的标签叫做兄弟标签

<style type = "text/css">
  
    p b{
        color:red;
    }
   
    p > b{
        color:red;
    }
    
    p ~ b{
        color:red;
    }
</style>

<p>
    <b>p的儿子</b>
    <s>
        <b>p的孙子</b>
    </s>
</p>