前言

在上一篇的博客中，阐述了 CSS 盒模型中的 Margin、Border、Padding 三个样式。但是总觉得，这些东西好像是 HTML 元素的包装样式，真正的要点是 HTML 元素（即：盒模型的内容）的样式。不知大家是怎么理解的，欢迎在评论中讨论。接下来，就来看看 HTML 元素都有哪些样式吧！

大家都知道 HTML 元素是由标签（如：<p>）定义的，而标签是具有语意的，其本省包含着一定的格式。标签指定的 HTML 元素的格式，在这里请允许我称其为 HTML 样式；而对于 CSS 定义的 HTML 元素的样式，称其为 CSS 样式。

HTML 样式

概述

  HTML 元素的重要内容是文本（当然也有图像、音频、视频等）。在 HTML 中内置了很多用来格式化文本的标签，这些标签定义的元素内容具有一定的格式，比如说：加粗、倾斜等。

文本格式化

样式标签

：着重文本

<p><em>强调文本</em>（&lt;em&gt;标签）</p>

：斜体字

<p><i>斜体文本</i>（&lt;i&gt;标签）</p>

：加重语气

<p><strong>加重语气文本</strong>（&lt;strong&gt;标签）</p>

：粗体文本

<p><b>粗体文本</b>（&lt;b&gt;标签）</p>

：小号字

<p><small>小号字文本</small>（&lt;small&gt;标签）</p>

：上标字

<p>上标文本<sup>上标</sup>（&lt;sup&gt;标签）</p>

：下标字

<p>下标文本<sub>下标</sub>（&lt;sub&gt;标签）</p>

<ins>：插入字

<p><ins>插入的文本</ins>（&lt;ins&gt;标签）</p>

<del>：删除字

<p><del>删除的文本文本</del>（&lt;del&gt;标签）</p>

效果图

计算机输出

样式标签

<code>：计算机代码

<code>

	while (true) { }

</code>

<kbd>：键盘码
```
<kbd>

	control + e

</kbd>
```
<samp>：计算机代码样本
```
<samp>Hello World!</samp>
```
<var>：变量
```
<var>variable</var>
```
<pre>：预格式文本
```
<pre>

	I

		like

			HTML

</pre>
```

示例

代码

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>CSS 样式 2</title>

	<link rel="stylesheet" href="mystyle.css">

</head>

<body>

<div>

<code>

<pre>

var <var>variable</var> = true;

if (<var>variable</var>) {

	print("Hello World!");

} else {

	// do nothing

}

</pre>

程序运行结果: <samp>Hello World!</samp>

</code>

</div>

</body>

</html>

效果图

引文、引用和标签定义

样式标签

<abbr>：缩写

<abbr title="World Wide Web">WWW</abbr>

<address>：地址

<address>

	中国<br>

	上海<br>

	浦东新区<br>

	杨高南路 799 号

</address>

<bdo>：文字方向

<bdo dir="rtl">

	direction

</bdo>

<br>

<bdo dir="ltr">

	direction

</bdo>

<blockquote>：长的引用

<blockquote>

	The Capon Lake Whipple Truss Bridge is a historic bridge across the Cacapon River in Capon Lake, West Virginia.

</blockquote>

<q>：短的引用语

<p>One person said: <q>Real dream is the other shore of reality.</q></p>

<cite>：引用、引证

<p><cite>The blog</cite>, writed by Island, is so useful</p>

<dfn>：项目

<dfn>Difine a new project at here.</dfn>

效果图

CSS 样式

背景

概述

  一个 HTML 元素，可能会有一个背景，这样才会更加突出元素的内容。正所谓，“鲜花还需绿叶衬”。

可设置的背景样式属性

含义

kground

kground-color

kground-image

kground-repeat

kground-attachment

kground-position

含义
kground
kground-color
kground-image
kground-repeat
kground-attachment
kground-position

示例

代码

body

{

	/*背景色为 浅灰色*/

	background-color: lightgray;

	/*背景图片的 资源地址*/

	background-image: url("background.png");

	/*背景图片在 x 轴上平铺*/

	background-repeat: repeat-x;

	/*背景图片固定*/

	background-attachment: fixed;

	/*背景图片的其实位置为右上角*/

	background-position: right top;

}

效果

