您的位置：首页 > Web前端 > HTML5

HTML5学习笔记（六）：CSS基本样式

2017-02-08 17:10 357 查看

背景

需要注意：背景的所有属性都不会向下进行继承。

背景色

我们可以设定一个纯色为背景色。

p {background-color: red;}
a {background-color: #ff0000;}

背景色有特点如下：

可以为所有元素设置背景色，这包括 body 一直到 em 和 a 等行内元素。

background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。

背景图像

background-image 属性的默认值是 none，表示背景上没有放置任何图像。

设定背景图像代码如下：

body {background-image: url(/i/eg_bg_04.gif);}

只需要将背景图片的地址通过url传入即可。

背景重复

如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。

属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。

background-repeat: repeat-y;

背景定位

可以利用 background-position 属性改变图像在背景中的位置。

background-position:center;

为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。

文本

缩进文本

CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。

p {text-indent: 5em;}

em是作为一种基于文字大小的单位，具体可以查看这里。

另外需要注意的是text-indent属性是可以继承的。

水平对齐

text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。

left：把文本排列到左边。默认值：由浏览器决定。

right：把文本排列到右边。

center：把文本排列到中间。

justify：实现两端对齐文本效果。

inherit：规定应该从父元素继承 text-align 属性的值。

文本方向

direction 属性影响块级元素中文本的书写方向，有两个值：ltr 和 rtl。大多数情况下，默认值是 ltr，显示从左到右的文本。如果显示从右到左的文本，应使用值 rtl。

字符转换

text-transform 属性处理文本的大小写，有四个值：

none：不对字符进行转换。

uppercase：字符全部转换为大写。

lowercase：字符全部转换为小写。

capitalize：每个单词首字母大写。

文本装饰

text-decoration 属性提供对文本进行装饰的功能，有下面几个值：

none：不对文本进行处理。

underline：添加下划线。

overline：添加上划线。

line-through：添加删除线。

处理空白符

white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。

默认的情况下浏览器会把所有空白符合并为一个空格，同时忽略元素中的换行。如果希望保留空格和换行可以使用该属性。

可使用的值如下：

值空白符换行符自动换行

pre-line 合并保留允许

normal 合并忽略允许

nowrap 合并忽略不允许

pre 保留保留不允许

pre-wrap 保留保留允许

字体

使用哪种字体

在设定字体时，常常会出现一种情况，即我们设定使用的字体不能保证用户的机器上一定安装了，这样的结果就是，同样一个HTML网页，由于字体的不确定性导致最终的显示都不一致。

针对这个情况，CSS提出了通用字体系列，即拥有相似外观的字体系统组合，当我们制定了通用字体时，系统会在用户的机器上寻找到最接近我们要使用的字体的字体，可以尽可能的使显示一致。

通用的字体有如下几种：

Serif：这些字体成比例，而且有上下短线。

Sans-serif：这些字体是成比例的，而且没有上下短线。

Monospace：Monospace 字体并不是成比例的。

Cursive：这些字体试图模仿人的手写体。

Fantasy：这些字体无法用任何特征来定义，只有一点是确定的，那就是我们无法很容易地将其规划到任何一种其他的字体系列当中。

指定字体系列

通过 font-family 属性设置更具体的字体。

/*指定为通用字体*/
body {font-family: sans-serif;}
/*指定为特定字体*/
h1 {font-family: Georgia;}
/*如果指定的特定字体找不到则使用后面的通用字体*/
h1 {font-family: Georgia, serif;}
/*根据顺序依次查找到可以使用的字体*/
p {font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;}

字体风格

font-style 属性最常用于规定斜体文本。

该属性有三个值：

normal - 文本正常显示

italic - 文本斜体显示

oblique - 文本倾斜显示

字体加粗

font-weight 属性设置文本的粗细。使用 bold 关键字可以将文本设置为粗体。关键字 100 ~ 900 为字体指定了 9 级加粗度。

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

font-size 属性设置文本的大小。

font-size 值可以是绝对或相对值。

绝对值：

将文本设置为指定的大小

不允许用户在所有浏览器中改变文本大小（不利于可用性）

绝对大小在确定了输出的物理尺寸时很有用

相对大小：

相对于周围的元素来设置大小

允许用户在浏览器改变文本大小

p {font-size:14px;}
p {font-size:0.875em;}

结合使用百分比和 EM

在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值：

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

链接

链接的四种状态

a:link - 普通的、未被访问的链接

a:visited - 用户已访问的链接

a:hover - 鼠标指针位于链接的上方

a:active - 链接被点击的时刻

下面我们来看一个示例：

<!DOCTYPE html>
<html>
<head>
<style>
a:link {color:#FF0000;}    /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;}   /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}  /* 正在被点击的链接 */
</style>
</head>

<body>
<p><b><a href="/index.html" target="_blank">这是一个链接</a></b></p>
<p><b>注释：</b>为了使定义生效，a:hover 必须位于 a:link 和 a:visited 之后！！</p>
<p><b>注释：</b>为了使定义生效，a:active 必须位于 a:hover 之后！！</p>
</body>
</html>

同理，我们除了控制链接的颜色外，还可以控制<a>标签的其它样式，如背景、是否带有下划线等。

列表

我们可以修改列表项的前方第一个标示：

/*去掉标示*/
ul {list-style-type : none}
/*使用方块*/
ul {list-style-type : square}
/*使用图像来进行标示*/
ul li {list-style-image : url(xxx.gif)}

表格

CSS 表格属性可以帮助您极大地改善表格的外观。

表格边框

如需在 CSS 中设置表格边框，请使用 border 属性

table, th, td {
border: 1px solid blue;
}

折叠边框

边框变为只有一条线：

table {
border-collapse:collapse;
}
table,th, td {
border: 1px solid black;
}

表格文本对齐

td {
text-align:right;
height:50px;
vertical-align:bottom;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航