当前位置：首页 > article >正文

HTML/CSS/JS学习笔记 Day4（CSS--C1 选择器声明）

article 2024/11/13 12:01:12

跟着该视频学习，记录笔记：【黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程】https://www.bilibili.com/video/BV14J4114768?p=12&vd_source=04ee94ad3f2168d7d5252c857a2bf358

Day4 内容梳理：

CSS 1. 选择器&声明

1.0 概述

1.1 选择器

基础选择器

1）标签选择器

2）类选择器（常用）

①单类名

②多类名

3）id选择器

4）通配符选择器。

复合选择器

1）后代选择器（重要）

2）子选择器（重要）

3）并集选择器

4）伪类选择器

①链接伪类

②focus伪类

1.2 声明

字体属性

字体系列 font-family

字体大小 font-size

字体粗细 font-weight

文字样式 font-style

复合属性

文本外观

文本颜色 color

文本对齐 text-align

文本装饰 text-decoration

文本缩进 text indent

行间距 & 居中显示 line-height

引入方式

（1）内部样式表

（2）行内样式表

（3）外部样式表（重要）

调试方式

快捷键 tab

①快速生成HTML结构语法

②快速生成CSS结构语法

CSS 1. 选择器&声明

1.0 概述

CSS（Cascading Style Sheets），也叫层叠样式表。和HTML一样是标记语言而非编程语言。

由于HTML只关注内容的语义而不关注网站外观，再加上用HTML做网站样式会导致代码臃肿和繁琐，所以需要用CSS来美化网页。

比如，把一句话的颜色从黑改为红，并把文字像素改为36像素：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS样式</title>

    <style>
        p {
            color: red;
            font-size: 36px;
        }
    </style>
</head>

<body>
    <p>这句话是红色的。</p>
</body>
</html>

CSS主要由两部分组成：选择器、声明（一条或多条）。

CSS主要在<head></head>标签之间编辑，而HTML主要在<body></body>标签之间编辑，二者互不打扰。

CSS的格式类似下图：

比较推荐下列的CSS撰写格式，便于更清晰地阅读代码：

一行只放一个属性，属性之间用英文分号隔开。
拼写建议采取全小写的格式，特殊情况除外。
选择器（或称为标签）和大括号之间保留一个空格。

1.1 选择器

选择器的作用就是选择标签。按照不同的需求，选出特定的标签。

其中，选择器可分为两大类：基础选择器、复合选择器。

基础选择器

基础选择器是由单个选择器构成的。

可再细分为四类：标签选择器、类选择器、id选择器、通配符选择器。

基础选择器	作用	特点	使用情况	用法
标签选择器	可选出相同标签。（比如所有的<p>）	无法差异化选择	较多	标签名{ 属性1: 属性值1; …… }
类选择器	可选出一个或多个标签。	可根据需求选择	非常多	.类名{ 属性1: 属性值1; …… }
id选择器	一次只能选择一个标签。	ID属性只能在每个HTML文档中出现一次	一般和JS搭配	#id名{ 属性1: 属性值1; …… }
通配符选择器	选择所有的标签。	选择了太多标签，有部分不需要	特殊情况使用	*{ 属性1: 属性值1; …… }

1）标签选择器

标签选择器，指的是用HTML标签的名称作为选择器。

作用：把页面中的某一类标签全部选中，然后为其指定统一的CSS格式。

优点：能快速为一类标签设置统一样式。

缺点：无法差异化设置，只能对选择的某一类的全部标签进行设置。

标签选择器的语法：

标签名 {
    属性1: 属性值1;
    属性2: 属性值2;
    ……
}

比如，分别以<p>和<div>标签区分性别，然后把<p>标签染蓝;

2）类选择器（常用）

类选择器，可以单独选中一个标签（单类名）或某几个标签（多类名）。

注意：

类选择器使用”.”（英文点号）进行标识，后面紧跟类名（自己命名类名，要避开常用的标签名）
长名称可以使用中横线来连接，比如.red-font
尽量使用英文字母来命名，不要使用中文或纯数字

①单类名

单类名选择器的语法：

先给目标对象加上class属性，然后再更改属性值。

<head>
    .类名 {
        属性1: 属性值1;
        属性2: 属性值2;
        ……
    }
