css引入方式与选择器

css引入方式与模块化编程

css引入方式有：内部样式表引用、外部样式表引用、行内样式

1、内部样式表：通过 \<style> 标签引入的 css 规则，仅适用于当前页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>css的基本语法</title>
    <!-- 任何元素如果想引入到html文档中,必须要使用一个适当的标签,css也不例外 -->
    <style>
        /* 通过style标签引入的css规则,仅适用于当前的页面(html文档) */
        /* css: 层叠样式表,用来设置页面中元素的样式,布局 */
        h1 {
            /* 声明: 属性和值组成 */
            color: violet;
            border: 1px solid #000;
        }
        /* h1: 选择器 */
        /* {...}: 声明块,由一个或多个由分号分隔开的样式声明构成 */
        /* h1 + {...}: 选择器 + 声明块 = 规则 */
    </style>
</head>
<body>
    <h1>php.cn</h1>
</body>
</html>

2、外部样式表：使用 \<link> 标签引入的外部公共样式表

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>css引入方式:外部样式表/公共样式表/共享样式表</title>
    <!-- 2. 使用link 标签引入外部公共样式表 -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>php中文网</h1>
</body>
</html>

style.css

h1 {
  /* 声明: 属性和值组成 */
  color: violet;
  border: 1px solid #000;
}

3、行内样式：通过 style=” “属性给指定元素自定义/定制样式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>css引入方式:style属性设置样式</title>
</head>
<body>
    <!-- 3. 通过style属性给指定元素自定义/定制样式 -->
    <h1 style="color:teal">css真的非常好玩</h1>
</body>
</html>

总结:
1. 内部样式: 仅对当前文档的元素有效,使用 style 标签
2. 外部样式: 适用于所有引入了这个css样式表的html文档,使用 link 标签
3. 行内样式: 仅适用于当前的页面中的指定的元素,使用style属性

样式表的模块化

样式表的模块化，是通过 @import 来实现的

1、在内部样式表中的使用方式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>样式表的模块化:公共部分进行分离</title>
    <style>
        /* 导入公共页眉 */
        @import url(css/header.css);
        /* 导入公共页脚 */
        @import 'css/footer.css';
        main {
            min-height: 500px;
            background-color: lightcyan;
        }
    </style>
</head>
<body>
    <header>页眉</header>
    <main>主体</main>
    <footer>页脚</footer>
</body>
</html>

css/header.css

/* 公共页眉 */
header {
  height: 50px;
  background-color: #ddd;
}

css/footer.css

/* 公共页脚 */
footer {
  height: 80px;
  background-color: #555;
  color: white;
}

2、在外部样式表中的使用方式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>样式表的模块化:导入一个公共入口的css文件</title>
    <link rel="stylesheet" href="css/style1.css">
</head>
<body>
    <header>页眉</header>
    <main>主体</main>
    <footer>页脚</footer>
</body>
</html>

css/style1.css

/* 导入公共页眉 */
@import url(header.css);
/* 导入公共页脚 */
@import "footer.css";
main {
  min-height: 500px;
  background-color: lightcyan;
}

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

选择器

基础选择器

1、标签元素选择器

最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>选择器1: 简单选择器</title>
    <style>
        /* 1. 标签选择器, 返回一组 */
        li {
          background-color: violet;
        } 
    </style>
</head>
<body>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </ul>
</body>
</html>

2、类选择器 class

类选择器允许以一种独立于文档元素的方式来指定样式。
该选择器可以单独使用，也可以与其他元素结合使用。
在使用类选择器之前，需要修改具体的文档标记，以便类选择器正常工作
为了将类选择器的样式与元素关联，必须将 class 指定为一个适当的值

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>选择器1: 简单选择器</title>
    <style>
        /* 2. 类选择器: 返回一组 */
        /* li[class="on"] {
            background-color: violet;
        } */
        /* class选择器可简化为 .  */
         .on {
            background-color: violet;
        } 
    </style>
