背景

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

背景色

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

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. mysql字符生命周期

    mysql的字符集,对数据的导入导出很关键,明白自己集在不同阶段不同场景下的意义即为重要! 01.查看mysql当前字符集 show variables like '%cahr%'; 02.用户请求m ...

  2. Electromagnetic radiation and Radio 电磁波/电磁辐射和无线电波

    电磁辐射,又称电磁波,是由同相振荡且互相垂直的电场与磁场在空间中以波的形式传递能量和动量,其传播方向垂直于电场与磁场构成的平面. 电磁辐射的载体为光子,不需要依靠介质传播,在真空中的传播速度为光速.电 ...

  3. VS 2013 with update 5 编译程序出现A task was cancel

    打开进程管理器看,有一堆MSBuild.exe的实例,于是用 Taskkill /IM MSBuild.exe /F 杀死了所有实例.然后再重新打开VS2013,就work了. references: ...

  4. 【jquery】ajax 动态 改变 select下拉框选中的值

    //JS<script type="text/javascript> //ajax动态给添加原料的[商品名称]下拉框绑定selected属性 $("#origin_co ...

  5. ubuntu安装过程中遇到问题小结

    一.下载 官网下载地址:https://www.ubuntu.com/download/desktop/contribute?version=16.04.4&architecture=amd6 ...

  6. JavaScript Window Screen　用户屏幕的信息

    window.screen 对象包含有关用户屏幕的信息. Window Screen window.screen 对象在编写时可以不使用 window 这个前缀. 一些属性: screen.avail ...

  7. 一张图告诉你：Android系统哪代强？

    一张图告诉你:Android系统哪代强? 新浪科技 王上 谷歌发布Android 1.5 的时候,开始以甜点命名,作为每个版本代表的甜点的尺寸越变越大.谷歌在2014年10月中旬发布了Android ...

  8. IIS的应用程序池优化方法

    IIS应用程序池优化方案 服务器经常产生“应用程序池 'DefaultAppPool' 提供服务的进程关闭时间超过了限制.进程 ID 是 '3504'.”的错误,导致iis处于假死状态,经了解是IIS ...

  9. Easy APNs Provider 消息推送测试工具

    1.Easy APNs Provider 简介 Easy APNs Provider 是一款为 iOS.Mac App 提供推送测试的小工具. App Store 下载地址 Easy APNs Pro ...

  10. getServletContext()接口解析(收藏)

    javax.servlet.ServletContext接口 一个servlet上下文是servlet引擎提供用来服务于Web应用的接口.Servlet上下文具有名字(它属于Web应用的名字)唯一映射 ...