1.width 设置宽度
width : 100px；
2. 设置高度
height: 10px;
3. display
display: none 隐藏元素
display:block; 行元素转块元素
display:inline;块元素转行元素
display:inline-block; 行内块元素 ：让行元素有块的属性-例如a、span，可以设置行高
display:list-item; 此元素会作为列表显示。列表没有黑点而且可以自定义宽高
4. text-indent: 1em; 文字首行缩进字符
text-indent: 10% 也可以用百分比设置缩进距离
5. text-align:right 文字右对齐 text-align:left 文字左对齐
text-align:center 文字居中
6. word-spacing: 50px; 调整文字之间的间距
word-spacing: -0.5em; 也可以是负值
7. text-transform 字母大写小写转换
text-transform: capitalize 首字母变为大写 text-transform: uppercase 把所有字母转为大写
text-transform: lowercase把所有字母转为小写 text-transform:none 不变
8.text-decoration 给文字加线
text-decoration: underline 给文字加下划线 text-decoration: overline 给文字加上划线
text-decoration: line-through 给文字中间加线（在文字上） text-decoration: none 不改变文本样式 （可以给a标签去下滑线）
9.white-space 空格合并与保留
white-space: pre 每有一个空格就显示一个空格 white-space: nowrap 防止文字换行
white-space: pre-wrap 显示空格和换行 white-space: pre-line 合并空格保留换行
10.font-style 文字字体
font-style:italic; 倾斜体文字 font-style:oblique 倾斜体文字
11.font-weight 文字粗细
font-weight:normal 文字回复正常粗细400 font-weight:bold 文字加粗7000 font-weight:900 文字加粗100-900 分为9 个等级
12. a 标签 时段颜色
a:link {color:#FF0000;} 未被访问的链接
a:visited {color:#00FF00;} 已被访问的链接
a:hover {color:#FF00FF;} 鼠标指针移动到链接上
a:active {color:#0000FF;} 正在被点击的链接
连接加背景色
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
13. table 表格
border-collapse:collapse; 合并表格单线 border: 1px solid red; 设置边框厚度和颜色 vertical-align:bottom; 设置对齐上下左右
padding:15px; 设置内边距 background-color:green; 设置背景色 color:red; 设置文字颜色
14. 轮廓
outline:#00FF00 dotted thick; 轮廓参数1 颜色 2 样式 3 宽度
15. 内边距 padding: 10px 0.25em 2ex 20%; 上 右 下 左 可以设百分比 10%
16. 边框 border
border: 3px double blue; 参数1边框厚度 10px 2边框样式 solid 实线 dotted 点 dashed 虚线 double 双实线 3颜色
border-left-style: none; 左 border-right-style:solid 右 border-bottom-style:dotted 下 border-top-style:double 上
border-width: 15px 5px 15px 5px; 设置单边宽度 上 右 下 左 thin 、medium 、thick
border-top-width: 15px; border-right-width: 5px; border-bottom-width: 15px; border-left-width: 5px;
17. 外边距 margin
margin : 10px 0px 15px 5px; 外边距上右下左 margin: 1px; 等价于 1px 1px 1px 1px margin: auto auto auto 20px; 可以使用auto
18. position 定位
position: relative; 相对于之前位置移动位置，占用之前的位置 left 、top、right、bottom
position: absolute; 绝对定位相对于页面的绝对位置，不占用之前前位置 left 、top、right、bottom
19.float 浮动
float: left; 左浮动 float: right; 右浮动 clear: both; 清除浮动
20.选择器
元素选择器（html 标签） 选择器分组：多个选择器共用一个{ 方法 } 通配符 * 所有的元素都识别*下的{方法}
多类选择器 .aa{方法1} .cc {方法2} .aa.cc{方法3} 每个类选择器都自己的方法还能多个类选择器共用一个方法
ID 选择器 id 区分大小写
属性选择器 例如<a href="aaaaa"> a[href] {color:red;} 只要标签中有href属性 就会变成红色 属性可以自定义 例如 aa 、dd 、cc
后代选择器 div p{color: red;} 嵌套多少层都可以 格多少层都可以
子元素选择器 h1 > strong {color:red;} 只能改变h1 下直属的strong 标签如果嵌套多层则无效
21. 伪类选择器
a:link {color: red} 标签+事件变色 a.one:link {color: red} 标签+css+事件 =变色
更多属性
:active 向被激活的元素添加样式。
:focus 向拥有键盘输入焦点的元素添加样式。
:hover 当鼠标悬浮在元素上方时，向元素添加样式。
:link 向未被访问的链接添加样式。
:visited 向已被访问的链接添加样式。
:first-child 向元素的第一个子元素添加样式。
:lang 向带有指定 lang 属性的元素添加样式。
------------------------------------------------------------------
伪类元素 p:first-line 更多元素
:first-letter 向文本的第一个字母添加特殊样式。
:first-line 向文本的首行添加特殊样式。
:before 在元素之前添加内容。
:after 在元素之后添加内容。
22.其他
line-height: 200% 文字行间距 visibility:hidden 隐藏元素
网友评论