CSS视频教程|CSS基本样式

第4章CSS基本样式

1. CSS背景
2. CSS文本
3. CSS链接
4. CSS列表
5. CSS表格
6. CSS轮廓

CSS背景

div{
    background-attachment: ;/*背景图像是否固定随着页面的其余部分而滚动*/
    background-color: ;/*设置元素的背景颜色*/
    background-image: ;/*设置图片为背景*/
    background-position: ;/*设置背景图片起始位置*/
    background-repeat: ;/*设置背景图片是否重复*/
}

知识点1:背景图像为什么总是从元素内边距左上角开始，因为background-position的默认值是0% 0%，功能上等同top left

知识点2:防止背景图像随着页面的滚动而滚动，通过属性声明图像相对于可视区是固定的(fixed)

CSS文本

p{
    color: ;/*设置文本颜色*/
    direction: ;/*设置文本方向*/
    line-height: ;/*设置行高*/
    letter-spacing: ;/*设置字符间距*/
    word-spacing: ;/*设置字间距*/
    text-align: ;/*设置文本对齐方式*/
    text-decoration: ;/*向文本添加修饰*/
    text-indent: ;/*设置文本首行缩进*/
    text-transform: ;/*设置文本中字母*/
    unicode-bidi: ;/*设置文本方向*/
    white-space: ;/*设置元素中空格处置*/
}

CSS链接

a:link{color: #7FFFD4;}/*未被访问的链接*/
a:visited{color: #8B4513;}/*已被访问的链接*/
a:hover{color: #FF0000;}/*鼠标指针移动到链接上*/
a:active{color: #FF9900;}/*正在被点击的链接*/

CSS列表

无序列表、有序列表前面的标记可以在css中通过list-style修改，其中文本修改用text-transform

ul li{
    list-style: none;/*无标记*/
    list-style: disc;/*实心圆*/
    list-style: circle;/*空心圆*/
    list-style: square;/*方块*/
    list-style: decimal;/*阿拉伯数字*/
    list-style: decimal-leading-zero;/*0开头的数字标记*/
    list-style: lower-alpha;/*小写英文字母*/
    list-style: upper-alpha;/*大写英文字母*/
    list-style: lower-roman;/*小写阿拉伯数字*/
    list-style: upper-roman;/*大写阿拉伯数字*/
    list-style: lower-latin;/*小写拉丁字母*/
    list-style: upper-latin;/*大写拉丁字母*/
}

CSS表格

table tr td{
    border-collapse:;/*设置表格边框是否合并为单一边框*/
    border-spacing: ;/*设置分隔单元格边框的距离*/
    caption-side: ;/*设置表格标题的位置*/
    empty-cells: ;/*设置是否显示表格中的空单元格*/
    table-layout: ;/*设置是单元格是行和列的算法*/
}

CSS轮廓

input{
    outline: ;/*在一个声明中设置所有轮廓的属性*/
    outline-color: rgb(255,255,0);/*设置轮廓的颜色*/
    outline-style: double;/*设置轮廓样式*/
    outline-width: 10px;/*设置轮廓宽度*/
}

转载请注明：大灰牛博客 » CSS视频教程|CSS基本样式