CSS的定义
HTML和CSS的关系
HTML 结构层 负责从语义的角度搭建页面结构
CSS 样式层 负责从 审美的角度美化页
JavaScript 行为层 负责从 交互的角度提升用户体验
CSS语法
-语法结构：
选择器{属性:值;属性:值;…….}
-选择器：选择谁
参数说明：属性和属性值之间用冒号(:)隔开，定义多个属性时，属性之间用英文输入法下的分号;隔开。
选择器：
实现CSS对HTML页面样式的控制，如果要让这些样式对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器，HTML页面中的元素就是通过CSS选择器进行控制的。
如何编写CSS
如何编写CSS样式?
标签选择器
CSS简单属性
类选择器（class）
使用方法：
第一步：使用合适的标签把要修饰的内容标记起来，如下：
<span>Web开发</span>
第二步：使用class="类选择器名称"为标签设置一个类，如下：
<spanclass="one">Web开发</span>
第三步：设置类选器css样式，如下：
.one{color:red;}
类选择器（class）多类选择器
一个标签可以有多个类选择器的值，不同的值用空格分开，如：
<divclass="one yellow leftStyle">此处为标签内的文字</div>
这样我们可以将多个样式用到同一个标签中
页面布局常见命名规范
头 |
header |
内容 |
content/container |
尾 |
footer |
导航 |
nav |
侧栏 |
sidebar |
标志 |
logo |
广告 |
banner |
页面主体 |
main |
内容 |
content |
命名：最好不用汉字，html标签去定义一个类名。 不能用数字开头
在名称内部可以出现特殊符号例如：下横线 _ 中横线-
ID选择器
ID选择器和类选择器用法一样，区别是同一个HTML页面中不能有相同的ID名称(使用多个相同的ID选择器，浏览器不会报错但是不符合W3C标准了，所以ID选择器命名必须要唯一性)
ID选择器以"#" 来定义。如图：
ID选择器与类选择器的区别
1：类选择器： 好比人的名字 刘德华 可以多人使用
2：id 选择器 好比人的身份证 唯一性 有且只能使用一次
3：不同于类选择器，ID 选择器不能结合使用
写样式的时候，大部分都是用类，极少的使用id。不提倡用id 去写样式，因为他的权重太高。 Id 主要是为了js做准备。
通配符选择器
通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：
*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
例如下面的代码，使用通配符选择器定义CSS样式，设置所有HTML标记字体大小
Css相关属性
Text-align |
Center,left,right |
文字居中格式 |
Font-size |
18px |
设置文字大小 |
Font-family |
微软雅黑,宋体 |
设置字体 |
Font-weight |
Normal默认，bold粗体，100px |
设置字体加粗 |
Font-style |
Normal默认，italic斜体 |
设置字体风格 |
Color |
颜色 |
设置文字颜色 |
Css字体合写
字体合写语法格式如下
注意:必须有 字体大小和字体 (font-size 和font-family), 必须严格按顺序写
css复合选择器
css复合选择器-标签指定式
1、标签指定式选择器（即....又....）
标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格，如
h3.special或p#one。
后代选择器
后代选择器(包含选择器)
后代选择器用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。
并集选择器
3、并集选择器
并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（包括标记选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。
综合小练习
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>综合案例演示</title>
<style type="text/css">
.box{
width: 800px;
height: 200px;
margin: 0 auto;
}
.title{
text-align: center;
/*font-family: "微软雅黑";*/
/*font-style: normal;*/
/*font-size: 28px;*/
font:normal 28px "微软雅黑";
}
.subtitle{
text-align: center;
}
.subtitle .time{
color: #aabbcc;
font-size: 14px;
/*background-color: yellow;*/
}
.subtitle .news_title{
color: #990000;
font-size: 14px;
/*background-color: pink;*/
}
p{
text-indent: 2em;
line-height: 28px;
}
p span{
color: #3399cc;
}
input[type="button"]{
color: green;
font-size: 12px;
}
input[type="text"]{
color: red;
font-size: 14px;
}
a{
font-size: 14px;
}
</style>
</head>
<body>
<div class="box">
<h2 class="title">中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h2>
<div class="subtitle">
<span class="time">2014年07月16日20:11</span>
<span class="news_title">新浪体育 评论中大奖（11人参与）</span>
<a href="#" >收藏文本</a>
<input type="text" placeholder="请输入查询条件">
<input type="button" value="搜索"/>
</div>
<hr>
<p>新浪体育讯 7月16日是燕京啤酒<span>[微博]</span>2014中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，并且收拾行囊准备离开。在这样的情况下，丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。</p>
<p>在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈。</p>
<p>据记者多方了解的情况，李虎<span>[微博]</span>极其教练组近来在执教成绩上承受了不小的压力，在联赛间歇期期间，教练组曾向俱乐部提出能够多引进有实力的球员补强球队，然而由于和俱乐部在投入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。</p>
<p>这样的情况并没有影响到丽江嘉云昊队<span>[微博]</span>的队员，在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下一轮比赛。<strong>根据中国足协杯的赛程，丽江嘉云昊队将在本月23日迎战江苏舜天队。</strong></p>
</div>
</body>
</html>