目录
CSS
CSS(Cascading Style Sheet)，层叠样式表, ⽤于控制⻚⾯的样式.
CSS 能够对⽹⻚中元素位置的排版进⾏像素级精确控制, 实现美化⻚⾯的效果. 能够做到⻚⾯的样式和结构分离.
语法
<style>
p {
/* 设置字体颜⾊ */
color: red;
/* 设置字体⼤⼩ */
font-size: 30px;
}
</style>
<p>hello</p>引入方式
| 引入方式 | 语法描述 | 示例 |
| 行内样式 |
在标签内使⽤style属性，属性值是css属性键 值对 |
<div style="color:green">绿⾊</div> |
| 内部样式 |
定义<style>标签，在标签内部定义css样式 |
<style> h1 {...} </style> |
| 外部样式 |
定义<link>标签，通过href属性引⼊外部css ⽂件 |
<link rel="stylesheet" href="[CSS⽂件路 径]"> |
3种引⼊⽅式对⽐:
选择器
CSS 选择器的主要功能就是选中⻚⾯指定的标签元素. 选中了元素, 才可以设置元素的属性.
CSS选择器主要分以下⼏种:
我们通过代码来学习CSS选择器的使⽤.
标签选择器
/* 选择所有的a标签, 设置颜⾊为红⾊ */
a {
color: red;
}
/* 选择所有的div标签, 设置颜⾊为绿⾊ */
div {
color: green;
}类选择器
/* 选择class为font32的元素, 设置字体⼤⼩为32px */
.font32 {
font-size: 32px;
} ⼀个类可以被多个标签使⽤, ⼀个标签也能使⽤多个类(多个类名要使⽤空格分割, 这种做法可以让
代码更好复⽤)
ID选择器
/* 选择id为submit的元素, 设置颜⾊为红⾊ */
#submit {
color: red;
}id 是唯⼀的, 不能被多个标签使⽤ (是和 类选择器 最⼤的区别)
通配符选择器
/* 设置⻚⾯所有元素, 颜⾊为红⾊*/
* {
color: red;
}复合选择器
/*只设置 ul标签下的 li标签下的 a标签, 颜⾊为红⾊*/
ul li a {
color: blue;
} 1. 以上三个标签选择器 ul li a 中的任意, 都可以替换成类选择器, 或者id选择器, 可以是任意选
择器的组合, 也可以是任意数量选择器的组合
2. 不⼀定是相邻的标签, 也可以是"孙⼦"标签
3. 如果需要选择多种标签, 可以使⽤ , 分割, 如 p, div { } 表⽰同时选中p标签和div标签.
逗号前后可以是以上任意选择器, 也可以是选择器的组合.
常用CSS
color
color: 设置字体颜⾊
.text1{
color: red;
}font-size
font-size: 设置字体⼤⼩
.text1{
font-size: 32px;
}border
border: 边框
边框是⼀个复合属性, 可以同时设置多个样式, 不分前后顺序, 浏览器会根据设置的值⾃动判断
.text{
border: 1px solid purple;
}以上border属性的对应设置的维度分别为边框粗细, 边框样式, 边框颜⾊.
也可以拆开来设置
| 样式 | 说明 | 取值 |
|
border-width |
设置边框粗细 | 数值 |
|
border-style |
设置边框样式 |
dotted : 点状
solid : 实线 double : 双线 dashed: 虚线 |
|
border-color |
设置边框颜⾊ |
同 color |
border: 1px solid purple; 就等同于以下代码:
.text1 {
/* border: 1px purple solid; */
border-width: 1px;
border-style: solid;
border-color: purple;
}width和height
width: 设置宽度
height: 设置⾼度
只有块级元素可以设置宽⾼
padding
padding: 内边距, 设置内容和边框之间的距离.
内容默认是顶着边框来放置的. ⽤ padding 来控制这个距离。
padding也是⼀个复合样式, 可以对四个⽅向分开设置 ：
外边距
margin: 外边距, 设置元素和元素之间的距离.
margin也是⼀个复合样式, 可以给四个⽅向都加上外边距