上一篇分享了Html标签，对于学习JavaWeb来说，我们对于前端的部分并不需要掌握太多，所以接下来的几篇分享内容不是很深，只是一些特别基础的东西。后续宝宝还
会分享比较完备的版本，在小白学习h5系列中。不过虽然是基础，但内容还是很多很多滴。在学习web前端部分，我们初学者普遍的感觉都是感觉内容很多，这很正常，这里的
学习方法就是记忆，而且还需要多多练习。
编程语言，从识别的角度可以分为两类：
编译型语言，比如我们之前学习的Java，除了这个还有 PHP c# c 等等。
解释型语言 ，就是我们正在讨论的HTML，JavaScript等。
解释型语言的特点就是不需要类似JDK那样的编译器 ，只需要浏览器即可，浏览器会从上到下逐行解释每一行HTML代码。
在这一阶段我们要学习的主要可以分为三个模块，这些来自于W3C国际的公益组织：
HTML ：标签 作用主要是在浏览器上呈现什么
CSS ： 层叠样式表 作用主要用来修饰标签在浏览器上的“模样”
JavaScript ：简写JS 作用是页面上的特效、验证
下面进入正题：
一.CSS概述
CCS（cascading style sheets ） 中文叫做层叠样式表，主要作用就是给HTML页面进行装修，也就是在上一篇标签的基础上进行装饰，让界面变得更加美观。
额，前方预警，别再吐槽宝宝的审美能力了····
二.使用CSS样式表
首先这里有内部样式，外部样式，行内样式，哦，注意在这里面注释只能用/* */，
1.内部样式
内部样式就是把下面的<style>标签内的东西都放在在<head>标签内
<style>
选择器{ css属性1:css值; css属性2:css值; …}
</style>
截一小段代码来看看更加直观，先不用管里面代码什么意思，内部样式就是<head>这个家庭里多了新成员。
<head>
<meta charset="utf-8" />
<title>样式表的使用方式</title>
<style type="text/css">
@import url("css/listStyle.css");
/*内部使用样式表，在HTML文件内编写样式表*/
li{
font-size: 25px;
color: red;
}
</style>
<link rel="stylesheet" href="css/listStyle.css" />
</head>
内部样式表，适用于页面比较简单，且CSS代码较少的场景。但当页面内容较多时，就会显得比较混乱，而且在内部写这些代码只能该页面自己用，不能被复用。
为了解决这个问题，便有了外部样式表。
2.外部样式
其实我们在建立web项目时，便可以看到自动为CSS代码建了一个窝。我们可以建立.css文件放入到其中。
我们创建文件style.css，这里要知道不管在内部还是外部书写代码的格式是相同的。
接下来我们要在.html文件中引入这个外部样式表：
@charset "utf-8"; 这句代码是告知浏览器，以何种编码方式来解读此样式表 utf-8是以支持中文的方式来解读这个文件
引入方式有两种：
（1）在html的<head>标签内引入
<link rel=”stylesheet” href=”css/style.css”/>
W3C规范要求，引入外部样式表的方式是使用link标签引入
（2）在<head>中引入
<style>
@import url(css/style.css);
</style>
@import url("css/listStyle.css");在style内部必须是style内的第一行有效代码，否则引入失败
这两种引入方式是有区别的：a)link是html的标签，link这个标签不只能引入css，还可以引入其他类型的文件.
@import属于css的，而且它只能引入css样式表
b)link引入的css和html文件同时加载，@import引入的css是先加载完毕html,在加载css.
c)兼容性:link标签无兼容问题，@import是IE5+版本以上支持
d)DOM：link标签可以被DOM访问，但是@import不能被DOM访问
内部样式和外部样式是没有优先级问题的，主要是看谁后执行。外部样式和内部样式修饰同一个标签时，是就近原则
3.行内样式(嵌入样式、内嵌样式)
<标签 style=”css属性:css属性值;” ></标签>
这个行内样式吧，话说其实上一篇文章已经用过很多次了。
4.比较和用处
外部样式：整个网站所有网页的统一风格的设置
内部样式：只针对本网页的风格设置
行内样式：最具有针对性，只针对某一个标签来设置的，优先级最高
上面咔咔写了这么多行，其实用一组程序来看就能直观地理解了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>样式表的使用方式</title>
<style type="text/css">
@import url("css/listStyle.css");
/*内部使用样式表，在HTML文件内编写样式表*/
li{
font-size: 25px;
color: red;
}
</style>
<link rel="stylesheet" href="css/listStyle.css" />
</head>
<body>
<ul>
<li>JAVA SE</li>
<li>oracle数据库</li>
<!--行内样式-->
<li style="font-weight: bold; font-size: 60px;">web前端</li>
<li>JSP</li>
<li>servlet</li>
</ul>
</body>
</html> 外部样式表的.css文件:
/*在样式表文件里写样式的方式和内部样式表的方式相同*/
li{
/*li的背景色*/
font-size: 35px;
color: green;
}
三.CSS语法规范
1.CSS语法规范
选择器{ css属性1:css值; css属性2:css值;…}
注意：CSS的属性值不用打双引号(除了font-family:”宋体”,”New Time” )
2.CSS选择器
1）tag选择器（元素选择器）
作用：为同一种标签设置相同的风格
例如：h1{ color:red; background-color:yellow; }
p{color:red;…}
看下面的程序，大括号前面的是a，也就是说该页面不管有多少个a标签，统统会变成与大括号内所修饰的相同的样式。
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style type="text/css">
a{
/*当前页面中的所有a标签都修饰为如下样式*/
/*去掉a的下划线*/
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<a href="http://www.sina.com.cn">新浪</a>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
a标签原本是什么样子的，上一篇有过例子，是蓝色字加下划线吧，但通过本程序修改后，会变成酱个样子：
2）id选择器
w3c组织规定，页面中的为一个标签（元素）都有一个唯一的标识，这个标识就是ID,要求ID的值不能重复的
作用：专门为某一个标签设置风格，id不能重复，标志一个标签在网页内的唯一性
注意：id名不能是数字、标签名、HTML属性名、等关键字
我们在 html的body里面的标签上添加一个id属性:
<li id="special-li">呵呵</li>
注意：开始标签后的 属性=“属性值” 属性值一定要加双引号""
然后在css部分写上该id属性的属性值即可对其样式进行设置，记得前面要加一个#号:
#special-li{ color:red; }
<html>
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style type="text/css">
/*使用id选择器来修饰标签，由于id规范是唯一的，所以样式表叶
唯一修饰一个标签*/
#logo{
/*盒子的宽度*/
/*除了0不加单位，其余数值一定要加单位，否则不起作用*/
width:200px;
height: 50px;
/*背景颜色*/
background-color: blue;
}
#nav{
width: 1000px;
height: 100px;
background: orange;
}
</style>
</head>
<body>
<div id="logo"></div><br /><br />
<div id="nav"></div>
</body>
</html> 上面的代码分别通过id将两个div标签设置不同的属性，结果如下：
3） class选择器
作用：可以让不同的标签有相同的一类的风格，class可以被多次使用
看下面的程序，有若干个li标签，其中有三个拥有class属性，说明可多次使用，上面使用class的属性值即可设置样式，记住前面要加个小点点
<html>
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style type="text/css">
/*类选择器：类名在引用过程中是可以重复的*/
.titleClass{
font-size: 12px;
font-weight: bold;
}
</style>
</head>
<body>
<ol>
<li class="titleClass">习近平北京考察回访：牢记嘱托绘好北京新蓝图</li>
<li>习近平北京考察回访：牢记嘱托绘好北京新蓝图</li>
<li class="titleClass">习近平北京考察回访：牢记嘱托绘好北京新蓝图</li>
<li>习近平北京考察回访：牢记嘱托绘好北京新蓝图</li>
<li class="titleClass">习近平北京考察回访：牢记嘱托绘好北京新蓝图</li>
<li>习近平北京考察回访：牢记嘱托绘好北京新蓝图</li>
</ol>
</body>
</html> 结果自然是有class的与没有class的结果不一样啊：
4）群组选择器
作用：可以让不同的class,id,tag有相同的风格，用逗号分隔说白了就是统统放到一起：
<html>
<head>
<meta charset="UTF-8">
<title>群组选择器</title>
<style type="text/css">
/*群组选择器：就是将多个选择器，一起来写样式表*/
p,#box,.liClass{
font-size: 30px;
color: darkblue;
}
</style>
</head>
<body>
<h2>静夜思</h2>
<p>
窗前明月光，疑是地上霜<br />
举头望明月，低头思故乡
</p>
<hr />
<div id="box">
测试，我是盒子里的内容
</div>
<ul>
<li>sdfsdfsdfsdfsdfsdf</li>
<li class="liClass">sdfsdfsdfsdfsdfsdf</li>
<li class="liClass">sdfsdfsdfsdfsdfsdf</li>
<li>sdfsdfsdfsdfsdfsdf</li>
<li>sdfsdfsdfsdfsdfsdf</li>
</ul>
</body>
</html> 这样一来，不管是p，div，还是li，只要是上面写到css中一起的部分都会是一个样式：
5）后代选择器
作用：可以跨层通过路径找到标签
注意：后代包括子孙标签
下面这个程序中id值为#box1的div中的所有p标签，包括作为儿子的p标签，还是在li标签里的作为孙子的p标签，统统会变成橘黄色，写法就是中间加空格再写下一级。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
/*id="box1"的标签的下所有p标签*/
#box1 p{
color: orange;
}
</style>
</head>
<body>
<div id="box1">
<p>ppppppppppppppppppp</p>
<ul>
<li><p>liplipliplip</p></li>
<li><p>liplipliplip</p></li>
<li><p>liplipliplip</p></li>
<li><p>liplipliplip</p></li>
</ul>
</div>
<p>outpoutp</p>
</body>
</html>
看一下结果：
6）儿子选择器
作用：一层一层通过路径找到标签 后代选择器是包括所有，子选择器只包括下一级
注意：子选择器必须是子标签 子选择器要中间加>号
将上面的程序稍作修改：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>子选择器</title>
<style type="text/css">
/*子选择器：某一个选择器的直接下一级选择器*/
div>p{
font-size: 35px;
color: darkblue;
}
</style>
</head>
<body>
<div id="box1">
<p>ppppppppppppppppppp</p>
<ul>
<li><p>liplipliplip</p></li>
<li><p>liplipliplip</p></li>
<li><p>liplipliplip</p></li>
<li><p>liplipliplip</p></li>
</ul>
<p>qqqqqqqqqqqqqqqqqqqqqqqq</p>
</div>
<p>outpoutp</p>
</body>
</html> 再来看一看结果：
我们会发现li标签里的p不再变化了，这下就能区分后代选择器和子选择器了吧。
7）伪类选择器
作用：标签的不同状态的不同设置
注意：如果是重写这4种效果，必须按照这4个顺序来
/* 默认的状态 */
a:link{ color:blue; }
/* 已经访问过的状态 */
a:visited{ color:gray; }
/* 浮动的状态 */
a:hover{ color:yellow;}
/ * 正在点击的状态 */
a:active{ color:red;}
<html>
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
/*改变默认的样式*/
a:link{
color: black;
/*去掉文本的下划线*/
text-decoration: none;
}
/*访问过的状态*/
a:visited{
color: red;
}
a:active{
color: darkgreen;
}
a:hover{
background-color: gray;
}
</style>
</head>
<body>
<a href="#">超链接文本</a>
<a href="#">超链接文本</a>
<a href="#">超链接文本</a>
<a href="#">超链接文本</a>
</body>
</html> 这个程序的所有效果无法单纯地用图片表示出来，编写这种格式的代码试验一下就能知道伪类选择器的神奇了。
8）*选择器
作用：统配所有的标签，缺点效率低
用法：*{ margin:0;padding:0;} 这就没什么可多说的了，首领级别的
3.选择器的优先级别
这就是本篇分享的重要内容了。
首先来看下选择器的权重吧：
* :0
tag :1
class,伪类,伪对象,属性:10
id :100
内嵌 :1000
也许乍一看不明白，仔细一看更蒙圈······这里的值越小，优先级越低，蓝色部分是我们常用的一些选择器，需要特别注意。
由上面的数值来看，论优先级别，id>class>tag
那么这1000,100的究竟是用来干什么的呢？这里注意了，使用后代或子选择器会提升优先级别，提升的方法就是这些数值相加。
比如后代选择器#box .style1 p{} = 100+10+1 = 111 这个优先级别就是111，超越了id的100，优先级就比id高了
我们看看代码来消化一下这里所说的东西：
首先我们来看看优先级的体现，上面两组选择器修饰的东西其实是一个东西····
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器的优先级别</title>
<style type="text/css">
/*1、ID选择器
* 2、类选择器
* 3、标签选择器
*/
/*ID选择器比标签选择器级别高*/
/*#box{
background-color: red;
}*/
.boxClass{
background-color: orange;
}
div{
width: 500px;
height: 500px;
background-color: green;
}
</style>
</head>
<body>
<div id="box" class="boxClass"></div>
</body>
</html>
我们来看看浏览器到底以什么形态展现出来：
由于优先级的问题，橘色的那条语句覆盖了绿色的那条语句。
再来看一下优先级提升，这段代码的主人公就是那个既属于p标签又带有id的那块内容。它是和其余p标签一样是蓝色还是自己单独红色呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>优先级别提升</title>
<style type="text/css">
#box .boxClass p{
color: darkblue;
}
#box .boxClass #p1{
color: red;
}
</style>
</head>
<body>
<div id="box">
<div class="boxClass">
<p id="p1">
测试文本内容
</p>
<p>
中国
</p>
</div>
</div>
</body>
</html> 两组都是组合型，但因为前面都一样，就不用算加法了，只看p和#p1的优先级即可，很明显id选择器优先级高，所以结果是：
四.CSS 常用样式属性
下面这些内容可以自己试一试，由于种类繁多，就不一一演示了，我们可以记忆些自己用得上的，打造出属于自己的风格。
1.单位和颜色
1）颜色有三种表示，可以写英文颜色，可以写成16进制颜色，这个之后做静态网页时比较常用，也可以用三原色的0-255数字来表示
h1{color:red;}
h2{color: #fa5cf8;}
h3{color:#fcd;} /* 如果每连两位值一样，可以写成3位的16进制颜色 */
h4{color:rgb(255,255,0);}
px 像素 相对单位
pt 磅 绝对单位 9pt=12px 1pt=4/3;
em 相对单位 1em=16px=12pt
我们常用的自然是px像素2.字体
font-size:字体大小
color:字体颜色
font-family:”字体1”,”字体2”,”字体3”;
font-style: normal/italic/oblique; 字体斜体
font-weight: normal400/lighter100/bold600/bolder900/100~900; 字体粗细
line-height:行高
3. 文本样式
text-decoration:none/underline/overline/line-through; 文本修饰
text-align:left/center/right; 文本对齐
text-indent:32px; 文本缩进
text-transform:normal/uppercase/lowercase/capitalize; 文本变形
text-shadow: x轴偏移 y轴偏移 模糊焦距 阴影颜色; 文字阴影
letter-spacing: 32px; 字母间距(中文无效)
word-spacing:32px; 单词间距
那么来再写点小程序来看一看上面这三组样式属性：
什么上划线下划线字体大小啥的就不写了，地球人都知道是什么样·······那么看下面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本样式</title>
<style type="text/css">
p{
/*
* underline下划线
* overline上划线
* line-through删除线
* */
/*text-decoration: line-through;*、
/*通常不适用，无效果*/
/*text-transform: uppercase;*/
/*文字的阴影*/
/*
* 1、x轴方向偏移，正值横向右移
* 2、y周方向偏移，正值纵向下移
* 3、阴影的模糊度
* 4、阴影的颜色
* 可以设置多个阴影，阴影间用,隔开
* */
text-shadow: 10px 10px 5px blue,
5px 5px 1px red ;
/*单词里字母之间的距离*/
letter-spacing: 30px;
/*单词和单词之间的距离*/
word-spacing: 80px;
}
</style>
</head>
<body>
<p>
好好学习，天天向上hello,everyone hello!
</p>
</body>
</html> 上面代码展示的是阴影，字母间距和单词间距，看效果，见证艺术的降临：
爱，宝宝以为会很美呢，真失望··········
也许各位看官对字体斜体，字体粗细也有点疑惑，那么看下面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字样式</title>
<style type="text/css">
body{
font-family: "黑体","仿宋";
}
.titleClass{
font-style: italic;
}
#test{
font-style: oblique;
/*100~900之间：400是默认的宽度 bold:600*/
font-weight: 900;
}
</style>
</head>
<body>
我一定要<span class="titleClass">好好学习，天天向上</span>，毕业后变身赛亚人！
<span id="test">好好学习，天天向上</span>
</body>
</html> 代码简洁易懂，直接上结果，对照一下即可：
看了这么多，记了这么多， 就不能稍稍弄出一个稍稍高大上一点的东西吗？当然能！
下面这段代码融合了前两篇分享的主要内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>商品分类</title>
<style type="text/css">
/*去掉浏览器默认给的边距*/
*{
padding: 0px;
margin: 0px;
}
#box{
width: 300px;
height: 400px;
/*边框:边框的宽度 线的样式 线的颜色*/
border:1px solid red ;
}
#box>p{
background-color: brown;
height: 50px;
color: white;
font-size: 25px;
font-weight: bold;
/*文字在标签内纵向居中的办法：设置标签的行高和标签高度相等*/
line-height: 50px;
/*左右居中:left 左left 中间center 右right*/
/*text-align: center;*/
/*text-indent字符距离左端的距离*/
text-indent: 2em;
}
#goodsList li{
height: 40px;
/*默认是设置标签的4个边框*/
/*border: 1px dashed black;*/
/*border-top上 -left 左 -right 右*/
border-bottom: 1px dashed black;
line-height: 40px;
font-size: 20px;
font-weight: bold;
text-indent: 10px;
}
/*当鼠标移动到id值是goodsList里的li上时的样式*/
#goodsList li:hover{
/*移动到哪个标签，就修改哪个标签的样式*/
background-color: pink;
color: darkblue;
}
</style>
</head>
<body>
<div id="box">
<p>商品分类</p>
<ul id="goodsList">
<li>电器 厨房用品 小家电</li>
<li>床上用品 针织</li>
<li>电器 厨房用品 小家电</li>
<li>床上用品 针织</li>
<li>电器 厨房用品 小家电</li>
<li>床上用品 针织</li>
<li>电器 厨房用品 小家电</li>
<li>床上用品 针织</li>
</ul>
</div>
</body>
</html>
仔细看看其实也没什么，只不过是第一篇分享的列表加上本篇文章的一些样式罢了，如果看不懂那不科学。
效果如下图所示：
没仔细来做这个效果，这个就是某些购物网站的导航嘛，具体细节可以自己完善。
感觉这篇内容写得有点多诶，有点小累了呢，剩下的样式属性下篇文章再来分享吧，也没办法这里新东西是多了些，学习完javase刚到这里就好像打开了一个新的世界。现
在市面上的培训班h5培训是很火的，市场需求也很多，前端这个世界我们有兴趣也可以多了解了解，而且虽然用起来跟我们要接触的java web相比并不难，蕴含的内容和领域
也远非我所分享的这些基础，宝宝分享的这些仅仅是针对于java web学习所需提前掌握的程度。