文本
- 概述
```
 除了 HTML 标签定义的文本可是外，CSS 还定义了大量的文本样式属性。
```
- 可设置的文本样式
 - 基本样式
 - 颜色
 - 语法
 
 h1 {color: blue;}
 - 颜色值得表示形式
 
 颜色名，如：blue
 
 十六进制数，如：#0000ff
 
 rgb 值，如：rgb(0, 0, 255)
 - 字体
 - 作用
 
 定义字体，加粗，大小，文字样式
 - 可设置属性
 
 |属性|含义|
 
 |---|---|
 
 |font|字体的简写形式|
 
 |font-family|字体系列|
 
 |font-style|字体样式|
 
 |font-size|字体大小|
 
 |font-weight|字体粗细|
 
 |font-variant|以小型大写字体或者正常字体显示文本|
 - 语法
 
 .varient {font-variant: small-caps;}
 - 修饰
 - 语法
 
 a {text-decoration: overline;}
 - 取值及含义
 
 |属性值|含义|
 
 |---|---|
 
 |none|标准文本，没有修饰（通常用来去除链接文本的下划线）|
 
 |underline|下划线|
 
 |line-through|中划线|
 
 |overline|中划线|
 
 |blink|闪烁文本|
 
 |inherit|从父元素那里继承属性值|
 - 阴影
 - 语法
 
 #shadow {text-shadow: 2px 2px orange;}
 - 参数及含义
 
 前两个参数，偏移量（可以为负值）
 
 最后一个参数，颜色值
 - 转换
 - 语法
 
 #upper {text-transform: uppercase;}
 - 取值及含义
 
 |属性值|含义|
 
 |---|---|
 
 |none|默认|
 
 |capitalize|每个单词的首字母大写|
 
 |uppercase|全部大写|
 
 |lowercase|全部小写|
 
 |inherit|从父元素那里继承属性值|
 - 缩进
 - 语法
 
 p {text-indent: 35px;}
 - 对齐方式
 - 水平
 
 语法
 
 h1 {text-align: center;}
 
 取值及含义
 
 |属性值|含义|
 
 |---|---|
 
 |left|靠左对齐|
 
 |center|居中|
 
 |right|靠右对齐|
 
 |justify|两端对齐|
 
 |inherit|从父元素那里继承属性值|
 - 垂直
 语法(主要设置嵌入到文本中的元素基于文本的对其方式)
 
 img {vertical-align: top;}
 
 取值及含义
 
 |属性值|含义|
 
 |---|---|
 
 |baseline|默认。元素放置在父元素的基线上|
 
 |top|把元素的顶端与行中最高元素的顶端对齐|
 
 |middle|把此元素放置在父元素的中部|
 
 |bottom|把元素的顶端与行中最低的元素的顶端对齐|
 
 |text-top|把元素的顶端与父元素字体的顶端对齐|
 
 |text-bottom|把元素的底端与父元素字体的底端对齐|
 
 |super|垂直对齐文本的上标|
 
 |sub|垂直对齐文本的下标|
 
 |length|长度|
 
 |%|使用 "line-height" 属性的百分比值来排列此元素。允许使用负值|
 
 |inherit|规定应该从父元素继承 vertical-align 属性的值|
 - 文字方向
 - 语法
 
 #direction {direction: rtl;}
 - 注意
 
 只作用于块级元素，只有块级元素会在其前后添加换行（及占据单独的一行）
 - 其他样式
 - 字符间距
 - 语法
 
 h1 {letter-spacing: 3px;}
 - 字间距
 - 语法
 
 p {word-spacing: 10px;}
 - 行高
 - 语法
 
 div {line-height: 50px;}
 - 空白的处理方式
 - 语法
 
 #direction {white-space: pre;}
 - 取值及含义
 
 |属性值|含义|
 
 |---|---|
 
 |normal|默认。空白会被浏览器忽略|
 
 |pre|空白会被浏览器保留。其行为方式类似 HTML 中的
 标签|
 
 |nowrap|文本不会换行，文本会在在同一行上继续，直到遇到
 标签为止|
 
 |pre-wrap|保留空白符序列，但是正常地进行换行|
 
 |pre-line|合并空白符序列，但是保留换行符|
 
 |inherit|规定应该从父元素继承 white-space 属性的值|
- 示例
 - HTML 文档
```
<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>CSS 样式 2</title>

	<link rel="stylesheet" href="mystyle.css">

</head>

<body>

	<div>

		<h1>Subject</h1>

		The firstparagraph.<img src="border.png" alt="图片">

		<hr>

		The

			second

								paragraph

		If you want to learn more about HTML, CSS, JavaScript, please click <a href="http://www.cnblogs.com/theDesertIslandOutOfTheWorld/">世俗孤岛</a>

	</div>

</body>

</html>
```
 - css 文件
```
div {line-height: 50px;}

h1

{

	color: blue;

	letter-spacing: 3px;

	text-align: center;

}

a {text-decoration: overline;}

p {text-indent: 35px;}

p {word-spacing: 10px;}

img {vertical-align: top;}

#upper {text-transform: uppercase;}

#direction

{

	direction: rtl;

	white-space: pre;

}

#shadow {text-shadow: 2px 2px orange;}

.varient {font-variant: small-caps;}
```
 - 效果

后记

