div+css笔记.docx

DIV+CSS学习笔记Div是用于存放内容（文字，图片，元素）的容器Css是用于指定在div中的内容如何显示，包括这些内容的位置和外观快速入门案例（体验案例）：Css.html: My.css:.style1/*宽度*/width:400px;height:300px;background-color:silver;border:1px solid red;margin-left:400px;margin-top:250px;padding-top:50px;padding-left:50px;Css中常用的四种选择器1、 类选择器（class选择器）基本使用.类选择器属性名:属性值;2、 .id选择器基本使用：#id选择器属性名:属性值;案例：/*id选择器的使用*/#id1background-color:silver;font-size:40px;3、 Html元素选择器基本使用某个html元素属性名:属性值;4、 通配符选择器该选择器可以用到所有的html元素，但是其优先权最低基本使用*属性名:属性值;css文件可以使用在各种文件（php、html、jsp、asp.）四个选择器优先级如下：id选择器 class选择器 html选择器 通配符选择器案例：我们希望所有的超链接（1） 默认样式是黑色，24px。没有下划线（2） 当鼠标移动到超链接时，自动出现下划线（3） 点击后，超链接变成红色Link.html:连接到sohuwwwwwwwwwwwwwwwwwwww wwwwwwwwwwwwwwwwwwww Link.css:a:link link:设置a对象在未被访问前的样式表属性color:black; 默认样式是黑色text-decoration:none; 没有下划线font-size:24px; 字体是20pxa:hover hover:设置a对象在鼠标悬停时的样式表属性text-decoration:underline; 当鼠标移动到超链接时，自动出现下划线font-size:40px; 字体变大color:green; 颜色为绿色a:visited visited:设置a对象在其链接地址已被访问过时的样式表属性color:red; 点击后，超链接变成红色/*对同一种html元素分类*/p.cls1color:blue;font-size:30px;p.cls2color:red;font-size:20px;u 选择器深入探讨：l 父子选择器：一则非常重百度要的新闻/*父子选择器*/#id1 span /*对id1下边的一个span进行控制*/（非常重要）color:red;font-style:italic;#id1 span span /*对id1下边的下边一个span进行控制*/（重） color:green;#id1 span span a /*对id1下边的下边的下边a进行控制*/（百度） color:blue;font-size:20px;总结： 父子选择器可以有多级（但是在实际开发中不要超过三层） 父子选择器有严格的层级关系 父子选择器不局限于什么类型选择器比如：#id span span.s1 #id spanDiv #id .s2l 一个元素可以同时有id选择器和class选择器案例：新闻一l 一个元素最多有一个id选择器，但是可以有多个类选择器l使用方法：案例：Html部分：新闻三Css部分：/类选择器的使用*/.s1background-color:pink;font-weight:bold;font-size:16px;color:black;/*新闻三再配置一个class选择器*/.cls1font-style:italic;text-decoration:underline;color:blue;background-color:silver;特别注意：当两个类选择器发生冲突了，则以写在css文件中的后面的那个类选择器为准l 我们可以把某个css文件中的选择器共有的部分，独立写出来一份，比如：/*把某个类选择器的公共部分，单独抽取一份，好处是可以减少css的冗余*/*招生广告*/.ad_stuwidth:136px;height:196px;background-color:#FC7E8C;margin:5px 0 0 6px;float:left;/*广告2*/.ad_2background:#7CF574;width:457px;height:196px;margin:5px 0 0 6px;float:left;/*房地产广告*/.ad_housebackground:#7CF574;width:152px;height:196px;margin:5px 0 0 6px;float:left;上面的css可以写成：/*把某个类选择器的公共部分，单独抽取一份，好处是可以减少css的冗余*/*招生广告*/.ad_stuwidth:136px;background-color:#FC7E8C;/*广告2*/.ad_2background:#7CF574;width:457px;/*房地产广告*/.ad_housebackground:#7CF574;width:152px;.ad_stu, .ad_2, .ad_househeight:196px;float:left;margin:5px 0 0 6px;l 说明：css文件本身也会被浏览器从服务器下载到本地，才能显示效果练习：u 行内元素和块元素快速入门案例：从案例我们看出：行内元素它只显示自己内容的宽度，而且他不会占据整行块元素不管自己的内容有多少，会占据整行，并换行显示l 常见：常见的行内元素： 常见的块元素： 案例：Element.html:span1span2div1div2这是一个段落Element.css:.s1background-color:pink;.s2background-color:gray;.s3background-color:silver;u 块元素和行内元素相互转换l Display：inline -转为行内元素（比如div）.s1background-color:pink;display:block; /*我希望使用s1类选择器的元素，按照块元素显示*/l Display：block -转为块元素（比如a）.s2background-color:gray;display:inline;u Css文件之间的相互引用如果希望在a.css中使用到b.css的选择器，我们可以通过import指令来完成import url(被引用的css文件)如果希望在html或者hp文件中引用某个xxx.css也可以在标签中import url(“某个css文件”)u 标准流和非标准流流：html元素在网页中显示的顺序标准流：在html文件中，写在前面的元素在前面显示，写在后面的html元素在后面显示非标准流：在html文件中，当某个元素脱离标准的标准流，那么他就处于非标准流u Css中的盒子模型l 盒子模型的经典案例：Box.html盒子模型案例Box.cssbodyborder:1px solid red; /*1px表示边框的宽度 solid实线 red表示颜色*/width:500px;height:500px;/*如何让body自动居中*/margin:0 auto; /*第一个用于上下，第二个用于左右 auto表示自动居中*/*盒子模型的概念：margin，padding，border，content*/.div1width:60px;height:62px;border:1px solid blue;/*margin-top:5px;margin-left:5px;*/margin:5px 0px 0px 5px; 是上面两行注释部分的简写/*padding-top:5px;*/ 这样写容易让盒子自适应.div1 imgwidth:50px;height:50px;margin-top:5px;margin-left:5px;l 盒子模型的加深案例：分析思路：基本结构代码：Box2.html: Box2.css:.div1width:480px;height:220px;border:1px solid gray;.faceulwidth:400px;height:180px;border:1px solid red;padding-left:10px;margin-left:5px;.faceul lilist-style-type:none; /*使用项目符号*/float:left; /*左浮动*/width:60px;height:62px;border:1px solid blue;margin-left:5px;margin-top:5px;.faceul li imgwidth:50px;height:50px;margin-left:5px;margin-top:5px;u 浮动在div+css中浮动分为左浮动、右浮动、清除浮动l 右浮动：所谓右浮动指一个块元素向右移动，让出自己的空间，向右移动直到碰到包含自己的父元素的最右面的边框案例：Float.html:div1div2div3Float.css:.div1 .div2height:100px; height:500px;width:150px; width:500px;border:1px solid blue; border:1px solid red;background-color:pink; margin-top:5px;/*id选择器，要求右浮动*/#specialfloat:right;l 左浮动：快速入门案例：Css文件：（html文件同上面右浮动相同）.div1height:100px;width:150px;border:1px solid blue;background-color:pink;margin-top:5px;margin-left:5px;float:left;/*左浮动*/从这个案例我们可以看出，所谓左浮动就是指：某个块元素尽量向左移动，这样就让出它右面的空间，让别的块元素显示。如果浮动元素的高度不同，那么当他们向下移动时可能被其他浮动元素“卡住”，直到有足够空间如果使用浮动属性：则该元素不管是不是块元素，都会按照display：block来显示小总结：可以这么理解浮动：如果一个元素右/左浮动则： 它本身会尽可能向右/左移动，直到碰到边框或者别的浮动元素，特别强调浮动对块元素都生效 元素向右/左浮动，就相当于让出自己的左/右边，别的元素就会在他的左/右边排列u 定位常见的定位：1、 static定位（默认值）2、 relative相对定位3、 absolute绝对定位4、 fixed固定定位l 相对定位：案例：Position.html:内容1内容2内容3内容4Position.css:.div1width:70px;height:30px;background:silver;float:left;margin-left:5px;#specialposition:relative;left:40px;top:100px;可以看出，所谓相对定位是指：相对该元素应当显示的左上角重新定位，虽然它脱离了标准流，但是他的空间，不能被占用l 绝对定位：css文件：（其余与上面完全一样）#specialposition:absolute;/*绝对定位*/left:40px;top:100px;从上图看，所谓绝对定位是指：对该元素最近的那个脱离了标准流的元素定位，如果没有父元素（或者有父元素，但是父元素没有脱离标准流），则相对body左上角定位。怎么理解红色字：代码：Html：内容1内容3内容4内容2Css：.div1 #specialwidth:70px; /*position:relative;*/height:30px; position:absolute;/*绝对定位（究竟对谁）*/background:silver; left:40px;/*left为正，则向右移动*/float:left; top:100px;/*top为正，则向下移动*/margin-left:5px; .div2position:relative;left:100px;top:10