CSS3-03样式2_html/css

：短的引用语

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.

效果图

概述

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

可设置的背景样式属性

代码

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

可设置属性

语法

.varient {font-variant: small-caps;}

语法

a {text-decoration: overline;}

取值及含义

语法

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

语法

#upper {text-transform: uppercase;}

取值及含义

语法

p {text-indent: 35px;}

语法

h1 {text-align: center;}

取值及含义

语法(主要设置嵌入到文本中的元素基于文本的对其方式)

img {vertical-align: top;}

取值及含义

语法

#direction {direction: rtl;}

语法

h1 {letter-spacing: 3px;}

语法

p {word-spacing: 10px;}

语法

div {line-height: 50px;}

语法

#direction {white-space: pre;}

取值及含义

 标签

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

效果