前端Html5/Css3—CSS美化

第五章 CSS美化

5.1 字体样式

<span></span>能让某几个文字或者某个词语凸显出来

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

5.1.1 font-family字体类型

• font-family

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

5.1.2 font-size字体大小

• font-size属性

px（像素）

em、rem、cm、mm、pt、pc

/* em   父亲元素字体大小*em
				如：父亲元素字体大小为10px,子元素字体大小为2em
				则2em相当于20px(10*2em)
				
	rem  根(html)元素字体大小*rem */

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

5.1.3 font-style字体风格

• font-style属性

值	描述
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。
inherit	规定应该从父元素继承字体样式
normal	默认值。浏览器显示一个标准的字体样式。

5.1.4 font-weight字体粗细

• font-weight属性

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

5.1.5 font属性

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

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

5.2 文本属性

属性	含义	举例
color	设置文本颜色	color:#00C;
text-align	设置元素水平对齐方式	text-align:right/center/left/justify;
text-indent	设置首行文本的缩进	text-indent:20px;
line-height	设置文本的行高	line-height:25px;
text-decoration	设置文本的装饰	text-decoration:underline;
direction	设置文本/书写方向。	direction: rtl;文本方向从右到左
word-spacing	设置字间距

5.2.1 text-align:属性值如下

值	说明
left	把文本排列到左边。默认值：由浏览器决定
right	把文本排列到右边
center	把文本排列到中间
justify	实现两端对齐文本效果

• 当line-heigh和容器height一致时候，可以实现垂直居中

5.2.2 text-decoration:属性值如下

div{
				/* underline:文本下划线
				overline:文本上划线
				line-through:文本删除线 */
				text-decoration: underline;
			}

vertical-align:图片文字对齐方式

属性：middle、top、bottom

5.2.3 text-shadow文本阴影

text-shadow : color x-offset y-offset blur-radius;

	span{
				text-shadow: #0000FF 1px 1px 2px;
			}

5.3 color属性

RGB：

• 十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量
• rgb(r,g,b) : 正整数的取值为0～255

RGBA

• 在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1

color:#A983D8;

color:#EEFF66;

color:rgb(0,255,255);

/* 0.5表示透明程度 */
color:rgba(0,0,255,0.5);

5.4 超链接样式

<a href=""></a>

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

5.5 list-style-type列表样式

• list-style-type:none/disc/circle/square/decimal
• list-style-image:

值	说明	语法示例
none	无标记符号	list-style-type:none;
disc	实心圆，默认类型	list-style-type:disc;
circle	空心圆	list-style-type:circle;
square	实心正方形	list-style-type:square;
decimal	数字	list-style-type:decimal

5.6 background-color背景颜色

5.7 background-img背景图像

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

5.7.1 背景重复方式

background-repeat属性

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

5.8 background-position背景定位

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

5.9 背景属性简写

background:url(../image/arrow-down.gif) 20px 10px no-repeat;

5.10 background-size背景尺寸

属性值	描述
auto	默认值，使用背景图片保持原样
percentage	当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的
cover	整个背景图片放大填充了整个元素
contain	让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域

5.11 linear-gradient渐变

线性渐变：颜色沿着一条直线过渡：从左到右、从右到左、从上到下等,默认情况下是从上到下

div{
   /*兼容Webkit内核的浏览器*/
  -webkit-linear-gradient ( position,  color1,  color2,…)

  /* 从上到下渐变 */
  background: linear-gradient(blue, pink);
  
  /* 指定为从右到左渐变 */
   background: linear-gradient(to right, blue, pink);
  
  /* 多种颜色渐变 */
  background: linear-gradient(red, yellow, blue, orange);
  
  /* 从 10%的位置开始渐变*/
  background: linear-gradient(blue, 10%, pink);
}

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