CSS自学笔记(5):CSS的样式
CSS中拥有各种各样的样式表,而基本的样式有背景,文本,字体,链接,列表,表格,轮廓。
一.CSS-背景
CSS中允许用纯色背景,也允许用图片来创建复杂的个性背景。
p {background-color: #000;}
是用纯色作为背景。这时你可以定义其他属性,生成不同效果的背景。
CSS中也可以用图片作为背景,这是就需要使用background-image属性了,如果属性值为一个URL值,并且图片文件存在,那么就可以看到用该图片做为背景的网页了
body {background-image: url(4.gif);}
注:background-image属性也可以用在其他标签里。
这时可以定义其他属性,改变图片的位置,大小等等。
可以使用 background-repeat 属性,对页面上的图片背景进行平铺处理,利用 background-position 属性改变图像在背景中的位置。
需要注意的是,在改变图片背景的位置时,可以使用关键字,也可以使用百分比,还可以使用长度值来确定图片的位置。
当文档很长,一个屏幕显示不下的时候,在向下滚动的时候,我们不希望背景也一起滚动,这是就可以用到background-attachment 属性防止这种滚动,防止背景滚动,将背景固定到一个可视区域中(fixed),不会收到网页滚动的影响。
二.CSS-文本
文本,应该是一个网页中占据内容最多的部分,所以文本的样式是比较重要的。
CSS中的属性可定义文本的外观,包括文本的颜色、字符间距、对齐方式,还可以对文本进行装饰、排版等。
CSS 文本属性
属性 | 描述 |
---|---|
color | 设置文本颜色 |
direction | 设置文本方向。 |
line-height | 设置行高。 |
letter-spacing | 设置字符间距。 |
text-align | 对齐元素中的文本。 |
text-decoration | 向文本添加修饰。 |
text-indent | 缩进元素中文本的首行。 |
text-shadow | 设置文本阴影。CSS2 包含该属性,但是 CSS2.1 没有保留该属性。 |
text-transform | 控制元素中的字母。 |
unicode-bidi | 设置文本方向。 |
white-space | 设置元素中空白的处理方式。 |
word-spacing | 设置字间距。 |
注:在文本属性中的部分属性值,可以用长度、百分比、关键字等等来设置。
三.CSS-字体
CSS的字体属性定义文本的字体、大小、风格(加粗、倾斜)和变形等。
CSS的字体系列
在 CSS 中,有两种不同类型的字体系列名称:
- 通用字体系列 - 拥有相似外观的字体系统组合(比如 "Serif" 或 "Monospace")
- 特定字体系列 - 具体的字体系列(比如 "Times" 或 "Courier")
除了各种特定的字体系列外,CSS 定义了 5 种通用字体系列:
- Serif 字体
- Sans-serif 字体
- Monospace 字体
- Cursive 字体
- Fantasy 字体
定义文本的字体属性时,应用到font-family属性。定义它的属性值时,可以用通用字体系列,也可以用指定字体系列,这两种字体系列也可以同时使用。
body {font-family: Serif;}
希望html文档使用Serif字体,但又不关心是哪种字体,这时可以用到通用字体系列。
body {font-family: Georgia;}
将body元素的字体设置成具体的Georgia字体。
定义字体风格时,应用到font-style属性。
font-style属性值有:
- normal - 文本正常显示
- italic - 文本斜体显示
- oblique - 文本倾斜显示
注:斜体(italic)是一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观。与此不同,倾斜(oblique)文本则是正常竖直文本的一个倾斜版本。
CSS 字体属性
属性 | 描述 |
---|---|
font | 简写属性。作用是把所有针对字体的属性设置在一个声明中。 |
font-family | 设置字体系列。 |
font-size | 设置字体的尺寸。 |
font-size-adjust | 当首选字体不可用时,对替换字体进行智能缩放。 |
font-stretch | 对字体进行水平拉伸。 |
font-style | 设置字体风格。 |
font-variant | 以小型大写字体或者正常字体显示文本。 |
font-weight | 设置字体的粗细。 |
四.CSS-链接
CSS中我们也可以为链接设置各种规格样的样式。不过相对于其他的,链接样式比较简单。
链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
链接的四种状态:
- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
当为链接的不同状态设置样式时,请按照以下次序规则:
- a:hover 必须位于 a:link 和 a:visited 之后
- a:active 必须位于 a:hover 之后
五.CSS-列表
CSS 列表属性允许你放置、改变列表项标志,或者将图像作为列表项标志。
在html中有效的使用列表,可以使页面变得非常丰富的同时,也很整齐。
列表最常用的属性是它的标志类型:list-style-type
同样,当列表项不够用(不想用)时,我们也可以用图片来做列表项。
ul li {list-style-image : url(1.gif)}
由于列表的使用频率比较高,所以可以将列表的属性简写
li {list-style : url(1.gif) square inside}
CSS 列表属性(list)
属性 | 描述 |
---|---|
list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中。 |
list-style-image | 将图象设置为列表项标志。 |
list-style-position | 设置列表中列表项标志的位置。 |
list-style-type | 设置列表项标志的类型。 |
六.CSS-表格
有效的使用表格属性,可以将那些看起来很死板的表格变得很个性。
table, th, td { border: 1px solid red;; }
将表格table、th 以及 td 设置了蓝色边框。
也可以对表格边框的其他属性进行定义,从而得到各式各样边框的表格。
对表格的大小(高宽)进行定义,使之更符合html的布局设计,是网页更加美观。
我也可以对表格内部的文本属性进行定义,text-align 和 vertical-align 属性设置表格中文本的对齐方式
td { text-align:right; }
为表格td和th元素设置padding属性,可以改变表格内容对表格内边框的距离。
和其他背景一样,也可以为表格添加背景颜色,可以为纯色,也可以为图片。
CSS Table 属性
属性 | 描述 |
---|---|
border-collapse | 设置是否把表格边框合并为单一的边框。 |
border-spacing | 设置分隔单元格边框的距离。 |
caption-side | 设置表格标题的位置。 |
empty-cells | 设置是否显示表格中的空单元格。 |
table-layout | 设置显示单元、行和列的算法。 |
七.CSS-轮廓
轮廓可以理解为包围在某元素周围的一条线,起强调作用。
CSS 边框属性
属性 | 描述 |
---|---|
outline | 在一个声明中设置所有的轮廓属性。 |
outline-color | 设置轮廓的颜色。 |
outline-style | 设置轮廓的样式。 |
outline-width | 设置轮廓的宽度。 |
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。