后端码农谈前端(CSS篇)第五课:CSS样式_html/css_WEB-ITnose
一、背景:
CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。
1、背景色
可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。
例如:
p {background-color: gray;}
2、背景图像
要把图像放入背景,需要使用 background-image 属性。background-image 属性的默认值是 none,表示背景上没有放置任何图像。如果需要设置一个背景图像,必须为这个属性设置一个 URL 值:
body {background-image: url(/i/eg_bg_04.gif);}
3、背景图像重复
如果需要在页面上对背景图像进行平铺,可以使用 background-repeat 属性。
属性值 repeat 导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat 则不允许图像在任何方向上平铺。
默认地,背景图像将从一个元素的左上角开始。请看下面的例子:
body
{
background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}
4、背景图像定位
可以利用 background-position 属性改变图像在背景中的位置。
下面的例子在 body 元素中将一个背景图像居中放置:
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}
为 background-position 属性提供值有很多方法。首先,可以使用一些关键字:top、bottom、left、right 和 center。通常,这些关键字会成对出现,不过也不总是这样。还可以使用长度值,如 100px 或 5cm,最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
5、背景图像关联
如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。您可以通过 background-attachment 属性防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响:
body { background-image:url(/i/eg_bg_02.gif); background-repeat:no-repeat; background-attachment:fixed }
二、文本CSS 文本属性可定义文本的外观。
通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等。
1、缩进文本(text-indent )
p {text-indent: -5em;}
2、水平对齐(text-align)
h1{text-align:center;}
3、字间隔(word-spacing)
p {word-spacing: 30px;}
4、字母间隔(letter-spacing)
h4 {letter-spacing: 20px}
5、字符转换(text-transform)
属性值:
h1 {text-transform: uppercase}
6、文本装饰(text-decoration)
属性值:
a {text-decoration: none;}
7、文本方向(direction)
【注:对于行内元素,只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。】
属性值:
p {word-direction : rtl;}
8、处理空白符(white-space)
white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。详:
值 | 空白符 | 换行符 | 自动换行 |
pre-line | 合并 | 保留 | 允许 |
normal | 合并 | 忽略 | 允许 |
nowrap | 合并 | 忽略 | 不允许 |
pre | 保留 | 保留 | 不允许 |
pre-wrap | 保留 | 保留 | 允许 |
三、字体
1、设置字体系列。(font-family)
h1 {font-family: Georgia;}
2、设置字体的尺寸。(font-size)
h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}
3、设置字体风格。(font-style)
属性值:
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
4、以小型大写字体或者正常字体显示文本。(font-variant)
p {font-variant:small-caps;}
5、设置字体的粗细。(font-weight)
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
四、列表
1、将图象设置为列表项标志。(list-style-image)
ul li {list-style-image : url(xxx.gif)}
2、设置列表中列表项标志的位置。(list-style-position)
属性值:
ul{list-style-position:inside;}
3、设置列表项标志的类型。(list-style-type)
ul {list-style-type : square}
五、表格
1、设置是否把表格边框合并为单一的边框。(border-collapse)
属性值:
table{border-collapse:collapse;}
2、设置分隔单元格边框的距离。(border-spacing)
table{border-spacing:10px 50px;}
3、设置表格标题的位置。(caption-side)
属性值:
caption{caption-side:bottom;}
4、设置是否显示表格中的空单元格。(empty-cells)
属性值:
table{empty-cells:hide;}
5、设置显示单元、行和列的算法。(table-layout)
属性值:
table{table-layout:fixed;}
六、轮廓
轮廓(outline)是绘制于元素周围的边框线,可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。
1、设置轮廓的颜色。(outline-color)
p{outline-color:#00ff00;}
2、设置轮廓的样式。(outline-style)
属性值:
p{outline-style:dotted;}
3、设置轮廓的宽度。(outline-width)
p{outline-width:5px;}
推荐阅读
-
后端码农谈前端(CSS篇)第六课:盒子模型_html/css_WEB-ITnose
-
后端码农谈前端(HTML篇)第一课:HTML概述_html/css_WEB-ITnose
-
后端码农谈前端(HTML篇)第二课:常见元素_html/css_WEB-ITnose
-
后端码农谈前端(CSS篇)第六课:盒子模型_html/css_WEB-ITnose
-
后端码农谈前端(CSS篇)第三课:选择器_html/css_WEB-ITnose
-
后端码农谈前端(CSS篇)第五课:CSS样式_html/css_WEB-ITnose
-
后端码农谈前端(CSS篇)第八课:继承与层叠_html/css_WEB-ITnose
-
[后端人员耍前端系列]Boostrap篇:30分钟快速掌握Boostrap_html/css_WEB-ITnose
-
后端码农谈前端(CSS篇)第七课:定位与浮动_html/css_WEB-ITnose
-
后端码农谈前端(CSS篇)第五课:CSS样式_html/css_WEB-ITnose