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

于 2024-09-13 15:06:36 发布
阅读量650 收藏 6
点赞数 16
分类专栏： 前端学习（HTML/CSS/JS） 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_75036068/article/details/142147037
版权

跟着该视频学习，记录笔记：【黑马程序员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 声明

字体属性

字体系列

字体大小

字体粗细

文字样式

复合属性

文本外观

文本颜色

文本对齐

文本装饰

文本缩进

行间距

引入方式

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

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）类选择器（常用）

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

注意：

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

①单类名

单类名选择器的语法：

先给目标对象加上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。

字体系列

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

比如：

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

补充：

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

字体大小

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

比如：

p { font-size: 20px;}

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

字体粗细

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;

文字样式

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属性用于定义文本的颜色。

比如：

div { 
    color: red;
}

表示方式

属性值

预先设置好的颜色值

比如red，green，blue

十六进制（用得最多）

比如#FF0000F、#29D794

RGB代码

比如rgb(255,0,0)或rgb(100%,0%,0%)

文本对齐

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属性用于添加文本的装饰（下划线、删除线、上划线等等）。

比如：

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属性用于指定文本第一行的缩进，通常是将段落的首行进行缩进。

有两种设置缩进的方式，一种是设置缩进多少个像素（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属性用于设置行间距（行高）。

比如：

p { 
    line-height: 26px;
}

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

引入方式

按照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文件，格式类似：

<link rel=”stylesheet” href=”CSS文件路径”>

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

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

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

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

属性

作用

rel

定义当前文档与被链接文档之间的关系，在这里需要制定为”stylesheet”来表示被链接的文档是一个样式表文件。

href

定义所链接上的文件的URL，最好是相对路径而非绝对路径（详情可参考Day2 超链接标签）

调试方式

我的默认浏览器设的是chrome，就以它为例展示一下调试工具。

点击“检查”后会出现下图的内容，可以在这个页面直接编辑页面效果。

不过要注意，在这个页面修改代码不会影响VS Code的代码。这个页面的作用更偏向模拟。所以即使修改了，也得回VS Code把改动加上。

快捷键 tab

Emmet语法

Emmet使用缩写来提高HTML和CSS的编写速度，在VS Code中已经集成了该语法。

目前主要应用于两方面：（1）快速生成HTML结构语法（2）快速生成CSS样式语法

①快速生成HTML结构语法

（1）生成标签：直接输入标签名，然后按tab键即可。

         比如输入div然后按tab键，可以生成<div></div>

（2）生成多个相同标签：输入标签“*数量”再按tab

         比如输入div*3再按tab，生成：

<div></div>

<div></div>

<div></div>

（3）生成有包含关系的标签：用>即可

        比如想要生成：

<ui>

    <li></li>

</ui>

        只需要输入ul>li然后点tab键。

（4）生成同级标签：用+即可

        比如想要生成：

<div></div>

<p></p>

        只需要输入div+p然后点击tab键

（5）生成带有类名或id名的内容：

        直接写.demo或#two然后点击tab键

（6）自增符号：$

        生成多个demo的同时，demo的序号自增。

        格式：

.demo$ *数量

        比如生成5个demo：

②快速生成CSS结构语法

采取简写形式然后按tab键即可。

比如输入w200再按tab键，可生成width: 200px;

或者输入lh26再按tab，可生成line-height: 26px;

或者输入tac再按tab，可生成text-align: center;

