css文字样式
2015-07-29 13:55
633 查看
1,设置字体:
css中字体通过font-family属性来控制。font-family属性属性可以同时声明多种字体,字体之间用逗号隔开。如:p { font-family:Arial,"Times New Roman"; }
注意:如字体由多个单词组成,单词之间要用空格隔开,而且还要用双引号将其括起来,使浏览器知道这是一种字体的名称。如上面的Times New Roman。
2,文字大小:
css中文字大小通过font-size属性来控制。如:p { font-size:12px; }
此外,还有两个特殊的长度单位:em和xm。1em表示的长度是其父元素中字母m的标准宽度,1ex则表示字母x的标准高度。
通过对em的设置可以实现下沉显示的效果。如:
<html>
<head>
<title>FontTest</title>
<style type="text/css">
.p2{font-size:2em;float:left;}
</style>
<body>
<title>Home Town</title>
<p><span class="p2"> H</span>enan has a humid warm-temperate
climate.Dry and windy in winter and spring, the province
is hot and rainy in summer and bakes in strong sunlight
during the autumn months. Rainfall averages about 600-1000
millimeters increasing from north to south, as does the
annual temperature which increases from about 12.8C in the
north to 15.5C in the south.
</p>
</body>
</html>
在浏览器上显示的结果为“H”下沉。
3,行高:
设置行高的属性是:line-height.经验:上面介绍的三种属性可以定义在一条css规则中。如:
font:12px/18px Arial;
字体和行高之间要用斜线隔开。
4,文字的颜色和背景:
在html页面中,颜色统一采用RGB格式,也就是“红绿蓝”三原色。范围:(0%~100%)、(0~255)、(#000000~#ffffff)。以下几种方法都可以将文字设置为红色:
p{ color:red;}
p{color:#ffoooo;}
p{color:rgb(255,0,0);}
p{color:rgb(100%,0%,0%);}
设置背景颜色的属性为:background-color。如背景设为红色:
p{ background-color:#ff0000;}
5,文字加粗、倾斜、大小写:
控制文字粗细的属性为font-weight;font-weight:normal; /*正常*/
font-weight:bold; /*加粗*/
控制文字倾斜的属性为:font-style;
font-style:normal; /*正常字体*/
font-style:oblique; /*倾斜体*/
font-style:italic; /*意大利体*/
控制文字大小写的属性为text-transform;
p.one{text-transform:capitalize;} /*单词首字大写*/
p.two{text-transform:uppercase;} /*全部大写*/
p.three{text-transform:lowercase;} /*全部小写*/
6,文字的装饰效果:
css通过设置文字的text-decoration属性来实现特殊效果:p.one{text-decoration:underline;} /*下划线*/
p.two{text-decoration:line-through;} /*删除线*/
p.three{text-decoration:overlin;} /*顶划线*/
p.four{text-decoration:blink;} /*闪烁*/
闪烁在IE中无效,在Firefox中有效。
说明:几种属性可以同时实现,中间有空格隔开。
以下为练习笔记:
<html>
<head>
<title>FontTest</title>
<style type="text/css">
.p1{font-size:18px;}
.p2{font-size:2em;float:left;}
.p3{line-height:24px}
.p4{color:#ff0000;}
.p5{text-decoration:underline;}
.p6{text-decoration:overline;}
.p7{text-decoration:line-through;}
.p8{text-decoration:blink;}
.p9{font-style:italic;}
.p10{background:#fff0ac;}
</style>
<body>
<title>Home Town</title>
<p class="p7 p10"><span class="p2"> H</span>enan has a humid warm-temperate climate.
Dry and windy in winter and spring, the province
is hot and rainy in summer and bakes in strong sunlight
during the autumn months. Rainfall averages about 600-1000
millimeters increasing from north to south, as does the
annual temperature which increases from about 12.8C in the
north to 15.5C in the south.
</p>
<p class="p1 p3 p4 p5 p9">enan province is considered the cradle of Chinese
civilization due to its location on the Yellow River.
This rich historic heritage has endowed Henan with
numerous historic treasures, from primitive dwellings
to earliest wheel thrown pottery.
</p>
</body>
</html>
相关文章推荐
- 静态Web开发 CSS
- 使用CSS样式position:fixed水平滚动的方法
- 一款很漂亮的CSS3登录界面
- css中的选择器
- 去除inline-block元素间间距的N种方法
- CSS常用属性
- 【jetty】jetty作为maven插件,解除JS/CSS等静态文件锁定
- CSS布局页面之盒子模型
- 样式表的重置
- CSS中的长度单位
- CSS中让一个div的高度随着另外个一个统计的div的高度变化而变化的代码
- CSS中让一个div的高度随着另外个一个统计的div的高度变化而变化的代码
- Grunt 进行js,css文件合并,压缩
- Js 动态插入css js文件
- QTableView的滚动条设置样式
- php使用gzip压缩传输js和css文件的方法
- 纯CSS绘制三角形(各种角度)
- CSS实现不固定宽度和高度的自动居中
- 纯CSS3浮雕质感的立体文字旋转动画
- Java Web项目中CSS路径的问题