03 css样式

最新推荐文章于 2024-04-03 18:00:04 发布

枫頔

最新推荐文章于 2024-04-03 18:00:04 发布

阅读量254

点赞数

分类专栏： CSS 文章标签： css样式字体样式文本样式背景样式链接样式

本文链接：https://blog.csdn.net/fengdi_yuxi/article/details/100992281

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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样式参考

枫頔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
03 css样式

css的主要作用是为HTML文档中的标签设置样式，以达到某种效果。下面介绍css中主要的样式语法。1. css字体样式CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。font-stylefont-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：normal：默认值，浏览器会显示标准的字体样式。italic：浏览器会...
复制链接

扫一扫

专栏目录