【CSS学习笔记二】CSS的引入方式、chorme调试、Emmet语法、 CSS复合选择器-CSDN博客

本文链接：https://blog.csdn.net/waski/article/details/133977028

文章目录

5. CSS的引入方式

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

5.1 内部样式表

内部样式表：将CSS代码写在html内部，放到了<style>标签

如：

<!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 {
        text-decoration: none;
    }
    p {
        text-decoration: underline;
    }
    </style> 
</head>
<body>
    <p>我是用来测试下划线的</p>
    <a href="#">淘宝</a>
</body>
</html>

未实现结构与样式完全分离，因为结构和样式还是写在一个html文档中。
<style>理论上是可以在任何位置的。

5.2 行内样式表

如果遇到这种情况：

<body>
    <p>第一段</p>
    <p>第二段</p>
    <p>第三段</p>
    <p>第四段</p>
    <p>第五段</p>
    <p>第六段</p>
</body>

我们只是想要求改第六段的文字样式，我们可以使用一种更加简单的方式，而不定义内部样式表。

<body>
    <p>第一段</p>
    <p>第二段</p>
    <p>第三段</p>
    <p>第四段</p>
    <p>第五段</p>
    <p style="font-size:20px; font-weight:800">第六段</p>
</body>

直接在一个标签内部修改，注意行内样式表修改的格式。

5.3 外部样式表（常用）

当有非常多的样式行时使用

第一步：建立一个.css文件，只写样式，不写<style>

第二步：在html文档中引用这个css样式表文档。在<head></head>中输入link然后点击tab自动补全：<link rel="stylesheet" href="style.css">

<link rel="stylesheet">：被链接的文档是一个样式表文件，系统会自动输入

<href="style.css">：css文档的路径。

如：

css文档：（只有样式）

p{
    text-indent: 2em;
    text-decoration: underline;
    line-height: 36px;
}

HTML文档：（加上链接，不用写样式）

<!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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>第一段</p>
    <p>第二段</p>
    <p>第三段</p>
</body>
</html>

注意：外部样式表是开发中最常见的样式表，完全实现结构与样式相分离。

5.4 小结

在这里插入图片描述

6. chorme调试

按下F12或者在空白处右键+检查，就可以调出调试界面
点击Element，其左边为HTML结构，右边为CSS样式（可改动数值）
点击结构中的某一行，右边样式会自动跳转到相应的类中
左上角小黑箭头，就可以点击页面的元素，查看这个元素的结构代码和样式代码
当程序出现bug的时候，样式代码左边会出现一个小黄警示牌，最右边有报错的代码行数，根据位置修改我们的源码。
ctrl+0就可以恢复页面的原始样子。

7. Emmet语法 !!!

7.1 HTML快速生成标签

直接输入标签名，然后按tab就可以生成一串标签

例：输入div,然后加上tab:

    <div></div>

想要生成多个标签，只需要输入标签名*number，然后按下tab就可以了

例：输入div*3,按下tab：

    <div></div>
    <div></div>
    <div></div>

如果有父子级的标签，可以用**>**表示

例：ul和li是父子级的关系，可以输入ul>li，再按下tab,就可以生成一串代码，中间没有空格。

<ul>
    <li></li>
</ul>

如果有兄弟关系的代码，直接用**+**表示就可以了，中间没有空格

例：span和p是兄弟关系，输入span+p，再按下tab,就可以生成相应代码：

<span></span>
<p></p>

如果想要生成带类名的标签，用**.类名**，然后加上tab键就可以了。

例：输入.ziti，然后按下tab,就可以：（默认生成div）

<div class="ziti"></div>

或者输入span.ziti按下空格键，就可以生成相应的带有类的标签：

<span class="ziti"></span>

自增符号$，当需要同时生成多个标签时，常常需要对其进行依次命名

例：输入.yangshi$*5 ：生成5个div标签并排序

<div class="yangshi1"></div>
<div class="yangshi2"></div>
<div class="yangshi3"></div>
<div class="yangshi4"></div>
<div class="yangshi5"></div>