</head>

<body>
    <标签名 class=”类名”>标签内容 </标签名>
</body>

注意，类名前有个很小的点，如下图，不要忘加了：

比如我要将p标签的男A、div标签女A都改为红色字体：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器</title>
    <style>
        .redFont {
            color: red;
        }
    </style>

</head>

<body>
    <p class="redFont">男A</p>
    <p>男B</p>
    <p>男C</p>
    <div class="redFont">女A</div>
    <div>女B</div>
    <div>女C</div>
</body>

</html>

②多类名

单类名选择器的语法：

先给目标对象加上class属性，然后再更改属性值。

<head>
    .类名1 {
        属性1: 属性值1;
        ……
    }
    .类名2 {
        属性1: 属性值1;
        ……
    }
</head>

<body>
    <标签名 class=”类名1 类名2”>标签内容 </标签名>
</body>

在标签的class属性中写类名，多个类名之间必须用空格隔开。

比如把“123”和“789”设置为红色，并把“123”和“456”设置为35px：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多类名 类选择器</title>
    <style>
        .red {
            color: red;
        }

        .bold {
            font-size: 35px;
        }
    </style>

</head>

<body>
    <p class="red bold">123</p>
    <p class="bold">456</p>
    <p class="red">789</p>
</body>

</html>

3）id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。

使用方式类似“类选择器”，都是在标签的属性中添加一些内容，然后利用CSS对这些被选中的内容进行处理。

id选择器的语法：

#id名 {
    属性1: 属性值1;
    属性2: 属性值2;
    ……
}

Id选择器和类选择器的区别：

（1）id选择器是“#id名”，类选择器是“.类名”。

（2）如果有标签已经调用了某id名，其他标签不能再使用这个id名。而类选择器定义的标签可被多次使用。

id选择器就像是人的身份证号，只能你使用；而类选择器就好比人的名字，多个人可以重名，你也可以有多个名字。

4）通配符选择器。

通配符选择器使用“*”来定义，表示选中页面中的所有元素（标签）。

通配符选择器的语法：

* {
    属性1: 属性值1;
    属性2: 属性值2;
    ……
}

比如把“123”“456”“789”都改为红色的：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通配符选择器</title>
    <style>
        * {
            color: red;
        }
    </style>

</head>

<body>
    <p>p标签：123</p>
    <div>div标签：456</div>
    <span>span标签：789</span>
    <ul>
        <li>ul-li标签：101112</li>
    </ul>
</body>

</html>

特殊情况下才使用通配符选择器，比如清楚所有元素标签的内外边距：

* {

    margin: 0;

    padding: 0;

}

复合选择器

复合选择器是多种基础选择器以不同方式组合而成的，可以更准确且高效地选择目标元素。

类型	作用	特征		符号&用法
后代选择器	用来选择后代元素	无论是直接包含还是层叠嵌套式包含，都可以选中	较多	空格比如元素1 元素2
子选择器	选择离当前标签最近一级的元素	只选中最近一级的元素	少	大于号比如元素1>元素2
并集选择器	选择相同样式的元素	可用于集体声明	较多	逗号比如元素1,元素2
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	冒号
focus伪类选择器	选择被光标选中的表单	跟表单相关	少	input:focus

1）后代选择器（重要）

后代选择器又称为“包含选择器”，可以选择父元素里面的子元素。

写法是把外层标签写在前面，内层标签写在后面，中间用空格分隔。

后代选择器的格式：

<style>
        元素1 元素2 {
            color: red;
        }
    </style>

需要注意的是，只有元素2是元素1的子元素（只要被元素1包含着就行，可多层嵌套），才能使用后代选择器。

（1）情况1：元素2被元素1直接包含

比如给ul和ol标签里各写两个li，把ul的li都改成红色：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后代选择器</title>
    <!-- 目标：把ul里的li都选上，改为红色 -->
    <style>
        ul li {
            color: red;
        }
    </style>
</head>

<body>
    <ul>
        <li>这是ul里的第一个li</li>
        <li>这是ul里的第二个li</li>
    </ul>
    <ol>
        <li>这是ol里的第一个li</li>
        <li>这是ol里的第二个li</li>
    </ol>
