学习目标
- div和span学习
- CSS整体感知
- 基本选择器
- 高级选择器
- 文字相关属性
- 盒子模型
补充知识点:
- vscode快速生成表格
- 表格标题
cation - 单元格合并
列合并单元格:colspan
行合并单元格:rowspan - 带语义的表格结构
thead:表头 tbody:表主体 tfoot:表尾
1,div和span学习
div 本身不产生任何样式,division(分割),将页面上分割很多区域,这些区域就是容器。将相同语义的内容放在一个容器里。将层次和结构划分得非常清楚。div+css
div 划分网页结构
css 描述页面样式
span 本身也不会产生任何样式,作用和div类似,也是用来分割,分割的对象是文本
2,css整体感知
CSS全称叫 层叠样式表 Cascading Style Sheet
网页分为三层结构:
- HTML 结构层从语义的角度描述页面的结构。
- CSS 样式层从审美的角度来装饰页面。
- JS 行为层从交互的角度增加动态效果。
CSS最新的版本是CSS3,本次课学习的是CSS2
CSS核心的两件事:
- 选择谁 通过选择器来选择
- 设置成什么样 通过样式属性来设置.
3,基本选择器
- 标记选择器
- id选择器
- 类选择
(1), 标记选择器
写法:标记名{}
rgb :r表示red g表示green b表示blue
其中每一种颜色的取值范围是从00到FF,完整的取值范围就是000000到FFFFFF,注意在要前面加一个“#”。
另一种颜色表示方法,是使用 rgb(red, green, blue),其中red,green,blue这三个颜色的取值范围是按照10进制来的0~255
是对当前页中的所有的该标记进行同样的样式设置。
局限性:给所有的该标记进行样式设置
#### (2),id选择器
仅控制具有这个id的元素的样式
写法:#id{}
局限性:只能对一个元素进行样式设置
(3),类选择器
写法:.类名{}
在标记中设置class属性
4,高级选择器
(1)分组选择器(并集选择器)
选择器1,选择器2,选择器3,…{}
(2)后代选择器
选择器1 选择器2 …{}
(3)交集选择器
标记.类名{}
这里的类的权重要大于直接的类选择器
(4)通配符
格式:*{}
基本选择器的权重:id选择器>类选择器>标记选择
标记中可以使用多个类,用空格隔开即可
如果两个类或多个类中出现样式矛盾的情况,则按照样式表定义的顺序的最后那个为准
- 重叠 控制一个元素样式的样式表是多个,就是重叠了起来。
- 继承 如果一个元素的样式继承他的祖先元素的样式,这种现象就叫继承。
以下属性有继承关系:
color
text-系列 : 比如text-decoration:underline;
font-系列: 比如font-size:30px;
line-系列
5,文字相关属性
一般都是以font-开头
font-family: 字体名称1,字体名称2,…;字体(备用字体)
font-size:像素; 字体大小
font-weight:bold/normal/数字; 加粗
font-style:italic; 倾斜
text-decoration:underline/none; 下划线/取消下划线
font: 50px/100px 字体 …(其它跟文字相关的属性)
- 光写font: 字号/行高 无效
6,盒子模型
一个盒子应该有哪些属性:边框,外边距,内边距,content,width,height。
注意:
- width和height属性设置的不是边框的宽和高,而是content的宽和高。
- margin的合并:如果挨着的两个盒子都设置了margin,则他们之间的间距将取其中设置最大的盒子的margin。
- 边框总体:border:颜色 边框宽度 边框样式
左边框:border-left:颜色 边框宽度 边框样式
上边框:border-top:颜色 边框宽度 边框样式
右边框:border-right:颜色 边框宽度 边框样式
下边框:border-bottom:颜色 边框宽度 边框样式 - 外边距总体:margin: 宽度
左边距:margin-left:宽度
上边距:margin-top:宽度
右边距:margin-right:宽度
下边距:margin-bottom:宽度 - 内间距总体:padding: 宽度
左间距:padding-left:宽度
上间距:padding-top:宽度
右间距:padding-right:宽度
下间距:padding-bottom:宽度 - 盒子居中的方法:上下固定,左右auto,就可以让该元素在父级元素中居中。
margin属性的4种写法:
- 一个数字:表示所有的外边距都使用这个数字,如:margin:20px;
- 两个数字:前面的数字表示上下外边距,后面数字表示左右的外边距。如:margin: 10px auto;
- 三个数字: 三个数字表示上,右(左),下方向。如:
margin:10px 20px 30px; - 四个数字: 四个数字分别表示上,右,下,左方向。如:
margin: 20px 30px 40px 50px;
- 如果设置了左右的外边距,但是左右的距离要大于左右外边距之和时,将优先设置为左边距。同样,如果上下的距离大于你设置的上下外边距之和,则先设置为上面的外边距。
某个方向的border具体设置举例:
左:
border-left-color: cyan;
border-left-width: 10px;
border-left-style: dashed;
右:
border-right-color: cyan;
border-right-width: 10px;
border-right-style: dashed;
上:
border-top-color: cyan;
border-top-width: 10px;
border-top-style: dashed;
下:
border-bottom-color: cyan;
border-bottom-width: 10px;
border-bottom-style: dashed;
- 注意,如果出现冲突的情况,按照最后优先原则来进行样式设置,如:
.box{
border-left-color: cyan;
border-left-width: 10px;
border-left-style: dashed;
border: 2px red sol
}
左边框的样式将按照最后那条border的设置
padding属性值的四种写法
- 一个数字:表示所有的内间距都使用这个数字,如:padding:20px;
- 两个数字:前面的数字表示上下内间距,后面数字表示左右的内间距。如:padding: 10px 20px;
- 三个数字: 三个数字表示上,右(左),下方向。如:
padding:10px 20px 30px; - 四个数字: 四个数字分别表示上,右,下,左方向。如:
padding: 20px 30px 40px 50px;
补充知识:怪异盒模型
设置容器的box-sizing属性值为 border-box,则width和height从border开始计算