要生成的标签里默认带文字：在后面加上{},在里面加入文字

例：输入div{我真不错}*3 ：生成3个div标签加文字

<div>我真不错</div>
<div>我真不错</div>
<div>我真不错</div>

7.2 CSS快速生成样式

w200 按tab生成 width: 200px;
Ih26 按tab生成 line-height: 26px;
tac 按tab生成 text-align: center;
ti2em 按tab生成 text-indent: 2em;
w 按tab生成 width: ;
tdn 按tab生成 text-decoration: none ;

8 CSS复合选择器

复合选择器：基础选择器的组合

常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

8.1 后代选择器 `ul li {}`

后代选择器（包含选择器）：可以改父元素里所有子元素样式

语法: 标签1 标签2 { 属性:属性值; }

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li><a href="#">链接</a></li>
    </ul>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</body>

修改ul中的a：

<style>
    ul li a {
        color: rgb(201, 65, 160);
    }
</style>

注意：

ul li a {} 和 ul a {}效果相同，只作用在最后一个选择器a
ul li {} 只会改变li的样式，不会改变li下面a的样式
后代选择器只能使用在有层级关系的标签上。
后代选择器中间需要用空格隔开。

8.2 子选择器 `div>a{}`

子元素选择器（子选择器）：只能改父元素里最近一级子元素样式

语法: 标签1> 标签2 { 属性:属性值; }

<body>
    <div class="nav">
        <a href="#">链接1</a>
        <p>
            <a href="#">链接2</a>
        </p>
        <a href="#">链接3</a>
    </div>
</body>
<style>
    .nav>a {
      color: brown;
    }
</style>

子选择器：div>a，选择div最近层的a，也就是链接1和链接3

后代选择器： div a，会把所有a全部选上

8.3 并集选择器 `div,p{}`

并集选择器：给多个不同标签同时修改样式

语法: 标签1 , 标签2 , 标签3 { 属性:属性值; }

<body>
    <div>
        <div>熊大</div>
        <p>熊二</p>
        <span>光头强</span>
        <ul>
            <li>小猪佩奇</li>
            <li>猪爸爸</li>
            <li>猪妈妈</li>
        </ul>
    </div>
</body>

把熊大和熊二改为粉色：

<style>
    div, 
    p {
        color: brown;
    }
</style>

注意：逗号连接的选择器不论样式，可以连接任意的选择器，如：

<style>
        div,
        p,
        div ul li {
            color: brown;
        }
</style>

注意：并集选择器最后一位后面没有逗号

8.4 伪类选择器

伪类选择器：向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素

书写：用冒号(:)表示,比如:hover、:first- child

包括：链接伪类（常用）、结构伪类等

8.4.1 链接伪类选择器 `a:hover{}`

链接伪类选择器：交互后链接文字会有特殊效果

<!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>
    <link rel="stylesheet" href="style.css">
    <style>
       <!-- 未访问过的元素，其字体变为灰色，去掉下划线 -->
       a:link {    
        color: #333;
        text-decoration: none;
       }
          
        <!-- 访问过的元素，其字体变为橘色 -->
        a:visited {   
        color: orange;
        }
        
        <!-- 鼠标从链接上经过，其字体变为天蓝色 -->
        a:hover {    
        color: skyblue;
        }
        
        <!--  鼠标正在按下还没有弹起鼠标的链接，其字体变为黄色 -->
        a:active {  
		color: yellow;
		}
    </style>

</head>

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

</html>

注意点:

伪类链接选择器的顺序必须为LVHA :link :visited :hover :active
实际工程中我们通常只使用：link和hover，当鼠标经过时变换颜色加个下划线就可以了。

8.4.2 fcous伪类选择器 `input:focus{}`

fcous伪类选择器：处理表单元素的，当表单的光标在那个表单元素上，就显示被选中。

<!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>
    <link rel="stylesheet" href="style.css">
    <style>
        input:focus {
            background-color: pink;
            color: blue;
        }
    </style>
</head>
<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>
</html>