</body>

</html>

（2）情况2：元素2通过嵌套被元素1包含

比如给ul标签里写两个li、一个包含在li里的<p>，把后者改成红色：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后代选择器</title>
    <!-- 目标：把ul里的li都选上，改为红色 -->
    <style>
        ul li p {
            color: red;
        }
    </style>
</head>

<body>
    <ul>
        <li>这是ul里的第一个li</li>
        <li>这是ul里的第二个li</li>
        <li>
            <p> 这是ul里的li里的p </p>
        </li>
    </ul>
</body>

</html>

即使嵌套了多层，也可以定向找到。

另外，当存在多组类似的标签（比如两组都用了ul标签），可以给标签加class属性，然后再定向查找，比如：

2）子选择器（重要）

子选择器只能选择某元素的最近一级子元素。就类似数据结构中与某节点直接相连的子节点。

子选择器的语法：

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

比如选择div里面所有最近的一次p标签元素：

div > p{
    样式声明;
}

3）并集选择器

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

并集选择器的语法：

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

另外，任何形式的选择器都可以作为被并集选择器选上的元素。

（1）情况1：选上标签作为元素

比如不动ol标签，同时选中div和p标签并改为红色：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>并集选择器</title>
    <!-- 目标：把ul里的li都选上，改为红色 -->
    <style>
        div,
        p {
            color: red;
        }
    </style>
</head>

<body>
    <div>这是div标签，应该变为红色</div>
    <p>这是p标签，也应该变为红色</p>
    <ol>
        <li>这是ol里的li，不变颜色</li>
    </ol>
</body>

</html>

（2）情况2：选上其他选择器作为元素

比如有div、p、两组ol-li标签，同时选中div和第二组ol-li标签并改为蓝色：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>并集选择器</title>
    <!-- 目标：把ul里的li都选上，改为红色 -->
    <style>
        div,
        .blue-ol li {
            color: blue;
        }
    </style>
</head>

<body>
    <div>这是div标签，应该变为蓝色</div>
    <p>这是p标签，不变色</p>
    <ol>
        <li>这是普通ol里的li，不变色</li>
    </ol>
    <ol class="blue-ol">
        <li>这是变色ol里的li，会变成蓝色</li>
    </ol>
</body>

</html>

4）伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，或者选择第n个元素。

伪类选择器最大的特点是用冒号表示。

伪类选择器有很多种类，比如链接伪类、结构伪类等等，其中最常用的是链接伪类选择器。

①链接伪类

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

需要注意的是，冒号后没有空格，否则会报错。

注意：

为了确保链接伪类能够生效，要按照link、visited、hover、active的顺序来声明。
因为链接在浏览器中具有默认样式，所以为了避免浏览器差异，最好在实际操作中给链接单独指定样式（也就是给特定标签指定，而不用body标签统一指定）。
实际开发中，一般就区分“未点击的标签”和“点击过的标签”：

下面会逐个试验link、visited、hover、active四个属性。

（1）a:link

将未被选择过的链接都设置为紫色

（2）a:visited

将点击后的链接都设置为橘黄色

（3）a:hover

鼠标悬停在链接上的时候，将链接变色为绿的。

（4）a:active

当鼠标按下链接且未松手的时候，将颜色变为天蓝色。

②focus伪类

focus伪类用于选取被光标选中的表单元素。和其他伪类选择器一样都是为了获取元素，只不过focus伪类是只针对于<input>类的表单元素。

focus伪类的语法格式类似：

input:focus{
    background-color:yellow;
}

比如设置三个text表单，光标选中哪个，就把哪个的背景颜色变为天蓝色：

1.2 声明

字体属性

CSS Fonts属性用于定义字体的系列、大小、粗细、文字样式（如斜体）。

字体属性	含义	注意要点
font-family	字体系列	实际工作中，按照团队的约定来写字体
font-size	字体大小	通常用的单位是px（像素）
font-weight	字体粗细	加粗是700或bold，正常字体是normal或400 （字体粗细的数字无需带单位，而字体大小的数字需要带px）
font-style	文字样式	斜体是italic，正常字体是normal
font	复合属性	字体连写是有固定顺序的，弄错了顺序就会导致字体设置失败。其他属性可以不写，但用复合属性时一定要写font-size和font-family。

