韩顺平html+css+javascript-----div+css笔记.pdf

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