CSS基本的几种样式声明

CSS常用的几种基本样式

（一）字体样式

属性	含义	示例
font-family	设置字体类型	font-family: “隶书”
font-size	设置字体大小	font-size:12px;
font-style	设置字体风格	font-style:italic(斜体)
font-weight	设置字体粗细	font-weight:blod;
font	在一个声明中设置所有字体属性	font:italic blod 15px “宋体”;

tip： （1）css文件中会遇到设置的中文字体类型不起作用，主要原因有两个：①电脑本地没有相应的字体；②css文件类型导致，重新设置为UTF-8即可。
（2）页面既有英文又有中文怎么办？
font-family：cursive，"微软雅黑"
英文字体类型要写在中文字体类型之前！
（3）font简写属性的顺序为：font-style font-variant font-weight font-size/line-height font-family

（二）文本样式

属性	含义	示例
color	设置字体颜色	color：#000
text-align	设置文本水平对齐方式	text-align:right;
text-indent	设置文本首行缩进	text-indent:20px;
line-height	设置文本的行高	line-height:10px;(一般结合块元素出现)
text-decoration	设置文本的装饰	text-decoration:underline;(下划线) text-decoration:line-through(你好)删除线 text-decoration:none;(无下划线)

tip：文本如何垂直居中？

height：x ;line-height：x
height与line-height的值设置一样就能使文本崔志居中。

ps：既然知道了垂直居中，那么水平居中呢？

margin：50px，auto；
/*上下margin值可以任意填，左右值填auto*/

（三）超链接样式

伪类语法： 标签名:伪类名{声明;}

a:hover{
    color:#B46210;
    text-decoration:underline;
}

伪类名称	含义
a:link	设置未单击访问时超链接样式
a:visited	设置鼠标单击访问后超链接的样式
a:hover	设置鼠标悬浮其上的超链接样式
a:active	鼠标单击未释放的超链接样式

伪类书写顺序：link-visited-hover-active
记忆方式：先爱（love）后恨（hate）

（四）形状鼠标样式

值	说明	图例
default	默认光标
pointer	超链接的指针
wait	等待（加载）效果
help	指示可用的帮助
text	指示文本
crosshair	鼠标呈现十字状

代码师例：cursor：值

p{cursor：pointer；}

（五）背景样式

景颜色
background-color：#B70447；
背景图像
background-image：url（”img/buy.png”）
图像重复方式
background-repeat：no-repeat；
背景定位
background-position：10px 20px；
像素值指是相对于html页面左上顶部的值

背景属性简写：
background: #B70447 url（”img/buy.png”） no-repeat 10px 20px;

当初我学完基础样式再去fcc上刷刷题目，基本就不会忘记这些知识点的了。