1、初识CSS
a、必要性： 统一网站风格、可以使用滤镜
滤镜的使用： img{
filter:gray;
}
b、CSS使用基本语法：
选择器{
属性1：属性值；
属性2：属性值；
}
<!--span 元素常用于存放小块内容、大的内容用div--> HTML注释
/* .s1 就是类选择器 */ CSS注释
c、CSS如何应用：css部分可以单独写一一个文件，然后引入；也可以直接嵌入到HTML文件；
<!--如何引入css link 连接的意思（固定格式） stylesheet 样式表（固定格式） herf用来指定用哪个css文件 连接一个样表，这个样式表的类型是 text或者css 格式 可引入多个css文件，整体格式复制-->
<link rel="stylesheet" type="text/css" herf="Case4.css"/>
案例：
d、常用的四种选择器：
类选择器（class选择器） ： .类选择器名{
属性名：属性值；
.......
}
id选择器: #id选择器{
属性名：属性值；
.......
}
html元素选择器： 某个html元素{
属性名：属性值
......
}
通配符选择器: *{
属性名：属性值
......
}
css 文件可以使用在各种文件（php,html,jsp,asp...）
该选择器可以用到所有的html元素，但是优先级最低
选择器优先级 ： id选择器>class选择器>html选择器>通配符选择器
案例：1、如何让所有的超链接：
1）、默认样式是 黑色，24px，没有下划线（系统默认是蓝色，有下划线）:text-decoration 下划线
html文件 css文件 /* a 是一个元素 代表包裹超链接的元素a*/
<a href="http://www.baidu.com">连接到baidu</a> a{
color=black;
text-decoration:none;
font-size:24px;
}
2）、当鼠标移动到超链接时，自动出现下划线，字体变大
伪类选择器 link设置 a 对象没有被访问前的样式
a{
color=black;
text-decoration:none;
font-size:24px;
}
hover设置鼠标悬停在对象上的样式
a:hover{
text-decoration:underline;
font-size:40px;
}
3）、点击后，超链接变成 红色
伪类选择器 visited 伪类向已访问的链接添加特殊的样式
a:visited{
color:red;
}
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 当有鼠标悬停在链接上 */
a:active {color: #0000FF} /* 被选择的链接 */
注释：为了产生预期的效果，在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后！！
注释：为了产生预期的效果，在 CSS 定义中，a:active 必须位于 a:hover 之后！！
注释：Pseudo-class（伪类）的名称对大小写不敏感。
注释：伪类可与 CSS 类配合使用：
a.red:visited {color: #FF0000;}CSS Syntax
如果上面这个例子中的链接已访问过，那么它会显示为红色。
案例：2、css同一个段落如何设置两种不同样式？
css文件(对同一种html 分类): 相应的html文件：
p.cls1{ <p class="cls1">my name is Li</p>
color:red;
font-size:20px;
}
p.cls2{ <p class="cls2">hello wold!</p>
color:green;
font-size:30px;
}
案例：3、运用通配符选择器改变HTML文件内容距离边框边距
margin 是什么？ 有什么作用？如何运用？
设置外边距的最简单的方法就是使用margin 属性
*{
margin-top:40px;
margin-left:0px;
}
margin-top 属性设置元素的上外边距 定义固定的默认值是 0
margin-right 属性设置元素的右外边距 定义固定的默认值是 0
margin-bottom 属性设置元素的下外边距
margin-left 属性设置元素的左外边距
这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的
margin: top right bottom left
margin如果写一个值 表示 上、右、下、左（顺时针） 的边距
如果写两个值表示 上下、左右 的边距
如果写三个值表示 上、左右、下 的边距
内外边距都清零：（屏蔽不同浏览器默认内外边距的不同值）
margin:0px;
padding:0px;
选择器的细节：
1、父子选择器的使用：
必须用现有的html认识的标记、父子选择器可以有多级（实际开发不要超过三层）、父子选择器有严格的层级关系、 父子选择器可以是任何类型的选择器
#id1 span{
color:red;
}
#id1 span span{
color:green;
}
2、一个元素可以同时有 id 选择器和 class 选择器
案例：
3、一个元素最多有一个 id 选择器 ，可以有多个类选择器，（当两个类选择器发生冲突，css文件中写在后面的类选择器优先）
方法如下：
<元素 class=“类选择器1 类选择器2”/>
html文件
<span class="S2 S1">星期天</span>
css文件
.S1{
background-color:red;
font-style:normal;
}
.S2{
background-color:green;
font-style:Italic;
}
4、可以吧css文件中几个选择器中共同的部分单独拉出来写（减少css的冗余）
.a1{
width: 120px;
background-color:blue;
float:left; /* 向左浮动*/
margin: 5px 0 0 6px;
}
.a2{
width: 320px;
background-color:green;
float:left; /* 向左浮动*/
margin: 5px 0 0 6px;
}
.a3{
width: 457px;
background-color:yellow;
float:left; /* 向左浮动*/
margin: 5px 0 0 6px;
}
可以改写成如下:
.a1{
width: 120px;
background-color:blue;
}
.a2{
width: 320px;
background-color:green;
}
.a3{
width: 457px;
background-color:yellow;
}
/*三个选择器之间必须要用逗号隔开，不然就成为父子选择器了*/
.a1, .a2, .a3{
float:left; /* 向左浮动*/
margin: 5px 0 0 6px;
}
2、块级元素和行内元素
入门案例：
<html>
<head>
<link rel="stylesheet" type="text/css" herf="my.css"/>
</head>
<body>
<span>span1</span>
<span>span2</span>
<div>div</div>
<div>div</div>
</body>
</html>
行内元素 只占能显示自己的宽度，不会占据整行（常见行内元素：<a> <span> <input type="xxx">）
块元素 不管自己内容多少，会占据整行，换行显示(常见块元素：<div> <p>)
行内元素 和 块元素可以相互转换：
Display: inline
Display: blocj
