【前端学习-初阶-CSS】CSS层叠样式表（一）

我自闭了？

已于 2023-02-27 14:32:48 修改

阅读量483

点赞数

分类专栏：前端学习日记 CSS 文章标签： css html css3

于 2023-02-27 14:28:51 首次发布

本文链接：https://blog.csdn.net/qq_48234463/article/details/129240916

版权

前端学习日记同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

1 CSS简介

CSS主要使用场景就是美化网页，布局页面的。

1.1 HTML的局限性

只是骨架，很简陋，丑；实现简单样式，复杂的很麻烦，臃肿

1.2 CSS-网页美容师

css是层叠样式表（cascading style sheets）的简称

有时我们也会称之为css样式表或级联样式表

css也是一种标记语言

1.3 CSS语法规范

1.3.1 css规则

由两个主要部分构成：选择器以及一条或多条声明。

<!-- 选择器 {属性:值;属性:值;} -->
h1 {color: red;font-size: 25px;}

注：css的最大价值：由HTML专注去做结构呈现，样式交给css，即结构（HTML）与样式（css）相分离

选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
属性和属性值以“键值对”的形式出现（属性+值的形式，如color：red;）

style其实就是标签的属性
样式属性和值中间是:
多组属性值直接用;隔开
只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余。
缺点:没有实现样式和结构相分离。

1.3.2 CSS注释

/* 这是注释 */

1.4 CSS代码风格

样式格式书写

①紧凑型

h3 {color: deeppink;font-size: 20px;}

②展开格式

h3 {

color: deeppink;

font-size: 20px;

}

注：font-字型

注：一般用展开格式

2.样式大小写

推荐样式选择器，属性名，属性值，关键字全部使用小写字母，特殊情况除外。

3.空格规范

①属性值前后，冒号后面，保留一个空格

②选择器（标签）和大（花）括号中间保留空格

2 CSS基础选择器

2.1 CSS选择器的作用

找到指定的HTML页面元素，不同标签有不同的样式需求，选择标签用的。

如：

h1 {color: red;font-size: 25px;}

找到所有的h1标签，选择器（选对人）。
设置这些标签的样式，比如颜色为红色（做对事）。

2.2 选择器分类

选择器分为基础选择器和复合选择器两个大类，我们这里先讲解一下基础选择器

基础选择器是由单个选择器组成的
基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器

2.3标签选择器

标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
作用：可以把某一类标签全部选择出来。
优点：快速为网页中同类型的标签统一样式
缺点：不能设计差异化样式。

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

2.4 类选择器

实现差异化选择不同的标签，单独选一个或某几个标签，可以使用类选择器

语法：

 /* 类选择器口诀：样式点定义 结构类（class）调用 一个或多个 开发最常用*/
<style>
 .类名  {
     属性1:属性值1; 
     属性2:属性值2; 
     属性3:属性值3; 
 }
</style>
 <body>
 <p class='类名'></p>
</body>

优点：可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签。
注意：类选择器使用“.”（英文点号）进行标识，后面紧跟类名(自定义，我们自己命名的)
- 长名称或词组可以使用中横线-来为选择器命名。
- 不要纯数字、中文等命名，尽量使用英文字母来表示。
- 多类名选择器：各个类名中间用空格隔开。
- 命名要有意义
- 命名规范：见附件（web前端开发规范手册.doc）
课堂案例：

利用类选择器画三个盒子:

类选择器的使用
div就是一个盒子，用来装网页内容的

 < style >
     .red {
         color: red;
     }
     .green {
         color:green;
     }
 < /style >
 < body >
     < div class="red">< /div>
     < div class="green">< /div>
     < div class="red" >< /div>
 < /body >

2.4.1类选择器-多类名

1.多类名使用方式

< div class="red font20">亚瑟< /div>

①在标签class属性中写多个类名

②多个类名中间必须用空格分开

< div class="red font">亚瑟< /div>

2.使用场景

①相同样式放在一个类里

②这些标签都可以调用这个公共的类，然后再调用自己独有的类

③从而节省css代码，统一修改也非常方便

④多类名选择器在后期布局比较复杂的情况下，还是较多使用的

2.5 id选择器

id选择器使用#进行标识，后面紧跟id名

<style>
 /* id选择器的口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用 */
 #id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
 </style>
<body>
 <p id="id名"></p>
</body>

区别于class选择器：唯一性，1个id用1次，不能重复

2.6 通配符选择器

通配符选择器用*号表示，* 就是选择所有的标签。它是所有选择器中作用范围最广的，能匹配页面中所有的元素。

注意：会匹配页面所有的元素，降低页面响应速度，不建议随便使用

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

例如下面代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。

 * {
   margin: 0;                    /* 定义外边距*/
   padding: 0;                   /* 定义内边距*/
 }

2.7 基础选择器总结

选择器	作用	缺点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多	p { color：red;}
类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多	.nav { color: red; }
id选择器	一次只能选择器1个标签	只能使用一次	不推荐使用	#nav {color: red;}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	不推荐使用	* {color: red;}

2.8 CSS复合选择器（拔高）

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的

