CSS介绍:
CSS:层叠样式表(Cascading style sheets)
作用:给页面中的HTML标签设置样式
css写在style标签中,style标签一般写在head标签里面,title标签下面
CSS 标点符号都是英文状态下的
每一个样式键值对写完之后,最后需要写分号
CSS常见属性 | 作用 |
---|---|
color | 文字颜色 |
font-size: | 文字大小 |
background-color | 背景颜色 |
width | 宽度 |
height | 高度 |
引入方式 | 书写位置 | 作用范围 | 使用场景 |
---|---|---|---|
内嵌式 | CSS 写在style标签中 | 当前页面 | 小案例 |
外联式 | CSS 写在一个单独的.css文件中 | 多个页面 | 项目中 |
行内式 | CSS 写在标签的style属性中 | 当前标签 | 配合js使用 |
通过标签名,找到页面中所有这类标签,设置样式
div {
color: red;
}
通过类名,找到页面中所有带有这个类名的标签,设置样式
.nav {
color: red;
}
通过id属性值,找到页面中带有这个id属性值的标签,设置样式
#nav {
color: red;
}
找到页面中所有的标签,设置样式
* {
color: red;
}
1️⃣字体大小:font-size(数字 + px)
2️⃣字体粗细:font-weight
正常:normal(400)
加粗:bold(700)
3️⃣字体样式(是否倾斜):font-style
正常:normal(默认值)
倾斜:italic
如果给同一个标签设置了相同的属性,此时样式会层叠(覆盖),写在最下面的会生效,所谓的层叠即叠加的意思,表示样式可以一层一层的层叠覆盖
写法:font : style weight size family(swsf 时五十分)
只能省略前两个,如果省略了相当于设置了默认值
文本缩进:text-indent(1em)
推荐:1em = 当前标签的font-size的大小
text-align属性给文本所在标签(文本的父元素)设置
属性值 | 效果 |
---|---|
left | 左对齐 |
center | 居中对齐 |
right | 右对齐 |
开发中会使用 text-decoration : none ; 清除a标签默认的下划线
属性值 | 效果 |
---|---|
underline | 下划线(常用) |
line-through | 删除线(不常用) |
overline | 上划线(几乎不用) |
none | 无装饰线(常用) |
div–p–h:水平居中(margin : 0 auto ; 实现)
行高:line-height(px)
让单行文本垂直居中可以设置 line-height : 文字父元素高度
网页精准布局时,会设置 line-height : 1 可以取消上下间距
打开方式:① 右击 → 检查 ② 看哪里
控制样式:① 修改属性值 ② 添加属性 ③ 控制样式生效
特殊情况:① 出现删除线 ② 出现小三角形