css的三种引入方式

1.内部样式，仅对当前页面的元素生效，使用style标签

<style>
h1{background-color:red;}
</style>

2.外部样式，适用于所有引入了这个css样式表的html文档

<head>
<link rel="stylesheet" href="style.css"></head>

3.行内样式，仅适用于当前页面中指定的元素，使用style属性

<h1 style="color:teal">php中文网</h1>

实例：

样式表的模块化

<style>
@import url(header.css);
@import url(footer.css);
</style>

1.将公共样式部分进行分离，并创建一些独立的样式表来保存它
2.使用@import指令将这些独立的公共样式表引入到指定的css文档或标签中

选择器

1.标签选择器
2.class选择器
3.id选择器
4.上下文选择器
5.结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
     /* 1.标签选择器，返回一组*/
     /** li{
         background-color:violet;
     }
     */
     /* 2.类选择器：返回一组*/
     li.on{
         background-color: blue;
     }
     /* 3.id选择器：返回一个 */
     #foo{
       background-color: violet;
     }
    </style>
</head>
<body>
    <ul>
        <li id="foo">iteml1</li>
        <li class="on">iteml2</li>
        <li>iteml3</li>
        <li class="on">iteml4</li>
        <li class="on">iteml5</li>
    </ul>
</body>
</html>

上下文选择器

后代选择器所有层级
ul li{ background-color: lightblue;}
子元素选择器仅父子层级
body>ul>li{background-color: teal;}
同级相邻选择器，仅选中与之相邻的第一个兄弟元素
.start+li{background-color: lightgreen;}
同级相邻选择器，仅选中与之相邻的后面所有兄弟元素
.start~li{background-color: lightgreen;}
结构伪类选择器
匹配任意位置的元素 nth-of-type(an+b)
a代表一个循环的大小数字，n是一个计数器(从0开始) b是偏移量
an+b是 a 乘于 n 加 b

ul li:nth-of-type(2n+1){
background-color:red;
}
2n-1 如下：
2*0+1=1
2*1+1=3
2*2+1=5
...
...
具体某个标签
ul li:nth-of-type(3){}选中第三个
选择前三个
ul li:nth-of-type(-n+3)
选择偶数行
ul li:nth-of-type(even){};
选择奇数行
ul li:nth-of-type(odd){};
选择第一个
ul li:first-of-type{};
选择最后一个
ul li:last-of-type{};
选择最后三个
ul li:nth-last-of-type(-n+3){};

总结：
nth-of-type 是正序选择
nth-last-of-type 是倒序选择
last-of-type 是最后一个
first-of-type 是第一个

1215作业

css的三种引入方式

样式表的模块化

选择器

上下文选择器

结构伪类选择器

相关文章