小程序 不得不了解一下样式 这里记录一下
由选择器和声明组成 声明又由属性和值组成
p { color : red}
提示
- /9 代表IE浏览器
样式
-
id{} id引入 在HTML文档中 只能使用一次
- .class{} 类引入
- .first>span{} 子选择器
- first span{} 包含选择器
作用于元素的第一代后代，空格作用于元素的所有后代。
- *.{} 通用选择符
- a:hover{} 伪类
- .first,#second span{} 分组选择符
特殊性
- 同时匹配多个标签时 标签权值为1 类权值为10 ID权值为100 包含p span{} 权值为 1+1 = 2；
背景
- background-color 背景色
- background-image 背景图
text
// 用来设置或者删除文本的装饰 不建议指出不是链接的文本
text-decoration:none;//标准文本
text-decoration:overline;// 上划线
text-decoration:line-through;// 中划线
text-decoration:underline; // 下划线
text-transform:uppercase;//转换大小写 lowercase / capitalize
text-indent:20rpx;// 缩进
letter-spacing:2rpx;//字符间距
line-height:70%//行间距
direction:rt1;//文本方向 ltr(left to right) rtl(right to left) inherit(继承)
word-spacing:30px;//增加单词之间的空格
white-space:nowrap//禁用文字环绕（只显示一行）
text-shadow:2px 2px #FF0000;// 设置文本阴影 第一个参数为x方向 第二个参数为Y方向
overflow:hidden 溢出内容为隐藏
text-overflow:ellipsis; 溢出时 显示省略号
字体系列
font-family:"Times New Romen"// 属性设置文本的字体系列；
font-style:"normal"//字体样式 正常
. font-weight:"normal"// 字体的粗细；
显示问题
display:inline;// 两个元素 显示在同一水平线上
display:block;// 两个元素之间的换行符
display:inline-block;// 显示到一行 但宽高可以设置
居中显示
定宽 width="200px" margin : 0 auto;
不定宽 父布局 text-align : center; 子布局 display : inline;
不定宽 父布局 postion : relative; left : 50%; 子布局 position : relative; left : -50%;
设置垂直居中 line-height:100px; // 行高为100%
父布局 设置 vertical-align :middle
- [position : absolute] 元素的display显示类型就会自动变为以 display:inline-block
- float : left float:right 元素的display显示类型就会自动变为以 display:inline-block
