CSS层叠样式表—CSS概述、基础选择器、字体属性、颜色属性、文本属性

CSS层叠样式表

    CSS是层叠样式表 ( Cascading Style Sheets ) 的简称，有时我们也会称之为 CSS 样式表或级联样式表。CSS 也是一种标记语言，CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形以及版面的布局和外观显示样式。CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮。让页面布局更简单。

CSS概述

学习目标

image-20230704234657644.png

CSS概述

    CSS（Cascading Style Sheets，层叠样式表）是一种将表示样式应用到标记的系统。CSS以设计、改变其HTML页面的样式而知名。1996年12月W3C推出了CSS规范的第一个版本，1998年W3C发布了CSS的第二个版本即CSS2.0，2001年5月W3C开始进行CSS3标准的制定，到目前为止该标准还没有最终定稿。

css.png

CSS的优点

能够使代码精简，使用div+css布局使代码很是精简，css文件可以在网站的任意一个页面进行调用，避免了使用table表格修改部分页面。
提升了网页访问速度，div+css布局较传统的Table布局比较，减少了许多代码，其浏览访问速度自然得以提升，从而提升了网站的用户体验度。
有利于优化。采用div-css布局的网站对于搜索引擎很是友好，简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。
浏览器兼容性。DIV+CSS更兼容多种浏览器，主要原因是不同的浏览器对web标准默认值不同。
需要注意的是，网页不喜欢一个页面有太多的css代码，否则同样会影响蜘蛛的爬行，影响搜索引擎的收录，所以采用外部调用的方式调用CSS是非常不错的方法。

CSS 语法规范

    使用 HTML 时，需要遵从一定的规范，CSS 也是如此。要想熟练地使用 CSS 对网页进行修饰，首先需要了解CSS 样式规则。CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        h1 {
            color:red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1>css层叠样式表</h1>
</body>
</html>

选择器是用于指定 CSS 样式的 HTML 标签，花括号内是对该对象设置的具体样式
属性和属性值以“键值对”的形式出现
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
属性和属性值之间用英文“:”分开
多个“键值对”之间用英文“;”进行区分

所有的样式，都包含在<style> 标签内，表示是样式表。<style> 一般写到 </head>上方。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        h1 {
            color:red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1>css层叠样式表</h1>
</body>
</html>

CSS 代码风格

以下代码书写风格不是强制规范，而是符合实际开发书写方式。

1.样式格式书写

h1 {
    color: blue;
    font-size: 20px;
}

2.样式大小写

h1 {
    color: blue;
    font-size: 20px;
}

CSS的使用方法

内联式Inline（也叫行内样式）

<p style="color:blue;">在HTML中如何使用css样式</p>

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

嵌入式（也叫内页样式）

<style type="text/css">
    p {
        width:100px;
        height:100px;
        background:red;
    }
</style>

<style> 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的<head>标签中。
通过此种方式，可以方便控制当前整个页面中的元素样式设置。
代码结构清晰，但是并没有实现结构与样式完全分离。
使用内部样式表设定 CSS，通常也被称为嵌入式引入，这种方式是我们练习时常用的方式。

外联式（也叫外部样式）：

    实际开发都是外部样式表，适合于样式比较多的情况核心是:样式单独写到CSS 文件中，之后把CSS文件引入到 HTML 页面中使用。

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

新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。
在 HTML 页面中，使用<link> 标签引入这个文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="文件名.css" type="text/css" />
</head>
<body>
    <h1>css层叠样式表</h1>
</body>
</html>

属性	含义
rel	定义当前文档与链接文档之间的关系，stylesheet，表示被链接的文档是一个样式表。
href	样式表的路径地址
type	样式表的文件类型是css类型

CSS的注释

注释是用来解释你的代码。

/*这是个注释*/
p {
    text-align:center;
    /*这是另一个注释*/
    color:black;
    font-family:arial;
}

课程总结

image-20230704234657644.png

CSS基础选择器

学习目标

image-20230704234816155.png

标签选择器

    选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。 简单来说，就是选择标签用的。选择到需要修改的标签，然后添加对应的样式。

    标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

语法：

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

作用：

    标签选择器可以把某一类标签全部选择出来，比如所有的 `<div> `标签和所有的 `<span>` 标签。

优点：

    能快速为页面中同类型的标签统一设置样式。

缺点：

    不能设计差异化样式，只能选择全部的当前标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基础选择器之标签选择器</title>
    <style>
    /* 标签选择器 : 写上标签名 */
    p {
        color: green;
    }
    div {
        color: blue;
    }
    </style>
</head>
<body>
    <p>男生</p>
    <p>男生</p>
    <p>男生</p>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
</body>
</html>

ID选择器

    id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“\#" 来定义。

语法

#id名 {
 属性1: 属性值1; 
 ...
}

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基础选择器之id选择器</title>
    <style>
      #header {
          color: pink;
      }
    
    </style>
