|
昨日回顾 CSS Cascading Style Sheet层叠样式表 一个HTML网页 结构 样式 行为 CSS引入方式： 1、行内样式 <标签 style=”样式规则rules”></标签 2、内嵌样式 <style type=”text/css” > 选择器{样式规则} </style> 3、引入样式 <style type=”text/css”> @import url(样式文件名) </style> 4、外部样式 <link rel=”styelsheet” type=”text/css” href=”url”/> 选择器分类 1、 标签选择器 2、 类选择器 3、 id选择器 4、 层级选择器 5、 分组选择器 6、 组合选择器 7、 通用选择器 8、 伪类选择器 a链接的四个状态 a:link{} a链接正常状态 a:visited{} a链接访问后的状态 a:hover{} a链接鼠标县停其上的状态 a:active{} 鼠标a链接按下的状态 组合选择器： 例1： div .box{} 表示选择div标签下的类为box的所有的元素 div.box{} 表示选择class属性为 box的div. 示例： <style type="text/css"> .box{border:2px solid red;} .box1{background:yellow;} </style> <script type="text/javascript"> </script> </head> <body> <div class="box box1"> <span class="box">span1</span> <span>span2</span> </div> 尺寸属性： width: px 百分比 height: px 百分比 字体属性： color: font-size: font-family: font-style: font-weight: font-transform: letter-spacing: 设置字间隔 word-spacing: 设置词间隔 line-height: 设置行高 font: 复合属性 font-size与font-family是必须的 font-weight与font-style必须位于前面 文本属性： text-decoration: underline、over-line、line-through text-align: 主用用于文字或被包含的行内元素的水平对齐方式 vertical-align: 主用于tr或td text-indent: 边框属性： border-width: border-style: border-color: 注意：border-width与border-style是属性 border-color默认是黑色 border：复合属性 border-left-width: border-left-style: border-left-color: border-left: 复合属性 背景属性： background-color: background-image: url(图片url) background-position: 具体值 20px 位置名: left、center、top、right、center、bottom background-repeat: no-repeat、repeat-x、repeat-y bakcground-attachment: fixed scroll background: 复合属性 background:red url(images/bgpic.jpg) 10px 20px no-repeat scroll CSS的优先级与继承：!important > 行内样式 > id选择器 > 类选择器 > 标签选择器 行内样式 > 内部样式 > 外部样式 important重要的意思(IE低版本不兼容) 由于父元素样式会被子元素继承，多个父元素的样式会同时施加在子元素上。为了让设计人员能够清楚的知道哪个选择器的样式最优先，人为的为类型设置了相应的等级： 标签选择器 1 类选择器 10 id选择器 100 行内样式 1000 继承： 会被继承的样式主要是与文本相关的样式 color、font-size、font-family、font-weigth、font-style、letter-spacing、word-spacing、line-height、text-indent、text-transform、text-align、text-deocration 边距属性 外边距： margin: 复合属性 设置元素的外边距 margin-left: 设置元素与其父元素的左边距 margin-top: 设置元素与其父元素的上边距 margin-right: 设置元素与其父元素的右边距 margin-bottom: 设置元素与其父元素的下边距 有四种写法 1、 margin:10px;
2、 margin:10px 20px; 10px代表上下外边距 20代表左右边边距
3、 margin:10px 20px 30px; 10px代表上边距 20px代表左右外边距 30px代表下外边距
4、 margin:10px 20px 30px 40px; 10px代表上外边距 20px代表右外边距 30px代表下外边距 40px左外边距
设置一个块元素水平居中 margin:0 auto; 内边距 padding-left: 设置内左填充距离 padding-top: 设置内上填充距离 padding-right: 设置内右填充距离 padding-bottom: 设置内下填充距离 padding: 复合属性 四种写法： 1、 padding:10px;
2、 padding:10px 20px;
3、 padding:10px 20px 30px; 4、padding:10px 20px 30px 40px; 盒子模型任何一个html元素都可看成一个”盒子”。现实中盒是用来装物品，这个物品称之为内容(content)，为了保护物品会在盒子与物品之间放置一些填充物，这个填充物称之内填充(padding)，盒子本身有一个厚度，这厚度称之为border，在放置盒子时为了通风会将盒子与盒子之间保留一定距离(margin)； 在html 中存在两种盒子模式：一种是标准盒子模型，另一种是IE盒模型 标签盒子模型
一个元素在网页所占的宽度由：width+padding(左右)+border(左右)+margin(左右) div{width:100px;border:2px solid red;padding:10px 20px 30xp 40px;margin:30px;} 100px+2*2px+20px+40px+30px*2=224 IE盒子模型
一个元素在网页上所占的宽度由：width+margin(左右) div{width:100px;border:2px solid red;padding:10px 20px 30xp 40px;margin:30px;} 100px+30px*2 =160 什么时候使用的是标准盒模型，什么时候使用的是IE标签模型，当一个网页文档使用了DTD声名时，则使用W3C标签盒子模型，当没有此声名时，各浏览器使用的是各自的盒子模型。 课堂案例：盒子案例 布局float设置物体浮动 float:left; 设置元素向左浮动 float:right; 设置元素向右浮动 浮动的特点： 1、 元素设置浮动后，浮起来，并向左或向右移动，直到遇到包含它的父元素才停止移动， 2、 其他的元素，会过来真实他的位置 3、在元素浮起，移动过程中会出现”卡住”的现象 4、元素浮动后其他的示浮动的元素会过来填充其位置，但非浮动元素的文字性内容不会被覆盖。 5、行内元素浮动后即变为块元素 clear:清除其他元素浮动后对当前元素的影响 clear:left; 清除左则浮动的影响 clear:right; 清除右则浮动的影响 clear:both; 清除右面浮动的影响 为使包含元素在”视觉”上达到包含被浮动元素的效果 1、添加一个清除层为其设置clear:属性 2、在包含元素上使用overflow:hidden; 文档流 浏览器在解析html 文档的时候是将html元素一个接一个的按文档的顺序，在页面上由左到右由上至下显示。这种默认的按文档顺序在页面中显示元素，就叫文档流。 列表样式：ul和ol list-style-image: 自定义列表项目符号 list-style-type: 设置列表项目符号的类型 none、upper-alpha、lower-alpha、upper-roman、lower-roman、upper-latin、lower-latin list-style-postion: 设置项目符号的位置 取值：inside项目符号位于li区域内 outside项目符号位于li区域外 list-style: 复合属性 <div>与<span>的区别： div+css是目前最流行的布局方式。DIV是一个块元素，主要用于在页面定义一个区域，其内容可以包含文本、图片、以及div等任何元素。 span是一个行内元素，DIV可以定义一个区域，span也可以定义一个区段，一般可以使用div包含span，但一般不会使用span包含div，span主要是用来设置样式。 |
|
|
