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 设置轮廓的宽度。

CSS自学笔记(5):CSS的样式,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。