1.文本操作
1.1文本颜色（color）
颜色指定方式：
- 十六进制值 - 如: ＃FF0000
- 一个RGB值 - 如: RGB(255,0,0)
- 颜色的名称 - 如: red
1.2水平对齐方式
text-align 属性规定元素中的文本的水平对齐方式。
- left 把文本排列到左边。默认值：由浏览器决定。
- right 把文本排列到右边。
- center 把文本排列到中间。
- justify 实现两端对齐文本效果。
文本换行：添加css属性
word-wrap:break-word;
word-break:break-all;
1.3文本其他操作
font-size: 10px; 字体大小，如果设置成inherit表示继承父元素的字体大小值 line-height: 200px; （文本居中用，记住记住） 文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比 vertical-align:－4px 设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效。 属性值：none | center | left | right | justify text-decoration:none text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线 属性值：none(默认) | underline(下划线) | overline(定义文本上的一条线) | line-through (定义穿过文本下的一条线) | inherit(继承父元素的text-decoration属性的值。) font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif 字体颜色。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。如果都不支持则显示宋体。 font-weight: lighter/bold/border/ 表示设置字体的粗细 属性值：none(默认值，标准粗细) | bold(粗体) | border(更粗）| lighter(更细) | 100~900（设置具体粗细，400等同于normal，而700等同于bold）| inherit（继承父元素字体的粗细值） font-style: oblique 设置字体的样式为斜体 text-indent: 150px; 设置首行缩进150px letter-spacing: 10px; 字母间距 word-spacing: 20px; 单词间距 text-transform: capitalize/uppercase/lowercase ; 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写
1.4背景属性
background-color:背景颜色
background-image:url('11.jpg'); 背景图片链接
background-repeat:repeat-x; x轴平铺
background-repeat:no-repeat; 不重复
background-position:400px 200px 调整背景的位置（距左。距右）
background-position: center:center; 背景居中
简写：
background: url('11.jpg') no-repeat center;
background-repeat相关属性：
| 值 | 描述 |
|---|---|
| repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
| repeat-x | 背景图像将在水平方向重复。 |
| repeat-y | 背景图像将在垂直方向重复。 |
| no-repeat | 背景图像将仅显示一次。 |
| inherit | 规定应该从父元素继承 background-repeat 属性的设置。 |
使用案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 400px; height: 400px; background-image: url('./timg.jpg'); border: 1px solid red; /*取消铺满模式*/ /*background-repeat: no-repeat;*/ padding: 50px; background-position: right left; } </style> </head> <body> <div></div> </body> </html>
效果：
1.5边框属性
常用属性
简写：border :1px soild red;
deshed:虚线
只加有一个方向的：border-right :1px soild red;
1.6列表属性
去掉列表前面的标志：ul li{list-style:none;}
去掉列表前面的空格：ul{padding:0}
2.块级标签与行内标签
行内元素：
与其他元素并排
无法设置宽，高，默认宽度就是文字宽度
块级元素：
独占一行，不与其他元素并列
能设置宽高，不设置则默认为父级的100%
从HTML角度讲，标签分为文本级标签（p、span、a、b、i、u、em）和容器级标签（div、h系列、li、dt、dd）
从CSS 角度讲，元素分为行内元素（除了p之外，所有的文本级标签，都是行内元素）和块级元素（所有的容器级标签都是块级元素，还有p标签）
2.1 块级元素和行内元素相互转换（display）
块级元素转换为行内元素：
display：inline
行内元素转换为块级元素：
display：block
像块级一样可设长宽，也可像内联一样在一行显示：
display:inline-block
把不想让用户看到的给隐藏了
display:none（不会影响布局）
或visibility :hidden（会影响布局）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } h1{ width: 300px; height: 100px; background: red; display: inline; /*隐藏当前的元素，但是不占当前位置*/ /*display: none;*/ /*隐藏当前的元素，但是占据当前位置*/ visibility: hidden; } span{ width: 100px; height: 100px; background-color: green; /*display: block;*/ } input{ width: 200px; height: 100px; } </style> </head> <body> <h1>1级标题</h1> <h1>1级标题</h1> <span>内容</span> <span>内容</span> <a href="#">百度</a> <a href="#">百度</a> <input type="text"> <input type="text"> </body> </html>