背景

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

背景色

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

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:;}

字体大小

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;

}

HTML5学习笔记（六）：CSS基本样式的更多相关文章

  1. HTML5学习笔记<六>: HTML5框架, 背景和实体

    HTML5框架 1. 框架标签(frame): 框架对于页面的设计有着很大的作用 2. 框架集标签(<frameset>): 框架集标签定义如何将窗口分割为框架 每个frameset定义一 ...

  2. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  3. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

  4. 前端学习：学习笔记（CSS部分）

    前端学习:学习笔记(CSS部分) CSS的学习总结(图解) CSS的引入方式和书写规范 CSS的插入方式_内嵌样式 <!DOCTYPE html> <html> <hea ...

  5. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  6. java之jvm学习笔记六-十二(实践写自己的安全管理器)(jar包的代码认证和签名) (实践对jar包的代码签名) (策略文件)(策略和保护域) (访问控制器) (访问控制器的栈校验机制) (jvm基本结构)

    java之jvm学习笔记六(实践写自己的安全管理器) 安全管理器SecurityManager里设计的内容实在是非常的庞大,它的核心方法就是checkPerssiom这个方法里又调用 AccessCo ...

  7. Learning ROS for Robotics Programming Second Edition学习笔记(六) indigo xtion pro live

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...

  8. Typescript 学习笔记六：接口

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  9. python3.4学习笔记(六) 常用快捷键使用技巧，持续更新

    python3.4学习笔记(六) 常用快捷键使用技巧,持续更新 安装IDLE后鼠标右键点击*.py 文件,可以看到Edit with IDLE 选择这个可以直接打开编辑器.IDLE默认不能显示行号,使 ...

  10. Go语言学习笔记六： 循环语句

    Go语言学习笔记六: 循环语句 今天学了一个格式化代码的命令:gofmt -w chapter6.go for循环 for循环有3种形式: for init; condition; increment ...

随机推荐

  1. OpenCV学习代码记录——canny边缘检测

    很久之前学习过一段时间的OpenCV,当时没有做什么笔记,但是代码都还在,这里把它贴出来做个记录. 代码放在码云上,地址在这里https://gitee.com/solym/OpenCVTest/tr ...

  2. std::accumulate使用的一个小细节

    今天使用std::accumulate模板函数的时候出现了一个错误,特此记录一下. #include <iostream> #include <numeric> int mai ...

  3. Scribes:小型文本编辑器，支持远程编辑

    Scribes是一款简洁的文本编辑器.现在给大家介绍下.     功能列表,  Python插件扩展  支持远程编辑(如ftp, sftp, ssh, samba, webdav, webdavs)  ...

  4. [转载]DB2与ORACLE、MYSQL比较2

    原文地址:DB2与ORACLE.MYSQL比较2作者:欣颖 4.2 Oracle9i  Oracle的产品战略是每12到18个月发布一个主要版本.主要发行版本所遵循的命名战略在PC领域中更为常见，它不 ...

  5. POJ 1637 Sightseeing tour （SAP | Dinic 混合欧拉图的判断）

    Sightseeing tour Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 6448   Accepted: 2654 ...

  6. spring 使用注解注入 list 或 map

    1.定义一个接口或抽象类AClass 2.定义两个类实现或继承AClass,(BClass,MClass) 3.在第三个类XClass 中注入List 形如: @Autowired private L ...

  7. Windows Hadoop Error: JAVA_HOME is incorrectly set.

    出现这个问题,首先java -version java version "1.8.0_91"Java(TM) SE Runtime Environment (build 1.8.0 ...

  8. SQL中获取排序分组后数据的脚本

    废话不多说了,先上一段代码,如下所示: select distinct   b.OrgID,b.CompanyID,b.AreaID,b.CustChannelID,b.CustID,b.SaleTo ...

  9. Linux内核同步：RCU

    linux内核 RCU机制详解 简介 RCU(Read-Copy Update)是数据同步的一种方式,在当前的Linux内核中发挥着重要的作用.RCU主要针对的数据对象是链表,目的是提高遍历读取数据的 ...

  10. sqlite 常用命令

    1)创建数据库文件: >sqlite3 /home/test.db 回车 就生成了一个test.db在/home路径下. 这样同时也SQLite3加载了这个test.db 2)用.help可以看 ...