背景

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

背景色

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

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. Android中使用DialogFragment来取代popopwindow

    DialogFragment +fragment 来取代popopwindow +fragment 先留个标题,这几天过来写,重大发现

  2. Git/Github的使用以及与Eclipse的整合

    Git简介       Git是一个免费的.分布式的版本控制工具,或是一个强调了速度快的源代码管理工具.每一个Git的工作目录都是一个完全独立的代码库,并拥有完整的历史记录和版本追踪能力,不依赖于网络 ...

  3. k8s oomkilled超出容器的内存限制

    超出容器的内存限制 只要节点有足够的内存资源,那容器就可以使用超过其申请的内存,但是不允许容器使用超过其限制的 资源.如果容器分配了超过限制的内存,这个容器将会被优先结束.如果容器持续使用超过限制的内 ...

  4. Swift3 获取系统音量和监听系统音量

    使用时: //定义滑动条用于显示音量 @IBOutlet weak var volumSlider: UISlider! //处理声音,获取当前音量,并添加监听 handleVolum() 方法内容: ...

  5. jsp路径问题之base

    <base href="<%=basePath%>"> base 标记用于指定页面中所有相对路径的基点, 而默认的相对路径的基点是页面所在路径. 测试代码如 ...

  6. Socket编程：之双机通信

    服务端: #include<sys/socket.h> #include<sys/types.h> #include<stdio.h> #include<un ...

  7. 纯CSS兑现侧边栏/分栏高度自动相等(转)

    这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法.核心的CSS代码如下(数值不固定): margin-bottom:-3000px; padding-bottom:3000px; 再配合父标签的 ...

  8. 我的Android之旅——学习、项目、心态

    本文作者: 伯乐在线 - 唐韧 .未经许可,禁止转载!欢迎分享原创到伯乐头条. 来源:唐韧 学习Android也一年多了,项目做了五六个,有大有小,有难有易.一直以来都没有好好总结过,今天周六休息,就 ...

  9. iOS AFNetWorking下得Basic Auth认证请求方式

    我新入职了一家公司,做了一个项目,服务器的大哥说他采用的是Basic Auth认证请求方式,一般我们用的都是OAuth的认证方式,下面我们就对比一下这两种认证方式 百度百科得到如下 Basic Aut ...

  10. Hadoop相关项目Hive-Pig-Spark-Storm-HBase-Sqoop

    Hadoop相关项目Hive-Pig-Spark-Storm-HBase-Sqoop的相关介绍. Hive Pig和Hive的对比 摘要: Pig Pig是一种编程语言,它简化了Hadoop常见的工作 ...