</head>
<body>
    <div id="header">ID选择器</div>
</body>
</html>

注：ID选择器的名字声明不能使用数字开头，ID选择器只能用在一个标签上，ID选择器在一个页面中的名字是唯一的。

Class选择器

    class 选择器又叫做类选择器如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。

语法

.类名 {
 属性1: 属性值1; 
 属性2: 属性值2; 
 属性3: 属性值3; 
 属性4: 属性值4; 
 ...
}

结构需要用class属性来调用 class 类的意思

<div class=‘red’> 变红色 </div>

示例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基础选择器之类选择器</title>
    <style>
        /* 类选择器口诀: 样式点定义  结构类(class)调用  一个或多个 开发最常用*/
      .red {
          color: red;
      }
      .star-sing {
        color: green;
      }
      .memeda {  
         color: pink;
      }
    </style>
</head>
<body>
    <ul>
        <li class="red">选择器学习</li>
        <li class="red">类名学习</li>
        <li>我不改变颜色</li>
        <li class="memeda">不同的颜色</li>
        <li class="star-sing">颜色随便写</li>
    </ul>
    <div class="red">我也想变红色</div>
</body>
</html>

注意

类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。
可以理解为给这个标签起了一个名字，来表示。
长名称或词组可以使用中横线来为选择器命名。
不要使用纯数字、中文等命名，尽量使用英文字母来表示。
命名要有意义，尽量使别人一眼就知道这个类名的目的。

