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

铁佛  金牌会员 | 2024-9-16 16:33:23 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 666|帖子 666|积分 1998

跟着该视频学习，记载笔记：【黑马步伐员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像素：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>CSS样式</title>
  9.     <style>
  10.         p {
  11.             color: red;
  12.             font-size: 36px;
  13.         }
  14.     </style>
  15. </head>
  17. <body>
  18.     <p>这句话是红色的。</p>
  19. </body>
  20. </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. 标签名 {
  2.     属性1: 属性值1;
  3.     属性2: 属性值2;
  4.     ……
  5. }
复制代码
比如，分别以<p>和<div>标签区分性别，然后把<p>标签染蓝;




2）类选择器（常用）

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

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

①单类名

单类名选择器的语法：
先给目标对象加上class属性，然后再更改属性值。
  1. <head>
  2.     .类名 {
  3.         属性1: 属性值1;
  4.         属性2: 属性值2;
  5.         ……
  6.     }
  7. </head>
  9. <body>
  10.     <标签名 class=”类名”>标签内容 </标签名>
  11. </body>
复制代码
注意，类名前有个很小的点，如下图，不要忘加了：


比如我要将p标签的男A、div标签女A都改为红色字体：
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>标签选择器</title>
  8.     <style>
  9.         .redFont {
  10.             color: red;
  11.         }
  12.     </style>
  14. </head>
  16. <body>
  17.     <p class="redFont">男A</p>
  18.     <p>男B</p>
  19.     <p>男C</p>
  20.     <div class="redFont">女A</div>
  21.     <div>女B</div>
  22.     <div>女C</div>
  23. </body>
  25. </html>
复制代码



②多类名

单类名选择器的语法：
先给目标对象加上class属性，然后再更改属性值。
  1. <head>
  2.     .类名1 {
  3.         属性1: 属性值1;
  4.         ……
  5.     }
  6.     .类名2 {
  7.         属性1: 属性值1;
  8.         ……
  9.     }
  10. </head>
  12. <body>
  13.     <标签名 class=”类名1 类名2”>标签内容 </标签名>
  14. </body>
复制代码

在标签的class属性中写类名，多个类名之间必须用空格隔开。
比如把“123”和“789”设置为红色，并把“123”和“456”设置为35px：
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>多类名 类选择器</title>
  8.     <style>
  9.         .red {
  10.             color: red;
  11.         }
  13.         .bold {
  14.             font-size: 35px;
  15.         }
  16.     </style>
  18. </head>
  20. <body>
  21.     <p class="red bold">123</p>
  22.     <p class="bold">456</p>
  23.     <p class="red">789</p>
  24. </body>
  26. </html>
复制代码



3）id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。
使用方式类似“类选择器”，都是在标签的属性中添加一些内容，然后使用CSS对这些被选中的内容进行处理。

id选择器的语法：
  1. #id名 {
  2.     属性1: 属性值1;
  3.     属性2: 属性值2;
  4.     ……
  5. }
复制代码

Id选择器和类选择器的区别：
（1）id选择器是“#id名”，类选择器是“.类名”。
（2）如果有标签已经调用了某id名，其他标签不能再使用这个id名。而类选择器定义的标签可被多次使用。
id选择器就像是人的身份证号，只能你使用；而类选择器就比如人的名字，多个人可以重名，你也可以有多个名字。


4）通配符选择器。

通配符选择器使用“*”来定义，体现选中页面中的所有元素（标签）。
通配符选择器的语法：
  1. * {
  2.     属性1: 属性值1;
  3.     属性2: 属性值2;
  4.     ……
  5. }
复制代码

比如把“123”“456”“789”都改为红色的：
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>通配符选择器</title>
  8.     <style>
  9.         * {
  10.             color: red;
  11.         }
  12.     </style>
  14. </head>
  16. <body>
  17.     <p>p标签：123</p>
  18.     <div>div标签：456</div>
  19.     <span>span标签：789</span>
  20.     <ul>
  21.         <li>ul-li标签：101112</li>
  22.     </ul>
  23. </body>
  25. </html>
复制代码


特别情况下才使用通配符选择器，比如清楚所有元素标签的表里边距：
  1. * {
  3.     margin: 0;
  5.     padding: 0;
  7. }
