CSS3-03 样式 2
前言
在上一篇的博客中，阐述了 CSS 盒模型中的 Margin、Border、Padding 三个样式。但是总觉得，这些东西好像是 HTML 元素的包装样式，真正的要点是 HTML 元素（即：盒模型的内容）的样式。不知大家是怎么理解的，欢迎在评论中讨论。接下来，就来看看 HTML 元素都有哪些样式吧！
大家都知道 HTML 元素是由标签（如：<p>）定义的，而标签是具有语意的，其本省包含着一定的格式。标签指定的 HTML 元素的格式，在这里请允许我称其为 HTML 样式；而对于 CSS 定义的 HTML 元素的样式，称其为 CSS 样式。
HTML 样式
概述
HTML 元素的重要内容是文本（当然也有图像、音频、视频等）。在 HTML 中内置了很多用来格式化文本的标签，这些标签定义的元素内容具有一定的格式，比如说：加粗、倾斜等。
文本格式化
样式标签
<em>：着重文本
<p><em>强调文本</em>（<em>标签）</p>
<i>：斜体字
<p><i>斜体文本</i>（<i>标签）</p>
<strong>：加重语气
<p><strong>加重语气文本</strong>（<strong>标签）</p>
<b>：粗体文本
<p><b>粗体文本</b>（<b>标签）</p>
<small>：小号字
<p><small>小号字文本</small>（<small>标签）</p>
<sup>：上标字
<p>上标文本<sup>上标</sup>（<sup>标签）</p>
<sub>：下标字
<p>下标文本<sub>下标</sub>（<sub>标签）</p>
<ins>：插入字
<p><ins>插入的文本</ins>（<ins>标签）</p>
<del>：删除字
<p><del>删除的文本文本</del>（<del>标签）</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 示例
代码
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>
<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;}
效果
- HTML 文档
后记
写到这里，该 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 { ...
随机推荐
- Ruby之入门（一）
前言 这门语言很少去听过,可能是没怎么用到就不会听到太多关于ruby的消息,工作需要这门语言,需要从0开始学习这门语言,慢慢学习简直...太神奇了...,原谅我见识浅薄.原来很早就已经出世了,园子中也 ...
- windows server 注意windows的temp目录
windows解压缩包.安装软件时,会生成一些临时文件存放在temp目录中,windows不会自动删除这些文件. 临时文件目录可以在环境变量中查看和配置 在工作机or个人PC机中中这个目录一般不会有什 ...
- npm上传自己的项目
npm安装就不介绍了,自行度娘.本文介绍npm上传 先初始化:npm init 根据提示填完系统介绍信息(package.json): 再登录npmjs: npm login 效果如图: 输入注册的用 ...
- Android样式之selector
日常开发当中,难免会出现这样一种情况,为一个按钮.TextView...设置一个点击状态的颜色改变,可能是background背景的改变,也可能是字体颜色的改变,简单点说:默认状态下,字体颜色或者背景 ...
- [c++] Templates
Template是编译时多态.所有的模板都是在编译时产生对应的代码,它没有面向对象中的虚表,无法实现动态多态. Function Template A function template is a p ...
- 磁盘操作系统（DOS）
一.概要 Disk Operation System(DOS)即磁盘操作系统,与win7一样是一个操作系统,字符界面,单用户,单任务. dos,是磁盘操作系统的缩写,是个人计算机上的一类操作系统.从1 ...
- 【JUC】JDK1.8源码分析之ConcurrentSkipListMap（二）
一.前言 最近在做项目的同时也在修复之前项目的一些Bug,所以忙得没有时间看源代码,今天都完成得差不多了,所以又开始源码分析之路,也着笔记录下ConcurrentSkipListMap的源码的分析过程 ...
- 对于SQL Server，我需要多少内存
经常被问到的一个问题:对于SQL Server,我需要多少内存?这个问题还是有同样的典型的“看情况而定”答案.在今天的文章里,我们来详细看下“看情况而定的”的不同方面. 全新SQL Server安装 ...
- 解决Android工程里的xml文件自动提示问题
昨天晚上看某培训机构的Android的 视频教程,看到他在写布局的XML文件时,有很方便的自动提示功能.我就在自己的Eclipse里试了一下,可是我的没实现.就到网上查,很多都说:在 Window-& ...
- dobbo zookeeper 认识
dubbo 主要使用来整合各种协议的服务,服务提供者可以向dubbo平台注册服务,服务消费都可以看到所有服务的详细信息,而已可以调用所提供的服务接口.zookeeper:主是要服务的集群,配置管理(如 ...