1. CSS
1.1 概念
CSS(Cascading Style Sheet),层叠样式表,用于控制页面的样式
CSS 能够对网页中元素位置的排版进行像素级精确控制,实现美化页面的效果,能够做到页面的样式和结构分离(类似于对页面的展示进行 "化妆")
1.2 基本语法规范
选择器 + {一条 / N 条声明}
- 选择器决定针对谁修改(找谁)
- 声明决定修改啥(干啥)
- 声明的属性是键值对,使用**;**区分键值对,使用 : 区分键和值
tip:
- CSS 要写到 style 标签中
- style 标签可以放到页面的任意位置,一般放到 head 标签内
- CSS 使用 /* */ 作为注释(Ctrl + /)
1.3 引入方式
CSS 有 3 中引入方式,语法如下:
|------|-------------------------------------|-----------------------------------------------|
| 引入方式 | 语法描述 | 示例 |
| 行内样式 | 在标签内使用 style 属性,属性值是 CSS 属性键值对 | <div style="color:green">绿色</div> |
| 内部样式 | 定义 <style> 标签,在标签内部定义 CSS 样式 | <style>h1{...}</style> |
| 外部样式 | 定义<style>标签,通过 href 属性引入外部 CSS 文件 | <link rel="stylesheet" href="[CSS 文件路径]"> |
对比:
-
- 内部样式会出现大量的代码冗余,不方便后期的维护,所以不常用
-
- 行内样式,只适合于写简单样式,只针对某个标签生效
-
- 外部样式,html 和 css 实现了完全分离,企业开发常用方式
1.4 规范
样式大小写:虽然 CSS 不区分大小写,但是推荐开发时统一使用小写字母
空格规范:1. 冒号后面带空格;2. 选择器和 { 之间也有一个空格
1.5 CSS 选择器
CSS 选择器的主要功能就是选中页面指定的标签元素,选中了元素,才可以设置元素的属性
CSS 选择器主要分为以下几种:
1) 标签选择器
2) 类选择器
一个类可以被多个标签使用,一个标签也能使用多个类(多个类名要用空格分隔,这种做法可以让代码更好复用)
3) ID 选择器
4) 通配符选择器
5) 复合选择器
tip:
- 以上三个标签选择器 ul li a 中的任何一个,都可以替换成类选择器,或者 id 选择器,可以是任意选择器的组合,也可以是任意数量选择器的组合
- 不一定是相邻的标签,也可以是 "孙子" 标签
- 如果需要选择多种标签,可以使用 **,分隔,如p, div { }**表示同时选中 p 标签和 div 标签,逗号前后可以是以上任意选择器,也可以是选择器的组合
1.6 常用 CSS
1.6.1 color 设置字体颜色
html
<style>
.text1 {
color: red;
}
</style>
颜色的几种表达方式:
- 英文单词,如 red、blue
- rgb 代码的颜色,如 rgb(255, 0, 0)
- 十六进制的颜色,如 #ff00ff
1.6.2 font-size 字体大小
html
.text1 {
font-size: 32px;
}
1.6.3 border 边框
边框是一个复合属性,可以同时设置多个样式,不分前后顺序,浏览器会根据设置的值自动判断
html
.text1 {
border: 1px solid purple;
}
以上 border 属性的对应设置的维度分别为边框粗细,边框样式,边框颜色
也可以拆开来设置,如下:
|--------------|--------|------------------------------------------|
| 样式 | 说明 | 取值 |
| border-width | 设置边框粗细 | 数值 |
| border-style | 设置边框样式 | dotted : 点状 solid:实线 double:双线 dashed:虚线 |
| border-color | 设置边框颜色 | 同 color |
上面的 border: 1px solid purple; 就等同于以下代码
html
.text1 {
border-width: 1px;
border-style: solid;
border-color: purple;
}
tip:
1.6.4 width / height(宽度 / 高度)
只有块级元素可以设置宽高
块级元素是 HTML 标签的一种显示模式,对应的还有行内元素
常见块级元素:h1-h6、p、div 等
常见行内元素:a span
块级元素独占一行,可以设置宽高
行内元素不独占一行,不能设置宽高
可使用 display 属性修改元素的显示模式
display:block 改成块级元素(常用)
display:inline 改成行内元素(很少用)
1.6.5 padding 内边距
设置内容和边框之间的距离
内容默认是顶着边框来放置的,用 padding 来控制这个距离
padding 也是一个复合样式,可以对四个方向分开设置
- padding-top
- padding-right
- padding-bottom
- padding-left
1.6.6 外边距
设置元素和元素之间的距离
margin 也是一个符合样式,可以给四个方向都加上外边框
- margin-top
- margin-right
- margin-bottom
- margin-left