</head>
<body>
    <ul>
        <li>item1</li>
        <li class="on">item2</li>
        <li>item3</li>
        <li class="on">item4</li>
        <li class="on">item5</li>
    </ul>
</body>
</html>

3、id选择器

在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。
ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>选择器1: 简单选择器</title>
    <style>
        /* 3. id选择器: 返回一个 */
        /* li[id="foo"] {
            background-color: violet;
        } */
        /* 因为浏览器不检查id的唯一性,必须由开发者自行保证 */
        /* id选择器使用 # 简化 */
        #foo {
            background-color: violet;
        }
    </style>
</head>
<body>
    <ul>
        <li id="foo">item1</li>
        <li class="on">item2</li>
        <li id="foo">item3</li>
        <li class="on">item4</li>
        <li class="on">item5</li>
    </ul>
</body>
</html>

上下文选择器

1、后代选择器

根据上下文选择元素我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。
在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“… 在 … 找到”、“… 作为 … 的一部分”、“… 作为 … 的后代”，但是要求必须从右向左读选择器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>选择器2:上下文选择器</title>
    <style>
        /* 因为html是一个结构化的文档:每一个元素在文档中有确切的位置 */
        /* 所以根据元素的上下文环境来选择是完全没有问题的 */
        /* 1. 后代选择器: 所有层级 */
        ul li {
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4
            <ul>
                <li>item4-1</li>
                <li>item4-2</li>
                <li>item4-3</li>
            </ul>
        </li>
        <li>item5</li>
    </ul>
</body>
</html>

2、子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。
子选择器使用了大于号（子结合符）。子结合符两边可以有空白符，这是可选的。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>选择器2:上下文选择器</title>
    <style>
        /* 因为html是一个结构化的文档:每一个元素在文档中有确切的位置 */
        /* 所以根据元素的上下文环境来选择是完全没有问题的 */
        /* 2. 子元素选择器: 仅父子层级 */
        body>ul>li {
            background-color: teal;
        }
    </style>
</head>
<body>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4
            <ul>
                <li>item4-1</li>
                <li>item4-2</li>
                <li>item4-3</li>
            </ul>
        </li>
        <li>item5</li>
    </ul>
</body>
</html>

3、同级相邻选择器

相邻兄弟选择器,可选择紧接在另一元素后的元素，且二者有相同父元素。
相邻兄弟选择器使用了加号（+），即相邻兄弟结合符
与子结合符一样，相邻兄弟结合符旁边可以有空白符

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>选择器2:上下文选择器</title>
    <style>
        /* 因为html是一个结构化的文档:每一个元素在文档中有确切的位置 */
        /* 所以根据元素的上下文环境来选择是完全没有问题的 */
         /* 3. 同级相邻选择器: 仅选中与之相邻的第一个兄弟元素 */
        .start+li {
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <ul>
        <li>item1</li>
        <li class="start">item2</li>
        <li>item3</li>
        <li>item4
            <ul>
                <li>item4-1</li>
                <li>item4-2</li>
                <li>item4-3</li>
            </ul>
        </li>
        <li>item5</li>
    </ul>
</body>
</html>

4、同级所有选择器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>选择器2:上下文选择器</title>
    <style>
        /* 因为html是一个结构化的文档:每一个元素在文档中有确切的位置 */
        /* 所以根据元素的上下文环境来选择是完全没有问题的 */
        /* 4. 同级所有选择器: 选中与之相邻的后面所有兄弟元素 */
        .start~li {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <ul>
        <li>item1</li>
        <li class="start">item2</li>
        <li>item3</li>
        <li>item4
            <ul>
                <li>item4-1</li>
                <li>item4-2</li>
                <li>item4-3</li>
            </ul>
        </li>
        <li>item5</li>
    </ul>
</body>
</html>

上下文选择器总结：

空格：所有层级
> ：父子级
+ ：相邻的兄弟
~ ：所有相邻兄弟

伪类选择器: 结构伪类,难点重点

结构伪类是使用位置进行选择
匹配任意位置的元素: :nth-of-type(an+b)
- :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
- n 可以是数字、关键词或公式。
- an+b: an起点,b是偏移量, n的取值从0开始，n = (0,1,2,3…)
反向获取任意位置的元素: nth-last-of-type(an+b)
- :nth-last-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数
- n 可以是数字、关键词或公式。
选择第一个子元素::first-of-type
- :first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素。
- 等同于 :nth-of-type(1)
选中最后一个: :last-of-type
- :last-of-type 选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素。
- 等同于 :nth-last-of-type(1)
匹配父元素中唯一子元素,使用 :only-of-type

.html

 <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
        <li>item8</li>
        <li>item9</li>
        <li>item10</li>
    </ul>

匹配任意位置的元素：’:nth-of-type(an+b)’

.css

    /* 1. 匹配任意位置的元素: `:nth-of-type(an+b)` */
    /* an+b: an起点,b是偏移量, n的取值从0开始，n = (0,1,2,3...) */
    /* 匹配第3个li  */
 ul li:nth-of-type(0n+3) {
  background-color: violet;
} 
    /* 简化写法：0乘以任何数都等于0,通常直接写偏移量就可以 */
ul li:nth-of-type(3) {
  background-color: violet;
} 
    /* 选择所有元素 */
ul li:nth-of-type(1n) {
  background-color: violet;
} 
    /* 如果只是为了全选,这样做没意义,还不如标签选择器来得直接,但是一旦带上偏移量就完全不同了 */
ul li:nth-of-type(1n+3) {
  background-color: violet;
} 
    /* 1乘以任何数都等于自己,所以省去1 */
ul li:nth-of-type(n+3) {
  background-color: violet;
} 
ul li:nth-of-type(n+8) {
  background-color: violet;
}

反向获取任意位置的元素: nth-last-of-type(an+b)

    /* 2. 反向获取任意位置的元素: `nth-last-of-type(an+b)` */
ul li:nth-last-of-type(-n+3) {
  background-color: violet;
} 
    /* 我只选择倒数第3个,直接命中 */
ul li:nth-last-of-type(3) {
  background-color: violet;
}

选择所有索引为偶数、奇数的子元素

    /* 选择所有索引为偶数的子元素, 2,4,6,8... */
ul li:nth-of-type(2n) {
  background-color: violet;
} 
    /* 2*0 = 0
    2*1 = 2
    2*2 = 4
    2*3 = 6 */
    /* 选择所有索引为奇数的子元素, 1,3,5,7,9... */
ul li:nth-of-type(2n-1) {
 background-color: violet;
} 
    /* 这里用2n+1也是对的,大家考虑一下为什么? */
    /* 偶数行: even  */
ul li:nth-of-type(even) {
  background-color: violet;
}
    /* 奇数行: odd  */
ul li:nth-of-type(odd) {
  background-color: violet;
}

选中第一个和最后一个

    /* 3.选择第一个子元素: :first-of-type */
    /* :nth-of-type(1) 的语法糖 :first-of-type */
ul li:first-of-type {
  background-color: violet;
}
    /* 3. 选中最后一个: :last-of-type */
ul li:last-of-type {
  background-color: violet;
}

如果只想匹配父元素中唯一子元素,使用 :only-of-type就可快速实现

html

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
    <li>item9</li>
    <li>item10</li>
</ul>
<ul>
    <li>我是一个流浪汉</li>
</ul>

css

    /* 如果只想匹配父元素中唯一子元素,使用 :only-of-type就可快速实现 */
ul li:only-of-type {
    background-color: violet;
}

:nth-of-type(an+b)这是最核心的一个选择器,其它的相关选择器都是它的语法糖
:nth-last-of-type(), :first-of-type, :last-of-type,这些都是快捷方式