字体系列 font-family

CSS使用font-family属性来定义文本的字体系列。

比如：

p { font-family: ‘微软雅黑’;}
div { font-family: Arial, ‘Microsoft Yahei’, ‘微软雅黑’;}

补充：

都是用单引号把字体系列括起来。
某些电脑可能不具备有些字体，所以可以协商多个字体，中间用英文逗号隔开。电脑会依次检查有无该字体，有则用，没有则检查下一个。

字体大小 font-size

CSS使用font-size属性来定义文本字体的大小。

比如：

p { font-size: 20px;}

px是像素，是网页最常用的单位。谷歌浏览器默认的字体大小是16px，不同浏览器默认显示的字号不同，所以我们最好设置一个明确的大小，不要用网站默认的大小。

字体粗细 font-weight

CSS使用font-weight属性来定义文本字体的大小。

比如：

h4 { font-weight: bold;}
p { font-weight: light;}

比如把三句话分为改为normal、lighter、bold：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体系列</title>
    <style>
        .FontLight {
            font-weight: lighter;
        }

        .FontBold {
            font-weight: bold;
        }
    </style>

</head>

<body>
    <p>这是一句话</p>
    <p class="FontLight">这也是一句话</p>
    <p class="FontBold">这还是一句话</p>
</body>

</html>

实际开发中，更提倡用数字表示加粗，比如：

p { font-weight: 700; }

这个要和改变字体大小相区分，字体大小是数字后需要加px，而改变字体粗细是只写数字。其中，正常字体粗细对应着font-weight: 400;

文字样式 font-style

CSS使用font-style属性来设置文本的风格。

比如：

p { font-style: italic;}

属性值	作用
normal	默认值，浏览器会显示标准的字体样式 font-style: normal;
italic	斜体 font-style: italic

复合属性

当要设定的属性较多时，可以写成以下的方式，更节约代码：

body { 
    font: font-style font-weight font-size font-family;
}

上述属性是按一定顺序排列的，不能随意更改。

（1）按顺序的情况

比如给一句话加上斜体、粗体、16px自豪、微软雅黑：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体的复合属性</title>
    <style>
        p {
            /* 格式 font: font-style font-weight font-size font-family */
            font: italic 700 16px 'Microsoft yahei';
        }
    </style>
</head>

<body>
    <p>这是一句话。</p>
</body>

</html>

（2）不按顺序的情况：

比如把字体大小和字体系列换个位置，会发现字体设置不成功。

另外，用复合属性的时候，font-size和font-family都不可省略，除此之外的其他属性可以省略不写。

文本外观

CSS Text属性可以定义文本的外观（颜色、对齐文本、装饰文本、文本缩进、行间距等等）。

属性	含义	注意要点
color	文本颜色	通常使用十六进制的方式来表示颜色
text-align	文本对齐	有三种对齐方式，靠左、居中、靠右
text-indent	文本缩进	通常用相对字距em来首行缩进两个字的距离
text-decoration	文本装饰	下划线underline、上划线overlline、无线none
line-height	行间距	行间距=上行间距+字体高度+下行间距

文本颜色 color

color属性用于定义文本的颜色。

比如：

div { 
    color: red;
}

表示方式	属性值
预先设置好的颜色值	比如red，green，blue
十六进制（用得最多）	比如#FF0000F、#29D794
RGB代码	比如rgb(255,0,0)或rgb(100%,0%,0%)

文本对齐 text-align

text-align属性用于设置元素内文本内容的对齐方式，仅限于水平对齐。

比如：

div { 
    text-align: center;
}

属性值	解释
left	左对齐（默认值）
right	右对齐
center	居中对齐

比如下列三句话分别是靠左对齐、居中对齐、靠右对齐：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本对齐</title>
    <style>
        .left {
            text-align: left;
        }

        .center {
            text-align: center;
        }

        .right {
            text-align: right;
        }
    </style>
</head>

<body>
    <p class="left">这是靠左对齐的一句话。</p>
    <p class="center">这是居中对齐的一句话</p>
    <p class="right">这是靠右对齐的一句话</p>
</body>

</html>

文本装饰 text-decoration