复制代码


复合选择器

复合选择器是多种基础选择器以不同方式组合而成的，可以更准确且高效地选择目标元素。
范例
 作用
 特性
符号&用法
后代选择器
 用来选择后代元素
 无论是直接包含还是层叠嵌套式包含，都可以选中
 较多
 空格
比如 元素1 元素2
子选择器
 选择离当前标签迩来一级的元素
 只选中迩来一级的元素
 少
 大于号
比如 元素1>元素2
并集选择器
 选择雷同样式的元素
 可用于集体声明
 较多
 逗号
比如 元素1,元素2
链接伪类选择器
 选择不同状态的链接
 跟链接相干
 较多
 冒号

focus伪类选择器
 选择被光标选中的表单
 跟表单相干
 少
 input:focus


1）后代选择器（告急）

后代选择器又称为“包含选择器”，可以选择父元素里面的子元素。
写法是把外层标签写在前面，内层标签写在后面，中心用空格分隔。

后代选择器的格式：
  1. <style>
  2.         元素1 元素2 {
  3.             color: red;
  4.         }
  5.     </style>
复制代码
需要注意的是，只有元素2是元素1的子元素（只要被元素1包含着就行，可多层嵌套），才能使用后代选择器。

（1）情况1：元素2被元素1直接包含
比如给ul和ol标签里各写两个li，把ul的li都改成红色：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>后代选择器</title>
  8.     <!-- 目标：把ul里的li都选上，改为红色 -->
  9.     <style>
  10.         ul li {
  11.             color: red;
  12.         }
  13.     </style>
  14. </head>
  16. <body>
  17.     <ul>
  18.         <li>这是ul里的第一个li</li>
  19.         <li>这是ul里的第二个li</li>
  20.     </ul>
  21.     <ol>
  22.         <li>这是ol里的第一个li</li>
  23.         <li>这是ol里的第二个li</li>
  24.     </ol>
  25. </body>
  27. </html>
复制代码

（2）情况2：元素2通过嵌套被元素1包含
比如给ul标签里写两个li、一个包含在li里的<p>，把后者改成红色：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>后代选择器</title>
  8.     <!-- 目标：把ul里的li都选上，改为红色 -->
  9.     <style>
  10.         ul li p {
  11.             color: red;
  12.         }
  13.     </style>
  14. </head>
  16. <body>
  17.     <ul>
  18.         <li>这是ul里的第一个li</li>
  19.         <li>这是ul里的第二个li</li>
  20.         <li>
  21.             <p> 这是ul里的li里的p </p>
  22.         </li>
  23.     </ul>
  24. </body>
  26. </html>
复制代码
纵然嵌套了多层，也可以定向找到。
另外，当存在多组类似的标签（比如两组都用了ul标签），可以给标签加class属性，然后再定向查找，比如：



2）子选择器（告急）

子选择器只能选择某元素的迩来一级子元素。就类似数据结构中与某节点直接相连的子节点。
子选择器的语法：
  1. 元素1 > 元素2{
  2.     样式声明;
  3. }
复制代码
比如选择div里面所有迩来的一次p标签元素：
  1. div > p{
  2.     样式声明;
  3. }
复制代码


3）并集选择器

并集选择器可以同时选择多组标签并为它们定义雷同的样式，通常用于集体声明。
并集选择器的语法：
  1. 元素1 , 元素2{
  2.     样式声明;
  3. }
复制代码

另外，任何形式的选择器都可以作为被并集选择器选上的元素。
（1）情况1：选上标签作为元素
比如不动ol标签，同时选中div和p标签并改为红色：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>并集选择器</title>
  8.     <!-- 目标：把ul里的li都选上，改为红色 -->
  9.     <style>
  10.         div,
  11.         p {
  12.             color: red;
  13.         }
  14.     </style>
  15. </head>
  17. <body>
  18.     <div>这是div标签，应该变为红色</div>
  19.     <p>这是p标签，也应该变为红色</p>
  20.     <ol>
  21.         <li>这是ol里的li，不变颜色</li>
  22.     </ol>
  23. </body>
  25. </html>
复制代码

