级联样式表CSS

样式的引入方式：

1、行内样式，需要使用style属性

<!--直接写在标签上
如果页面中有个标签，使用了相同的属性，后期的维护的时候需要进行统一修改的话就不利于后期维护
-->
<p style="color:red;">改变颜色</p>

2、内联样式

<!--
	在当前HTML页面中使用style标签统一管理样式
-->
<style>
	div{
	color:red;
	}
	p{
	color:blue;
	font-size: 20px;
	}
</style>
<div>
	hello word
</div>
<p>hello html</p>

3、外联样式（单独存在的.css文件）

/*.css文件本身就代表样式，直接写样式即可，不用写style标签，
	在HTML中使用link关联.css文件
*/
div{
	color:blace;
	font-size:20px
}
p{
	color:red;
}

1.如果是通用样式，就选择外联样式

2.当样式内容过多时，也会将样式单独抽离成一个.css文件，方便管理

3.当某个标签有特殊样式实现，且在页面中是不重复的，出现次数唯一的，就使用行内样式

4.除了上面的几种情况，通常使用的都是内联样式

选择器

1、基本选择器

/*标签选择器 标签名{}*/
div{}
/*类选择器 .类名{}*/
.div-class{}
/*id选择器 #id名{}*/
#div-id{}
/*基本选择器优先级：
	id选择器>类选择器>标签选择器
*/

2、扩展选择器

<!--
后代选择器
使用空格来标识为后代选择器，其实是缩小了选择器的查找范围而已
-->
<style type="text/css">
div span{
  color: red;
}
</style>


<div>
	<p>div中的p标签</p>
</div>
<!--组合选择器（同等级选择器，通常用于不同标签有相同样式）-->
<style>
	p,span{color:red;}
</style>

<p>hello</p>
<span>word</span>

<!--后代选择器（在包裹关系中等级选择）-->
<style type="text/css">
	ul>li{color:blue;}
</style>
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>
<!--伪类选择器-->
  <style type="text/css">
  /*span标签中的奇数*/
    span:nth-of-type(2n+1){
      color: #483D8B;
      font-size: 18px;
    }
   	/*偶数*/
    span:nth-of-type(2){
      color: #FF0000;
    }
  </style>
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>

超链接

超链接的字体颜色，如果想要给超链接设置字体颜色，样式必须直接作用在超链接上的，它不能继承样式

div{
}
/* 默认为被点击的状态 */
a:link{
}
/* 访问之后的状态 */
a:visited{
}
/* 处在活动状态 */
a:active{
}
/* 鼠标悬浮时的状态 */
a:hover{
}

:hover鼠标悬浮状态可以用于所有的标签上

div{
	color:red;
}
/*鼠标悬浮后*/
div:hover{
	color:black;
}

选择器优先级：
!important>行内样式>id选择器>类选择器>标签选择器

通配符

/*通配符，可以作用在任意的标签上*/
*{
	color:blue;
}

开发不建议使用通配符，通配符相当于是作用在了所有的标签上，某些属性并不是所有的标签都能识别，只要加了属性不论是否生效，浏览器都会对属性进行解析然后渲染，这样比较消耗性能

常用的样式属性

样式名	描述
text-align	行元素水平方向居中
text-decoration	控制下划线 none没有 underline有
line-hight	行高
font-size	设置字体大小
font-weight	设置字体粗细的
font-family	设置字体样式
letter-spacing	设置中文字体之间的间距
word-spacing	设置英文单词之间的间距

font字体的复合属性，简写时要求顺序为加粗、大小、类型：

  font: bold 20px "宋体";