“本部分记录了CSS基础的内容”
目录
1.CSS引入方式
(1)内嵌式
CSS写在style标签中,通常位于html的<head>元素中。
<!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">
<!-- 在这里 -->
<style>
...
</style>
<title>Document</title>
</head>
<body>
...
</body>
</html>
(2)外联式
CSS写在一个单独的.css文件中,通过<link>元素在html中引入。
href的值是.css文件的路径。
<!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">
<!-- 在这里 -->
<link href="..." rel="stylesheet">
<title>Document</title>
</head>
<body>
...
</body>
</html>
(3)行内式
CSS直接写在元素的style属性中,可以配合js使用。
<!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>
</head>
<body>
<!-- 在这里 -->
<p style="...">这是一段文本<p>
</body>
</html>
2.选择器
(1)标签
通过标签名找到页面的所有这类元素,从而设置样式。例如:
<p>标签选择器</p>
标签选择器:
p {
color:red;
}
(2)class
通过类名即class的值找到页面的所有拥有该类名的元素,从而设置样式。例如:
<p class="table1">标签选择器1</p>
<p class="table2">标签选择器2</p>
class选择器:
p.table1 {
color:red;
}
这样只会更改类名为table1的元素的属性。
注意:一个标签可以拥有多个类名,中间用空格隔开。
(3)id
通过id属性值,找到页面中带有这个id属性值的元素,设置样式,例如:
<p id="one“>id选择器<p>
id选择器:
p#one {
color:red;
}
注意:id属性值在一个页面中是唯一的,不可重复;一个元素只能拥有一个id属性值。
(4)通配符
通配符:*号;结构:
* {
css属性名:属性值;
}
通配符可以找到页面中的所有标签,简单理解为全局设定,极少用到。
3.文字和文本
(1)字体样式
属性名 | 取值 |
font-size(字体大小) | 数字+px |
font-weight(字体粗细) | 100~900整百数 |
font-style(字体样式) | 默认:normal;倾斜:italic |
font-family(字体) | 具体字体:微软雅黑、黑体、宋体等 |
(2)字体font属性复合
除了(1)中的单独设置,font还可以使用复合结构:
font:style weight size family;
如果想省略,只能省略前两个,并且省略相当于默认设置;
如果需要同时进行单独和复合设置,要把单独的写在复合的下边。
(3)文本样式
属性名 | 取值 |
text-indent(开头缩进) | 数字+px;数字+em(1em=当前标签font-size的大小) |
text-align(对齐方式) | left(居左);center(居中);right(居右) |
text-decoration(文本修饰) | underline(下划线);line-through(删除线);overline(上划线);none(无修饰) |
line-height(行高) | 数字+px;倍数(当前标签font-size的倍数) |
color(文字颜色) | 颜色名;rgb\rgba;十六进制 |
background-color(背景颜色) | 颜色名;rgb\rgba;十六进制 |
margin(标签水平居中) | 0 auto |
如果需要让文本水平居中,text-alilgn属性给文本所在元素的标签设置;
一般在网页精准布局时,会设置line-height : 1;来取消上下间距;line-height在font中连写是这样的:font : style weight size/line-height family; 它与size中间有一个"/"。
4.补充
无