认识CSS
CSS初识
CSS(Cascading style sheets)层叠样式表，用于美化
HTML标签最后一个相同样式名会覆盖掉之前的属性值，除非!important
CSS写在style标签中，style标签一般写在和head标签里面，title标签下面
美化对象{
属性名:属性值
}CSS引入方式
| 引入方式 | 书写位置 | 作为范围 | 使用场景 |
|---|---|---|---|
| 内嵌式 | CSS写在style标签中 | 当前页面 | 单页面 |
| 外联式 | CSS写在一个单独的.css文件中 需要通过link标签在网页中引入 | 多个页面 | 项目中 |
| 行内式 | CSS写在标签的style属性中 | 当前标签 | 配合js使用 |
媒体查询
内联样式
/* 视口宽度小于等于768px， 网页背景色是粉色 */
@media (max-width: 768px) {
body {
background-color: pink;
}
}
/* 视口宽度大于等于1200px， 网页背景色是skyblue */
@media (min-width: 1200px) {
body {
background-color: skyblue;
}
}外部CSS
<link rel="stylesheet" href="./one.css" media="(min-width: 992px)">
<link rel="stylesheet" href="./two.css" media="(min-width: 1200px)">基础选择器
提示
!important>行内样式>id选择器>类选择器>标签选择器>通配符选择器>继承
标签
任何HTML标签，如
class
id
通配符
警告
尽量少用，会占用系统资源，影响用户访问速度，建议使用标签选择器
显示模式
相关信息
display有下列属性
- inline
- inline-block
- block
字体样式
| 属性名 | 含义 | 取值 | 注意 |
|---|---|---|---|
| font-size | 字号 | 1.数字+px/em/rm 2.百分比 3.inherit | 谷歌默认文字大小为16px 单位需要设置 |
| font-weight | 字重 | 1.normal/bold 2.100的整百数 | 不是所有字体都支持 |
| font-style | 倾斜 | normal/italic | |
| font-family | 字体 | 字体名称 | 最后一项不需要引号包裹 |
复合写法
div {
/* font:style weight/line-height family*/
font:italic 700 24px/1.8 宋体;
}文本样式
| 名称 | 说明 | 值 |
|---|---|---|
| text-indent | 缩进 | |
| text-align | 水平对齐 | left/center/right |
| text-decoration | 修饰线 | underline/line-through/overline/none |
| line-height | 行高 | 行高=字体大小，实现垂直居中 |
居中
水平居中
div {
width: 300px;
height: 300px;
background-color: pink;
margin: 0 auto;
}垂直居中
div {
width: 552px;
height: 400px;
background-color: pink;
/* background-color: green; */
text-align: center;
/* 文字是单行的 */
/* 垂直居中技巧: 设置行高属性值 = 自身高度属性值 */
line-height: 400px;
font-size: 61px;
}