清纯女高秃头进度—css的开始
一.css的引入方式
-
行内式 通过给标签设置 style属性来设置行内样式
-
没有实现结构和样式分离，行内样式只能作用在一个标签上，不推荐
<p style="color: green;">我是段落</p>
<p style="color: blueviolet;">我是段落</p>
-
内嵌式 通过在head标签内使用style标签设置内嵌样式
-
样式和结构的部分分离，内嵌式作用在当前页面中,其他页面如果需要设置相同的样式需要复制，练习时使用
<head>
<style>
span {
background-color: aqua;
}
</style>
</head>
-
外链式 通过在head标签内使用link标签引入准备好的css文件
-
结构和表现分离。耦合性低 一个css文件的样式可以作用在多个页面，修改方便，推荐
<link rel="stylesheet" href="myStyle.css">
（新建一个css文件设置样式），如：
div {
background-color: red;
}
二.css选择器
-
选择器-----------css样式属性
属性名1:属性值;
属性名2:属性值;
-
作用：将页面中的指定的标签选择出来给其添加样式
-
-
基础选择器
-
标签选择器：标签名 将页面中所有的同类型的标签选择出来 设置相同的样式
-
id选择器：格式：#id名{...} 将页面中具有指定id名的那一个标签选择出来
-
类选择器：.类名{...} 将页面中具有指定类名的标签都选择出来
-
类选择可以给具有相同类名的标签设置共同的样式，给某一些标签添加独有的样式
-
类名的设置：推荐使用英文（拼音），不要使用中文，纯数字以英文字母开头
-
如果由多个单词组成，多个单词之间使用中划线链接
-
-
通配符选择器：*{...} 将所有的标签都选择出来
-
三.复合选择器
-
标签的关系
- 嵌套
- 并列
-
标签的分类
- 父元素（标签）———直接嵌套子元素的元素就是父元素
- 子元素（标签）——— 直接被父元素嵌套的元素就是子元素
- 祖先元素（标签）——— 直接或间接嵌套后代元素的元素就是祖先元素（爸爸和爷爷在代码中都是祖先）
- 后代元素（标签）———直接或间接被祖先元素嵌套的元素就是后代元素
-
组合（复合）选择器 ：由多个基础选择器组合的选择器就是复合选择器
-
后代选择器
格式： 元素1 元素2{....}
将元素1 后代中的元素2选择出来添加样式
-
子选择器
格式： 元素1>元素2{。。。。}
将元素1的亲儿子元素2选择出来添加样式
-
交集选择器
格式：选择器1选择器2选择器3...{}
将同时符合所有条件的标签选择出来
当交集选择器中有标签选择器的时候，标签选择器要写在开头
1.CSS代码：（class值不使用任何东西隔开，表示“且”） 筛选 class 值 同时具有 red 和 fontsize50 的标签，将字号设置为50px，文本颜色设置成红色：
2.筛选 class 值 为 blue 的 p 标签，将颜色调为蓝色：
3.显示效果：
-
并列选择器
格式：选择器1,选择器2,...{} 中间用 , 隔开
作用：将多组符合条件的标签选择出来
1.筛选 class 值 为 red 或 orange 的标签，将字体设定为 30px
2.显示效果：
-
