1.CSS基础
1.1语法规范
主要由2个部分构成:选择器以及一条或多条声明
-
选择器用于指定css样式的html标签,花括号内是对该对象设置的具体样式
-
属性和属性值以“键值对的形式出现”
-
属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等
-
属性和属性值之间用英文"":"分开
-
多个键值对之间用英文";"进行区分
1.2 CSS代码风格
1.样式格式书写(分行)
2.样式大小写(小写)
3.空格规划
1)属性值前面,冒号后面,保留一个空格;
2)选择器(标签)和大括号中间保留空格
h3 {
color: pink;
front: 12px;
}
2.CSS选择器的作用
2.1选择器作用
根据不同需求把不同的标签选出来就是选择器的作用。(选择标签)
<div>
我是div
</div>
<ul>
<li></li>
</ul>
2.2选择器分类
选择器分为基础选择器和复合选择器两大类
- 基础选择器是由单个选择器组成的
- 基础选择器又包括:标签选择器、类选择器、id选择器和通配符选择器
2.3标签选择器
用html标签名称作为选择器
2.4类选择器
类选择器口诀:样式点定义 结构类(class)调用 一个或多个 开发最常用
结构需要用class属性来调用class类的意思
.类名 {
属性值1: 属性值1;
}
<div class="red">
变红色
</div>
2.5id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式
2.6通配符选择器
在CSS中,通配符选择器用"*"定义,它表示选取页面中所有元素(标签)。
HTML元素以id属性来设置id选择器,CSS中选择器以"#"来定义
* {
属性值1:属性值1;
}
//清除所有元素标签的内外边距
* {
margin: 0;
padding: 0;
}
通配符选择器不需要调用,自动就给所有的元素使用样式
特殊情况才使用
2.7选择器总结
基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
---|---|---|---|---|
标签选择器 | 可以选出所有相同的标签,比如p | 不能差异化选择 | 较多 | p{color: red} |
类选择器 | 可以选出1个或多个标签 | 可以根据需求选择 | 非常多 | .nav{color: red} |
id选择器 | 一次只能选择1个标签 | ID属性只能在每个HTML文档中出现一次 | 一般和js搭配 | #nav{color: red} |
通配符选择器 | 选择所有标签 | 选择的太多,有部分不需要 | 特殊情况使用 | *{color:red} |
3.CSS字体属性
属性 | 表示 | 注意点 |
---|---|---|
font-size | 字号 | 用px像素,一定要跟上单位 |
font-family | 字体 | 实际工作中按照团队约定来写字体 |
font-weight | 字体粗细 | 加粗是700或者bold不加粗,400或者normal,数字不要跟单位 |
font-style | 字体样式 | 倾斜是italic,不倾斜是normal(常用), |
font | 字体连写 | 用顺序,字号和字体必须同时出现 |
4.CSS文本属性
属性 | 表示 | 注意点 |
---|---|---|
color | 文本颜色 | 十六进制 简写#fff |
text-align | 文本对齐 | 设定文字水平的对齐方式 |
text-indent | 文本缩进 | 段落首行缩进2个字的距离 text-indent:2em |
text-decoration | 文本修饰 | 下划线underline 取消下划线none |
line-height | 行高 | 控制行与行之间的距离 |
em是一个相对单位,就是(font-size)1个文字的大小
5.CSS引入方式
外部样式表
<link rel="stylesheet" href="css文件路径">
样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
---|---|---|---|---|
行内样式表 | 书写方便,权重高 | 结构样式漏写 | 较少 | 控制一个标签 |
内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面 |
外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多 | 控制多个页面 |
6.CSS段落属性
属性 | 说明 |
---|---|
text-decoration | 下划线、删除线、顶划线 |
text-transform | 文本大小写 |
font-varient | 将英文文本转换为"小型"大写字母 |
text-indent | 段落首行缩进 |
text-align | 文本水平对齐方式 |
line-height | 行高 |
letter-spacing | 字距 |
word-spacing | 词距 |