给bug两拳
关注
  • 16
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Python学习笔记--day09 函数& 模块 （文件、路径操作）
Liu_Bruce的博客
07-15 2033
第一模块主要是学习python基础知识，从第二模块开始就可以通过程序去解决工作中实际的问题。函数，一个用于专门实现某个功能的代码块（可重用）。内置函数 自定义函数 模块，集成了很多功能的函数集合。内置模块，Python内部帮助我们提供好的。 第三方模块，网上下载别人写好的模块（功能集合）。自定义模块在学习文件操作之前，先来回顾一下编码的相关以及先关数据类型的知识。字符串类型（str），在程序中用于表示文字信息，本质上是unicode编码中的二进制。 字节类型（bytes）可表示文字信
HTML/CSS/JS学习笔记 Day1（HTML--C1 工具&语法规范）
给bug两拳的博客
09-05 982
C0. 概述：0.2 网页的形成、0.4 Web标准； C1. 基础内容：1.1 语法规范（格式&标签关系）、1.2 标签结构、1.3 开发工具&插件、1,4 VS Code快捷键；
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
upward
02-07 432
CSS概述、CSS选择器、CSS属性、CSS案例-注册页面
学习笔记--Web基础CSS-day03
zhu_haibo的博客
11-22 187
table 表格(补充): <th></th>标签: 一般用于首行单元格，自带加粗和居中效果。 CSS 1.CSS介绍 CSS: Cascading Style Sheet 层叠样式表 作用:修饰和美化页面元素，实现网页排版布局 2.CSS使用 **- 在HTML文档中使用CSS主要有三种方式** 1. 行内样式/内联样式 特点: 在具体的标签中使用style属性，引入CSS样式代码 语法: <标签 style="CSS 样式声明"> 1.CSS
HTML/CSS学习笔记02【表单标签】
upward
02-07 720
表单标签
HTML5与CSS3学习笔记
zyqxb的博客
08-23 479
HTML与CSS学习日记 Day 7.25 1.标签 简单的网页的基本结构 <html> <head> <title>我的网页<title/> </head> <body> 这是内容 <!-- 注释 应该简单明了 标签一般成对出现但也有一些自结束标签 <img>;自结束标签 <img/>;自结束标签 <input>;自结束标签 <input/&g
Java-day19 学习笔记
ChangeNone的博客
01-22 148
day18复习 Java-day19 学习笔记day19一、div和span标签1.1 区别二、CSS1.1 作用1.2 为什么要用CSS1.3 如何使用① 格式② 将css放在哪里去使用 【引入方式】1.4 引入方式① 第一种：行内样式【内联样式】【了解】② 第二种：内部样式 【掌握】③ 第三种：外部样式 【掌握】④ 三种引入方式的优先级1.5 选择器① 基本选择器② 选择器优先级③ 扩展选择器④ 伪类选择器 【了解】1.6常见属性① 背景属性② 文本样式③ 字体属性 day19 一、div和sp.
JavaScript 学习 Day8_p358-p385
TeacherChao的博客
06-16 166
自学JavaScript的第八天笔记
尚硅谷前端入门html+css学习笔记——CSS
qq_62237063的博客
09-01 837
浮动_简介
2021-02-08/09 大数据课程笔记 day19day20 某大型网站日志分析离线系统
qq_44745905的博客
02-10 4359
@R星校长 某大型网站日志分析离线系统 项目需求分析 概述 该部分的主要目标就是描述本次项目最终七个分析模块的界面展示。 工作流   在我们的 demo 展示中，我们使用 jquery+echarts 的方式调用程序后台提供的 rest api 接口，获取 json 数据，然后通过 jquery+css 的方式进行数据展示。工作流程如下： 分析 总述 在本次项目中我们分别从七个大的角度来进行分析，分别为： 用户基本信息分析模块 浏览器信息分析模块 地域信息分析模块 用户浏览深度分析模块 外链数据分析模块 .
Day2_css选择器与requests模块
Mark_812的博客
05-26 251
Day2_Python学习笔记 css基础 css负责网页内容的样式和布局(css叫做层叠样式表,简称样式表) css语法: """ 语法: 选择器{属性名1:属性值1;属性名2:属性值2;...} 说明: 选择器 - 选中需要设置样式的标签 {} - 固定写法 属性名 - 用来决定需要设置那个样式 属性值 - 如果是表示数值大小,数字值需要单位,一般是px(像素) 常用属性:color:文字样式(颜色英文单词,rgb(红,绿,篮),#颜色的16进制值) font
HTML和CSS内容总结
natudou_的博客
07-23 1187
HTML和CSS内容总结 HTML内容 1、xhtml和html的区别 <!-- 在html中，标签名是可以大写，也可以小写--> <H1>这是大写的H1标签</H1> <h1>这是小写的h1标签</h1> <!-- 在XHTML里面，就只能小写 标签名必须小写 --> <h1>这是html标签 <!-- 这说明 在html里面 标签可以不写结束标签 --> <!-- 但是在xhtml里卖弄 要求标签
轩小陌的Python笔记-day09 文件操作相关
hjjqazwsx的博客
03-29 4310
第二模块 函数&模块 第一模块主要是学习python基础知识，从第二模块开始就可以通过程序去解决工作中实际的问题。 第二模块的内容主要包含两大部分： 函数 一个用于专门实现某个功能的代码块（可重用）。 内置函数 len、bin、oct、hex...等 自定义函数 # 定义了一个函数，相当于封装了一个功能代码块 def send_email(): # 写了10行代码，实现了发送邮件。 pass goods = [ {"name": "电脑", "price": 1
Javascript学习笔记
尚澄澄的博客
06-28 599
JavaScript ECMAScript - JavaScript的核心 定义了JavaScript 的语法规范 JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关 BOM - 浏览器对象模型 一套操作浏览器功能的API 通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等 DOM - 文档对象模型 ...
中秋之美——html5+css+js制作中秋网页
Timi2019的博客
09-02 1959
八月十五，秋已过半，是为中秋。“但愿人长久，千里共婵娟”，中秋时节，气温已凉未寒，天高气爽，月朗中天，正是观赏月亮的最佳时令。古人把圆月视为团圆的象征，因此，又称八月十五为“团圆节”。
CSS —— display属性
m0_73557953的博客
09-08 888
采用flex布局的元素，称为 Flex 容器（flex container），简称"容器"（将元素转换为行内块元素）HTML中标签元素大体被分为三种类型：块元素、行内元素和行内块元素。（将元素作为弹性盒子显示）（弹性布局）2.水平方向，占满它父元素的可用空间（宽度是父级的100%）如果前面的兄弟元素是inline模式，往往会在同行显示。（将元素转换为行内元素）如果前面的兄弟元素是block模式，则会在不同行显示。（将元素作为网格容器显示）（将元素作为表格显示）行内块元素：inline-block。
CSS中的位置定位总结
最新发布
adminstate的博客
09-12 374
CSS位置定位position的总结
“CSS 定位”如何工作？（补充）——WEB开发系列34
一条晒干的咸鱼的博客
09-09 1342
CSS定位是一个非常重要的布局工具，它允许我们精确地控制元素的位置，从而创建复杂的布局效果。定位允许你从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值