《韩顺平div+css笔记(全).doc》由会员分享，可在线阅读，更多相关《韩顺平div+css笔记(全).doc（21页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、div+css详解 div+css的介绍div是用于存放html元素，文字，图片，视频的元素css 是层叠样式表，用于指定div中的内容的样式原理图：div+css的快速体验案例：test.html：div+css入门案例12345 12345 12345 12345 12345 my.css中指定：.style1width:300px;height:200px;border:1px solid red;margin:100px 0px 0px 200px;.style1 tableborder:1px solid black;width:298px;height:190px;.style1
2、table tdborder: 1px solid black;text-align:center;栏目一 从使用span元素我们可以看到，css的基本语法元素可以是html的任意元素：属性名：属性值要参考 w3c组织给出的参考文档使用css可以统一网站的风格css分类：外部css 内部css css1.html !- .style1 font-size: 20px; color:red; font-weight: bold; font-style: italic;栏目一 栏目二 栏目三 栏目二 栏目三 使用滤镜/*使用滤镜将图片变成黑白色*/img /*使用滤镜*/a:link img fi
3、lter:gray; filter:gray; a:hover img filter:;!- 1类选择器的基本语法:.类选择器名属性名:属性值;.style1font-weight: bold;font-size: 20px;background-color: pink; 新闻一新闻二新闻三新闻四新闻五2id选择器基本语法：#id选择器名属性名：属性值；案例：#style2font-size: 30px;background-color: skyblue;在html文件中如果要引用id选择器，则这是一则重要的新闻3Html选择器 /*html选择器body(button,input,form.
4、)*/bodycolor:silver;结论：当一个元素同时被id选择器 类选择器 html选择器修饰时，优先级为： id选择器类选择器html选择器通配符选择器这是一则重要的新闻案例：假设，我们希望所有的超链接（1） 默认样式是黑色，24px，没有下划线（2） 当鼠标移动到超链接时，自动出现下划线（3） 点击后，超链接变成红色。my.css文件a:linkcolor:black;font-size:24px;text-decoration:none;a:hovertext-decoration:underline;a:visitedcolor:red;html文件：百度首页 搜狐首页4通配符
5、选择器如果希望所有的元素都符合某一种样式，可以使用通配符选择器。/*使用通配符选择器，对外边距和内边距清零*/*/*margin:0px;*/ margin:10px 0px 0px 10px;/*如果margin给出四个值，则表示上，右，下，左*/ margin:10px 0px 0px;/*如果margin给出三个值，第一个用于上，第二个用于（左，右），第三个用于下*/5父子选择器padding:0px;/*padding规则和margin一样*/针对：这是一则非常重要的新闻 my.css添加一个父子选择器/*父子选择器*/#style2 spanfont-style:italic;col
6、or:red;注意： （1）子选择器标签必须是html可以识别的标记（2）父子选择器可以有多级（3）父子选择器可以适用于id选择器和class选择器（4）如果一个元素被id选择器和class选择器同时修饰时，id选择器的优先级class选择器（5）一个元素最多有一个id选择器，但是可以有多个类选择器例希望新闻三 下划线，同时斜体my.css中添加.style1font-weight: bold;font-size: 20px;background-color: pink;color:black;.style3font-style:italic;color:green;text-decorati
7、on: underline;Html文件中如何使用多个class选择器：新闻三a 在引用多个class选择器的时候，用空格隔开b 当class选择器发生冲突时，在css文件中，以最后出现的class选择器样式为准（6）在css文件中，如果有多个类/id选择器，它们都有相同的部分，我们可以把相同的css样式放在一起，间案例：案例：my.css/*招生广告*/.ad_stuwidth :136px;height:196px;background-color:#FC7E8C;margin:5px 0 0 5px;float:left/*广告2*/.ad_2width :457px;height:19
8、6px;background-color:#7CF574;margin:5px 0 0 6px;float:left/*房地产广告*/.ad_housewidth :152px;height:196px;background-color:#7CF574;margin:5px 0 0 5px;float:left在有些css中，我们可以把多个class选择器，id选择器，html选择器，共同的部分提取出来，写在一起，这样的好处是可以简化css文件我们可以把上面的css文件改写成：/*招生广告*/.ad_stuwidth :136px;background-color:#FC7E8C;margin
9、:5px 0 0 5px;/*广告2*/.ad_2width :457px;background-color:#7CF574; margin:5px 0 0 6px; /*房地产广告*/.ad_househeight:196px;background-color:#7CF574; margin:5px 0 0 5px; .ad_stu,.ad_2,.ad_house width :152px;float:left6块元素和行内元素（1）行内元素，又叫内联元素内联元素只能容纳文本或者其他内联元素，常见内联元素 特点是：只占内容的宽度，默认不换行，行内元素一般放文本或者其它的行内元素。（2）块元素
10、块元素一般都从新行开始，可以容纳文本，其它内敛元素和其它块元素，即使内容不能占满一行，块元素也要把正行占满，常见块元素 特点：不管内容有多少，都要换行，同时占满整行，块元素可以放文本，行内元素，块元素。（3）一些css属性对行内元素不生效，比如margin，left，right，width，height，建议尽可能使用块元素定位。（与浏览器类版本和类型有关）行内元素1行内元素2块元素1块元素2.s1background-color: silver;font-size:20px;.s2background-color: skyblue;font-size:30px;font-style: ita
11、lic;（4）块元素和行内元素的转换如果我们希望一个元素按照块元素的方式显示，则： display：block； abc如果我们希望一个元素按照行内元素的方式显示，则： display：inline； hellocss核心内容流1 标准流/非标准 流标准流：在网页布局中，写在前面的元素出现在前面，写在后面的元素，显示在后面，这是默认的布局方式，也成标准流。非标准流：在实际网页布局中，我们可能需要使用非标准流的方式来布局（让某个元素脱离它本身的位置）。2 css盒子模型盒子模型的原理图细节说明：（1） html元素都可以看成一个盒子（2） 盒子模型的参照物不一样，则使用的css属性不一样，比如从
12、div1的角度看，是margin-right，从div2的角度看，则是margin-left（3） 如果不希望破坏整个外观，则尽量使用margin布局，因为padding可能会改变盒子的大小（相当于这个盒子有弹性），margin如果过大，盒子内容被挤到盒子外边去，但是盒子本身没有变化3 案例:BoxDemo.html:盒子模型 !- BoxDemo.css：bodybackground:images/a.jpg;border:1px solid red;width:800px;height:1000px;margin:0 auto; /* 0表示上下间距为0.s1border:blue 1px
13、 solid;width:180px;height:190px;margin-top:10px;margin-left:10px;/*padding-top:10px; auto表示左右居中*/ padding-left:10px;*/.s1 div.s1 div img4 盒子模型的综合案例（可以当做一个模板来使用）5 浮动浮动是一个重要的概念：分为左浮动，有浮动，清除浮动。 浮动必要性，因为默认情况下，div纵向排列比如： border:1px solid silver; width:60px; margin-top:10px; margin-left:10px; border:blue
14、1px solid; width:80px; height:90px; margin-top:10px; margin-left:10px;如果希望1div向右面显示，这时我们使用有浮动： float：right；如果我们希望，所有的元素，横向排列，则使用到左浮动：这时，对div的css添加：float：left；特别注意：如果一行宽度不够排下所有的div，则会自动换行：当然，如果有某个div的过大，则会卡主别的div6 css定位css的定位有以下几种： static定位这个是默认的方式，对static而言，left和right是不生效的。 relative定位（相对定位）元素框偏离某个位置
15、（left 和 top），元素仍然保持为定位前的形状，它原本所占的空间仍保留，从这一角度看，好像该元素仍然在文档流/标准流中一样。 特别说明：1.relative的参照点是它原来的位置，进行移动案例：改为：代码：内容一内容二 内容三内容四在css中：.style1width:100px; height:70px; background-color:silver; float:left; margin-left:10px;#specialposition:relative; /*使用相对定位*/ left:40px; /*在原来的位置的基础上，向右移动的大小（如果希望向左移动，则值就是负数）*/
16、top:100px; /*在原来的位置的基础上，向下移动的大小（如果希望向上移动，则值就是负数）*/ absolute定位（绝对定位）相当于元素从原来的位置脱离，并让出自己的空间，后面的元素就会占有让出的空间。改为：代码：内容一内容二 内容三内容四在css中：.style1#special width:100px; height:70px; background-color:silver; float:left; margin-left:10px;position:absolute; /*使用绝对定位*/ left:40px; /*在原来的位置的基础上，向右移动的大小（如果希望向左移动，则值就是负数）*/top:100px; /*在原来的位置的基础上，向下移动的大小（如果希望向上移动，则值就是负数）*/特别说明：这里特别强调一点，absolute定位是相对于离自己最近的那个非标准流盒子而言的。 fixed定位元素框的表现类似于将position设置为absolute，不过其包含快是视窗本身。7