text-decoration属性用于添加文本的装饰（下划线、删除线、上划线等等）。

比如：

div { 
    text-decoration: underline;
}

属性值	描述
none	默认值，没有装饰线。（最常用）
underline	下划线，链接自带下划线。（常用）
overline	上划线。（几乎不用）
line-through	删除线。（不常用）

比如用四句话来分别展示效果：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本装饰</title>
    <style>
        .underline {
            text-decoration: underline;
        }

        .overline {
            text-decoration: overline;
        }

        .line-through {
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <p>这句话不带装饰线。</p>
    <p class="underline">这句话带下划线</p>
    <p class="overline">这一句话带上划线</p>
    <p class="line-through">这句话带删除线</p>
</body>

</html>

文本缩进 text indent

text-indent属性用于指定文本第一行的缩进，通常是将段落的首行进行缩进。

有两种设置缩进的方式，一种是设置缩进多少个像素（px），另一种是设置缩进相对单位的大小（em）。

像素缩进比如：

div { 
    text-indent: 10px;
}

相对单位缩进比如：

div { 
    text-indent: 2em;
}

em是相对单位，就是当前元素的一个文字的大小。如果用的是中文，1em就是一个中文字距；英文则是一个英文字距

比如用两句话来比较一下，一句缩进，另一句不缩进：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本装饰</title>
    <style>
        .text-indent {
            text-indent: 2em;
        }
    </style>
</head>

<body>
    <p>这句话不会缩进。</p>
    <p class="text-indent">这句话会向右缩进两个字距的大小。</p>
</body>

</html>

行间距 & 居中显示 line-height

line-height属性用于设置行间距（行高）。

比如：

p { 
    line-height: 26px;
}

要注意的是，行间距由上行间距、文本高度、下行间距共同组成，如下图：

另外，后续会将文字放入<div>等块元素中，如果想要让文字在块元素里居中显示，只需要让行高line-height等于盒子的高度即可，比如：

a {
    width: 200px;
    height: 40px;

    /* 实现文字垂直居中的方法：行高=盒子高度 */
    line-height: 40px;
}

引入方式

按照CSS样式引入的方式（或叫书写的位置），CSS样式表可以分为三大类：

样式表	优点	缺点	使用情况	控制范围
内部样式表	部分做到了结构和样式相分离	没有彻底分离结构和样式	较多	控制一个页面
行内样式表	书写方面，可更改特定标签	结构和样式混在一起写	很少	控制一个标签
外部样式表	完全做到了结构和样式相分离	需要引入样式文件	最多	控制多个页面（都可导入同一个CSS文件）

（1）内部样式表

内部样式表是在HTML页面内部的一个<style>标签中设定CSS的样式，可以修改所有标签的样式。

内部样式表格式比如：

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

例子：

需要注意的是，理论上<style>标签可以出现在任何位置，不过一般把它放在<head>标签里。

（2）行内样式表

行内样式表是直接元素标签的内部写个style属性，设定CSS的样式。这适合修改简单的样式，或者特定标签。

行内样式表格式比如：

<p style=“color: red; font-size: 30px;”>这是红色的、大字体的一句话</p>

style属性记得要用英文双引号括起来。

由于仅能控制当前的标签样式，而且书写起来较为繁琐，所以不推荐大量使用。对当前元素添加简单样式的时候可以使用。

（3）外部样式表（重要）

外部样式表是把样式单独写到CSS文件中，之后再把CSS文件引入到HTML文件中使用。

分为两步：

新建个后缀名为.css的样式文件，把所有CSS代码都放入此文件中。
在HTML页面的head标签中，通过<link>标签引入CSS文件，格式类似：

比如利用外部样式表改变字体颜色和大小：

由于我把CSS文件和HTML创建在了同一文件层级，所以直接写CSS文件名称即可。

若CSS文件处于更高层级，则需要写”../CSS文件名”；

处于更低层级则写”文件夹名/CSS文件名”。

属性	作用
rel	定义当前文档与被链接文档之间的关系，在这里需要制定为”stylesheet”来表示被链接的文档是一个样式表文件。
href	定义所链接上的文件的URL，最好是相对路径而非绝对路径（详情可参考Day2 超链接标签）