东莞市企业网站制作平台优化器
本节⽬标
- 掌握 CSS 基本语法规范和CSS选择器的各种⽤法, 熟练使⽤CSS的常⽤属性.
一.CSS介绍
1.什么是CSS?
CSS(Cascading Style Sheet)，层叠样式表, ⽤于控制⻚⾯的样式.
CSS 能够对⽹⻚中元素位置的排版进⾏像素级精确控制, 实现美化⻚⾯的效果. 能够做到⻚⾯的样式和结构分离.
CSS 可以理解为"东⽅四⼤邪术" 之化妆术.对⻚⾯的展⽰进⾏"化妆"
CSS前 -> CSS修饰后
2.基本语法规范
选择器 + {⼀条/N条声明}
- 选择器决定针对谁修改 (找谁)
- 声明决定修改啥. (⼲啥)
- 声明的属性是键值对. 使⽤ ; 区分键值对, 使⽤ : 区分键和值.
<head><title>Document</title><style>div{color: brown;}</style>
</head>注意:
- CSS 要写到 style 标签中(后⾯还会介绍其他写法
- style 标签可以放到⻚⾯任意位置. ⼀般放到 head 标签内.
- CSS 使⽤ /* */ 作为注释. (使⽤ ctrl + / 快速切换) .
3.引⼊⽅式
CSS有3种引⼊⽅式，语法如下表格所⽰：
3种引⼊⽅式对⽐:
- 内部样式会出现⼤量的代码冗余, 不⽅便后期的维护，所以不常⽤.
- ⾏内样式, 只适合于写简单样式. 只针对某个标签⽣效. 缺点是不能写太复杂的样式.
- 外部样式，html和css实现了完全的分离, 企业开发常⽤⽅式.
4.规范
样式⼤⼩写
虽然 CSS 不区分⼤⼩写, 我们开发时统⼀使⽤⼩写字⺟
空格规范
- 冒号后⾯带空格
- 选择器和 { 之间也有⼀个空格.
二.CSS选择器
CSS 选择器的主要功能就是选中⻚⾯指定的标签元素. 选中了元素, 才可以设置元素的属性.
就好⽐ SC2, War3 这样的游戏, 需要先选中单位, 再指挥该单位⾏动.
CSS选择器主要分以下⼏种:
1. 标签选择器
2. class选择器
3. id选择器
4. 复合选择器
5. 通配符选择器
我们通过代码来学习CSS选择器的使⽤.
1. 标签选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {color:purple;}a {color: antiquewhite;}</style>
</head>
<body><div>我是一个div</div><div>我是一个div2</div><div><a href="#">我是一个div3</a></div>
</body>
</html>2. 类选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 类选择器 */.cla1 {font-size: 40px;}</style>
</head>
<body><div id="div" class="cla1">我是一个div</div><div id="div2" class="cla1">我是一个div2</div><div id="div3" class="cla3"><a href="#">我是一个div3</a></div>
</body>
</html>
- ⼀个类可以被多个标签使⽤, ⼀个标签也能使⽤多个类(多个类名要使⽤空格分割, 这种做法可以让代码更好复⽤)
- 前面使用.标识
3. ID选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* id选择器 */#div {color: purple;}#div2 {color: red;}</style>
</head>
<body><div id="div" >我是一个div</div><div id="div2">我是一个div2</div><div id="div3"><a href="#">我是一个div3</a></div>
</body>
</html>
- id 是唯⼀的, 不能被多个标签使⽤ (是和 类选择器 最⼤的区别)
- 使用#和标签名区分
4. 通配符选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 通配符选择器 */* {color: rebeccapurple;}</style>
</head>
<body><div id="div" class="cla1">我是一个div</div><div id="div2" class="cla1">我是一个div2</div><div id="div3" class="cla3"><a href="#">我是一个div3</a></div>
</body>
</html>
- 使用*标识
5. 复合选择器
（1）中间使用“，”为并集
#div,#div2 {color: antiquewhite;}（2）具有父子关系的中间带空格，表示最关系最下面的更改
ul li {color: aquamarine;}1. 以上三个标签选择器 ul li a 中的任意, 都可以替换成类选择器, 或者id选择器, 可以是任意选择器的组合, 也可以是任意数量选择器的组合2. 不⼀定是相邻的标签, 也可以是"孙⼦"标签3. 如果需要选择多种标签, 可以使⽤ , 分割, 如 p, div { } 表⽰同时选中p标签和div标签.逗号前后可以是以上任意选择器, 也可以是选择器的组合.
三、 常⽤CSS
接下来学习⼀些常⻅的css样式
准备如下html
<div class="text1">我是⽂本1</div>1.color
color: 设置字体颜⾊
div {color: #fff;color:aliceblue;color:rgb(0,255,255);}颜⾊有如下⼏种表达⽅式:
- 英⽂单词,如red,blue
- rgb代码的颜⾊ 如rgb(255,0,0)
- ⼗六进制的颜⾊ 如#ff00ff
2.font-size
font-size: 设置字体⼤⼩
div {font-size: 200px;}3. border
border: 边框
边框是⼀个复合属性, 可以同时设置多个样式, 不分前后顺序, 浏览器会根据设置的值⾃动判断
div {width: 500px;height: 600px;border-width: 10px;border-style: dashed;border-color: aqua;}
以上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;
}
4.width/height
- width: 设置宽度
- height: 设置⾼度
只有块级元素可以设置宽⾼
块级元素是HTML标签的⼀种显⽰模式, 对应的还有⾏内元素
- 常⻅块级元素: h1-h6, p, div 等,块级元素独占⼀⾏, 可以设置宽⾼
- 常⻅⾏内元素: a span,⾏内元素不独占⼀⾏, 不能设置宽⾼
改变显⽰模式使⽤ display 属性可以修改元素的显⽰模式.
- display: block 改成块级元素 [常⽤]
- display: inline 改成⾏内元素 [很少⽤]
#div4 {display: block;width: 40px;height: 100px;border-color: brown;border-width:10px;border-style: dotted;}
5.padding
padding: 内边距, 设置内容和边框之间的距离.
内容默认是顶着边框来放置的. ⽤ padding 来控制这个距离
padding也是⼀个复合样式, 可以对四个⽅向分开设置
- padding-top
- padding-bottom
- padding-left
- padding-right
6.margin
margin: 外边距, 设置元素和元素之间的距离.
margin也是⼀个复合样式, 可以给四个⽅向都加上外边距
- margin-top
- margin-bottom
- margin-left
- margin-right