CSS 基础

小程序 不得不了解一下样式 这里记录一下

由选择器和声明组成 声明又由属性和值组成
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

• 1. [position : absolute] 元素的display显示类型就会自动变为以 display:inline-block
• 2. float : left float:right 元素的display显示类型就会自动变为以 display:inline-block