CSS3-03 样式 2_html/css_WEB-ITnose

前言

在上一篇的博客中，阐述了 CSS 盒模型中的 Margin、Border、Padding 三个样式。但是总觉得，这些东西好像是 HTML 元素的包装样式，真正的要点是 HTML 元素（即：盒模型的内容）的样式。不知大家是怎么理解的，欢迎在评论中讨论。接下来，就来看看 HTML 元素都有哪些样式吧！大家都知道 HTML 元素是由标签（如：
）定义的，而标签是具有语意的，其本省包含着一定的格式。标签指定的 HTML 元素的格式，在这里请允许我称其为 HTML 样式；而对于 CSS 定义的 HTML 元素的样式，称其为 CSS 样式。

HTML 样式

概述

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

文本格式化

样式标签

：着重文本

强调文本（<em>标签）

：斜体字

斜体文本（<i>标签）

：加重语气

加重语气文本（<strong>标签）

：粗体文本

粗体文本（<b>标签）

：小号字

小号字文本（<small>标签）

^：上标字

上标文本上标（<sup>标签）

_：下标字

下标文本下标（<sub>标签）

（<ins>标签）

：删除字

删除的文本文本（<del>标签）

效果图

计算机输出

样式标签

：计算机代码

    while (true) { }

：键盘码

    control + e

：计算机代码样本

Hello World!

：变量

variable

：预格式文本     
      
    I        like            HTML
     

示例

代码

var variable = true;if (variable) {    print("Hello World!");} else {    // do nothing}
程序运行结果: Hello World!

效果图

引文、引用和标签定义

样式标签

：缩写

WWW

：地址

    中国
      上海
    浦东新区
    杨高南路 799 号

：文字方向

    direction
    direction

：长的引用

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

：短的引用语

One person said: Real dream is the other shore of reality.

：引用、引证

The blog, writed by Island, is so useful

：项目

Difine a new project at here.

效果图

CSS 样式

背景

概述

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

可设置的背景样式属性

属性 含义

background	简写的背景，简写时按照以下顺序
background-color	背景颜色
background-image	背景图片
background-repeat	背景图片是否及如何平铺
background-attachment	背景图片是否固定或随着其他部分滚动
background-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 文档

        
Subject
        
The firstparagraph.
        

The             second                                paragraph
        
If you want to learn more about HTML, CSS, JavaScript, please click 世俗孤岛
    

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 样式的设置方式。