ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS3-03 スタイル 2_html/css_WEB-ITnose
前言
在上一篇的博客中,阐述了 CSS 盒模型中的 Margin、Border、Padding 三个样式。但是总觉得,这些东西好像是 HTML 元素的包装样式,真正的要点是 HTML 元素(即:盒模型的内容)的样式。不知大家是怎么理解的,欢迎在评论中讨论。接下来,就来看看 HTML 元素都有哪些样式吧!大家都知道 HTML 元素是由标签(如:<p>)定义的,而标签是具有语意的,其本省包含着一定的格式。标签指定的 HTML 元素的格式,在这里请允许我称其为 HTML 样式;而对于 CSS 定义的 HTML 元素的样式,称其为 CSS 样式。HTML 样式
概述
HTML 元素的重要内容是文本(当然也有图像、音频、视频等)。在 HTML 中内置了很多用来格式化文本的标签,这些标签定义的元素内容具有一定的格式,比如说:加粗、倾斜等。
907fae80ddef53131f3292ee4f81644b:着重文本
<p><em>强调文本</em>(<em>标签)</p>
5a8028ccc7a7e27417bff9f05adf5932:斜体字
<p><i>斜体文本</i>(<i>标签)</p>
8e99a69fbe029cd4e2b854e244eab143:加重语气
<p><strong>加重语气文本</strong>(<strong>标签)</p>
a4b561c25d9afb9ac8dc4d70affff419:粗体文本
<p><b>粗体文本</b>(<b>标签)</p>
d015d241ae6d34c34210679b5204fe85:小号字
<p><small>小号字文本</small>(<small>标签)</p>
2cdea26b4c3988e37d674b56660962a7:上标字
<p>上标文本<sup>上标</sup>(<sup>标签)</p>
b96cac025db4031319c29e1eb68f19d6:下标字
<p>下标文本<sub>下标</sub>(<sub>标签)</p>
426be984ffbbb815d7d88e3543a85d91:插入字
<p><ins>插入的文本</ins>(<ins>标签)</p>
823db3943044a0a9a620ada8d4b1d965:删除字
<p><del>删除的文本文本</del>(<del>标签)</p>
效果图
计算机输出
<code> while (true) { }</code>
5e4e803d53d659f332070b5d4aa430db:键盘码
<kbd> control + e</kbd>
162cd570ab1483e383d78dcb7f452f7c:计算机代码样本
<samp>Hello World!</samp>
b7f90f73cad438258bf67e62f79b2113:变量
<var>variable</var>
e03b848252eb9375d56be284e690e873:预格式文本
<pre class="brush:php;toolbar:false"> I like HTML
代码
CSS 样式 2 <pre class="brush:php;toolbar:false">var <var>variable</var> = true;if (<var>variable</var>) { print("Hello World!");} else { // do nothing}</pre>程序运行结果: <samp>Hello World!</samp>
效果图
引文、引用和标签定义
8a7974376be5f6c00c121222b727adb9:缩写
<abbr title="World Wide Web">WWW</abbr>
208700f394e4cf40a7aa505373e0130b:地址
<address> 中国<br> 上海<br> 浦东新区<br> 杨高南路 799 号</address>
71af07a0e88a1ac1ff73f855702ac153:文字方向
<bdo dir="rtl"> direction</bdo><br><bdo dir="ltr"> direction</bdo>
b8a712a75cab9a5aded02f74998372b4:长的引用
<blockquote> The Capon Lake Whipple Truss Bridge is a historic bridge across the Cacapon River in Capon Lake, West Virginia. </blockquote>
1244aa79a84dea840d8e55c52dc97869:短的引用语
<p>One person said: <q>Real dream is the other shore of reality.</q></p>
f3a85e1241a187c5ac462d886e9a968b:引用、引证
<p><cite>The blog</cite>, writed by Island, is so useful</p>
7f9d788ef50b059a7f76f3d2e4ccc9d1:项目
<dfn>Difine a new project at here.</dfn>
效果图
概述
一个 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;}
可设置属性
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> <p><span class="varient">The</span> <span id="shadow">first</span>paragraph.<img src="border.png" alt="图片"></p> <hr> <p id="direction"><span class="varient">The</span> <span id="upper">second</span> paragraph</p> <p>If you want to learn more about HTML, CSS, JavaScript, please click <a href="http://www.cnblogs.com/theDesertIslandOutOfTheWorld/">世俗孤岛</a></p> </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 样式的设置方式。