一、背景设置
1、background-color 设置元素背景颜色
background-color: red;
2、background-image 设置元素背景图片
background-image: url("python.png")
3、background-position 设置背景图片起始位置
background-position:center top;
为 background-position 属性提供值有很多方法。首先,可以使用一些关键字:top、bottom、left、right 和 center。通常,这些关键字会成对出现,不过也不总是这样。还可以使用长度值,如 100px 或 5cm,最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。我们这里不详细阐述属性值,需要用到的时候大家可以在 w3school 上面查找。
主要是对位置进行操作,也可以用
background-position:50% 50%;
以上百分比进行控制,前面的是左右百分比,后面的是上下百分比。
4、background-repeat 设置背景图片是否重复
background-repeat: no-repeat; <!--no-repeat 表示不能重复,repeat 可重复,repeat-x 表示 x 轴重复,repeat-y 表示 y 轴重复-->
5、background-attachment 背景图像是否固定或者随着其余部分滚动
background-attachment:fixed; <!--fixed申明可视区是固定的-->
二、CSS文本设置
1、color 文本颜色 例: color: aqua
2、direction 文本方向
direction 属性有两个值:ltr 和 rtl。大多数情况下,默认值是 ltr,显示从左到右的文本。如果显示从右到左的文本,应使用值 rtl。
3、line-height 行高
4、letter-spacing 字符间距
例:h4 {letter-spacing: 20px}
5、word-spacing 行间距
例:<h1 style="word-spacing:15px;">this is a test</h1>
6、text-align 对其元素中的文本
例: text-align: center; 有多个属性: left、right 和 center 分别是左右中对齐
7、text-decoration 向文本添加装饰
text-decoration 有 5 个值:
none 关闭原本应用到一个元素上的所有装饰。通常,无装饰的文本是默认外观,但也不总是这样。例如,链接默认地会有下划线。如果您希望去掉超链接的下划线
例:a {text-decoration: none;}
underline 对元素加下划线
overline 在文本的顶端画一个上划线
line-through 在文本中间画一个贯穿线
blink 会让文本闪烁,类似于 Netscape 支持的颇招非议的 blink 标记
8、text-indent 缩进元素中的字母
例:p {text-indent: 5em;}
9、unicode-bidi 设置文本方向
10、white-space 元素中空白的处理方式
在 Web 浏览器中显示时,各个字之间只会显示一个空格,同时忽略元素中的换行:
11、 text-transform 属性处理文本的大小写。
这个属性有 4 个值:
none 默认值不做任何改动
uppercase 转换成全大写
lowercase 转换成全小写
capitalize 将每一个单词的首字母转换成大写
例:h1 {text-transform: uppercase}
三、CSS连接设置
连接四种属性:
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
color: 设置连接的字体颜色
background-color: 设置连接的背景颜色例:
四、列表标志
标志
list-style-type:属性值
控制列表标志属性
例:ul.circle {list-style-type:circle} 控制无序列表标志为空圆心
ul li {list-style-image : url(xxx.gif)} 控制无序列表标志为指定图标
list-style-type 设置列表项标志类型
list-style-position 设置列表项标志位置
list-style-image 将图像设置为列表标志
list-style 简写属性
li {list-style : url(example.gif) square inside} 将3个以上属性进行简写在一块。
五、表格
border-collapse ---设置是否把表格边框合并为单一的边框。
border-spacing ---设置分隔单元格边框的距离。
caption-side --- 设置表格标题的位置。
empty-cells ---设置是否显示表格中的空单元格。
table-layout ---设置显示单元、行和列的算法。
六、轮廓设置
outline 在一个声明中设置所有的轮廓属性。
outline-color 设置轮廓的颜色。
outline-style 设置轮廓的样式。
outline-width 设置轮廓的宽度。