1 基础认识
层叠样式表（Cascading style sheets），给页面中的HTML标签设置样式
1.1 CSS语法规则
- 位置：css写在style标签中，style标签一般写在head标签里面，title标签下面
- 常见属性
- color：文字颜色
- font-size：文字大小
- background-color：颜色背景
- width：宽度
- height：高度
1.2 CSS引入方式
-
内嵌式：CSS 写在style标签中
style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中
-
外联式：CSS 写在一个单独的.css文件中,需要通过link标签在网页中引入
-
行内式：CSS写在标签的style的属性中，配合js使用
2 基础选择器
作用：选择页面中对应的标签，方便后续设置样式
-
标签选择器
通过标签名，找到页面中所有这类标签，设置样式
标签名{ css属性名：属性值； } -
类选择器
通过类名，找到页面中所有带有这个类名的标签，设置样式
.类名{ css属性名：属性值； }注意：
- 所有标签上都有class属性，class属性的属性值称为类名（类似于名字）。
- 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头。
- 一个标签可以同时有多个类名，类名之间以空格隔开。
- 类名可以重复，一个类选择器可以同时选中多个标签。
-
id选择器
#id属性值{ css属性名：属性值； }注意
- 所有标签上都有id属性
- id属性值在一个页面中是唯一的。
- 一个标签上只能有一个id属性值
- 一个id选择器只能选中一个标签
id一般配合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>
<style>
p{
font-size: large;
color: brown;
}
.common{
font-size: large;
color: brown;
}
#one{
font-size: large;
color: brown;
}
</style>
</head>
<body>
<p>让赤色的旗儿飘满全球</p>
<div class="common">让赤色的旗儿飘满全球</div>
<span id="one">让赤色的旗儿飘满全球</span>
</body>
</html>
3 字体和文本样式
3.1字体样式
-
字体大小：font-size
取值 数字+px，默认16px
-
字体粗细：font-weight
取值nomal（400）默认、bold（700）加粗
-
字体样式：font-style
取值normal默认、italic倾斜
-
字体系列：font-family
取值具体字体1,具体字体2,具体字体3,具体字体4,...,字体系列
- 具体字体："Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等……
- 字体系列：sans-serif、serif、monospace等……
注意
- 从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体，如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体
- 如果字体名称中存在多个单词，推荐使用引号包裹，最后一项字体系列不需要引号包裹
-
属性连写：font
取值 style weight size family;
需按顺序，只能省略前两个，如果省略了相当于设置了默认值 ，
3.2 文本样式
-
文本缩进：text-indent
取值 数字+px或数字+em
1em等于当前标签font-size的大小
-
文本水平对齐方式：
- text-align
- 取值 left/center/right
- 适用文本，span标签，a标签，input标签，img标签
- 属性值需要给以上元素的父元素设置
- margin
- 取值 数字+auto
- 适用div标签、p标签
- 直接给当前元素本身设置即可
- text-align
-
文本修饰：text-decoration
取值underline/none
-
行高：line-height
取值 数字+px或（当前标签font-size的倍数）