CSS定义
层叠样式表（Cascading Style Sheets, 缩写为CSS）,是一种样式表语言，用来描述HTML文档的呈现（美化内容）
CSS书写规则
选择器 {
属性名:属性值;
}CSS引入方式
- 内部样式表
- CSS代码直接写在style标签内
- 外部样式表
- CSS代码写在单独的CSS文件中，使用link标签引入
- 行内样式
- CSS代码直接写在想要应用样式的标签中
<!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="./02_CSS.css">
</head>
<body>
<p>这个段落应用外部引入CSS</p>
<div style="color: blue; font-size: larger;">这个标签应用行内样式引入CSS</div>
</body>
</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>
<style>
.mySheet1 {
color: blueviolet;
font-size: larger;
}
.mySheet2{
color: chartreuse;
font-size: x-large;
}
</style>
</head>
<body>
<p class="mySheet1">段落1</p>
<p class="mySheet2">段落2</p>
<p class="mySheet1 mySheet2">段落3</p>
<p>段落4</p>
</body>
</html>- id选择器
- 查找标签，差异化设置标签的显示效果
- id选择器一般配合JS使用
- 同一个id在一个页面中只能使用一次
<!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>
#hd{
color: blue;
font-size: large;
}
</style>
</head>
<body>
<p id="hd">标题</p>
</body>
</html>- 通配符选择器
- 查找页面所有标签，设置相同样式
- 实际开发中用于清除默认样式
文字控制属性
- font-size属性
- 必须带单位px
- 谷歌浏览器默认像素大小为16px
- font-weight
- 属性值可以是数字正常是400，加粗是700
- 也可以是关键字，正常是normal，加粗是bold
- font-style
- 通常用于清除文字倾斜效果
- 属性值正常是normal，倾斜是italic
- line-height
- 设置多行文字的间距
- 属性值通常是数字+px，或数字（表示当前标签font-size属性值的倍数）
- 测量行高的方法：
- 从一行文字的最顶（最底）测量到下一行文字的最顶（最底）
- 单行文字垂直居中（只适用于单行文字）
- 只需设置当前行高为盒子高度即可
<!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>
div {
height: 100px;
line-height: 100px;
background-color:bisque;
}
</style>
</head>
<body>
<div>文字</div>
</body>
</html>- font-family
- 属性值为想要的字体
- 属性值可以填写多个字体名，各个字体名之间使用逗号隔开，执行顺序按照从左到右，找到哪个用哪个
- font复合属性
- 这是一种属性的简写方式，一个属性对应多个值的写法，各个属性值之间使用空格隔开
- font: 是否倾斜 是否加粗 字号/行高 字体（必须按照顺序填写）
- 字号和字体必须填写，否则效果不生效
- text-indent
- 属性值可以是数字+px，或数字+em（1em=当前标签的字号大小）
- 用于文字的缩进
- text-align
- 控制内容的水平对齐方式
- 属性值有三种：left,center,right分别对应左中右对齐
- text-align本质是控制内容的对齐方式，属性要设置给内容的父级
- 例如给div里的图片设置居中，那么需要将div的text-align设置为center
- text-decoration
- 该属性通常用于删除a标签的下划线
- 属性值有none、underline、line-through、overline分别对应无、下划线、删除线、上划线
- color
