CSS引入方式 Emmet语法 CSS复合选择器

最新推荐文章于 2024-01-04 17:49:03 发布

bit..

最新推荐文章于 2024-01-04 17:49:03 发布

阅读量704

点赞数 25

分类专栏： html和css 文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_68773927/article/details/127889767

版权

html和css 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

🍓个人主页：bit..

🍒系列专栏：Linux(Ubuntu)入门必看 C语言刷题数据结构与算法 HTML和CSS3

3.5 伪类选择器（鼠标放在文字上面改变颜色）

3.6链接伪类选择器

3.7 focus 伪类选择器

3.8复合选择器总结

一.CSS的撒比中样式表

按照CSS样式书写的位置（或者引入的方式）CSS分为三大类：

行内样式表（行内式）
内部样式表（嵌入式）
外部样式表（链接式）

1.2 内部样式表

内部样式表（内嵌样式表）式写到HTML页面内部，是将所有的CSS代码抽取出来，单独放到一个<style>标签中。

<style>
    div {
        color:red;
        font-size: 12px;
        }
</style>

<style>标签理论上可以放在HTML文档的任何地方，但一般会放在文档的<head>标签中。
通过此种方式，可以方便控制当前整个页面中的元素样式设置。
代码结构清晰，但是并没有实现结构样式完全分离。
使用内部样式表来设定CSS，通常也被称为嵌入式引入，这种方式常用。

1.3行内样式表

行内样式表(内联样式表)是在元素标签内部的style属性中设定CSS样式适合修改简单的样式。

例如：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div style="color: red; font-size: 12px;">行内样式表</div>
</body>

</html>

style其实就是标签的属性。
在双引号中间，写法要符合CSS规范。
可以控制当前的标签设置样式
由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用。
使用行内不样式表设定CSS，通常也被称为行内式引入。

1.4外部样式表

设计开发中都是外部样式表，适合于样式比较多的情况，核心是：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用引入外部样式分为两步：

新建一个后缀名为.css 的文件样式，把所有CSS代码都放入该文件中。

在HTML页面中，使用<link> 标签引入这个文件。 <link rel="stylesheet" href="CSS文件路径">

总结：

属性	作用
rel	定义当前文件与被链接文档之间的关系，在这里需要指定为"style sheet"
href	定义所有链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

使用外部样式设定CSS通常也被称为外链接或链接式引入 这种方式式开发中常见的方式。

1.5CSS引入方式的总结

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便权重高	结构样式混写	较少	控制一个标签
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面
外部样式表	完全实现结构样式分离	需要引入	最多	控制多个页面

二.Emmet语法

Emmet语法前身是 zen coding 它使用缩写来提高HTML/CSS 的编写速度。vscode内部已经集成改语法。

快速生成HTML结构语法
快速生成CSS样式语法

2.1快速生成HTML结构语法

生成标签直接按Tab键 div --> Tab --> <div> </div>
如果想要生成多个相同标签，加上*就可以了。eg: div*3 生成三个div
如果有父子级关系的标签，可以用 > .比如 ul>li --> <ul> <li> </li> </ul>
如果有兄弟关系的标签，用+ 就可以了。比如：div+p --> <div> </div> <p> </P>
如果生成带有类名或者id名字，直接写 .demo或者#two Tab键就可以了。
如果生成的div内名是有顺序的，可以用自增符号 $ 例如：.demo$*5 生成了五个 <div class="demo"></div> <div class="demo1"></div> <div class="demo2"></div> <div class="demo3"></div> <div class="demo4"></div> <div class="demo5"></div>
如果想要生成的标签内部写内容可以用{ }表示。例如： div{xxx} 生成 <div>xxx</div>

2.2快速生成CSS样式语法

CSS基本采取简写形式即可。

比如w200 按Tab 可生成：width: 200px;
比如lh26 按Tab 可生成： line-height: 26;

2.3快速格式化代码

vscode快速格式化代码： shift+alt+f 也可以设置当我们保存页面的时候自动格式化代码。

三.CSS复合选择器

3.1什么是符合选择器

在CSS中，可以根据选择器的类型把选择器分为基础选择器和符合选择器

复合选择器建立在基础选择器上，对基本选择器进行组合形成的。

符合选择器可以更准确更高效的选择目标元素(标签)
符合选择器是由,两个或多个基础选择器，通过不同的方式组合而成的
常用的符合选择器包括：后代选择器，子代选择器，并集选择器，伪类选择器等等。

