css 引入方式与选择器

css 引入方式与选择器

任何元素如果引入到 html 文档中，必须使用适当的标签，css 也不例外
<style></style>
通过 style 标签引入的 css 规则，仅适用于当前的页面（html 文档）

css：层叠样式表，用来设置页面中元素的样式，布局

h1{}
h1：选择器
{…}：声明块
h1+{…}选择器+声明块=规则

h1{ color:violet; border:1px solid #000; }

内部样式：只适用于当前文档，使用的 style 标签。
外部样式表：所有文档都可以调用使用。

• 通过@import url（css/style.css）
• 更好的方式：<link rel="stylesheet" href="css/style.css">

行内样式：通过 style 属性添加，只适用于当前页面指定的元素。
<h1 style="color:teal">lll</h1>

对于一个网站来说，许多页面的页眉、页脚是相同的，可以考虑剥离出来。

header.css 公共页眉
footer.css 公共页脚
然后一个网站的各页面进行导入公共页面、页脚
@import url(css/header.css);
@import ‘css/footer.css’;

也可以使用公共样式表 style.css 中包含公共页眉、页脚

1、选择器的语法
2、样式表的引入方式
3、样式表的模块化编程

选择器：

简单选择器

1、标签选择器，返回一组
2、类选择器，返回一组
li[class="on"]{background-colot:violet;}
简写.on{background-colot:violet;}
3、id 选择器：返回一个
li[id="foo"]{background-colot:violet;}
简写#foo{background-colot:violet;}

上下文选择器

根据元素的上下文环境来选择是完全没有问题的
理解为一种层级关系。
1、后代选择器
ul li{background-colot:violet;}
2、子选择器：仅父子关系
body>ul>il{background-colot:violet;}

3、同级相邻选择器：兄弟选择器
.start+li{background-colot:violet;}

4、同级所有选择器：相邻所有兄弟选择器
.start~li{background-colot:violet;}

伪类选择器

（结构伪类）重点、难点
1、匹配任意位置的元素: :nth-of-type(an+b)
(an 起点 b 偏移量，n 的取值（0，1，2，3，…)）
ul li:nth-of-type(0n+3){background-colot:violet;}
ul li:nth-of-type(3){background-colot:violet;}
如果全选还不如标签选择器

加上偏移量就不同了
ul li:nth-of-type(1n+3){background-colot:violet;}
ul li:nth-of-type(n+3){background-colot:violet;}

2、反向获取 nth-last-of-type（an+b）
选择倒数三个
ul li:nth-last-of-type(-n+3){background-colot:violet;}
选择倒数第三个
ul li:nth-last-of-type(3){background-colot:violet;}

21，22，23，偶数选择 2，4，6，8….
21+1,奇数的选择 1，3，5，7，…
even 代表偶数 odd 代表奇数
ul li:nth-of-type(even){background-colot:violet;}
ul li:nth-of-type(Odd){background-colot:violet;}

3、快捷方式语法糖
选择第一个子元素：first-of-type
ul li:first-of-type(1n+3){background-colot:violet;}
选择最后一个元素： last-of-type
ul li:last-of-type(1n+3){background-colot:violet;}

如果只想匹配父元素唯一子元素使用：only-of-type 就可快速实现
ul li:only-of-type(1n+3){background-colot:violet;}