文西马龙：http://blog.csdn.net/wenximalong/
①父子选择器
类选择器和id选择器都可以有父子选择器总结：
1.父子选择器可以有多级（但是实际开发中不要超过三层）
2.父子选择器有严格的层级关系
3.父子选择器不局限于什么类型选择器
比如：
#id span span
.s1 #id span
div #id .s2
②一个元素可以同时有id选择器和类选择器
对一个元素而言，不能有多个id选择器，只能有一个id选择器。
<span class="s1" id="news_specail">新闻一</span>
③一个元素可以同时有id选择器和类选择器
当id选择器和类选择器发生冲突时，id选择器优先级高于类选择器
优先级：id选择器>类选择器
比如：id选择器指定字体为红色，而类选择器指定字体为蓝色，则页面显示红色。
④一个元素最多有一个id选择器，但是可以有多个类选择器
<元素 class="类选择器1 类选择器2" />
<span class="cls1 s1">新闻三</span>
细节：
（1）一个元素既有类选择器，又有id选择器，id选择器的优先级高
（2）一个元素有两个类选择器，当发生属性冲突的时候，以谁为准呢
如：<span class="s1 cls1">新闻三</span>
.s1有 color:black;
.cls1有 color:blue;
不以class="s1 cls1"的先后顺序为准
而是以css文件中.s1和.cls1，谁在文件最后出现，以谁的属性为准。即在css文件出现的先后顺序，谁后出现以谁为准。
特别注意：当两个类选择器发生冲突了，则以写在css文件中的后面的那个类选择器为准。
⑤当一个元素被id选择器，类选择器，html选择器同时限定时，优先级是：id选择器>类选择器>html选择器>通配符选择器
demo.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="demo.css" />
</head>
<body>
<span class="s1" id="news_specail">新闻一</span>
<span class="s1">新闻二</span>
<span class="s1 cls1">新闻三</span>
<span class="s1">新闻四</span>
<span class="s1">新闻五</span>
</body>
</html>demo.css
.s1{
background-color: pink;
font-size: bold;
font-size: 16px;
color: black;
}
/*对新闻一做一个特别的修饰*/
#news_specail{
color: red;
font-style: italic;
}
/*给新闻三再配置一个class选择器*/
.cls1{
font-style: italic;
text-decoration: underline;
color: blue;
}⑥在css文件中，如果多个类/id选择器它们都有相同的部分，我们可以把相同的css样式放在一起。
注意：浏览器会向服务器发出请求，单取这个css文件，和取一个图片没什么区别的，都是取资源。css文件本身也会被浏览器从服务器下载到本地，才能显示效果。
案例代码
/*招生广告*/
.ad_stu{
width: 136px;
height: 196px;
background-color: #FC7E8C;
margin: 5px 0 0 6px
float: left;
}
/*广告2*/
.ad_2{
background: #7CF574;
height: 196px;
width: 457px;
float: left;
margin: 5px 0 0 6px
}
/*房地产广告*/
.ad_house{
background: #7CF574;
height; 196px;
width: 152px;
float: left;
margin: 5px 0 0 6px
}
/*把各个类选择器的公共部分，单独抽取写一份，好处是可以减少css的冗余*/
/*招生广告*/
.ad_stu{
width: 136px;
background-color: #FC7E8C;
}
/*广告2*/
.ad_2{
background: #7CF574;
width: 152px;
}
/*房地产广告*/
.ad_house{
background: #7CF574;
width: 152px;
}
.ad_stu, .ad_2, .ad_house{
height: 196px;
float: left;
margin: 5px 0 0 6px
}块元素和行内元素——区别
1.行内元素只占内容的宽度，块元素内容不管内容多少都要占全行。2.行内元素只能容纳文本和其它行内元素，块元素可以容纳文本，行内元素和块元素。（与浏览器类版本和类型有关）
3.一些css属性对行内元素不生效，比如margin,left,right,width,height.建议尽可能使用块元素div定位。（与浏览器版本和类型有关）
块元素和行内元素——概念
行内元素（inline element），又叫内联元素：
内联元素只能容纳文本或其他内联元素，常见内联元素<span><a>
块元素（block element）：
块元素一般都从新行开始，可以容纳文本，其它内联元素和其它块元素，即使内容不能占满一行，块元素也要把整行占满。常见块元素<div><p>
★★★这个概念非常的重要★★★
从上面可以看出，行内元素它只占能显示自己内容的宽度，而且他不会占据整行，而块元素他不管自己的内容有多少，会占据整行，而且会换行显示。
常见的行内元素：<a> <span> <input>
常见的块元素有：<div><p>
块元素和行内元素——相互转换
请注意：行内元素和块元素可以相互转换
display:inline ->转为行内元素（比如div）
display:block ->转为块元素（比如a）
css不区分大小写，但是统一为好。
demo2.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="demo2.css" />
</head>
<body>
<!--行内元素以能够显示自己为目标-->
<span class="s1">span1</span>
<span class="s1">span1</span>
<!--input元素也是行内元素-->
<span class="s1">span1</span><input type="text" name="username" />
<!--虽然只有3个字母，但是以沾满整行为目的-->
<!--块元素以占据整行为目标，不会因为内容少，而只占据那么一部分-->
<!--给div设置宽度，设置的窄一些，默认情况下，下面的div也不会上来，不会因为自己变窄了，就不占据一行了-->
<div class="s2">div</div><input type="text" name="hello" />
<!--div老霸气了，除非上面的div左浮动，虽然上面的div右边是空白，但是input元素还是被挤到下一行-->
<div class="s3">div</div>
<!--p元素也是块元素-->
<p style="background-color: silver">这是一个段落</p>
<!--此时的行内元素转成块元素显示，并占据整行，input元素被挤到下一行，上面的情况做对比-->
<span class="s4">span1</span><input type="text" name="pigname" />
<!--此时的行内块元素转成行内元素显示，紧跟着上面的input元素，自身后面的input元素也没有换行显示，和上面的情况形成对比-->
<div class="s5">div</div><input type="text" name="hello" />
</body>
</html>demo2.css
.s1{
background-color: pink;
}
.s3{
background-color: gray;
}
.s2{
background-color: pink;
width: 100px;
}
.s4{
background-color: pink;
display: block; /*把使用s4类选择器的元素，按照块元素显示*/
}
.s5{
background-color: gray;
display: inline; /*把使用s5类选择器的元素，按照行元素显示*/
}CSS文件的相互引用
a.css b.css c.ss
如果希望在a.css中使用到b.css c.css的选择器
可以通过@import指令来完成
@import url（"被引用的css文件"）
如果希望在html或者php文件中引用某个xxx.css也可以在<style>标签中
<style>
@impurt url("某个css文件")
</style>
把公共的部分提取出来
★★★一个非常重要的概念★★★
流：在现实生活中就是流水，在网页设计中就是指元素（标签）的排列方式。（html元素在网页中显示的顺序）
标准流：元素在网页中就像流水，排在前面的元素（标签）内容前面出现，排后面的元素（标签）内容后面出现。
非标准流：当某个元素（标签）脱离了标准流[比如因为相对定位]排列，我们统称为非标准流排列。关于非标准流，将在定位小结讲解。
盒子模型——概念（★★★★★css核心内容）
要搞清楚盒子模型，就必须 先明白下面几个概念：
在网页设计中常听的属性名：内容（content）、填充（padding）、边框（border）、边界（margin），css盒子模型都具备这些属性。
形象理解：把div看做一个盒子，里面装了一个古董花瓶（内容content），为防止被撞坏了就在盒子里填充了泡沫之类紧紧包裹着花瓶，泡沫就是padding，盒子和墙边的距离就是margin。
亲自动手绘制下图，就会理解清楚了。
盒子模型——经典案列 （必须掌握★★★★★★）
从简单盒子到复杂盒子
一点点引出知识点，知识点不可能一步到位的讲解。
<!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。
该标签声明三种DTD类型，分别表示严格版本，过渡版以及基于框架的HTML文档。
国内门户网站用的多为
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
注意：图片也是盒子，想把图片压下来该怎么处里？
如果是在div中设置margin:5px 0px 0px 5px;虽然把图片向下压了，但是div也随着变长了，div自适应的增长了。在div img中设置margin-top: 5px;把img也当做盒子，div的内边距，就是img的外边距，这样就不会出现盒子被撑破自增长了，对比上面的。详细看css文件，自己实际操作下就会明白。
★★★辩证的看，div的内边距就是img的外边距★★★
素材
====
box.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="box.css" />
</head>
<!--在IE浏览器下，会发现body被包全了，并没有按照css文件中的width:600px;，height:500px;显示，这时候需要引入<!doctype标签>-->
<body>
<div class="div1">
<img src="m4.jpg" />
</div>
</body>
</html>box.css
body{
/*边框粗细，边框，边框颜色*/
border: 1px solid red; /*1px表示边框的宽度 solid实线 red表示颜色*/
width: 600px;
height: 500px;
/*如何让body自动局中*/
margin: 0 auto;/*第一个用于上-下，第二个用于左-右 auto表示自动局中*/
}
/*盒子模型 margin ,padding,border,content*/
.div1{
width: 90px;
height: 90px;
border: 1px solid blue;
/*margin-top: 5px;
margin-left: 5px;*/
margin: 5px 0px 0px 5px;
/*虽然把图片向下压了，但是div也随着变长了，div自适应的增长了*/
/*padding-top: 20px;*/
}
.div1 img{
width: 80px;
height: 80px;
/*把img也当做盒子，div的内边距，就是img的外边距，这样就不会出现盒子被撑破自增长了，对比上面的*/
margin-top: 5px;
margin-left: 5px;
}如果把，css中的div img属性设置为margin-left: 35px;则图片要离盒子而去，所以事先要测量好。
修改的css代码
.div1 img{
width: 80px;
height: 80px;
/*把img也当做盒子，div的内边距，就是img的外边距，这样就不会出现盒子被撑破自增长了，对比上面的*/
margin-top: 5px;
margin-left: 35px;
}韩顺平_php从入门到精通_视频教程_学习笔记_源代码图解_PPT文档整理_目录
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
