CSS选择器
<!DOCTYPE html>
<head>
<title>常用选择器</title>
/*为页面中的所有的p元素，设置一个字体颜色为红色*/
/*
元素选择器
作用：通过元素选择器可以选择页面中的所有指定元素
语法：标签名{ }
*/
/*p{
color: red;
}
h1{
color: red;
}*/
/*
id选择器
作用：通过元素的id属性值选中唯一的一个元素
语法：#id属性值{}
*/
/*#p1{
font-size: 20px;
}*/
/*
类选择器
作用：通过元素的class属性值选中一组元素
语法：.class属性值{}
*/
/*.p2{
color: red;
}
.hello{
font-size: 50px;
}*/
/*为id为p1的元素，class为p2的元素，还有h1，同时设置一个背景颜色为黄色*/
/*
选择器分组（并集选择器）
作用：通过选择器分组可以同时选中多个选择器对应的元素
语法：选择器1,选择器2,选择器N{}
*/
/*#p1,.p2,h1{
background-color: yellow;
}*/
/*
通配选择器
作用：可以用来选中页面中的所有的元素
语法：*{}
*/
/**{
color: red;
}*/
/*为拥有class为p3的span元素设置一个背景颜色为黄色*/
/*
复合选择器（交集选择器）
作用：可以选中同时满足多个选择器的元素
语法：选择器1选择器2选择器N{}
*/
span.p3{
background-color: yellow;
}
/*
对于id选择器来说，不建议使用复合选择器
p#p1{
background-color: red;
}
*/
</style>
</head>
<body>
<h1>悯农</h1>
<p>床前明月光</p>
<p>床前明月光</p>
床前明月光</p>
<!--
我们可以为元素设置class属性
它和id属性类似，只不过class属性可以重复
拥有相同class属性值的元素，我们说他们是一组元素
可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开
-->
床前明月光</p>
床前明月光</p>
床前明月光</p>
<p>床前明月光</p>
床前明月光</p>
疑是地上霜</span>
</body>
</html>
兄弟选择器实例
<!DOCTYPE html>
<head>
<title>兄弟元素选择器</title>
/*
为span后的一个p元素设置一个背景颜色为黄色
后一个兄弟元素选择器
作用：可以选中一个元素后紧挨着的指定的兄弟元素
语法：前一个 + 后一个
span + p{
background-color: yellow;
}
*/
/*
选中后边的所有兄弟元素
语法：前一个 ~ 后边所有
*/
span ~ p{
background-color: yellow;
}
</style>
</head>
<body>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<span>我是一个span</span>
<div>我是div</div>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
<p>我是一个p标签</p>
</body>
</html>
①内联框架
<iframe src='地址' width='宽' height='高' name=''></iframe>引入一个外部网页（不推荐使用，不会被搜索引擎检索）
②超链接
<a href=''地址 可以是本地的相对路径 也可以完整的绝对路径></a>默认‘’_self‘’本页面跳转，‘’_target=‘’属性可以在新页面跳转（可以在内联框架的‘name’处跳转）ps:如果不知道超链接要跳转到哪，直接加一个‘#’就可以了
<center></center>把想要居中的内容用center包起来
搜索锚点链接的使用方法
③CSS 层叠样式表
内联样式表:在段落标签里添加：style='color:red;font=size:尺寸px;'添加样式（不推荐使用）
内部样式表:在title标签中添加:<style type=''text/css></style>属性在style标签里添加p{属性如color颜色font-size大小}‘p’代表需要样式的地方
样式也可以单独创建一个CSS文档单独用来写样式，这样可以使别的html文档也使用同样的标签，在html中用<link rel='stylesheet' type='text/css' href='css/style.css'/>引入，这样称之为外部样式表:p{属性如color颜色font-size大小} 注意样式表中不可以写html的语法如注释等，如果实在需要注释用/*......*/格式添加注释
④块元素
div；p（特殊 只能包含内联 不能包含块）；h1-h6；ul；li...有可以包含内联，独占一行的特点，会从上往下排列
⑤内联元素（行元素）
span；a（特殊 可以包含任何 但是不能包括自己）；img；iframe；input 不独占一行 有多大占多大，会从左往右排列，到头自动换行
⑥常用选择器
元素选择器：通过元素选择器选择页面上所有元素 ‘元素{样式属性如color等}’
id选择器： 通过给元素设置id后给指定元素设定样式‘#元素id{样式属性如color等}’
类选择器：通过class给元素设置类名给一组元素设定样式‘.元素class{样式属性如color等}’
通配选择器：*{样式属性}‘ *’代表所有元素
复合选择器（交集选择器）：元素.元素calss{样式属性}ps：一般只用于calss
拥有想同样式的元素选择器，可以用‘选择器，选择器{样式属性}’
选择器的优先级
1.优先级的规则
!important 获取一个最高优先级（慎用）
①内联样式 1000
②id选择器 100
③类和伪类 10
④ 元素选择器 1
⑤通配*。0
⑥继承的样式没有优先级
⑦多种选择器的时候是可以相加的
⑧所有优先级他的值是永远都不会超过他的最大的值的
⑨如果两个优先级相同的话，覆盖前一个执行最后一个
⑩并集选择器是个算个的，不会相加
2.A的伪类
link visited hover active 访问链接的顺序不能变
3.文本标签
①em 标签一般用于表示一段内容的着重点
②strong 标签一般用于一个内容的重要性
③i 标签是以斜体表示}表示图标。没有任何语义
④b 标签是以粗体表示 } 没有任何语义
⑤ small 标签一般表示版权声明。内容条款
⑥ big 大体子
⑦cite 标签 语义，参考的内容
⑧q 标签 引用的内容，会被浏览器默认标写双引号 是CSS样式
⑨blockquote 标签 块引用或长引用， 用div包含块 （在论坛中用的比较多）
⑩sup 上标标签，sub 下标标签
11）<ins><del> 一般表示现价与原价
12）ins表示插入的内容，显示时通常会加上下 划线。
13）del表示删除的内容，显示时通常会加上删 除线。
14）pre / code 标签 一起使用。表示执行保留格式
4.列表
如何去掉项目符号 ul{
list-style：none
}
①无序列表 ul li / ul包含li <ul><li></li></ul> 创建 默认项目序号是实心圆圈} 无序可以套有序，可以套无序。可以随意嵌套
②有序列表ol li / ol包含li <ol><li></li></ol> 默认项目序号是阿拉伯数字}
③定义列表 dl dt dd <dl><dt><dd>对dt的描述</dd></dt><dl>
5.单位
① 像素px
②百分比% 当父元素发生变化的时候，子元素也会发生变化
③em 根据字体设置大小的 一个em相当于一个font-size
④rgb 颜色设置，可以用数字，最大值是255，也可以用百分比%，最大是100%
