css引入方式与选择器 - PHP学习

Home > List of blog posts > css引入方式与选择器

Blogger Information

Blog 5

fans 0

comment 0

visits 3454

Special Recommendation

More>

Related recommendations

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,这些都是快捷方式

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

前端开发环境的搭建与HTML初体验

2020-12-10 00:35:56