（2）情况2：选上其他选择器作为元素
比如有div、p、两组ol-li标签，同时选中div和第二组ol-li标签并改为蓝色：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>并集选择器</title>
  8.     <!-- 目标：把ul里的li都选上，改为红色 -->
  9.     <style>
  10.         div,
  11.         .blue-ol li {
  12.             color: blue;
  13.         }
  14.     </style>
  15. </head>
  17. <body>
  18.     <div>这是div标签，应该变为蓝色</div>
  19.     <p>这是p标签，不变色</p>
  20.     <ol>
  21.         <li>这是普通ol里的li，不变色</li>
  22.     </ol>
  23.     <ol class="blue-ol">
  24.         <li>这是变色ol里的li，会变成蓝色</li>
  25.     </ol>
  26. </body>
  28. </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伪类的语法格式类似：
  1. input:focus{
  2.     background-color:yellow;
  3. }
复制代码
比如设置三个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属性来定义文本的字体系列。
比如：
  1. p { font-family: ‘微软雅黑’;}
  2. div { font-family: Arial, ‘Microsoft Yahei’, ‘微软雅黑’;}
复制代码
补充：

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


字体大小

CSS使用font-size属性来定义文本字体的大小。
比如：
  1. p { font-size: 20px;}
复制代码
px是像素，是网页最常用的单位。谷歌欣赏器默认的字体大小是16px，不同欣赏器默认表现的字号不同，所以我们最好设置一个明白的大小，不要用网站默认的大小。


字体粗细

CSS使用font-weight属性来定义文本字体的大小。
比如：
  1. h4 { font-weight: bold;}
  2. p { font-weight: light;}
复制代码
比如把三句话分为改为normal、lighter、bold：
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>字体系列</title>
  8.     <style>
  9.         .FontLight {
  10.             font-weight: lighter;
  11.         }
  13.         .FontBold {
  14.             font-weight: bold;
  15.         }
  16.     </style>
  18. </head>
  20. <body>
  21.     <p>这是一句话</p>
  22.     <p class="FontLight">这也是一句话</p>
  23.     <p class="FontBold">这还是一句话</p>
  24. </body>
  26. </html>
复制代码


现实开辟中，更提倡用数字体现加粗，比如：
  1. p { font-weight: 700; }
复制代码
这个要和改变字体大小相区分，字体大小是数字后需要加px，而改变字体粗细是只写数字。其中，正常字体粗细对应着font-weight: 400;


笔墨样式

CSS使用font-style属性来设置文本的风格。
比如：
  1. p { font-style: italic;}
复制代码
属性值
 作用
normal
 默认值，欣赏器会表现尺度的字体样式    font-style: normal;
italic
 斜体    font-style: italic


复合属性

当要设定的属性较多时，可以写成以下的方式，更节约代码：
  1. body {
  2.     font: font-style font-weight font-size font-family;
  3. }
复制代码
上述属性是按肯定顺序分列的，不能随意更改。
（1）按顺序的情况
比如给一句话加上斜体、粗体、16px自豪、微软雅黑：
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>字体的复合属性</title>
  8.     <style>
  9.         p {
  10.             /* 格式 font: font-style font-weight font-size font-family */
  11.             font: italic 700 16px 'Microsoft yahei';
  12.         }
  13.     </style>
  14. </head>
  16. <body>
  17.     <p>这是一句话。</p>
  18. </body>
  20. </html>
复制代码

（2）不按顺序的情况：
比如把字体大小和字体系列换个位置，会发现字体设置不成功。


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


文本外观

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


文本颜色

color属性用于定义文本的颜色。
比如：
  1. div {
  2.     color: red;
  3. }
复制代码
体现方式
 属性值
预先设置好的颜色值
 比如red，green，blue
十六进制（用得最多）
 比如#FF0000F、#29D794
RGB代码
 比如rgb(255,0,0)或rgb(100%,0%,0%)





文本对齐

text-align属性用于设置元素内文本内容的对齐方式，仅限于程度对齐。
比如：
  1. div {
  2.     text-align: center;
  3. }
复制代码
属性值
 表明
left
 左对齐（默认值）
right
 右对齐
center
 居中对齐

