CSS层叠样式表

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

CSS概述

学习目标

CSS概述

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

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;
}

课程总结

CSS基础选择器

学习目标

标签选择器

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

标签选择器（元素选择器）是指用 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}

课程总结

CSS字体属性

学习目标

字体类型

在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像素指的是一张图片中最小的点，或者是计算机屏幕最小的点。举个例子，下图所示是一个新浪图标。将这个图标放大后，就会变成如下图所示的样子。

我们会发现，原来一张图片是由很多的小方点组成的。其中，每一个小方点就是一个像素（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	字体颜色

CSS2.0层叠样式表—CSS概述、基础选择器、字体属性

CSS层叠样式表

CSS概述

学习目标

CSS概述

CSS的优点

CSS 语法规范

CSS 代码风格

CSS的使用方法

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

嵌入式（也叫内页样式）

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

CSS的注释

课程总结

CSS基础选择器

学习目标

标签选择器

ID选择器

Class选择器

通配符选择器

课程总结

CSS字体属性

学习目标

字体类型

字体类型使用注意点

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

CSS 字体大小

px是什么？

采用px为单位

字体粗细

字体风格

字体颜色

课程总结