2.8.1 后代选择器

又称为包含选择器

用来选择元素或元素组的子孙后代
其写法就是把外层标签写在前面，内层标签写在后面，中间用「空格」分隔，先写父亲爷爷，再写儿子孙子。
子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。

 父级 子级{属性:属性值;属性:属性值;}
 
 .class h3 {color:red;font-size:16px;}

当标签发生嵌套时，内层标签就成为外层标签的后代。
子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。

2.8.2 子元素选择器

子元素选择器只能选择作为某元素子元素(亲儿子)的元素。
其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接
这里的子,指的是亲儿子。不包含孙子重孙子之类。

 .class>h3 {color:red;font-size:14px;}

2.8.3 交集选择器

其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。

 交集选择器是并且的意思,即...又...的意思
 比如：   p.one   选择的是： 类名为 .one 的段落标签。 
 /*用的相对来说比较少，不建议使用。*/

2.8.4 并集选择器

如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。并集选择器（CSS选择器分组）是各个选择器通过,连接而成的，通常用于集体声明。

任何形式的选择器（包括标签选择器、class类选择器 id选择器等），都可以作为并集选择器的一部分。
并集选择器通常用于集体声明，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为和的意思。

 比如  
.one, 
 p , 
 #test {color: #F00;}  
 表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。 
 通常用于集体声明。

2.8.5 链接伪类选择器

用于向某些选择器添加特殊的效果。写的时候，他们的顺序尽量不要颠倒,按照lvha的顺序。否则可能引起错误。

链接伪类，是利用交集选择器.

a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标移动到链接上
a:active 选定的链接

实际工作中，很少写全四个状态，一般写法如下：

 a {   /* a是标签选择器  所有的链接 */
    font-weight: 700;
    font-size: 16px;
    color: gray;
       text-decoration: none; /* 清除链接默认的下划线*/
 }
 a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
    color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
 }

2.8.6 复合选择器总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择元素后代	是选择所有的子孙后代	较多	符号是`空格` .nav a
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是`>` .nav>p
交集选择器	选择两个标签交集的部分	既是又是	较少	`没有符号` p.one
并集选择器	选择某些相同样式的选择器	可以用于集体声明	较多	符号是`逗号` .nav, .header
链接伪类选择器	给链接更改状态		较多	重点记住 a{} 和 a:hover 实际开发的写法

3.CSS字体属性

CSS Fonds（字体）属性用于定义字体系列、大小、粗细和文本样式（如斜体）

3.1 字体系列

font-family属性用于设置哪一种字体。

p { font-family:"微软雅黑";}
div {font-family: Arial,"Microsoft Yahei","微软雅黑";}
 /*建议写英文*/

字体间用逗号隔开，如果字体名有空格，用引号包起来（单引号、双引号都行）
为什么写好几种字体？为了浏览器的兼容性，从左到右提供多种选择
尽量使用系统默认字体
常见字体：body{font-family: 'Microsoft Yahei',tahoma,arial,'Hiragino Sans GB';}

3.2 字体大小

font-size

<style>
 body {font-size: 20px;}
 h2 {font-size: 16px;}
 /* 标题标签比较特殊，需要单独指定文字大小（body中不能包含） */
 </style>
 <body>
 <h2>标题</h2>
 <p>普通文字</p>
 <p>普通文字</p>
 <p>普通文字</p>
 <p>普通文字</p>
 </body>

font-size属性用于设置字号(字体大小)
px（像素）大小是我们网页的最常用的单位
谷歌浏览器默认的文字大小为16px
不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。一般给body指定整个页面文字的大小。
可以给body指定整个页面文字的大小
标题像素需要单独指定

3.3 字体粗细

CSS 使用font-weight属性设置文本字体的粗细。

属性值	描述
normal	默认值（不加粗的）
bold	定义粗体（加粗的）
100~900	400 等同于 normal，而 700 等同于 bold (数字表示粗细用的多)，不加单位

normal可以让加粗标签（比如h和strong等）不加粗，或者其他标签加粗

3.4 文字样式

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

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

注意：平时我们很少给文字加斜体，反而要给斜体标签（em,i）改为不倾斜字体

3.5 字体复合属性

字体属性可以把以上文字样式综合来写，这样可以更节约代码

/* 选择器 { font: font-style  font-weight  font-size/line-height  font-family;} */
 /* 顺序不可交换,font-size，font-style不可省略 */
 .font { font: italic 700 16px/20px 'Microsoft Yahei';}

注意：使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开
其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性，否则font属性将不起作用。

3.6 字体属性总结

属性	表示	注意点
font-size	字号	我们通常用的单位是px 像素，一定要跟上单位
font-family	字体	实际工作中按照团队约定来写字体
font-weight	字体粗细	记住加粗是 700 或者 bold 不加粗是 normal 或者 400 记住数字不要跟单位
font-style	字体样式	记住倾斜是 italic 不倾斜是 normal 工作中我们最常用 normal
font	字体连写	复合属性用：1. 字体连写是有顺序的不能随意换位置 2. 其中字号和字体必须同时出现

4.CSS文本属性

