年初的时候工作不是很忙花了小10天的时间利用业余时间学习了一下web前端开发，前段时间整理电脑，偶然发现了这个文件夹，现在打算把这些东西整理一下，有些东西可能不是很正确也不是很具体，但还是鼓起勇气发出来，毕竟技术只有在分享的过程中才能不断进步。
CSS3中界面元素样式设置的方式
1.CSS行内样式
行内样式就是标签后面进行颜色设置、字体大小。。。。。。。
<h1 style = "color:red";> 这是语段行内样式的设置效果</h1>
<ul>
<li><a href = "#"></a>
<a href = "#"></a>
<a href = "#"></a>
</li>
</ul>
注意在这里可以用Emmate语法快速创建，在这里'>'表示的是父子关系
ul>li>a[href="#"] * 3
运行效果如下:
2.CSS3内嵌样式
内嵌样式是指将页面元素的样式设置代码写在HTML中head内部。
示例代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3的内嵌样式</title>
<style>
/* ‘p {}’ 专门给body中的p段落中的内容进行样式设置 */
p {
color: green;/*设置前景色也就是字体颜色为绿色*/
background-color: aqua;
}
ul {
background-color: aqua;
}
</style>
</head>
<body>
<p>这里是一个段落</p>
<ul>
<li><a href="#">iOS</a></li>
<li><a href="#">Java</a></li>
<li><a href="#">HTML</a></li>
</ul>
</body>
</html>
效果如下:
3.CSS3中的外链样式
在HTML的head中使用link标签来调用外部CSS样式的文件可以实现对本页面样式进行设置，这种方式就是CSS的外联样式。
优点:CSS样式文件可以重复使用
外联CSS样式代码如下:
h1 {
color: red;
}
引用方式代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通过外联设置CSS样式</title>
<link rel="stylesheet" href="../CSS/main.css">
</head>
<body>
<h1>通过外联来设置这段文本的样式</h1>
</body>
</html>
效果图:
4.外联样式的第二种引入方式：@import
@import也可以引入外联样式，具体区别看完代码再说：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导入CSS3样式</title>
<style>
@import "../CSS/main.css";
</style>
</head>
<body>
<h1>通过导入CSS3样式完成这段文本的修改</h1>
</body>
</html>
导入的是同一个CSS样式文件，这里就不放效果图了，关于@import和link这两种方式的异同点，我没有做过深入的研究，不过我在网上发现了很多不错解释，在这里感谢博客园的web前端开发之路！
综合度娘的多篇文章和个人理解，两者的区别总结如下：
1：老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性，等，@import就只能加载CSS了。
2： 加载时间及顺序不同。使用link链接的css是客户端浏览你的网页时先将外部的CSS文件加载到网页当中，然后再进行编译显示，所以这种情况下显示出来 的网页跟我们预期的效果一样，即使一个页面link多个css文件，网速再慢也是一样的效果；而使用@import导入的CSS就不同了，客户端在浏览网 页时是先将html的结构呈现出来，再把外部的CSS文件加载到网页当中，当然最终的效果也是跟前者是一样的，只是当网速较慢时会出现先显示没有CSS统 一布局时的html网页，这样就会给阅读者很不好的感觉。这也是现在大部分网站的CSS都采用链接方式的最主要原因。
3：兼容性不同。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
4：使用dom控制样式时出现问题。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
5： 导入样式可以避免过多页面指向一个css文件。当网站中使用同一个CSS文件的页面不是非常多时，这两种方式在效果方面几乎是没有不同的，但网站的页面数 达到一定程度时（比如新浪等门户），如果采用链接的方式可能就会使得由于多个页面调用同一个CSS文件而造成速度下降，但是一般页面能达到这种程度的网站 也会有资本用最好的硬盘，所以这方面的因素也不用怎么担心。
综上所述，一般普通的站点在调用外部样式表的时候，还是尽量选择link链入外部样式表比较好。
CSS3中样式选择器汇总
在我们开发web界面的时候相当于构建一个完整的人体，HTML赋予了这个人的骨架和结构(头、手、脚......)，CSS决定了这些部位的视觉感受(肤色、高低、胖瘦......)，JavaScript又决定了这个人的行为(吃饭，喝水、跑步......)。前面我们已经讲过一种CSS的引用样式是行内样式，其实这一点上和iOS开发中设置控件样式是类似的，初始化完成一个控件之后就去对这个控件进行设置(按钮的颜色，按钮上文本字体的大小)，但是网站的开发和APP的开发区别在于一个网页的页面元素通常情况下要比一个APP界面元素多得多，如果有20个相同的界面元素要设置相同的背景颜色，那么是不是要用行内样式设置20次？显然不可能。所以我们通常用内嵌样式设置元素样式。那么怎么获取这些元素呢？可以通过标签名称、自己给元素设置的tag(类似于iOS的tag)、这些选择器的作用就是获取元素的，获取元素的选择器大概有以下几种:
1.类选择器
运用条件:当界面中多个标签要设置相同的属性的时候需要给这些标签设置相同的类,然后用类选择器设置CSS样式。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.web {
color: red;
}
.demo {
background-color: green;
}
</style>
</head>
<body>
<!--class这个属性可以有多个值,每个值之前用空格隔开-->
<p class="web demo">这是第一个一个段落</p>
<p>这是第二个段落</p>
<ul>
<li class="web">上海</li>
<li>武汉</li>
<li class="web">深圳</li>
<li>广州</li>
</ul>
<!--标签中class属性和id属性的区别:-->
<!--1.class值可以相同,id属性的值不能相同-->
<!--2.class可以有多个值,但是id只能有一个值-->
<!--尽量使用class属性-->
</body>
</html>
2.复合选择器
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复合选择器</title>
<style>
h2.demo {
color: red;
}
</style>
</head>
<body>
<h2 class="demo">这是第一个h2标签</h2>
<h2>这是第二个h2标签</h2>
<ul>
<li class="demo">这是一段文本</li>
<li>这是一段文本</li>
<li>这是一段文本</li>
</ul>
</body>
</html>
3.后代选择器
后代选择器 先找到 class值为 desc的标签,然后再在这个标签中寻找标签为li的子标签,并对其中的内容进行设置
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style>
.desc li {
color: red;
}
</style>
</head>
<body>
<div class="desc">
<ul>
<li>上海</li>
<li>北京</li>
<li>深圳</li>
</ul>
<ul>
<li>iOS</li>
<li>Java</li>
<li>.net</li>
</ul>
<ul>
<!--通过后代选择器去设置文本的CSS样式这样后添加的文本也能获得之前设置的样式-->
<li>再添加一行</li>
<li>再添加一行</li>
<li>再添加一行</li>
</ul>
</div>
<div>
<ul>
<li>姓名</li>
<li>年龄</li>
<li>电话</li>
</ul>
</div>
</body>
</html>
4.并集选择器
如果多个标签内的文本CSS样式需求是相同的那么可以采用这种方式
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>并集选择器</title>
<style>
p, h1, h2 {
color: red;
}
</style>
</head>
<body>
<p>这是一个段落</p>
<h1>这是h1标题</h1>
<h2>这是h2标题</h2>
<ul>
<li>哈哈</li>
<li>呵呵</li>
<li>啊啊</li>
</ul>
</body>
</html>
5.子代选择器
找到第二层的p标签之后就不再往后再找,所以第四层的p标间的文本颜色无法改变
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子代选择器</title>
<style>
div > p {
color: yellowgreen;
}
</style>
</head>
<body>
<div>
<p>这是第一个段落</p>
<p>这是第二个段落</p>
<h1>这是一个h1标题</h1>
<p><a href="http://www.baidu.com">点击跳转到百度界面</a> </p>
<ul>
<li>
<p>这是最里层的p标签</p>
</li>
</ul>
</div>
</body>
</html>
6.属性选择器
把同时拥有 id 和 class属性的h1标签中的文本进行设置
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
h1[id][class] { color: red; }
input[type="password"] { background: darkgreen; }
</style>
</head>
<body>
<h1 class="desc" id="haha">这是h1标题</h1>
<h1>这也是h1标题</h1>
<input type="text"><br>
<input type="password" >
</body>
</html>
选择器的优先级
上文写到六种选择器的优先级，如果在一个在设置一个元素的颜色和样式的时候既用了后代选择器又用了属性选择器，那么这个元素的到底遵从哪一个设置？这里就牵扯到了优先级问题，优先级我已经总结好了。优先级如下:
选择器优先级排序
行内选择器 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器 > 继承 > 系统默认样式
注意:
在复合选择其中如果两个复合选择器对同一段文本进行样式设置的时候遵循以下的方法
先比较两个复合选择器中行内选择器的个数如果都为0那么比较id选择器的个数如果相同再比较类选择器的个数...
...通过这种方式才能判断出文本的最终样式
只是简单的写了一部分，后续会把自己学到的东西陆陆续续发出来。
