一. Css简介
1. Css2 ( Cascanding Style Sheets ) 层叠样式表
作用 : 设置HTML页面中的文本内容(字体 大小 对齐方式等) 图片的外形(宽高 边框样式 边距等) 及页面的外观显示样式
2. Css语法
css规则主要又两部分构成: 选择器 和 一条或多条声明
如 h1 { color : red; font - size : 14px; }
二. Css基础选择器
1. 通配符选择器
用 * 表示 通配符选择器可以选择文档中所有的标签
如 * { margin : 0; padding : 0; }
2. 标签选择器
选择HTML中的标签作为选择器
如 div { color : red; }
3. 类选择
用 . 表示 选取带有class的标签
如 .box { color : red; }
< div class = "box" > 内容 < /div >
4. id选择器
用 # 表示 选取带有指定id的标签
如 #box { color : red; }
< div id = "box" > 内容 < /div >
注意: id选择器具有唯一性 同一个页面中同样的id中只能出现一次
三. Css引入方式
Css引入方式有三种:
❶. 行内式 (内联样式)
❷. 内嵌式 (内部样式)
❸. 外链式 (外部样式i)
1. 行内式 (内联样式)
< div style = "color: red; font - size: 18px; " > 内容 < /div >
特点: 结构样式不分离 代码冗余 只作用当前标签
2. 内嵌式 (内部样式)
将css代码集中写在head头部标签中 用style标签包含
< head >
< style >
div { color: red; }
< /style >
< /head >
特点: 结构样式不完全分离 作用于当前页面
3. 外链式 (外部样式)
使用 link 标签链接 一般写在head头部标签中
< head >
< link href = "css文件路径" rel = "stylesheet" >
< /head >
link标签属性:
❶. herf css文件路径
❷. rel 文档与链接文档之间的关系
特点: 结构样式完全分离 作用于多个页面
四. 文本字体属性
1. Css字体属性
❶. font - size 字体大小
❷. font - family 字体系列 (微软雅黑 宋体 楷体等)
❸. font - weight 字体粗细
属性:
Ⅰ. bold 粗体
Ⅱ. normal 正常
Ⅲ. 可以使用 100~900 范围内数值 (700 为加粗 400 为正常)
❹. font - style 字体样式
属性值:
Ⅰ. noemal 正常
Ⅱ. italic 倾斜
❺. line - height 行高
Ⅰ. 值可以为像素单位 px
line - height: 30px;
Ⅱ. 也可以设置数字 (此值会与当前字体大小相乘来设置行高)
line - height: 3;
❻.单行文本水平居中和垂直居中
Ⅰ. 水平居中 text - align: center;
Ⅱ. 垂直居中 line - height: 当前盒子高度;
2. Css文本属性
❶. color 文本颜色
❷. text - align 文本对齐方式
属性值:
Ⅰ. left 左对齐 (默认值)
Ⅱ. right 右对齐
Ⅲ. center 居中对齐
Ⅳ. justify 两端对齐
❸. text-decoration 文本装饰
属性值:
Ⅰ. none 没有装饰 (默认值)
Ⅱ. underline 下划线
Ⅲ. overline 上划线
Ⅳ. line-trough 删除线
❹. text-indent 文本首行缩进 (可以使用px em)
五. C ss长度单位
1. px 像素值 绝对长度单位
2. em 相对长度单位
3. % 百分比 (相当于父标签)
4. rem 相对字体长度单位 (移动端)
六. Css颜色表示
1. css颜色有三种写法:
❶. 英文单词 color: red;
❷. 六位十六进制 color: #ffffff;
❸. rgb colro: rgb( 255, 255, 255 )
2. 透明度写法
rgba ( 255, 255, 255, 0.2 );
最后一个参数是介于0.0(完全透明) 和 1.0(完全不透明)之间 即0~1之间取值
七. HTML列表
1. 无序列表
< ul >
< li > 内容 < /li >
< /ul >
注意: 可以使用 list - style - type : none; 清除无序列表自带的小圆点
2. 有序列表
< ol >
< li > 内容 < /li >
< /ol >
3. 自定义列表
< dl >
< dt > 内容 < /dl >
< dd > 内容 < /dd >
< /dl >
八. HTML表格
1. 表格的基本结构
❶. table 表格标签
❷. tr 行
❸. td 单元格 ( th 表格标题单元格)
2. 表格完整结构
❶. thead 表格头部
❷. tbody 表格主体
❸. tfoot 表格底部
❹. caption 表格标题
3. 表格属性
❶. boder 边框
❷. cellspacing 单元格与单元格之间距离
❸. cellpadding 文字与单元格边框的距离
4. 合并单元格
❶. rowspan 跨行合并 (上下合并)
❷. colspan 跨列合并 (左右合并)
