1.什么是css?
1. 层叠样式表 Castcading Style Sheets
2.css作用:更加专注于页面的样式表现
3. CSS语法 : 选择器{样式名:样式值;}
4.CSS的注释:/*注释内容*/
2.HTML引入CSS
1.行内 <p style="coclor:red;"></p>
2.内嵌
<style type="text/css">选择器{样式名:样式值;}........</style>
3.外联
<link rel="stylesheet" type="text/css" href="xx.css">
4.@import url(xxx.css) 多个css之间导入
3.CSS 常用选择器
1. * 通配符 选择器
2 .tag 标签 选择器
3. Class 类 选择器
4. ID id选择器
5. 群组选择器 [,] 逗号
6.后代选择器 [ ] 空格
7. 直接子集 [>] 大于号
8. 下一个相邻兄弟 [+] 加号
9. 通用兄弟选择器【~】 它以下的所有兄弟
选择器使用
1. p:first-child 选择第一行p标签
2. img:nth-of-type(标签顺序) 指定选择第几个ming标签
4.选择器的权重优先级
!important_10000 > 行内_1000 > ID_100 > Class_10 > tag_1 > *_0
多个并联选择器,使用权重求和计算
5. CSS 长度单位
1.PX 绝对像素
2. % 相对于 父节点的 百分比
3. VH/VW 相对于 可视窗口的 百分比 大小
4. em 相对于 父节点的 字体大小
5. rem 相对于 根节点 的 字体大小
6. cm,mm,pt 适合打印的单位
6. CSS颜色单位
1. 十六进制 #ff0000
2. rgb()/rgba() rgb(255,0,0)
3.英文单词 red
字体颜色, 背景色background—color 边框色border—color
7.字体文本样式
1.字体大小 font—size:30px
2.字体加粗 font—weight:900; (100—900 bold bolder light lighter)
3.字体倾斜 font—style:italic;(normal正常,italic倾斜)
4.字体类型 font—family:“楷体”;
简写:font:倾斜 加粗 字体大小/行高 楷体
5.字体对齐 text—align:center left right;
一行文字垂直居中:块高宽(height:58px;) 等于 行高(lin—height:58px;)
6.文本装饰线 text—decoration:overline 上划线, line—through 删除线,underline 下划线 none不加
10.块元素的下划线(只显示每行下边框) border—bottom:1px #cccccc solid;
7.文本首行缩进 text—indent:2em;
8.行高 line —height:50px;
9.英文变换 text-transform: capitalize uppercase lowercase;
10.空白处理 white—space: mormal默认 nowrap不换行 pre格式化文本
11.溢出选项 overflow: hidden隐藏 scroll水平垂直滑动条 auto根据内容自动
12.文本溢出 text—overflow:normal默认 ellipsis(文本溢出显示......)
13.单词间距 word—spacing: 10px
14.字符间距 letter—spacing:10px
15.display:inline—block; 修改类型为 行内块 支持宽高 不换行
8.如何去除行内元素的空格
1.父节点添加 font—size:0px;
2.子节点 还原字体大小
9.文本对齐方式
text—align:
left 左 默认
center 中间
right 右
justify 两端对齐 非最后一行 起作用
text—align—last:(最后一行对齐方式)此属性默认继承父节点、需要重新定义
left 左 默认
center
right
justify 两端对齐
vertical—align:
top 顶
middle 中
bottom 低
baseline 基线 默认