比如下列三句话分别是靠左对齐、居中对齐、靠右对齐：
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>文本对齐</title>
  8.     <style>
  9.         .left {
  10.             text-align: left;
  11.         }
  13.         .center {
  14.             text-align: center;
  15.         }
  17.         .right {
  18.             text-align: right;
  19.         }
  20.     </style>
  21. </head>
  23. <body>
  24.     <p class="left">这是靠左对齐的一句话。</p>
  25.     <p class="center">这是居中对齐的一句话</p>
  26.     <p class="right">这是靠右对齐的一句话</p>
  27. </body>
  29. </html>
复制代码



文本装饰

text-decoration属性用于添加文本的装饰（下划线、删除线、上划线等等）。
比如：
  1. div {
  2.     text-decoration: underline;
  3. }
复制代码
属性值
 描述
none
 默认值，没有装饰线。（最常用）
underline
 下划线，链接自带下划线。（常用）
overline
 上划线。（几乎不消）
line-through
 删除线。（不常用）

比如用四句话来分别展示效果：
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>文本装饰</title>
  8.     <style>
  9.         .underline {
  10.             text-decoration: underline;
  11.         }
  13.         .overline {
  14.             text-decoration: overline;
  15.         }
  17.         .line-through {
  18.             text-decoration: line-through;
  19.         }
  20.     </style>
  21. </head>
  23. <body>
  24.     <p>这句话不带装饰线。</p>
  25.     <p class="underline">这句话带下划线</p>
  26.     <p class="overline">这一句话带上划线</p>
  27.     <p class="line-through">这句话带删除线</p>
  28. </body>
  30. </html>
复制代码



文本缩进

text-indent属性用于指定文本第一行的缩进，通常是将段落的首行进行缩进。
有两种设置缩进的方式，一种是设置缩进多少个像素（px），另一种是设置缩进相对单位的大小（em）。
像素缩进比如：
  1. div {
  2.     text-indent: 10px;
  3. }
复制代码
相对单位缩进比如：
  1. div {
  2.     text-indent: 2em;
  3. }
复制代码
em是相对单位，就是当前元素的一个笔墨的大小。如果用的是中文，1em就是一个中笔墨距；英文则是一个英笔墨距

比如用两句话来比较一下，一句缩进，另一句不缩进：
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>文本装饰</title>
  8.     <style>
  9.         .text-indent {
  10.             text-indent: 2em;
  11.         }
  12.     </style>
  13. </head>
  15. <body>
  16.     <p>这句话不会缩进。</p>
  17.     <p class="text-indent">这句话会向右缩进两个字距的大小。</p>
  18. </body>
  20. </html>
复制代码



行间距

line-height属性用于设置行间距（行高）。
比如：
  1. p {
  2.     line-height: 26px;
  3. }
复制代码
要注意的是，行间距由上行间距、文本高度、下行间距共同构成，如下图：



引入方式

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


（1）内部样式表

内部样式表是在HTML页面内部的一个<style>标签中设定CSS的样式，可以修改所有标签的样式。
内部样式表格式比如：
  1. <style>
  2.     div{
  3.     color: red;
  4.     font-size: 12px;
  5.     }
  6. </style>
复制代码
例子：


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


（2）行内样式表

行内样式表是直接元素标签的内部写个style属性，设定CSS的样式。这得当修改简朴的样式，或者特定标签。
行内样式表格式比如：
  1. <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，生成：
  1. <div></div>
  3. <div></div>
  5. <div></div>
复制代码
（3）生成有包含关系的标签：用>即可
        比如想要生成：
  1. <ui>
  3.     <li></li>
  5. </ui>
复制代码
        只需要输入ul>li然后点tab键。
（4）生成同级标签：用+即可
        比如想要生成：
  1. <div></div>
  3. <p></p>
复制代码
        只需要输入div+p然后点击tab键
（5）生成带有类名或id名的内容：
        直接写.demo或#two然后点击tab键


（6）自增符号：$
        生成多个demo的同时，demo的序号自增。
        格式：
  1. .demo$ *数量
复制代码
        比如生成5个demo：




②快速生成CSS结构语法

采取简写形式然后按tab键即可。
比如输入w200再按tab键，可生成width: 200px;
或者输入lh26再按tab，可生成line-height: 26px;
或者输入tac再按tab，可生成text-align: center;

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

铁佛

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表