写到这里，该 Blog 也该到一段落了。回顾一下在该 Blog 中，主要阐述了 HTML 文档中，文本的格式化公式，包括：HTML 样式和 CSS 样式。再接下来的 Blog 中，会详述其他 HTML 元素的 CSS 样式的设置方式。

CSS3-03 样式 2的更多相关文章

CSS/CSS3常用样式小结
1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...
[总结]CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...
炫酷的CSS3抖动样式:CSS Shake
CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的GIF图像): 炫酷的CSS3抖动样式:CSS Shake 这是一个很微小的动画 ...
css3-4 css3边框样式
css3-4 css3边框样式一.总结一句话总结: 二.css3边框样式 1.相关知识边框属性:1.border-width2.border-style3.border-color 边框方位:1 ...
css3-3 css3背景样式
css3-3 css3背景样式一.总结一句话总结:网站页面上的小图标集成在一张大图上面,是因为降低服务器负载,网站上的那些图片都可以下载下来,源码那里,或者工具那里. 1.background:# ...
一些上流的CSS3图片样式
直接在图片元素上直接应用CSS3 inset box-shadow 或 border-radius时,浏览器并不能完美的渲染它们.不过,如果把这个图片用作背景图,你就可以可以给它添加任何样式了,浏览器 ...
css3常用样式集锦
控制线显示0.5px .line:after{ content:""; display:block; position:absolute; width:200%; left:0; ...
[CSS3] 学习笔记-CSS3盒子样式
1.盒子的类型在CSS3中,使用display来定义盒子的类型,包括block,inline,inline-block类型.div元素和P元素,属于block类型,span元素和a元素,属于inli ...
css3的样式讲解-css学习之旅（3）
css背景属性:background-color:background-image:url("位置"):background-position:right等,px,百分数:bac ...
CSS3水平翻转样式和background-size兼容问题
一.水平翻转和垂直翻转:第一种:随着现代浏览器对CSS3的支持愈发完善,对于实现各个浏览器兼容的元素的水平翻转或是垂直翻转效果也就成为了可能.相关的CSS代码如下: /*水平翻转*/ .flipx { ...

随机推荐

Python快速教程尾声
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 写了将近两年的Python快速教程,终于大概成形.这一系列文章,包括Python基 ...
窥探Swift之函数与闭包的应用实例
今天的博客算是比较基础的,还是那句话,基础这东西在什么时候都是最重要的.说到函数,只要是写过程序就肯定知道函数是怎么回事,今天就来讨论一下Swift中的函数的特性以及Swift中的闭包.今天的一些小实 ...
DotNet中几种常用的加密算法
在.NET项目中,我们较多的使用到加密这个操作.因为在现代的项目中,对信息安全的要求越来越高,那么多信息的加密就变得至关重要.现在提供几种常用的加密/解密算法. 1.用于文本和Base64编码文本的互 ...
理解JAVASCRIPT 闭包
最近去面试了一家企业,结果非常灰心丧气,于是周末给自己定了一个目标学好一门,学精通一门.不求多,只求懂. 最近看到一个概念“闭包”. 什么是闭包呢? 简单一点就是:看得到多和看得到少的区别. 上面这 ...
Android 程序打包及签名
为什么要签名??? 开发Android的人这么多,完全有可能大家都把类名,包名起成了一个同样的名字,这时候如何区分?签名这时候就是起区分作用的. 由于开发商可能通过使用相同的Package Name来 ...
Sql Server函数全解(四)日期和时间函数
日期和时间函数主要用来处理日期和时间值,本篇主要介绍各种日期和时间函数的功能和用法,一般的日期函数除了使用date类型的参数外,也可以使用datetime类型的参数,但会忽略这些值的时间部分.相同 ...
Get和Post区别
1. get是从服务器上获取数据,post是向服务器传送数据.2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到.post是通过H ...
纯C#实现屏幕指定区域截屏
以前在别的地方见过一个通过调用系统API实现屏幕截图的例子,从内心来说我不太喜欢在C#代码中出现这种情况,现在什么都讲“和谐”,我觉得这种做法就是破坏了我们的“和谐”代码,呵呵,开玩笑,有的时候,不通 ...
[C#] 获取打印机列表
一:获得本地安装的打印机列表注:(如果在"设备和打印机"中已经添加了局域网的打印机设备,也算是本地安装的打印机:没有添加的则算作局域网打印机) 1,通过 C# 中 Printer ...
用c#开发的一款webservice调用小工具，方便测试
本人经常与webservice打交道,webservice调用工具有soap ui,使用起来不是那么方便,所以我花了很长时间特意写了个小工具来调用Webservice方便测试,还有待进一步完善.使用方 ...

CSS3-03 样式 2

前言

HTML 样式

CSS 样式

后记

CSS3-03 样式 2的更多相关文章

随机推荐

热门专题