博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS属性的应用
阅读量:5237 次
发布时间:2019-06-14

本文共 3039 字,大约阅读时间需要 10 分钟。

CSS

字体的设置

设置字体——font-family

设置字号——font-size

设置字体样式——font-style

设置字体加粗——font-weight

设置字体变体——font-variant

组合设置字体属性——font

设置字体——font-family

•        基本语法

font-family:字体1,字体2,字体3,……;

•        语法说明

应用font-family属性可以一次定义多个字体,而在浏览器读取字体时,会按照定义的先后顺序来决定选用哪种字体。若浏览器在计算机上找不到第一种字体,则自动读取第二种字体,若第二种字体也找不到,则自动读取第三种字体,这样依次类推。如果定义的所有字体都找不见,则选用计算机系统的默认字体。

Ø 在定义英文字体时,若英文字体名是由多个单词组成,并且单词之间有空格,那么一定要将字体名用引号(单引号或双引号)引起来。如:font-family:“Courier New”,定义了一个字体为Courier New。

设置字号——font-size

•        基本语法

font-size:绝对尺寸|关键字|相对尺寸|百分比

 

•        语法说明

绝对尺寸是指尺寸大小不会随着显示器分辨率的变化而变化,也不会随着显示设备的不同而变化。如用绝对尺寸设置的文字在显示器分辨率为960×600和分辨率为1024×768下所显示的大小是一样的

使用绝对尺寸设置文字大小的时候一定要加上单位,如果没有加单位,浏览器会默认以px(像素)为单位。绝对尺寸可以使用的单位包括in(英寸)、px(像素)、cm(厘米)、mm(毫米)、pt(点)、pc(皮卡)。最常用的单位还是px(像素)。(1点=1/72英寸)。

绝对尺寸和相对尺寸也可以使用关键字来定义字号。绝对尺寸的关键字有七个,分别为xx-small(极小)、x-small(较小)、small(小)、medium(标准大小)、large(大)、x-large(较大)、xx-large(极大)。相对尺寸则仅有两个关键字,分别为larger(较大)和smaller(较小)。相对尺寸的larger是指在它的上一个关键字基础上扩大一级,smaller则是在它上一个关键字基础上缩小一级。

百分比是基于父元素中字体的大小为参考值的。

设置字体样式——font-style

•        基本语法

font-style:normal|italic|oblique

font-style的属性取值说明

属性的取值

说明

normal

正常显示(浏览器默认的样式)

italic

斜体显示文字

oblique

歪斜体显示(比斜体的倾斜角度更大)

设置字体加粗——font-weight

•        基本语法

font-weight:normal|bold|bolder|lighter|number

•        语法说明

font-weight属性取值说明

属性的取值

说明

normal

正常粗细(默认显示)

bold

粗体(粗细约为数字700)

bolder

加粗体

lighter

细体(比正常字体还细)

number

数字一般都是数百,有9个级别(100~900),数字越大字体越粗。

设置字体变体——font-variant

•        基本语法

font-variant:normal|small-caps

 

语法说明

normal表示正常的字体,默认值就为这个字体。

Ø small-caps表示英文字体显示为小型的大写字母。

组合设置字体属性——font

•        基本语法

font:font-style|font-variant|font-weight|font-size|font-family

•        语法说明

font属性主要用作不同字体属性的略写,特别是可以定义行高。

Ø 属性与属性之间一定要用空格间隔开。

 

文本的精细排版

调整字符间距——letter-spacing

调整单词间距——word-spacing

添加文字修饰——text-decoration

设置文本排列方式——text-align

设置段落缩进——text-indent

调整行高——line-height

转换英文大小写——text-transform

调整字符间距——letter-spacing

基本语法

letter-spacing:normal|长度

•        语法说明

normal表示间距正常显示,是默认设置。

Ø 长度包括长度值和长度单位,长度值可以使用负数。

Ø 长度单位可以使用12.2节讲解“设置字体”时介绍的所有单位。

调整单词间距——word-spacing

•        基本语法

word-spacing:normal|长度

语法说明

normal表示间距正常,是默认设置。

Ø 长度包括长度值和长度单位,长度值可以使用负数。

Ø 长度单位可以使用12.2节讲解“设置字体”时介绍的所有单位。

添加文字修饰——text-decoration

•        基本语法

text-decoration:underline|overline|line-through|blink|none

•        语法说明

语法中的属性值可以是上面所列的一个或多个。

text-decoration属性取值说明

属性的取值

说明

underline

给文字添加下划线

overline

给文字添加上划线

line-through

给文字添加删除线

blink

添加文字闪烁效果(只能在Netscape浏览器中显示)

none

没有文字修饰,是默认值

设置文本排列方式——text-align

基本语法

Text-align:left|right|center|justify

 

•        语法说明

该语法中的4个属性值可以任意选择其中一个。其中,left代表左对齐方式;right代表右对齐方式;center代表居中对齐方式;justify代表两端对齐方式。

Ø 该属性可应用于HTML中的任何模块级标记,如<p>,<h1> ~ <h6>等。

设置段落缩进——text-indent

•        基本语法

text-indent:长度|百分比

语法说明

长度包括长度值和长度单位,长度单位同样可以使用之前提到的所有单位。

Ø 百分比则是相对上一级元素的宽度而定的。

调整行高——line-height

•        基本语法

Line-height:normal|数字|长度|百分比

 

语法说明

normal为浏览器默认的行高,一般由字体大小属性来决定。

Ø 数字,表示行高为该元素字体大小与该数字相乘的结果。

Ø 长度,表示行高由长度值和长度单位确定。

Ø 百分比:表示行高是该元素字体大小的百分比。

转换英文大小写——text-transform

基本语法

text-transform:uppercase|lowercase|capitalize|none

语法说明

可以选用text-transform属性中的任何一个属性值来转换英文单词的大小写。

text-transform属性取值说明

属性的取值

说明

Uppercase

使所有单词的字母都大写

Lowercase

使所有单词的字母都小写

Capitalize

是所有单词的首字母都大写

None

默认值显示

转载于:https://www.cnblogs.com/javaTest/archive/2012/02/29/2589492.html

你可能感兴趣的文章
Java反射之修改常量值
查看>>
用UIWebView加载本地图片和gif图
查看>>
jmeter远程分布执行遇到的网卡坑(A Test is currently running,stop or ....)
查看>>
Python正则表达式中的re.S
查看>>
Xcode 中设置部分文件ARC支持
查看>>
iOS-解决iOS8及以上设置applicationIconBadgeNumber报错的问题
查看>>
亡灵序曲-The Dawn
查看>>
_cdecl与_stdcall区别
查看>>
MySQL中的隔离级别和悲观锁及乐观锁示例
查看>>
手机端h5 ajax 上传图片支持微信内置浏览器
查看>>
【Maven】Mac 使用 zsh 后 mvn 命令就无效
查看>>
移动的彩虹
查看>>
Redmine
查看>>
HtmlEditor常用模式
查看>>
Another app is currently holding the yum lock; waiting for it to exit.. yum被锁定无法使用
查看>>
52.tableViewCell重用机制避免重复显示问题
查看>>
帧的最小长度 CSMA/CD
查看>>
xib文件加载后设置frame无效问题
查看>>
第一次博客
查看>>
Java Map 常见用法举例
查看>>