3.2后代选择器

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签就成为外层标签的后代。

语法：

元素1 元素2 { 样式声明}

元素1里面的所有元素2（后代元素）

例如：ul li { 样式声明} /*选择ul里面所有的li标签元素*/

元素1和元素2中间用空格分隔开来
元素1是父级，元素2 是子级，最终选择的是元素2
元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可。
元素1与元素2可以是任意基础选择器。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ol li {
            color: pink;
        }
    </style>
</head>

<body>
    <ol>
        <!-- ol 为有序*/ -->
        <li>后代选择器</li>
    </ol>
    <ul>
         <!-- ul为无序  -->
        <li>后代选择器</li>
    </ul>
</body>

</html>

3.3子代选择器(重要）

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素。

语法：

元素1 >元素2 { 样式声明}

上述语法表示元素1里面的所有直接后代(子元素) 元素2。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav>a {
            color: pink;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>

</body>

</html>

div>a {样式声明} /*选择div里面的所有最近一级a标签元素*/

元素1和元素2中间用大于号隔开

元素1是父级，元素2是子级，最终选择的是元素2

元素2必须是亲儿子，其孙子，重孙子之类都不归他管，你可以叫它亲儿子选择器。

3.4并集选择器(重要）

并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div,
        p {
            color: pink;
        }
        /* 将熊大熊二改为红色 */
    </style>
</head>

<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
</body>

</html>

并集选择器是各选择器通过英文逗号(,) 链接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法:

元素1,元素2 {样式声明}

上述语法表示选择元素1和元素2

例如：

ul.div {样式声明} /*选择u1和div标签元素*/

元素1和元素2中间用逗号隔开
逗号可以理解为和的意思
并集选择器通常用于集体声明

3.5 伪类选择器（鼠标放在文字上面改变颜色）

伪类选择器用于向某些选择器添加特殊的效果。比如：给链接添加特殊效果或者选择第一个，第n个元素。
伪类选择器书写最大的特点是用冒号(:)表示，比如：hover: first-child
伪类选择器很多，比如有链接伪类，结构伪类

3.6链接伪类选择器

a:link	选择所有未被访问的链接
a:visited	选择所有已被访问的链接
a:hover	选择鼠标指针位于其上的链接
a:active	选择活动链接(鼠标按下未弹起的链接）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:link {
            color: #333;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <a href="#">小猪佩奇</a>
</body>

</html>

链接伪类选择器注意事项：

为了确保生效，请按照LVHA的顺序声明 :link- :visited- :hover :active。
记忆法：love hate 或者 lv宝宝hao
因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

链接伪类选择器在实际中开发的写法：

/*a是标签伪类选择器，所有的链接*/

a {

color:gray;

}

/* hover 是链接伪类选择器，鼠标经过*/

a:hover {

color:red; /*鼠标经过的时候，由原来的灰色变为红色*/

}

3.7 focus 伪类选择器

:focus 伪类选择器用于选取获得焦点的表单元素。

焦点就是光标，一般情况下<input> 类表氮元素才能获取，因此这个选择器也主要争对于表单元素来说。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input:focus {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <input type="text">
</body>

</html>

3.8复合选择器总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择后代元素	可以是子孙后代	较多	符号是空格 .nav a
后代选择器	选择最近一级元素	只选亲儿子	较少	符号是大于 .nav>p
子代	选择某些相同样式的元素	可用于集体声明	较多	符号是逗号 .nav;header 实际开发的写法
链接伪类	选择不同状态的链接	跟链接相关	较多	重点记住a{}和a:haver
:focus	选择获得光标的表单	跟表单相关	较少	input:focus 记住这个写法

bit..

关注

25
点赞
踩
19

收藏

觉得还不错? 一键收藏
打赏
19
评论
CSS引入方式 Emmet语法 CSS复合选择器

样式表优点缺点使用情况控制范围行内样式表书写方便权重高结构样式混写较少控制一个标签内部样式表部分结构和样式相分离没有彻底分离较多控制一个页面外部样式表完全实现结构样式分离需要引入最多控制多个页面在CSS中，可以根据选择器的类型把选择器分为基础选择器和符合选择器复合选择器建立在基础选择器上，对基本选择器进行组合形成的。符合选择器可以更准确更高效的选择目标元素(标签)符合选择器是由,两个或多个基础选择器，通过不同的方式组合而成的。
复制链接

扫一扫