示例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=`, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>多类名的使用方式</title>
    <style>
        .red {
            color:  red;
        }
        .font35 {
            font-size: 35px;
        }
    </style>
</head>
<body>
    <div class="red font35">刘德华</div>
</body>
</html>

注意

在标签class 属性中写多个类名。
多个类名中间必须用空格分开。
这个标签就可以分别具有这些类名的样式。

id 选择器和类选择器的区别

类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。
id 选择器好比人的身份证号码，全是唯一的，不得重复。
id 选择器和类选择器最大的不同在于使用次数上。
类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。

通配符选择器

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

语法

* {
 属性1: 属性值1; 
 ...
}

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通配符选择器</title>
    <style type="text/css">
        *{
            text-align:center;
            color:red;
        }
    </style>
<body>
    <div>
        通配符选择器
    </div>
</body>
</html>

基础选择器总结

基础选择器	作用	特点	使用情况	用法
标签选择器	选出相同的标签	作用在所有被选中的标签上	较多	p {color:red}
类选择器	选出一个或多个标签	根据需求选择	非常多	.nav {color:red}
id选择器	选出一个标签	每个页面只能出现一次	和js搭配	#nav {color:red}
通配符选择器	选出所有标签	选中全部标签	较少	* {color:red}

课程总结

image-20230704234821558.png

CSS字体属性

学习目标

image-20230704235017232.png

字体类型

    在Word中，我们往往会使用不同的字体，例如宋体、微软雅黑等。在CSS中，我们可以使用font-family属性来定义字体类型。

语法：

font-family: 字体1, 字体2, ... , 字体N;

说明：

    font-family可以指定多种字体。使用多个字体时，将按从左到右的顺序排列，并且以英文逗号（,）隔开。如果我们不定义font-family，浏览器默认字体类型一般是“微软雅黑”。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #div1 {
            font-family: Arial;
        }
        #div2 {
            font-family: "Times New Roman";/*字体存放路径 C:\Windows\Fonts*/
        }
        #div3 {
            font-family: "微软雅黑";
        }
    </style>
</head>
<body>
    <div id="div1">Arial</div>
    <div id="div2">Times New Roman</div>
    <div id="div3">微软雅黑</div>
</body>
</html>

字体类型使用注意点

各种字体之间必须使用英文状态下的逗号隔开。
一般情况下,如果有空格隔开的多个单词组成的字体,加引号。
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示。
最常见的几个字体：body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }。

字体类型为什么要写很多种？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        p {
            font-family:Arial,Verdana,Georgia;
        }
    </style>
</head>
<body>
    <p>今天天气很好.</p>
</body>
</html>

原因是这样的：

    每个人的电脑装的字体都不一样，有些字体有安装，但也有些字体没有安装。p{font-family:Arial,Verdana,Georgia;}这一句的意思是：p元素优先使用“Aria字体”来显示，如果你的电脑没有装“Arial字体”，那就接着考虑“Verdana字体”。如果你的电脑还是没有装“Verdana字体”，那就接着考虑“Georgia字体”……以此类推。如果Arial、Verdana、Georgia字体都没有安装，那么p元素就会以默认字体（即微软雅黑）来显示。

    在实际开发中，比较美观的中文字体有微软雅黑、苹方，英文字体有Times New Roman 、Arial和Verdana（这个技巧对实际开发很重要）。

CSS 字体大小

在CSS中，我们可以使用font-size属性来定义字体大小。

语法：

font-size: 像素值;

px是什么？

    px，全称pixel（像素），1像素指的是一张图片中最小的点，或者是计算机屏幕最小的点。举个例子，下图所示是一个新浪图标。将这个图标放大后，就会变成如下图所示的样子。

image-20211104181321970.png

    我们会发现，原来一张图片是由很多的小方点组成的。其中，每一个小方点就是一个像素（px）。如果说一台屏幕的分辨率是800px×600px，指的就是“屏幕宽是800个小方点，高是600个小方点”。

    严格来说，px属于相对单位，因为屏幕分辨率的不同，1px的大小也是不同的。例如Windows系统的分辨率为每英寸96px，Mac系统的分辨率为每英寸72px。如果不考虑屏幕分辨率，我们也可以把px当成绝对单位来看待，这也是为什么很多地方说px是绝对单位的原因。

    对于大家来说，1px可以看成一个小点，多少px就可以看成由多少个小点组成。

采用px为单位

大家比较熟悉的网站，如百度、新浪、网易等，大部分都是使用px作为单位

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1 {
            font-size: 10px;
        }
        #p2 {
            font-size: 15px;
        }
        #p3 {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p id="p1">字体大小为10px</p>
    <p id="p2">字体大小为15px</p>
    <p id="p3">字体大小为20px</p>
</body>
</html>

字体粗细

    在CSS中，我们可以使用font-weight属性来定义字体粗细。注意，字体粗细（font-weight）跟字体大小（font-size）是不一样的。粗细指的是字体的“肥瘦”，而大小指的是字体的“宽高”。

语法：

font-weight: 取值;

说明：

font-weight属性取值有两种：一种是“100~900的数值”；另外一种是“关键字”。其中，关键字取值如下表所示。

属性值	说明
normal	正常（默认值）
lighter	较细
bold	较粗
bolder	很粗（其实效果跟bold差不多）

对于实际开发来说，一般我们只会用到bold这一个属性值，其他的几乎用不上。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1 {
            font-weight: 100;
        }
        #p2 {
            font-weight: 400;
        }
        #p3 {
            font-weight: 700;
        }
        #p4 {
            font-weight: 900;
        }
    </style>
</head>
<body>
    <p id="p1">字体粗细为:100（lighter）</p>
    <p id="p2">字体粗细为:400（normal）</p>
    <p id="p3">字体粗细为:700（bold）</p>
    <p id="p4">字体粗细为:900（bolder）</p>
</body>
</html>

注意

    font-weight属性可以取100、200、…、900这9个值。其中100相当于lighter，400相当于normal，700相当于bold，而900相当于bolder。

    不过在实际开发中，不建议使用使用数值（100~900）作为font-weight的属性取值。因此这里我们只需要简单了解一下就行。

字体风格

在CSS中，我们可以使用font-style属性来定义斜体效果。

语法：

font-style: 取值;

说明：

font-style属性取值如下表所示。

属性值	说明
normal	正常（默认值）
italic	斜体
oblique	斜体

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1 {
            font-style:normal;
        }
        #p2 {
            font-style:italic;
        }
        #p3 {
            font-style:oblique;
        }
    </style>
</head>
<body>
    <p id="p1">字体样式为normal</p>
    <p id="p2">字体样式为italic </p>
    <p id="p3">字体样式为oblique</p>
</body>
</html>

字体颜色

在CSS中，我们可以使用color属性来定义字体颜色。

语法：

color: 颜色值;

说明：

    color属性取值有两种，一种是“关键字”；另外一种是“16进制RGB值”。除了这两种，其实还有RGBA、HSL等，后面的课程中我们会学到。

    关键字，指的就是颜色的英文名称，如red、blue、green等。在VS Code中，也会有代码提示，很方便。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1 {
            color:gray;
        }
        #p2 {
            color:orange;
        }
        #p3 {
            color:red;
        }
    </style>
</head>
<body>
    <p id="p1">字体颜色为灰色</p>
    <p id="p2">字体颜色为橙色</p>
    <p id="p3">字体颜色为红色</p>
</body>
</html>

CSS 字体属性总结

属性	值	含义
font-size	像素	字体大小
font-family	字体库中的字体C:\Windows\Fonts	字体类型
font-style	normal/italic/inherit/oblique	字体效果
font-weight	normal/lighter/bold/bolder	字体加粗
color	red	字体颜色

课程总结

image-20230704235017232.png

CSS颜色属性

学习目标

image-20230705143030155.png

HSL颜色

    在CSS中，我们可以使用hsl属性来定义颜色效果。通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。

语法：

color:hsl(色调,饱和度,亮度)

说明：

hsl属性取值如下表所示。

值	范围
色调	0-360
饱和度	0%-100%
亮度	0%-100%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p {
            color: hsl(0, 100%, 50%);
        }
    </style>
</head>
<body>
    <p>今天天气很好</p>
</body>
</html>

HSLA颜色

    在CSS中，我们可以使用hsla属性来定义颜色效果。通过对色调(H)、饱和度(S)、亮度(L)、透明度（A）三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。

语法：

color:hsla(色调,饱和度,亮度,透明度)

说明：

hsl属性取值如下表所示。

HSLA颜色:色调(H)、饱和度(S)、亮度(L)、透明度(A)。

值	范围
色调	0-360
饱和度	0%-100%
亮度	0%-100%
透明度	0-1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p {
            color: hsla(0, 100%, 50%,0.5);
        }
    </style>
</head>
<body>
    <p>今天天气很好</p>
</body>
</html>

RGB颜色

    在CSS中，我们可以使用RGB属性来定义颜色效果。RGB颜色:红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。

语法：

color:rgb(红色,绿色,蓝色)

说明：

RGB属性取值如下表所示。

值	范围
R红色	0-255或0%-100%
G绿色	0-255或0%-100%
B蓝色	0-255或0%-100%

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p {
            color: rgb(255, 0, 0);
        }
    </style>
</head>
<body>
    <p>今天天气很好</p>
</body>
</html>

RGBA颜色

    在CSS中，我们可以使用RGB属性来定义颜色效果。RGB颜色:红(R)、绿(G)、蓝(B)、透明度(A)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色。

语法：

color:rgb(红色,绿色,蓝色,透明度)

说明：

RGBA属性取值如下表所示。

值	范围
R红色	0-255或0%-100%
G绿色	0-255或0%-100%
B蓝色	0-255或0%-100%
A透明度	0-1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p {
            color: rgba(255, 0, 0,0.5);
        }
    </style>
</head>
<body>
    <p>今天天气很好</p>
</body>
</html>

十六进制颜色

十六进制色彩：其实是RGB颜色的笔筒区间表示方式。常见的十六进制表示方式#00aaff。

语法：

color:#00aaff;

说明：

十六进制颜色属性取值如下表所示。

值	范围
R红色	0-9a-f
G绿色	0-9a-f
B蓝色	0-9a-f

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p {
            color: #00aaff;
        }
    </style>
</head>
<body>
    <p>今天天气很好</p>
</body>
</html>

英文单词

使用表示颜色的英文单词例如red,yellow,pink,green,blue等表示具体的颜色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>今天天气很好</p>
</body>
</html>

课程总结

image-20230705143030155.png

CSS文本属性

学习目标

image-20230705143218429.png

首行缩进

    p元素的首行是不会自动缩进的，因此我们在HTML中往往使用6个`&nbsp;`来实现首行缩进两个字的空格。但是这种方式冗余代码很多。那么有没有更好的解决方法呢？

在CSS中，我们可以使用text-indent属性来定义p元素的首行缩进。

语法：

text-indent: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        p
        {
            font-size:14px;
            text-indent:28px;
        }
    </style>
</head>
<body>
    <h3>爱莲说</h3>
    <p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
    <p>予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人? 牡丹之爱，宜乎众矣。</p>
</body>
</html>

水平对齐

在CSS中，我们可以使用text-align属性来控制文本在水平方向上的对齐方式。

语法：

text-align: 取值;

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{
            text-align:left;
        }
        #p2{
            text-align:center;
        }
        #p3{
            text-align:right;
        }
    </style>
</head>
<body>
    <p id="p1"><strong>左对齐</strong>:好好学习，天天向上。</p>
    <p id="p2"><strong>居中对齐</strong>:好好学习，天天向上。</p>
    <p id="p3"><strong>右对齐</strong>:好好学习，天天向上。</p>
</body>
</html>

文本修饰

在CSS中，我们可以使用text-decoration属性来定义文本的修饰效果（下划线、中划线、顶划线）。

语法：

text-decoration: 取值;

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{
            text-decoration:underline;
        }
        #p2{
            text-decoration:line-through;
        }
        #p3{
            text-decoration:overline;
        }
    </style>
</head>
<body>
    <p id="p1">这是“下划线”效果</p>
    <p id="p2">这是“删除线”效果</p>
    <p id="p3">这是“顶划线”效果</p>
</body>
</html>

去除超链接下划线

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        a{
            text-decoration:none;
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com" target="_blank">百度</a>
</body>
</html>

大小写

    在CSS中，我们可以使用text-transform属性来将文本进行大小写转换。text-transform属性是针对英文而言，因为中文不存在大小写之分。

语法：

text-transform: 取值;

属性值	说明
none	无转换（默认值）
uppercase	转换为大写
lowercase	转换为小写
capitalize	只将每个英文单词首字母转换为大写

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{
            text-transform:uppercase;
        }
        #p2{
            text-transform:lowercase;
        }
        #p3{
            text-transform:capitalize;
        }
    </style>
</head>
<body>
    <p id="p1">rome wasn't built in a day.</p>
    <p id="p2">rome wasn't built in a day.</p>
    <p id="p3">rome wasn't built in a day.</p>
</body>
</html>

行高

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

语法：

line-height: 像素值;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{
            line-height:15px;
        }
        #p2{
            line-height:20px;
        }
        #p3{
            line-height:25px;
        }
    </style>
</head>
<body>
    <p id="p1">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p><hr/>
    <p id="p2">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p><hr/>
    <p id="p3">水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
</body>
</html>

间距

字间距

在CSS中，我们可以使用letter-spacing属性来两个字之间的距离。

语法：

letter-spacing: 像素值;

说明：

    letter-spacing，从英文意思上就可以知道这是“字母间距”。注意，每一个中文汉字都被当做一个“字”，而每一个英文字母也当做一个“字”。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{
            letter-spacing:0px;
        }
        #p2{
            letter-spacing:3px;
        }
        #p3{
            letter-spacing:5px;
        }
    </style>
</head>
<body>
    <p id="p1">Rome was't built in a day.罗马不是一天建成的。</p><hr/>
    <p id="p2">Rome was't built in a day.罗马不是一天建成的。</p><hr/>
    <p id="p3">Rome was't built in a day.罗马不是一天建成的。</p>
</body>
</html>

词间距

在CSS中，我们可以使用word-spacing属性来定义两个单词之间的距离。

举例：

word-spacing: 像素值;

说明：

word-spacing，从英文意思上就可以知道这是“单词间距”。一般来说，word-spacing只针对英文单词而言。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #p1{
            word-spacing:0px;
        }
        #p2{
            word-spacing:3px;
        }
        #p3{
            word-spacing:5px;
        }
    </style>
</head>
<body>
    <p id="p1">Rome was't built in a day.罗马不是一天建成的。</p><hr/>
    <p id="p2">Rome was't built in a day.罗马不是一天建成的。</p><hr/>
    <p id="p3">Rome was't built in a day.罗马不是一天建成的。</p>
</body>
</html>

<div align="center">常用属性总结表</div>

属性	值	含义
text-indent	像素	首行缩进
text-align	left左/right右/center居中	文本的位置
text-decoration	none无、underline下画线，line-through贯穿线	文本的画线
line-height	像素	行高
color	颜色属性	颜色

课程总结

image-20230705143218429.png

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,723评论 6赞 481
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,485评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,998评论 0赞 344
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,323评论 1赞 279
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,355评论 5赞 374
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,079评论 1赞 285
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,389评论 3赞 400
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,019评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,519评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,971评论 2赞 325
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,100评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,738评论 4赞 324
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,293评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,289评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,517评论 1赞 262
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,547评论 2赞 354
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,834评论 2赞 345

CSS层叠样式表—CSS概述、基础选择器、字体属性、颜色属性、文本属性

CSS层叠样式表

CSS概述

学习目标

CSS概述

CSS的优点

CSS 语法规范

CSS 代码风格

CSS的使用方法

内联式Inline（也叫行内样式）

嵌入式（也叫内页样式）

外联式（也叫外部样式）：

CSS的注释

课程总结

CSS基础选择器

学习目标

标签选择器

ID选择器

Class选择器

通配符选择器

课程总结

CSS字体属性

学习目标

字体类型

字体类型使用注意点

字体类型为什么要写很多种？

CSS 字体大小

px是什么？

采用px为单位

字体粗细

字体风格

字体颜色

课程总结

CSS颜色属性

学习目标

HSL颜色

HSLA颜色

RGB颜色

RGBA颜色

十六进制颜色

英文单词

课程总结

CSS文本属性

学习目标

首行缩进

水平对齐

文本修饰

大小写

行高

间距

字间距

词间距

课程总结

推荐阅读更多精彩内容