CSS Text(文本)属性可定义文本的外观，比如文本的颜色，对齐文本、装饰文本、文本缩进、行间距等。

4.1 文本颜色

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

 div {
     color: red;
 }

表示表示	属性值
预定义的颜色值	red，green，blue，pink
十六进制	#FF0000，#FF6600，#29D794
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

实际工作中，用16进制的写法是最多的，且我们更喜欢简写方式比如#f0代表红色。

4.2 对齐文本

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

 div {
     text-align: center;
 }

注意：是让盒子里面的文本内容水平居中，而不是让盒子居中对齐

其可用属性值如下：

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

4.3 装饰文本

text-decoration属性通常我们用于给链接修改装饰效果。可以给文本添加下划线、删除线、上划线等。

 div {
     text-decoration: underline;
 }

值	描述
none	默认。定义标准的文本。取消下划线（最常用）
underline	下划线。定义文本下的一条线。下划线也是我们链接自带的（常用）
overline	上划线。定义文本上的一条线。（不用）
line-through	删除线。定义穿过文本下的一条线。（不常用）

使用场景（可将链接文本的下划线去掉）：

 a {
     text-decoration: none;
 }

 <a href="#">链接文字</a>

4.4 文本缩进

text-indent属性用于设置首行文本的缩进（indent：缩进）

 p {
       /*行间距*/
       line-height: 25px;
       /*首行缩进2个字  em  1个em 就是1个字的大小*/
       text-indent: 2em;  
  }

其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值。
建议使用em作为设置单位。（em是一个相对单位，相对于当前元素的一个文字大小（font-size）来说的）
1em 就是一个字的宽度。如果是汉字的段落，1em 就是一个汉字的宽度

4.5 行间距

line-height属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离。

 p {
     line-height: 26px;
 }

行间距包括上距离、内容高度、下距离
一般情况下，行距比字号大7--8像素左右就可以了(line-height: 24px;)

4.6 文本属性总结

属性	表示	注意点
color	颜色	我们通常用十六进制比如而且是简写形式 #fff
line-height	行高	控制行与行之间的距离
text-align	水平对齐	可以设定文字水平的对齐方式
text-indent	首行缩进	通常我们用于段落首行缩进2个字的距离 text-indent: 2em;
text-decoration	文本修饰	记住添加下划线 underline 取消下划线 none

5. CSS的引入方式

5.1 CSS的三种样式表

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

1、行内样式表（行内式）

2、内部样式表（嵌入式）

3、外部样式表（链接式）

5.2 内部样式表

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

 <style>
 div {
     font-size:26px;
 }
 </style>

理论上可以放在HTML文档的任何地方，但一般会放在文档的< head >标签中
通过此种方式，可以方便控制当前整个页面中的元素样式设置
代码结构清晰，并没有实现结构样式的完全分离

5.3 行内样式表

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

 <div style="color: red;font-size: 12px;">青春不常在，抓紧谈恋爱</div>

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

5.4 外部样式表

实际开发都是外部样式表。核心：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。

引入外部样式表分为两步：

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

2、在HTML页面中，在< head >中使用< link >标签引入这个文件。

 <link rel="stylesheet" href="css文件路径">

注：stylesheet-样式表，sheet-表格

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

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

5.5 CSS引入方式总结

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

综合案例：新闻页面

制作页面整体可以分为两步：

1、搭建html结构页面

2、修改css样式

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="css-style.css">
 </head>
 
 <body>
     <h1>北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1>
     <div class="grey align">2019-07-03 16:31:47 来源: <a href="#">中国天气网</a>
     <input type="text" value="请输入查询条件"><button class="btn">搜索</button>
     </div>
     <hr>
     <p>中国天气网讯今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。</p>
     <h4>气温41.4℃！地温66.5！北京强势迎七月首个高温日</h4>
     <p class="pic"><img src="../images/pic.jpeg" alt="加载失败"></p>
     <p>今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。</p>
     <p>在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部分地区地表温度甚至超过60℃。其中，河北衡水地表温度高达68.3℃，天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。</p>
     <h4>明日热度再升级！京津冀携手冲击38℃+</h4>
     <p>中国天气网气象分析师王伟跃介绍，明天（4日），华北、黄淮地区35℃以上的高温天气还将继续升级，并进入鼎盛阶段，高温强度和范围都将发展到最强。明天，北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。</p>
     <p>不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地的高温还会天天上岗。在此提醒当地居民注意防暑降温，防范持续高温带来的各种不利影响。（文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽）</p>
     <div class="grey">本文来源：中国天气网 责任编辑：刘京_NO5631</div>
 </body>
 </html>

CSS：css-style.css

 h1 {
     font-weight: 400;
     text-align: center;
 }
 
 body {
     font: 16px/28px "Microsoft Yahei";
 }
 
 p {
     text-indent: 2em;
 }
 
 a {
     text-decoration: none;
 }
 
 .btn {
     font-weight: 700;
 }
 
 .align {
     text-align: center;
 }
 
 .pic {
     text-align: center;
 }
 
 .grey {
     color: #888888;
     font-size: 12px;
 }