本文详细介绍了CSS的基本选择器、字体及文本属性，包括标签选择器、类选择器、ID选择器和通配符选择器的使用方法，以及如何设置字体大小、颜色、对齐方式等。
目录
一、css的语法规范
- 选择器是用于指定css样式的HTML标签，花括号里面是对于该对象设置的具体样式
- 属性和值之间采用“键值对”形式出现，用“：”隔开
- 声明之间用“；”隔开
- 123
二、css的基础选择器
（一）基础选择器总结
| 选择器 | 作用 | 缺点 | 使用情况 | 用法 |
| 标签选择器 | 可以选出所有相同的标签，比如p | 不能差异化选择 | 较多 | CSS: 标签名 { 属性1： 属性值1; } |
| 类选择器 | 可以选出1个或者多个标签 | 可以根据需求选择 | 非常多 | CSS: .类名 { 属性1: 属性值1; } HTML: <p class=“类名”></p> |
| id选择器 | 一次只能选择器1个标签 | ID 属性只能在每个 HTML 文档中出现一次 | 不推荐使用，和js搭配 | CSS: #id名 { 属性1: 属性值1; } HTML: <p id="id名"></p> |
| 通配符选择器 | 选择所有的标签 | 选择的太多，有部分不需要 | 特殊情况使用 | CSS: * { |
（二）标签选择器
用HTML的标签名作为选择器，按照标签名称分类，为页面某一类标签指定统一的css样式。
标签名 {
属性1： 属性值1;
属性2： 属性值2;
属性3： 属性值3;
...
}
<!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>
<style>
p {color: red;}
</style>
</head>
<body>
<p>我真美</p>
<p>我真帅</p>
<div>我真白</div>
</body>
</html>
（三）类选择器
单独选择一个或几个标签。样式点（.）定义，结构类（class）调用,一个或多个，开发最常用
.类名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
<p class=“类名”></p>
- 类选择器使用“.”（英文点号）进行标识，后面紧跟类名(自定义，我们自己命名的)
- 长名称或词组可以使用中横线来为选择器命名。
- 不要纯数字、中文、标签名等命名， 尽量使用英文字母来表示。
- 多类名选择器：各个类名中间用空格隔开。<div class="red font20">林晓</div>
<!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>
<style>
.red {color: red;}
</style>
</head>
<body>
<ul>
<li class="red">倩女幽魂</li>
<li class="red">倚天屠龙记</li>
<li>天龙八部</li>
<li>康熙王朝</li>
</ul>
<div class="red">这都是我喜欢的书</div>
</body>
</html>
类命名规则：
头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column
页面外围控制整体布局宽度：wrapper 左右中：left right center 登录条：loginbar
标志：logo 广告：banner 页面主体：main 热点：hot 新闻：news 下载：download
子导航：subnav 菜单：menu 子菜单：submenu 搜索：search 友情链接：friendlink
页脚：footer 版权：copyright 滚动：scroll 内容：content 标签页：tab 文章列表：list
提示信息：msg 小技巧：tips 栏目标题：title 加入：joinus 指南：guild 服务：service
注册：regsiter 状态：status 投票：vote 合作伙伴：partner
(二)注释的写法:
/* Footer */
内容区
/* End Footer */
(三)id的命名:
(1)页面结构
容器: container 页头：header 内容：content/container 页面主体：main 页尾：footer
导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper
左右中：left right center
(2)导航
导航：nav 主导航：mainbav 子导航：subnav 顶导航：topnav 边导航：sidebar
左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu
标题: title 摘要: summary
(3)功能
标志：logo 广告：banner 登陆：login 登录条：loginbar 注册：regsiter 搜索：search
功能区：shop 标题：title 加入：joinus 状态：status 按钮：btn 滚动：scroll
标签页：tab 文章列表：list 提示信息：msg 当前的: current 小技巧：tips 图标: icon
注释：note 指南：guild 服务：service 热点：hot 新闻：news 下载：download
投票：vote 合作伙伴：partner 友情链接：link 版权：copyright\
（四）id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式；样式 # 定义，结构 id 调用。只能调用一次，别人切勿使用
#id名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
<p id="id名"></p>
<!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>
<style>
#pink {color: pink;}
</style>
</head>
<body>
<div id="pink">刘德华</div>
</body>
</html>
| 类选择器 | id选择器 | |
|---|---|---|
| 口诀 | 样式点定义，结构类调用 | 样式 # 定义，结构 id 调用 |
| 书写 | .类名 { 属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; } <p class=“类名”></p> | #id名 { 属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; } <p id="id名"></p> |
| 次数 | 一个人可以有多个名字，同时一个名字也可以被多个人使用 | 好比人的身份证号码，全中国是唯一的，不得重复。 |
| 使用 | 使用最多 | 和js搭配 |
（五）通配符选择器
通配符使用 * 定义，它表示选取页面中所有元素(标签)。
* {
属性1：属性值1;
....
}
<!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>
<style>
* {
color: red;
}
</style>
</head>
<body>
<div">刘德华</div>
<div>张曼玉</div>
<div>黎明</div>
<h1>这些都是大明星</h1>
</body>
</html>
三、CSS字体属性
（一）字体属性总结
| 属性 | 表示 | 注意点 |
|---|---|---|
| font-size | 字号 | 我们通常用的单位是px 像素，一定要跟上单位 |
| font-family | 字体 | 实际工作中按照团队约定来写字体 |
| font-weight | 字体粗细 | 记住加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字不要跟单位 |
| font-style | 字体样式 | 记住倾斜是 italic 不倾斜 是 normal 工作中我们最常用 normal |
| font | 字体连写 | 1. 字体连写是有顺序的 不能随意换位置 2. 其中字号 和 字体 必须同时出现 |
（二）font-family设置字体
div {
font-family: Arial,"Microsoft Yahe","微软雅黑";
}
- 各种字体之间必须使用英文状态下的逗号隔开
- 一般情况下，如果有空格隔开的多个单词组成的字体，加引号
- 电脑会从默认以第一个字体显示，如果没有则往下走
（三）font-size设置字号(字体大小)
p {
font-size: 20px;
}
-
谷歌浏览器默认的文字大小为16px -
不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。一般给body指定整个页面文字的大小(标题标签单独设置大小)
（四）font-weight设置字体的粗细
p {
font-weight: normal | bold | bolder | lighter |number;
}
| 属性值 | 描述 |
|---|---|
| normal | 默认值（不加粗的） |
| bold | 定义粗体（加粗的） |
| 100~900 | 400 等同于 normal，而 700 等同于 bold |
- 更喜欢用数字表示粗细
（五）font-style设置文字样式
p {
font-style: normal;
}
| 属性值 | 作用 |
|---|---|
| normal | 默认值，浏览器会显示标准的字体样式 |
| italic | 浏览器会显示斜体的字体样式 |
- 平时我们很少给文字加斜体，反而要给斜体标签( em , i )改为不倾斜字体
（六）字体属性复合写法
<style>
/* 想要div 文字变倾斜 加粗 字号设置为16像素 并且是微软雅黑 */
div {
法1：
font-style: italic;
font-weight: 700;
font-size: 16px;
font-family: 'Microsoft yahei';
/法2：
/* 复合属性：简写的方式 节约代码*/
/* 顺序：font-style font-weight font-size/line-height font-family */
font: italic 700 16px 'Microsoft yahei';
}
</style>
- 使用font属性时，必须按照文字样式 文字粗细 文字大小 文字字体的顺序书写，不能更换顺序，并且各个属性间以空格隔开
- 不需要设置的属性可以省略(取默认值)，但必须保留
font-size和font-family属性，否则 font 属性将不起作用
四、CSS文本属性
（一）文本属性总结
| 属性 | 表示 | 注意点 |
|---|---|---|
| color | 颜色 | 我们通常用 十六进制 比如 而且是简写形式 #fff |
| line-height | 行高 | 控制行与行之间的距离 |
| text-align | 水平对齐 | 可以设定文字水平的对齐方式 |
| text-indent | 首行缩进 | 通常我们用于段落首行缩进2个字的距离 text-indent: 2em; |
| text-decoration | 文本修饰 | 记住 添加 下划线 underline 取消下划线 none |
（二）color定义文本的颜色
<style>
div {
/* color: red; */
/* color: #ff0000; */
color: rgb(255, 0, 0);
}
</style>
| 表示表示 | 属性值 |
|---|---|
| 预定义的颜色值 | red，green，blue，pink |
| 十六进制 | #FF0000，#FF6600，#29D794 |
| RGB代码 | rgb(255,0,0)或rgb(100%,0%,0%) |
- 实际工作中，用16进制的写法是最多的
（三）text-align文本内容的水平对齐方式
相当于html<tabel>中的align对齐属性(表格对齐)。
div {
text-align:center;
}
| 属性 | 解释 |
|---|---|
| left | 左对齐（默认值） |
| right | 右对齐 |
| center | 居中对齐 |
（四）text-decoration装饰文本
可以给文本添加下划线，删除线，上划线等
div {
text-decoration: underline;
}
| 值 | 描述 |
|---|---|
| none | 默认。定义标准的文本。取消下划线（最常用） |
| underline | 定义文本下的一条线。下划线 也是我们链接自带的（常用） |
| overline | 定义文本上的一条线。（不用） |
| line-through | 定义穿过文本下的一条线。（不常用） |
重点：记住如何添加下划线，如何删除下划线，其余了解即可。
<!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>
<style>
a{
text-decoration: none;
}
</style>
</head>
<body>
<a href="#">百度一下</a>
</body>
</html>
（五）text-indent 设置首行文本的缩进
div {
text-indent: 10px;
}
p {
text-indent: 2em;
}
-
通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值
-
em是一个相对单位，就是当前元素(font-size)1个文字的大小
-
如果当前元素没有设置大小，则会按照父元素的一个文字大小
（六）line-height设置行间距
line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px
一般情况下，行距比字号大7--8像素左右就可以了。
p {
line-height: 26px;
}
行高 = 上间距 + 文本高度 + 下间距。上间距和下间距总是相等的，因此文字看上去是垂直居中的。可以通过FSCcapture进行测量。
行高与高度的三种关系
-
如果 行高 等 高度 文字会 垂直居中
-
如果行高 大于 高度 文字会 偏下
-
如果行高小于高度 文字会 偏上
/*line-height 要设置在font属性下面，否则无效，例如：*/
height: 80px;
text-align: center;
font: normal bold 30px "宋体";
line-height: 80px;
可以使用display:flex;布局方式让文字水平垂直居中
display: flex;
align-items: center; /* 侧轴对齐方式*/
justify-content: center; /* 主轴对齐方式 */五、css的引入方式
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 结构样式混乱 | 较少 | 控制一个标签 |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面 |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多，吐血推荐 | 控制多个页面 |
（一）内部样式表（嵌入式）
也称为内嵌式，将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义。
-
style标签一般位于head标签中，当然理论上他可以放在HTML文档的任何地方。
-
type="text/css" 在html5中可以省略。
-
只能控制当前的页面
-
缺点:没有彻底分离结构与样式
<head>
<style type="text/CSS">
选择器（选择的标签） {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
</style>
</head>（二）行内样式表（行内式）
通过标签的style属性来设置元素的样式
-
style其实就是标签的属性
-
样式属性和值中间是:
-
多组属性值直接用;隔开
-
只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余。
-
缺点:没有实现样式和结构相分离。
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
例如：
<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>（三）外部样式表（链接式）
- 新建一个或多个以.css为扩展名的外部样式表文件，将所有的样式放在其中
- 通过link标签将外部样式表文件链接到HTML文档中<link rel="stylesheet" href="css文件路径">
index.css文件：
div{
color:red;
font-size:20px;
}<link rel="stylesheet" href="index.css">-
rel:定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。 -
href:定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
扫一扫
1170
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
