css：字体、文本、超链接、列表、背景、渐变样式

<span>标签

作用：能让某几个文字或者某个词语凸显出来

示例：

<p>123<span class="show">“你好”</span>123</p>
<p>123456
<span id="dream">123</span></p>
<p class="bird">123<span>123</span>123</p>

1、字体样式

属性	含义	示例
font-family	设置字体类型	font-family:”隶书“;
font-size	设置字体大小	font-size:12px;
font-style	设置字体风格	font-style:italic;
font-weight	设置字体的粗细	font-weight:bold;
font	在一个声明中设置所有字体属性字体属性的顺序：字体风格→字体粗细→字体大小→字体类型	font:italic bold 36px “宋体“;

字体类型：font-family

语法：

p{font-family:Verdana,"楷体";}

body{font-family: Times,"Times New Roman", "楷体";}

各种字体之间要用英文逗号隔开，如果有多个单词组成的字体要加引号，尽量使用系统默认的字体，保证任何用户在浏览器中都能正确显示

字体大小：font-size

单位：px（像素）em、rem、cm、mm、pt、pc

语法：

h1{font-size:24px;}
h2{font-size:16px;}
h3{font-size:2em;}
span{font-size:12pt;}
strong{font-size:13pc;}

px（像素）是网页常用的单位

谷歌浏览器默认的单位为16px，不同的浏览器默认显示的字号大小不一致，尽量给一个明确值

可以给body指定整个页面文字大小

字体粗细：font-weight

语法：

p{font-weight:bold;}

值	说明
normal	默认值，定义标准的字体
bold	粗体字体
bolder	更粗的字体
lighter	更细的字体
100、200、300、400、500、600、700、800、900	定义由细到粗的字体 400等同于normal，700等同于bold

字体样式：font-style

语法：

p{font-style:normal;}

属性值	作用
normal	默认值，浏览器会显示标准的字体样式:font-style:normal
italic	浏览器会显示斜体的样式
oblique	倾斜的字体样式

字体符合属性

字体属性的顺序：字体风格→字体粗细→字体大小→字体类型

p span{font:oblique bold 12px "楷体";}

使用font属性时，必须按上面的语法格式书写，不能更换顺序，并且各个属性以空格隔开

不需要设置的属性可省略，但必须保留font-size和font-family属性，否则font属性将不起作用

2、文本样式

属性	含义	示例
color	设置文本颜色	color:#00C;
text-align	设置元素水平对齐方式	text-align:right;
text-indent	设置首行文本的缩进	text-indent:20px;
line-height	设置文本的行高	line-height:25px;
text-decoration	设置文本的装饰	text-decoration:underline;

文本颜色：color

p{
	color: red;
}

表示	属性值
预定义颜色	red；green；blue等
十六进制	#FFFFFF；#FF0000；等
rgb	rgb(255,0,0)或rgb(100%,0%,0%)

水平对齐方式：text-align

p{
	text-align:right;
}

属性值	解释
left	左对齐
right	右对齐
center	剧中对齐
justify	两端对齐

文本首行缩进：text-indent

p{
	text-indent: 2em;
}

em是相对单位，就是当前元素（font-size）1个文字的大小，如果当前文字没有设置大小，则会按照父元素的1个文字大小

文本行高：line-height

p{
	line-height: 10%;
}

文本装饰：text-decoration

p{
	text-decoration: underline;
}

属性值	说明
none	默认值，定义的标准文本（常用）
underline	设置文本的下划线（常用）
overline	设置文本的上划线（不常用）
line-through	设置文本的删除线（不常用）

文本阴影：text-shadow

语法：text-shadow : color（颜色） x-offset（x轴位移，阴影水平位移量） y-offset （y轴位移，阴影垂直位移量） blur-radius（阴影模糊半径，阴影向外的模糊范围）;

示例：

p{
	text-shadow : gray 3px 3px 1px;
}

3、css超链接

名称	含义	示例
a:link	未单击访问时超链接样式	a:link{color:#9ef5f9;}
a:visited	单击访问后超链接样式	a:visited {color:#333;}
a:hover	鼠标悬浮其上的超链接样式	a:hover{color:#ff7300;}
a:active	鼠标单击未释放的超链接样式	a:active {color:#999;}

设置伪类的顺序：a:link->a:visited->a:hover->a:active

示例：html

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../css/css-demo3.css" type="text/css">
	</head>
	<body>
		<ol>
			<li><a href="">12345</a></li>
			<li><a href="">12345</a></li>
			<li><a href="">12345</a></li>
			<li><a href="">12345</a></li>
			<li><a href="">12345</a></li>
		</ol>
	</body>
</html>

css

a:link{
	color: darkblue;
}
a:visited{
	color: black;
}
a:hover{
	text-decoration: underline;
	color: blue;
}
a:active{
	color: red;
}

4、css背景样式

属性	说明
background-color	背景颜色
background-image	背景图像
background-repeat	背景重复方式
background-position	背景定位
background	背景简写
background-rgba(0,0,0,0.3)	背景半透明(必须为四个值)

背景图像：background-image

background-image:url(图片路径);

背景颜色：background-color

body{
	background-color: aquamarine;
}

背景重复方式：background-repeat

body{
	background: url(../image/arrow-right.gif) repeat-x;
}

repeat	沿水平和垂直两个方向平铺
no-repeat	不平铺，即只显示一次
repeat-x	只沿水平方向平铺
repeat-y	只沿垂直方向平铺

背景定位：background-position

值	说明
Xpos Ypos	单位：px， Xpos表示水平位置，Ypos表示垂直位置
X% Y%	使用百分比表示背景的位置
X、Y方向关键词	水平方向的关键词：left、center、right 垂直方向的关键词：top、center、bottom

body{
	background: url(../image/arrow-right.gif) no-repeat 100px 100px;
}

5、线性渐变

颜色沿着一条直线过渡：从左到右、从右到左、从上到下等

圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合

语法：

linear-gradient ( position,  color1,  color2,…)

示例：

div{
	height: 100px;
	width: 100px;;
	background: linear-gradient(to bottom,red,orange,yellow,green,cyan,blue,purple);
}

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/97193.html