<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<pre>
标签四个通用属性是：id,class,title style
id:相等于网页元素***号，用来唯一标识网页元素
class：相等于标签的类属性，用于元素分类
title：相等于元素简介，如元素的用途
style：是用来描述元素的宽度，高度，颜色，轮廓等
css中样式由二部分组成：选择符和声明块
声明块中的每一条语句就是一个样式声明，由属性名与对应的值构成。元素是通过标签来包装，用属性来描述，因其，可以通过标签和标签中的属性来选择元素
用属性选择元素可以用id，class，title等
例：
img{
border-radius:50%; 设置图形轮廓
border:2px solid red; 设置图像边框
}
选择符是根据元素特征来定位，因此元素标签与属性以及位置都可以当做选择符来使用
选择符：
1.标签选择符(常用)
例：p{text-align:center;} 段落文本居中（用标签名称表示，用来描述网页元素类型的通常与其他选择符使用，返回一组元素）
2.id选择符
例：#header{backgroud-color:#ccc;} 设置背景为灰色（id选择符用#表示，用来选择网页中用id属性声明的元素，只返回一个元素）
3.类选择符
例：.blue{color:blue;} 设置元素文本颜色为蓝色(类选择符用英文的点"."来表示 用来选择使用了class属性声明的元素，通常返回一组相关元素)
4.属性选择符
例：[title="http://www.php.cn"]{font-size:20px;} 将具有改属性的元素文本大小设置为20像素 （除class和style以外的属性，都可以。属性放在一对方括号中[]可同时指定多个属性还可以对属性值进行正则查询）
5.群组选择符
h1,h2,h3,h4,h5,h6{font-weight:lighter;} 去掉标题元素的加粗样式 （可以设置多个元素共用样式，用逗号隔开每个选择符）
6.后代选择符
例：section h1{color:red;} 将section元素下面所有h1元素文本设置为红色 （根据元素之间di属关系来选择，多个选择符之间，用空格分隔）
7.子代选择符
例：div>h1{color:green;} 将div 元素下面子级h1元素文本设置为绿色 （子代选择符，只选择当前元素直接子元素，用>号表示 子代选择符，非常的复杂，里面应用了大量的伪类元素，是我们学习的重点！！！）
8.伪类选择符
例：visited{color:gray;} 将访问过的链接文本颜色设置为灰色 （伪类主要应用在特定标签上，表示当前的元素的状态，例如标签的4种状态；未访问，已访问，鼠标悬停，点击中等）
9.伪元素
例：first-letter:设置段落首行的首字母样式
first-line:设置段落首行文本的样式
（设置段落首字母下沉效果，或者首行的显示效果 比较合适英文，中文应用不多）
10.通用与同辈选择符（不常用）
例：*{font-size:12px;} 设置网页中文本均为12像素
p + a {color:pink;} 设置p和相邻a标签文本为粉色
通用选择符星号"*"与同辈选择符加号"+"
通用选择符：一次性设置所有标签的统一样式，不仅效率低，而且影响了样式继承
同辈选择符：我们通常用其他更加高效的选择符代替它
样式写在哪里呢？
1.写在元素标签的style属性中。（仅对当前元素有效）
2.写在当前页面头部的style标签中。（仅对当前页面所有元素有效）
3.写在独立的css文件中。（对所有引用该文件的页面均有效）
css文件引入方式：<link rel="stylesheet" href="style.css">
(1).在实际生活中，标签选择符很少单独使用，通常与其他类型选择符组合在一起以达到精准定位元素的目的。
用标签来选择网页元素是最直观的方法！！！（基本格式：标签名 空格 { 属性名 冒号：属性值; } ）
(2).用id选择符选择的元素，必须在当前页面中，是唯一的(id 选择符，通常用来设置网页中的唯一元素如网页头部，底部或者侧边栏等大多与布局元素配对使用) （页面仅有唯一一个id选择符！！！！！！）
例：
#green{
color:green;
}
<h1 id="green">永久免费</h1>
(3).如果网页上有多个具有相同样式的元素就使用类选择符，不仅高效，而且灵活，类选择符是我们工作中使用最多的一种选择符（多多练习！！）
例：.circle {
border-radius:50%; 设置边框样式为圆形
opacity:0.5; 设置透明度为0.5
}
<img src="images/vfj.jpg" width="120" alt="">
(4).css的属性选择符中，属性名是放在一对方括号"[]"中的例如：[title]
如果要使用多个属性时，可以连续写多个，另外还可以指定属性具体的值，来更精确的选择元素，甚至可以用正则，来进行范围匹配
例：
/*css文件*/
[alt] {border-radius:50%; border: 50px solid red;}
[alt="小魔女"] {border: 5px solid blue;}
[alt] [title] {border: 5px solid green;}
[alt^="china"] {border: 5px solid pink;}
[alt$="heyzo"] {border: 5px solid purple;}
[alt~="php"] {border: 5px solid yellow;}
[alt|="tokyo"] {border: 5px solid tomato;}
<link rel="stylesheet" type="text/css" href="style.css">
<img src="images/xdb.jpg" width="110" alt="小魔女">
<img src="images/xdb.jpg" width="110" alt=" " title="">
<img src="images/xdb.jpg" width="110" alt="china hefei">
<img src="images/xdb.jpg" width="110" alt="japan heyzo">
<img src="images/xdb.jpg" width="110" alt="php mysql">
<img src="images/xdb.jpg" width="110" alt="tokyo-hot">
方法：
[属性名^=属性值]:指定起始字符
[属性名$=属性值]:指定结束字符
[属性名|=属性值]:以该值开头并以空格分隔
[属性名~=属性值]:以该值开头并以'-'分隔
属性选择符，提供了一个更加强大的选择元素的方法
(5).群组选择符，从字面意义上看，就是一次性的选择多个元素统一进行样式设置，每个选择符之间用逗号分隔，然后把共用样式写到声明块中即可
例：
h1,p {
font-size:40px;
color:#f69;
}
<h1>php</h1>
<p>你好呀</p>
(6).后代选择器 ：第一个选择符是起始点，用空格与后面的选择符分隔开 可以找到所有符合条件的元素包括儿子级，孙子级
例：
父选择符 后代选择符
div p img {
border: 2px solid #F00;
}
例：
h1 span {
font-size:16px;
color:blue;
}
ol li img {
width: 60px;
}
ol li {
font-size:20px;
color:red;
}
<h1>php<span>中文网</span></h1>
<div>
<h3>电影</h3>
<ol>
<li><img src="images/xdb.jpg" width="110" alt="">xcsd</li>
<li><img src="images/xdb.jpg" width="110" alt="">cdf</li>
<li><img src="images/xdb.jpg" width="110" alt="">cdw</li>
</ol>
</div>
(7).子代选择符：仅选择直接子元素。子代选择符还支持伪类
例：
div>a {
color: red;
}
li:first-child {color: red;} 设置li第一行为红色
li:last-child {color:red;} 设置最后面一行为红色
li:nth-child(5) {color:red;} 设置第五行为红色
li:nth-child(even) {color:red;} 设置偶数行文本成红色
li:nth-child(odd) {color:red;} 设置基数行文本成红色
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ol>
(8).通用选择符：通用选择符是用一个" * "号，一次性将页面上所有的元素设置成指定的样式 ，经常用来重置页面所有的默认样式。（谨慎使用！！！）
例：
/*元素默认样式全部被自定义样式所替代*/
* {
font-size: 16px;
color: tomato;
margin:0;
padding: 0;
}
/*同级且相邻的关系 (仅设置一个h2元素而另一个标题没有发生变化)*/
h1+h2 {
color: red;
}
/*同级不相邻的关系 (设置了另外一个元素为红色了)*/
h1~h2 {
color: red;
}
/*同辈选择符又叫兄弟选择符*/
样式层叠的问题（对于同一个元素，将不同的样式，层层叠加上去，这就是层叠样式表css名称的由来）
标签样式的来源：
1.浏览器默认样式
2.用户自定义样式（重点！！！）
样式层叠的问题，是通过样式声明的位置，以及涉及的对象来设置样式不同的优先级来解决的
类样式的优先级明显高于标签样式
标签样式：将包装元素的标签样式重新定义，如果标签样式修改了，那么标签的元素样式自然也被修改
例：
/*标签样式直接修改默认样式*/
h2 {
font-size: 3em; 设置自定义样式，使得浏览器默认的值被修改
color: red;
}
类样式：如果要将页面上某些元素设置成统一的外观就使用类样式（类样式，仅仅做为标签class属性的值存在，因此，类样式可以应用到更多的标签上甚至其他页面都可以引用，所以更加通用）
例：
/*维护时想修改某一些代码时会产生代码冗余，利用类样式这样做就不会了*/
.heagline {
font-size: 1.5em;
font-weight: bold;
color: green;
}
.red {
color: red;
}
/*同一个class可以写多个类名以" " 空格隔开，不用写太多代码，使得代码简洁*/
<p class="heagline red">类样式的优先级明显高于标签样式</p>
id样式：具有id属性的元素，在当前页面中，应该是唯一的，所以通过id属性添加到元素的样式，（优先级要大于类元素！！！）用的并不多，但有的时候非他不可
例：
/*这里样式会变成红色，因为id的级别比其他的都要高，它会覆盖掉标签样式和类样式*/
h2 {
color: green;
}
.blue {
color: blue;
}
#red {
color: red;
}
<h2 id="red">优先级要大于类元素！！！</h2>
行内样式：是通过标签属性style，进行设置，其样式仅适用当前元素。类样式和id样式，也是通过标签属性来调用，但是他们的样式代码是写在标签外面的，可以被多个标签调用，所以行内样式的作用范围最小，级别也是最高
例：
img {
border: 15px solid green; 设置边框为绿色
}
.blue {
border: 15px solid blue;
}
#red {
border: 15px solid red;
}
/*在img标签中，添加style属性 在它的属性值中写入样式声明*/
<img id="red"
style="border: 15px solid yellow;"
src="timg.peg" width="300" alt="">
行内样式的优先级大于id样式，大于类样式，大于标签样式！！
</pre>
</body>
</html>