css的主要作用是为HTML文档中的标签设置样式,以达到某种效果。下面介绍css中主要的样式语法。
1. css字体样式
CSS 字体属性定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)。
font-style
font-style属性用于定义字体风格,如设置斜体、倾斜或正常字体,其可用属性值如下:
- normal:默认值,浏览器会显示标准的字体样式。
- italic:浏览器会显示斜体的字体样式。
- oblique:浏览器会显示倾斜的字体样式。
<style>
p {
font-style: italic;
}
div {
font-style: italic;
}
</style>
注意:
斜体(italic)是一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观。与此不同,倾斜(oblique)文本则是正常竖直文本的一个倾斜版本。
font-weight
字体加粗除了用b和strong标签之外,可以使用CSS来实现,但是CSS是没有语义的。
font-weight属性用于定义字体的粗细,其可用属性值:normal、bold、bolder、lighter、100~900(数字 400 等价于 normal,而 700 等价于 bold)。
<style>
p {
font-weight: bold;
}
div {
font-weight: 700;
}
</style>
font-family
在 CSS 中,有两种不同类型的字体系列名称:
- 通用字体系列 - 拥有相似外观的字体系统组合(比如 “Serif” 或 “Monospace”)
- 特定字体系列 - 具体的字体系列(比如 “Times” 或 “Courier”)
font-family用来定义文本的字体系列。可以同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体。
<style>
p {
font-family: "Microsoft YaHei";
}
div {
font-family: "Apple Braille", "Microsoft YaHei";
}
</style>
unicode字体
在 CSS 中设置字体名称,直接写中文字体是可以的。但是在文件编码(GB2312、UTF-8等)不匹配时会产生乱码的错误。此时我们有以下两种方法:
方案一: 使用英文来替代。 比如微软雅黑字体 font-family:“Microsoft Yahei”。
方案二: 在 CSS 直接使用 Unicode编码来表示字体名称可以避免这些错误。使用Unicode写中文字体名称,浏览器是可以正确的解析的。
下图为常用中文字体的unicode编码表示方式:
字体名称 | 英文名称 | Unicode 编码 |
---|---|---|
宋体 | SimSun | \5B8B\4F53 |
新宋体 | NSimSun | \65B0\5B8B\4F53 |
黑体 | SimHei | \9ED1\4F53 |
微软雅黑 | Microsoft YaHei | \5FAE\8F6F\96C5\9ED1 |
楷体_GB2312 | KaiTi_GB2312 | \6977\4F53_GB2312 |
隶书 | LiSu | \96B6\4E66 |
幼园 | YouYuan | \5E7C\5706 |
华文细黑 | STXihei | \534E\6587\7EC6\9ED1 |
细明体 | MingLiU | \7EC6\660E\4F53 |
新细明体 | PMingLiU | \65B0\7EC6\660E\4F53 |
font-size
font-size属性用于设置字号(字体大小),该属性的值可以使用相对长度单位,也可以使用绝对长度单位。其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使用较少。
<style>
p {
font-size: 1em;
}
div {
font-size: 20px;
}
</style>
注意:
- 若未规定字体大小,普通文本(如段落)的默认大小为16px。
- 1em 等于当前的字体尺寸。如果一个元素的font-size为16px,那么1em 就等于16px。在设置字体大小时,em 的值会相对于父元素的字体大小改变。公式:pixels/当前字体大小=em
常用技巧:
- 现在网页中普遍使用14px。
- 尽量使用偶数的数字字号,ie6等老式浏览器支持奇数会有bug。
- 各种字体之间必须使用英文状态下的逗号隔开。
- 中文字体需要加英文状态下的引号,英文字体一般不需要加引号。当需要设置英文字体时,英文字体名必须位于中文字体名之前。
- 如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号,例如font-family: “Times New Roman”;。
- 尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。
字体样式代码示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
font-family: "Microsoft YaHei";
font-style: italic;
font-size: 1em;
font-weight: bold;
}
div {
font-family: "Apple Braille", "Microsoft YaHei";
font-style: italic;
font-size: 20px;
font-weight: 700;
}
</style>
</head>
<body>
<p>hello world!</p>
<div>你好</div>
</body>
</html>
font简写样式
font属性用于对字体样式进行综合设置,其基本语法格式如下:
selector {
font: font-style font-weight font-size/line-height font-family;
}
注意:
- 使用font简写属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。
- 其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。
2. css文本样式
css文本样式用来定义文本的外观,如颜色、字符间距、对齐方式、文本缩进、装饰文本等。
color
color属性用于定义文本的颜色,其取值方式有如下3种:
-
预定义的颜色值,如red,green,blue等。
-
十六进制,如#FF0000,#FF6600,#29D794等。实际工作中,十六进制是最常用的定义颜色的方式。
-
RGB代码,如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。需要注意的是,如果使用RGB代码的百分比颜色值,取值为0时也不能省略百分号,必须写为0%。
<style>
a {
color: red;
/* color: #FF0000; */
/* color: rgb(255, 0, 0); */
}
</style>
css3提供了颜色半透明的表示方式:color: rgba(r,g,b,a)
- a 是alpha 透明的意思 取值范围 0~1之间
line-height
line-height属性用于设置行间距,就是行与行之间的距离,一般称为行高。line-height常用的属性值单位有三种,分别为像素px,相对值em和百分比%,实际工作中使用最多的是像素px。
一般情况下,行高比字号大7.8像素左右就可以。(设置行高等于盒子高度可让文字盒子内垂直居中,给定行高可以不写高度,自动撑开)
<style>
p {
line-heght: 25px;
}
</style>
text-align
text-align属性用于设置文本内容的水平对齐方式,相当于html中的align对齐属性。其可用属性值如下:
- left:左对齐(默认值)
- right:右对齐
- center:居中对齐
<style>
p {
text-align: center;
}
</style>
text-indent
text-indent属性用于设置首行文本的缩进,其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%。允许使用负值, 建议使用em作为设置单位。
1em 就是一个字的宽度。如果是汉字的段落, 1em 就是一个汉字的宽度。此属性可以继承。
<style>
p {
text-indent: 2em;
}
</style>
text-decoration
text-decoration属性用来给文本添加装饰,如添加上下划线、贯穿先线等。该属性常用值如下:
- none(无装饰或者去掉装饰,常用来去掉链接默认的下划线样式)
- underline(下划线)
- overline(上划线)
- line-through(贯穿线)
<style>
a {
text-decoration: none;
}
</style>
letter-spacing
letter-spacing属性用于定义字符间距,所谓字间距就是字符与字符之间的空白距离。其属性值可为不同单位的数值,允许使用负值,默认为normal。
<style>
p {
letter-spacing: 5px;
}
</style>
word-spacing
word-spacing属性用于定义英文单词之间的间距,对中文字符无效。和letter-spacing一样,其属性值可为不同单位的数值,允许使用负值,默认为normal。
word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距,而word-spacing定义的为英文单词之间的间距。
<style>
p {
word-spacing: 5px;
}
</style>
text-shadow
text-shadow为css3提供的文字阴影样式,语法如下:
text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;
3. css背景样式
css背景样式用来为元素设置背景样式,如背景颜色、背景图片、背景位置等。
background-color
background-color属性为元素设置背景颜色,与文本颜色取值相似。
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
</style>
background-image
background-image属性为元素设置背景图片,默认值是 none,表示背景上没有放置任何图像。语法如下:
background-image : none | url (url)
background-image 属性允许指定一个图片展示在背景中(只有CSS3才可以多背景),可以和 background-color 连用。 如果图片不重复的话,图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺,则会覆盖背景颜色。
<style>
div {
width: 100px;
height: 100px;
background-iamge: url(images/test.png);
}
</style>
注意: 我们提倡背景图片后面的地址,url不要加引号。
background-repeat
background-repeat属性可以让背景图像进行平铺。语法如下:
background-repeat : repeat | no-repeat | repeat-x | repeat-y
- repeat : 背景图像在纵向和横向上平铺(默认)
- no-repeat : 背景图像不平铺
- repeat-x : 背景图像在横向上平铺
- repeat-y : 背景图像在纵向平铺
<style>
div {
width: 100px;
height: 100px;
background-iamge: url(images/test.png);
background-repeat: no-repeat;
}
</style>
background-position
background-position用来定义图像的位置。background-position属性取值可使用关键字、长度值及百分比数值,该属性默认需要指定两个值。
background-position : length || length
background-position : position || position
- 关键字:left、right、top、bottom、center (若只给一个值,另一个值默认为center)
- 长度值:长度值表示相对于元素坐标系x-y轴的偏移量。
- 百分比数值:百分比数值相对于元素的大小来说。(默认为0% 0%,若只给一个值,则作用于水平值,另一个值默认为50%)
<style>
div {
width: 100px;
height: 100px;
background-iamge: url(images/test.png);
background-repeat: no-repeat;
background-pisition: top center;
/* background-pisition: 100px 200px; */
/* background-pisition: 50% 50%; */
}
</style>
注意:若关键字与数值单位混合使用,必须为x坐标在前,y坐标在后。
background-attachment
background-attachment属性用来设置背景是否随着页面滚动。语法如下:
background-attachment : scroll | fixed
- scroll: 背景图像随对象内容滚动
- fixed : 背景图像固定
<style>
div {
width: 100px;
height: 100px;
background-iamge: url(images/test.png);
background-repeat: no-repeat;
background-pisition: top center;
/* background-pisition: 100px 200px; */
/* background-pisition: 50% 50%; */
background-attachment : fixed;
}
</style>
background
background属性用来定义背景的简写属性(书写顺序无强制标准)。建议语法如下:
background:背景颜色 背景图片 背景平铺 背景滚动 背景位置;
<style>
div {
width: 100px;
height: 100px;
background: url(images/test.png) no-repeat fixed center;
}
</style>
背景透明(css3)
CSS3支持背景半透明的写法语法格式是:
background: rgba(0,0,0,0.3);
最后一个参数是alpha 透明度 取值范围 0~1之间
注意: 背景半透明是指盒子背景半透明, 盒子里面的内容不受影响。
背景缩放(css3)
通过background-size设置背景图片的尺寸,就像我们设置img的尺寸一样,在移动Web开发中做屏幕适配应用非常广泛。
其参数设置如下:
a) 可以设置长度单位(px)或百分比(设置百分比时,参照盒子的宽高)
b) 设置为cover时,会自动调整缩放比例,保证图片始终填充满背景区域,如有溢出部分则会被隐藏。我们平时用的cover最多
c) 设置为contain会自动调整缩放比例,保证图片始终完整显示在背景区域。
background-image: url('images/gyt.jpg');
background-size: 300px 100px;
/* background-size: contain; */
/* background-size: cover; */
多背景(css3)
css3支持设置多个背景,可用于自适应布局。 做法就是用逗号隔开就好。
- 一个元素可以设置多重背景图像
- 每组属性间使用逗号分隔
- 如果设置的多重背景图之间存在着交集(即存在着重叠关系),前面的背景图会覆盖在后面的背景图之上
- 为了避免背景色将图像盖住,背景色通常都定义在最后一组上
<style>
background: url(images/l.jpg) no-repeat left top,
url(images/3.jpg) no-repeat left bottom hotpink;
</style>
4. css链接样式
链接可以文本颜色、字体、背景等相关属性,特殊性在于能够根据它们所处的状态来设置它们的样式。
链接的四种状态:
- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
<style>
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
</style>
当为链接的不同状态设置样式时,请按照以下次序规则:
- a:hover 必须位于 a:link 和 a:visited 之后
- a:active 必须位于 a:hover 之后
注意:去掉链接下划线:text-decoration: none;
5. css列表样式
CSS 列表属性允许放置、改变列表项标志,或者将图像作为列表项标志。
list-style-type
list-style-type用来改变列表项标志类型(默认为实心圆点)。
ul {
list-style-type : square;
}
list-style-image
list-style-image属性可以将列表项标志设定为指定图像。
ul li {
list-style-image : url(xxx.gif);
}
list-style-position
这是利用 list-style-position可以设置标志出现在列表项内容之外还是内容内部。
ul {
list-style-position:inside;
}
list-style
list-style用来设定简写列表属性。
ul {
list-style : url(example.gif) square inside;
}
注意:
多数情况下,我们在进行css初始化时会进行列表属性简写,取出列表的默认属性。如下:
ul {
list-style : none;
}
6. css表格样式
css表格属性用来改变表格的外观,如设置表格边框、边框折叠、表格宽高及内部文本对齐等。
width及height
通过 width 和 height 属性定义表格的宽度和高度。可使用百分比及像素值进行设定。
<style>
table {
width: 400px;
height: 200px;
}
</style>
border
border用来设置表格边框,语法如下:
border: border-width border-style border-color;
- border-width:边框宽度,一般用px表示
- border-style:边框样式
- solid:边框为单实线(最为常用的)
- dashed:边框为虚线
- dotted:边框为点线
- double:边框为双实线
- none:没有边框即忽略所有边框的宽度(默认值)
- border-color:边框颜色
<style>
table {
width: 400px;
height: 200px;
}
table,
th,
td {
border: 1px solid red;
}
</style>
border-collapse
默认情况下,表格内单元格及表格没有边框。当我们设置边框属性后,表格内每个单元格都有边框。如下图所示:
border-collapse属性可以设置将表格边框折叠为单一边框。
<style>
table {
width: 400px;
height: 200px;
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid red;
}
</style>
text-align及vertical-align
text-align 和 vertical-align 属性设置表格中文本的对齐方式。
text-align 属性设置水平对齐方式(left、right、center),vertical-align属性设置垂直对齐方式(top、bottom、center)。
<style>
table {
width: 400px;
height: 200px;
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid red;
}
td {
text-align: center;
}
</style>
最后附上css样式参考:css样式参考