CSS的基本使用 选择器
一、css选择器
- css（Cascading style sheets）层叠样式表
- 用来美化网页
1.1 三种引入方式
（1）标签内部： 在标签上添加style属性，在style属性里面添加css样式
<body>
<div style="color:blue;font-size: 30px;">成都</div>
</body>
特点：不需要选择器。样式的作用范围只有当前的标签，大量使用行内样式会产生代码冗余，会使结构不清晰。
（2）内嵌 : 在head标签里面添加style标签 ，在style标签内部写入css语法
<head>
<style type="text/css">
<!-- style标签中写css代码 -->
div{
/*此时的div为普通标签，在这设置了相应的样式，则在body标签中只要使用了div标签的都会呈现该样式*/
width:100px;
height:100px;
color:blue;
font-size: 80px;
}
</style>
</head>
<body>
<div>成都</div>
</body>
（3）外链 : 在head标签里添加link标签 ，通过href属性引入 .css文件 ，把样式写在css文件中
<head>
<link rel="stylesheet" href="1.css">
</head>
注释：
1）外部css文件（***.css文件）
2）使用格式：<link href=“css文件位置”rel=“stylesheet” />
3）属性
rel 属性 – 定义了文档与链接的关系。
stylesheet – 一个外部加载的样式表
1.2 标签选择器
1.2.1.基本语法
形如：
选择器{
样式声明;
样式声明;
样式声明;
}
例如：
使用标签编写的标签选择器的样式：
p{
width: 200px;
height: 50px;
background-color: lightblue;
}
div{
width: 200px;
height: 50px;
background-color: lightblue;
}
说明：
①选择器：用来找到需要添加样式的标签的一些符号
②样式声明: 每一组样式声明都需要一个分号结尾,每一组声明由 属性名:值 组成
1.2.2 例题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
font-size: 50px;
font-family: 楷体;
}
</style>
</head>
<body>
<p>成都</p>
</body>
</html>
效果：
1.3 类选择器 class
1.3.1 基本语法
在头标签内进行编辑，或者在css文件中进行编写：
.box{
width:100px;
height:100px;
}
.red{
background-color:red;
}
在body标签中使用class=""进行内嵌：
<div class="box red"> </div>
<div class="box"> </div>
<p class="box red"></p>
- class属性的命名规范
- 可以包含数字、字母、下划线_、连字符-
- 不能以数字开头
- 多个标签可以使用相同的类名
- 每一个标签都可以设置多个类名，多个类名以词列表的形式定义 class=“box red …”
1.3.2 例题
HTML文件：1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="NO1.css">
</head>
<body>
<p>成都</p>
</body>
</html>
CSS文件：NO1.css
p{
font-weight: 100;
font-size:50px;
font-family: 楷体;
color: brown;
}
效果：
1.4 id选择器 #{ }
id选择器，顾名思义就像我们每个人的身份证一样唯一，所以在一整个HTML页面一个id选择器只能让使用一次。如果使用多次不会提示错误，但是违背了设计这个选择器的初衷，所以，一般id选择器使用较少，一般使用类选择器或者标签选择器。
1.4.1 规则
id属性命名规则：
- 可以包含数字、字母、下划线、连字符
- 不能以数字开头
- id具有唯一性，一个id名称只能使用一次
- 一个标签只能有一个id名称
1.4.2 使用
<body>
<p id="id_L1"> 成都（使用id选择器）</p>
</body>
效果：
1.5 优先级
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="NO1.css">
</head>
<body>
优先级比较
<p>成都（使用标签选择器）</p>
<p class="class_L1">成都（使用class选择器）</p>
<p id="id_L1"> 成都（使用id选择器）</p>
<p id="id_L1" class="class_L1" >成都（同时使用三种选择器）</p>
</body>
</html>
css文件：
p{
font-size:20px;
font-family: 楷体;
color: brown;
}
#id_L1{
color:rgb(54, 207, 24);
font-size:40px;
font-family:隶书;
}
.class_L1{
font-family: 黑体;
font-size:30px;
color: darkblue;
}
效果：
结论：
优先级从高到低依次是：id选择器 > class选择器> 标签选择器
二、 属性
知识点：
长度单位
- px 像素
- em 当前标签的字体大小
- % 百分比
- rem root(根)html标签的font-size
2.1.字体属性 font
2.1.1 字号 font-size
| 属性值 | 说明 |
|---|---|
| xx- small | 绝对字体尺寸，根据对象字体进行调整，z最小 |
| x- small | 绝对字体尺寸，根据对象字体进行调整，较小 |
| small | 绝对字体尺寸，根据对象字体进行调整，小 |
| medium | 默认值。绝对字体尺寸，根据对象字体进行调整，正常 |
| large | 绝对字体尺寸，根据对象字体进行调整，大 |
| x-large | 绝对字体尺寸，根据对象字体进行调整，较大 |
| xx-large | 绝对字体尺寸，根据对象字体进行调整，最大 |
| larger | 相对字体尺寸，根据父元素中字体的尺寸进行相对增大，使用成比例的em单位 |
| smaller | 相对字体尺寸，根据父元素中字体的尺寸进行相对缩小，使用成比例的em单位 |
| length | 百分数或由浮点数和单位标识符组成的长度值，不可为负值，其百分比取值基于父元素中字体的尺寸 |
| inherit | 继承父元素字体的大小 |
除了使用属性值以外，还可以直接通过数值定义大小，比如
div{ font-size：20px; }
2.1.2 字体 font-family
fon-famil属性用于指定文字的字体类型，例如宋体、黑体、微软雅黑等，即在网页中展示字体不同的形状。因为字体需要浏览器内嵌字体的支持，该属性可以设置多个显示字体，浏览器按照属性值指定的多个字体依次搜索，以优先找到的字体来显示文字。多个属性值之间以英文逗号隔开。
例如：
font-family: "宋体";
font-family: "微软雅黑";
font-family: "Microsoft YaHei";
<!-- 设置多个字体，浏览器会识别第一个支持的字体 -->
例如：
html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="NO1.css">
</head>
<body>
<p> 成都</p>
<div>成都</div>
</body>
</html>
css文件：
p{
font-size:20px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif,黑体;
color: brown;
}
div{
font-family:黑体 ;
}
效果：
2.1.3 字体风格 font-style
| 属性值 | 说明 |
|---|---|
| normal | 默认值。标准字体 |
| italic | 斜体 |
| oblique | 倾斜字体 |
| inherit | 规定从父元素继承字体样式 |
| unset | 不设置 |
| initial | 规定从父元素继承字体样式 |
例如：
HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="NO1.css">
</head>
<body>
<p class="unset">春晓</p>
<p class="italic">春眠不觉晓</p> <!--斜体-->
<p class="oblique">处处闻啼鸟</p> <!--倾斜字体-->
<p class="inherit">夜来风雨声</p> <!--继承父类字体-->
<p class="initial">花落知多少</p> <!--继承父类字体-->
</body>
</html>
CSS文件
p{
font-size:20px;
color: brown;
}
.italic{
font-style: italic;
}
.oblique{
font-style: oblique;
}
.inherit{
font-style: inherit;
}
.initial{
font-style: initial;
}
.unset{
font-style: unset;
}
效果：
2.1.4 加粗字体 font-weight
| 属性值 | 说明 |
|---|---|
| normal | 默认值。定义标准的字符 |
| bold | 定义粗体字符 |
| bolder | 更粗字体 |
| lighter | 更细字符 |
| 整百数值 | 100-900共九个数值，400等价于normal，700等价于bold |
| inherit | 规定从父元素继承字体的粗细 |
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
font-weight: 900;<!--设置字体粗细-->
}
</style>
</head>
<body>
世界上最甘甜的水
<p>是你流下的汗水</p>
</body>
</html>
效果：
2.1.5 字体颜色 color
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
font-weight: 900;
color: red;
}
</style>
</head>
<body>
世界上最甘甜的水
<p>是你流下的汗水</p>
</body>
</html>
效果：
2.2 文本属性 text
2.2.1 阴影文本 text-shadow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
font-size: 40px;
font-weight: 900;
color: red;
text-shadow: 10px 12px black;
}
</style>
</head>
<body>
<p>你流下的汗水</p>
</body>
</html>
图解：
效果：
再比如：
效果：
2.2.2 文字修饰 text- decoration
| 属性值 | 说明 |
|---|---|
| none | 默认值 |
| underline | 定义文本的下划线 |
| blink | 定义闪烁文本 |
| overline | 定义文本的上划线 |
| line-through | 定义文本的删除线 |
| inherit | 规定文本继承父元素的属性值 |
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
font-size: 40px;
font-weight: 900;
color: red;
text-decoration: line-through;
text-decoration-color: black;
}
</style>
</head>
<body>
<p>天道酬勤</p>
</body>
</html>
效果：
2.2.3 文本对齐方式
| 属性值 | 说明 |
|---|---|
| iR | 定义文本居中对齐 |
| center | 定义文本靠左对齐 |
| eft | 定义文本靠右对齐 |
| right | 定义文本两端对齐 |
| justify | 继承父元素的属性值 |
| inherit | 最后一行在行开头对齐 |
| start | 最后一行在行末尾对齐 |
2.2.4 垂直对齐方式 vertical-align
在网页文本编辑中，不仅需要水平对齐，有时还要求文字垂直对齐，即文字顶机对齐或底部对齐。在CSS中 ，t使用ial-align属性 来定义行内元索的基线相对于该元素所在行的基线垂直对齐。允许指定负长度值和百分比值使元素在垂直方向上发生变化。而在表格中，这个属性可以设置单元格内容的对齐方式。vertical- align的属性值如表所示。
| 属性值 | 说明 |
|---|---|
| baseline | 默认，定义元素放到父元素的基线上 |
| sub | 定义元素垂直对齐文本的下标 |
| super | 定义元素垂直对齐文本的上标 |
| top | 定义元素的顶端与行中最高元素的顶端对齐 |
| text-top | 定义元素的顶端与父元素字体的顶端对齐 |
| middle | 定义该元素在父元素的中部 |
| bottom | 把元素的底部与行中最低的元素的底部对齐 |
| text-bottom | 元素的底部与父元素的底部对齐 |
| length | 定义元素在行中的固定值 |
| % | 可以使用百分比定义元素在行中的位置 |
| inherit | 继承父元素的属性值 |
2.2.5 文本缩进 text indent
段落首行缩进两个字符表示个段落的开始，在网页文本编辑中可以通过属性来设定文本块的首行维进。text-indent的属性值如表所示，该属性对FHTML的任何标记都能让首行以给定的长度或百分比缩进。
| 属性值 | 说明 |
|---|---|
| length | 定义固定的缩进，默认值为0，单位为em或px |
| % | 定义基于父元素宽度的百分比的缩进 |
| inherit | 规定从父元素继承text-indent属性的值 |
2.2.6 文本行高 line- height
在CSS中，可用line height属性设置行间距。line- height的属性值如表所示。
| 属性值 | 说明 |
|---|---|
| normal | 默认值 |
| number | 设置具体数字，数字和当前字体尺寸相乘的积为间距的值 |
| length | 设置固定的行间距 |
| % | 根据当前字体尺寸的百分比来设置行间距 |
| inherit | 继承父元素的属性值 |
2546
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
