(1)CSS概述:
层叠样式表(Cascading Style Sheets),是一种样式表语言,用来描述HTML文档的呈现(美化内容)。
(2)代码格式:
<style>
选择器{
CSS属性
}
</style>
(3)CSS引用方式:
- 内部样式表:CSS代码写在style标签里面。
- 外部样式表:CSS代码写在单独的CSS文件中(.css) ;在HTML使用link标签引入,格式如下。
<link rel = "stylesheet" href = "./my.css">
- 内行样式:配合JavaScript使用;CSS写在标签的style属性值里。
<div style="color:red;font-size:20px;">这是div标签</div>
(4)基本选择器(格式使用外部选择器):
- 标签选择器
<style>
标签名 {
CSS属性
}
</style>
- 类选择器
<style>
/* 1.定义类选择器——>.类名 */
.red {
color: red;
}
</style>
<!-- 2.使用类选择器——>标签里添加class="类名" -->
<div class="red">这是div标签</div>
<!--注意:
1.类名自定义(见名知意),不要使用纯数字或中文,尽量使用英文命名;
2.定义类选择器可以供多个标签使用;
3.一个标签可以使用多个类名,类名之间要用空格隔开;
-->
- id选择器
<style>
/* 1.定义id选择器——>#id名 */
#red {
color: red;
}
</style>
<!-- 2.使用id选择器——>标签里添加id="id名" -->
<div id="red">这是div标签</div>
<!-- 注意:同一个id选择器在一个页面只能使用一次 -->
- 通配符选择器
<!-- 通配符选择器:*,不需要调用,浏览器自动查找页面所有标签,设置相同的样式 -->
<style>
* {
color: #000;
}
</style>
(5)文字控制属性:
描述 | 属性 | 说明补充 |
字体大小(字号) | font-size | PC端常用单位px,谷歌浏览器默认字号16px |
字体粗细 | font-weight | 属性值——正常:400/normal 加粗:700/bold |
字体倾斜 | font-style | 属性值——正常(不倾斜):normal 倾斜:italic |
行高 | line-height | 属性值——数字+px 数字(当前标签font-size属性值的倍数) 行高由上间距,文本高度和下间距组成。 |
字体族 | font-family | 属性值——字体名1,字体名2...,字体族名(可只写一个字体名) font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif; |
字体复合属性 | font | 是否倾斜 是否加粗 字号/行高 字体(必须按照顺序书写,字号和字体值必须书写,否则font属性不生效) |
文本缩进 | text-index | 属性值——数字+px 数字+em(1em=1个字号大小) |
文本对齐 | text-align | 控制文本水平对齐,属性值——左对齐:left 居中对齐:center 右对齐:right |
修饰线 | text-decoration | 属性值——无:none 下划线:underline 删除线:line-through 上划线:overline |
- color 文字颜色
颜色表示方法 | 属性值 | 说明 |
颜色关键字 | 颜色英文单词 | red,green,blue... |
rgb表示法 | rgb(r,g,b) | r,g,b表示红绿蓝三原色,取值0-255 |
rgba表示法 | rgba(r,g,b,a) | a表示透明度,取值:0-1 |
十六进制表示法 | #RRGGBB | #000000,#ffcc00,简写:#333,#fc0 |
(6)复合选择器
- 后代选择器
1.选中某元素的后代元素
2.写法:(父子选择器用空格隔开)
父选择器 子选择器{CSS属性},
- 子代选择器
1.选中某元素的子代元素(最近的子级)
2.写法:(父子选择器用>隔开)
父选择器 > 子选择器{CSS属性}
- 并集选择器
1.选中多组标签设置相同的样式
2.写法:(选择器之间用,隔开)
选择器1,选择器2,...,选择器N {CSS属性}
- 交集选择器
1.选中同时满足多个条件的元素
2.写法:(选择器之间连写,没有任何东西隔开)
选择器1选择器2{CSS属性}
3.注意:如果交集选择器中含有标签选择器,标签选择器必须写在最前面。
- 伪类选择器
1. 伪类表示元素状态,选中元素的某个状态设置样式。
2.鼠标悬停状态:选择器:hover{CSS属性}
超链接伪类:
- 如果要给超链接设置以下四种状态,需要按LVHA的顺序书写。
选择器 | 作用 |
:link | 访问前 |
:visited | 访问后 |
:hover | 鼠标悬停 |
:active | 点击时(激活) |
(7)CSS特性:
- 继承性
- 子级默认继承父级的文字控制属性;
- 注意:如果标签有默认文字样式会继承失败,例如:a标签的颜色,标题的字体大小。
- 层叠性
- 相同的属性会覆盖:后面的CSS属性覆盖前面的CSS属性;
- 不同的属性会叠加:不同的CSS属性都会生效;
- 注意:选择器类型相同则遵循层叠性,否则按选择器优先级判断;
- 优先级
- 基础选择器:通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important (选中标签的范围越大,优先级越低)。
- 复合选择器:叠加计算,计算公式:(行内样式,id选择器个数,类选择器个数,标签选择器个数)
- 规则
- 从左向右依次比较选个数,同一级个数多的优先级高,如果个数相同,则向后比较
- !important 权重最高
- 继承权重最低
(8)背景属性
描述 | 属性 | 属性值 |
背景色(bgc) | background-color | |
背景图(bgi) | background-image | url(背景图路径),背景图默认有平铺(复制)效果 |
背景图平铺方式(bgr) | background-repeat | no-repeat:不平铺 repeat:平铺(默认效果) repeat-x:水平反向平铺 repeat-y:垂直方向平铺 |
背景图位置(bgp) | background-position | 水平方向位置 垂直方向位置
|
背景图缩放(bgz) | background-size |
|
背景图固定(bga) | background-attachment | fixed 背景不会随着元素的内容滚动 |
背景复合类型 | background | 背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定(空格隔开各个属性值,不区分顺序) |
(9)显示模式
- 块级元素
- 独占一行
- 宽度默认是父级的100%
- 添加宽高属性生效
- 行内元素
- 一行可显示多个(不换行)
- 宽高尺寸由内容撑开
- 添加宽高属性不生效
- 行内块元素
- 一行可以显示多个
- 宽高尺寸可以由内容撑开
- 添加宽高属性生效
转换显示模式
属性值:
block——块级
inline-block——行内块
inline——行内