基本选择器
1、通配(通用)选择器
语法 *{ 样式声明 }
作用:匹配任意类型的HTML元素
2、元素名称(标签)选择器
语法: 元素名称{ 样式声明 }
作用:选择所有同一元素名称的所有元素
3、类选择器
语法:HTML中通过class属性定义
<div class="box"></div>
css中以点进行标识:.
.类名 {
样式声明;
}
.box{
background-color:red;
}
作用:选择所有带有指定类名的元素
多类名的使用(词列表)
语法:空格隔开
4、id选择器
语法:HTML中通过id属性定义
<div class="box"></div>
css中以点进行标识:#
#id名称 {
样式声明;
}
#box{
background-color:red;
}
作用:选择所有带有指定类名的元素
注意:具有唯一性,一般用于页面唯一性的元素如头部、底部等,经常和 JavaScript 搭配使用。
类与id的命名规则
见词知义,尽量用英文;
始终建议以字母开头,可以包含数字、字母、下划线等
不要以数字开头
多个单词可以以驼峰式(newsCont)、中划线连接(news-cont)、下划线连接(news_cont)等
表格CSS 属性
表格边框
指定 CSS 表格边框,使用 border 属性,通常定义td,th的边框属性
表格会呈现双边框,是因为表和 th / td 元素有独立的边界。
table存在默认属性border-collapse:separate
表格的折叠边框
border-collapse 属性:设置表格的边框是否被合并为一个单一的边框
取值:
separate:边框独立(默认值)
collapse:相邻边框被合并
border-spacing:单元格之间的间距
border-spacing:水平方向 垂直方向;
border-spacing:一个值;代表水平方向和垂直方向的间距是一样的 注意:只有在 边框独立border-collapse: separate时才能用
单元格内容的垂直对齐
vertical-align 作用:垂直对齐属性设置垂直对齐,比如顶部,底部或中间
常用值
top顶部对齐
middle居中对齐
bottom底部对齐
CSS字体 ,文本属性
1、font-family:
作用:设置文本的字体系列
语法:font-family:字体名称
常用值:
一个字体名称或系列名称(介绍常用字体名称、字体系列)
微软雅黑 Microsoft YaHei
宋体 simsun
黑体 HeiTi
楷体 KaiTi
多个字体名称
逗号分开 如果浏览器不支持第一个字体,则会尝试下一个(回退机制)
2、font-size
作用:设置字体的大小
语法:font-size:值
常用值:
长度值(通常是像素px)
百分比(相对于父元素字号计算)
em
相对单位
如果用于字号,相当于父元素字号计算,如果用于其它属性,相对于当前元素的字号
一般浏览器默认的大小为16px,支持最小的字体为12px。
3、font-style
作用:设置字体的样式
语法:font-style:值
常用值:
normal默认值
italic斜体显示
4、font-weight
作用:设置字体粗细
语法:font-weight:值
常用值:
normal默认值
bold加粗
100-900九级字重, 400相当于normal,700相当于bold
5、line-height
作用:设置行高(效果是产生文本行间距)
语法:line-height:值
特性:实现单行文本的垂直居中
测量:文字高+行间距
打开px软件--在视图菜单---标尺(Ctrl+r)
参考线:在标尺上按住鼠标左键不松手,拖拽鼠标
按住alt键,放大图纸,为了测量更加准确,滚动滚轮,向外滚表示放大,向内滚表示缩小
方法:测量两行文字中间的间距,然后除以2,得到平均间距,拉出参考线,进行标注,方便测量
常用值
normal默认。设置合理的行间距。
px 设置固定的行间距。
百分比:相对于font-size计算
6、font简写
作用:设置所有字体属性
语法:font: 字体风格 字体加粗 字号/行高 字体;
依次【空格】隔开
总结:只有当【字号和字体】同时存在简写才是有效的,简写属性可以精简简代码
7、text-align:
作用:设置文本的水平对齐方式
语法:text-align:值
常用值
left居左对齐 [默认值]
right居右对齐
center居中对齐
text-align: justify文本两端对齐方式
注:适用于块状元素
8、text-decoration
作用:设置文本装饰
语法:text-decoration:值
常用值
none 默认。定义标准的文本。 【常用】
underline 定义文本下的一条线 【常用】
line-through 定义穿过文本的一条线。【比较常用】
overline 定义文本上的一条线。 【不常用】
9、text-indent
作用:设置文本块首行的缩进
语法:text-indent:值
常用值
默认值:0
长度值,px,em
百分比: 相对于元素内容宽进行计算
允许负值
10、color
作用:设置文字的颜色
语法:color:颜色值