探索样式布局篇.ppt

1、探索样式布局篇,CSS,CSS简介 它能做什么？ CSS语法结构 怎样将CSS应用到网页中？,CSS 简介,什么是CSS? CSS (Cascading Style Sheets) 层叠样式表 它能做些什么？ 使用CSS样式可以有效地对页面进行布局。 使用CSS样式可以对页面字体、颜色、背景和其他效果实现精确描述，同时对它们的修改和控制变得更加快捷。 可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的代码，那么整个站点的所有页面都会随之发生变动。 CSS可以支持多种设备,比如手机,PDA,打印机,电视机,游戏机等 目的：将表现与结构分离。,CSS 语法结构,

2、CSS 语法由三部分构成：选择符、属性和值 Selector Property:Value; 选择符 属性 值 例： body background-color:#cccccc; ,将CSS应用到网页中,1.行间样式表 行间样式表是指将CSS样式编码写在XHTML 标签之中。 如： 这是一个标题,将CSS应用到网页中,2. 内部样式表 内部样式表作为页面中的一个单独部分，由标签定位在之中。 如： body background-color:#cccccc; ,将CSS应用到网页中,3.外部样式表 外部样式表是CSS应用中最好的一种形式，它将CSS样式代码单独放在一个外部文件中，再由网页进行调用

3、。 如： style.css body background-color:#cccccc; ,CSS选择符,1.类型选择符 所谓类型选择符，指以网页中已有的标签名作为名称的选择符。 如 body h1 p ,选择符,2.群组选择符 除了可以对单个标签进行样式指定外，还可以对一组标签进行相同的样式定义。 如： h1, h2, h3, p font-size:12px; font-family:arial; 使用逗号对选择符进行分隔。对页面中需要使用相同样式的地方，只需写一次样式。,选择符,3.包含选择符 当我们只打算对某个对象的子对象进行样式定义时，可以使用包含选择符。 如： h1 span f

4、ont-weight:bold; ,选择符,3.id 及 class 选择符 id 及 class 均是css 提供由用户自定义标签名称的选择符，用户可以使用选择符id及class 来对页面中的xhtml标签进行自定义名称，从而达到扩展xhtml标签及组合html标签的目的。 如：id 选择符 这是一个段落 #p1 font-size:12px; font-weight:bold; ,选择符,如：class 选择符 这是一个段落 .p1 font-size:12px; font-weight:bold; 在网页中，每个id名称中只能使用一次，不得重复。 与id 不同，class 允许重复使用。

5、比如页面中的多个元素，都可以使用同一个样式定义。,选择符,4.组合选择符 如： h1 .p1 表示h1标签下的所有class为p1的标签。 #content h1 表示id为content的标签下的所有h1标签。,选择符,5.伪类选择符 伪类可以看做是一种特殊的类选择符，是能被支持CSS的浏览器自动所识别的特殊选择符。它 的最大的用处就是可以对链接在不同状态下定义不同的样式效果。 a:link color: #FF0000; text-decoration: none /* 未访问的链接 */ a:visited color: #00FF00; text-decoration: none /*

6、 已访问的链接 */ a:hover color: #FF00FF; text-decoration: underline /* 鼠标在链接上 */ a:active color: #0000FF; text-decoration: underline /* 激活链接 */ * 一定要按照a:link， a:visited， a:hover， a:active的顺序书写,选择符,6.通配选择符 * * 号表示所有的对象 所谓通配选择符，就是指可以使用模糊指定的方式来对对象进行选择，指定样式。 如： * color:blue; ,样式优先权,1.写法优先权 优先级依次是： 行内样式表 内部样式表

7、 外部样式表,样式优先权,2.选择符优先权 对于id 与 class 而言，id的定义优先于class 的定义。 具有class属性的比没有class属性的优先权要大。 id class 类型选择符,样式继承,1.XHTML 中的子标签会继承部分父标签的样式。 如: body color:#ff0000; 那么页面中,body之下的所有标签及标签下的所有子标签的文本都将变成红色。 2. !important 在两行相同类型的css样式定义中，往往优先执行后面一个; p font-size:14px; font-size:20px; 但是可以通过!important 语法，提升某一句样式表的重要

8、性，使及优先执先 !important标注的语句。 p font-size:14px;!important font-size:20px; ,CSS代码注释,Css 代码注释，以 /* 开始 */ 结束 如： /* 公共样式*/ body margin:0px; padding:0px; /*导航样式开始*/ #nav /*导航样式结束*/,练习： 结合 css 样式表手册，熟悉常用样式属性。 1.字体属性 2.文本属性 3.背景属性 4.列表属性,CSS 常用样式,字体样式,1.字体 font-family设置文字名称，可以使用多个名称，或者使用逗号分隔，浏览器则按照 先后顺序依次使用可用字

9、体。 例： p font-family:宋体，黑体; 2.字号 font-size设置文字的尺寸 例： p font-size:14px;,字体样式,3.字体加粗 font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 例： p font-weight:bold; 4.斜体 font-style : normal | italic | oblique 例： p font-style: normal; p font-style: italic; p f

10、ont-style: oblique; ,字体样式,5.下划线控制 text-decoration : none | underline | blink | overline | line-through 例： p text-decoration:overline; p text-decoration:underline; p text-decoration:line-through;,字体样式,6.字体样式缩写 font : font-style | font-variant | font-weight | font-size | line-height | font-family 例： P

11、 font-style:italic; font-weight:bold; font-size:14px; line-height:22px; font-family:宋体; color: 缩写后： p font:italic bold 14px/22px 宋体,段落样式,1.行高 line-height : normal | length 例： p line-height:25px; p line-height:150% 2.段落缩进 text-indent : length p text-index:2em;,段落样式,3.段落对齐 text-align : left | right |

12、center | justify 对于text-align,不但是文本，对象中的其它元素也能够被text-align进行对齐方式的设置。 例： p text-align:right; p text-align:center; 4.文字间距 letter-spacing : normal | length p letter-spacing:5px;,背景样式,1.背景颜色 background-color : transparent | color 例： body background-color:#CCCCCC; h1 background-color:#EDEDED; 2.背景图片 back

13、ground-image : none | url ( url ) body background-image:url(images/bg.gif);,背景样式,3.背景平铺方式 background-repeat : repeat | no-repeat | repeat-x | repeat-y 例： body background-repeat:repeat-x; 4.背景定位 background-position : 左对齐方式 上对齐方式 例： body background-position:left bottom; body background-position:30% 20

14、px;,背景样式,5.背景属性缩写 Background: 背景色 背景图片 背景平铺方式 背景定位 例： body background-color:# EDEDED; background-image:url(images/bg.png); background-repeat:no-repeat; background-position:50% 30px; 缩写后： body background:#EDEDED url(images/bg.png) no-repeat 50% 30px;,尺寸样式,1.宽度 width : auto | length 例： p width:300px;

15、div width:50%; 2.高度 height : auto | length 例： img height:200px; div height:100px;,边框样式,1.边框线 border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset 例： div width:300px; height:100px; border-style:solid; border-top-style 设置上边框线 border-bottom-style 设置下边框线 bord

16、er-left-style 设置左边框线 border-right-style 设置右边框线,边框样式,2.边框宽度 border-width : medium | thin | thick | length 例： div width:300px; height:100px; border-style:solid; border-width:1px; border-top-width 设置上边框宽度 border-bottom-width 设置下边框宽度 border-left-width 设置左边框宽度 border-right-width 设置右边框宽度,边框样式,3.边框颜色 borde

17、r-color : color 例： div width:300px; height:100px; border-style:solid; border-width:1px; border-color:#FF0000; border-top-color 设置上边框颜色 border-bottom-color 设置下边框颜色 border-left-color 设置左边框颜色 border-right-color 设置右边框颜色,边框样式,4.边框样式缩写 border : border-width | border-style | border-color 例： div width:300px

18、; height:100px; border-style:solid; border-width:1px; border-color:#FF0000; 缩写后： div width:300px; height:100px; border:1px solid #FF0000; ,外边距,margin : auto | length 例： div width:300px; height:100px; margin:10px; div width:300px; height:100px; margin:0 auto; margin-top 设置上边的外边距 margin-bottom 设置下边的外边

19、距 margin-left设置左边的外边距 margin-right设置右边的外边距 缩写型式： margin: 上边距 右边距 下边距 左边距 margin: 上下边距左右边距 margin: 上边距 左右边距 下边距,内边距,padding : length 例： div width:300px; height:100px; padding:10px; padding-top 设置上边的内边距 padding-bottom 设置下边的内边距 padding-left设置左边的内边距 padding-right设置右边的内边距 缩写型式： padding: 上边距 右边距 下边距 左边距 p

20、adding : 上下边距左右边距 padding : 上边距 左右边距 下边距,列表样式,1.项目符号 list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin

21、| upper-latin 例： ul list-style-type:disc;/*实心圆*/ ul list-style-type:circle;/*空心圆*/ ul list-style-type:square;/*实心方块*/ ul list-style-type:none;/*不显示项目符号*/ ol list-style-type:decimal;/*阿拉伯数字*/ ol list-style-type:lower-roman;/*小写罗马数字*/ ol list-style-type:upper-alpha;/*大写英文字母*/,列表样式,2.自定义项目符号 list-style

22、-image : none | url ( url ) 例： ul list-style-image:url(images/arrow.gif) ,链接样式,1.链接没有被访问时的样式 a:link 例： a:link color:#ff0000; 2.链接被访问后的样式 a:visited 例： a:link color:#0000ff; text-decoration:none; 3.鼠标悬停在链接上的样式 a:hover 例： a:link background-color:#ccc; ,链接样式,4.鼠标点击链接时的样式 a:active 例： a:active background-

23、color:#ff0000;,元素显示模式,display : block | none | inline | inline-block display 属性用来设置元素的显示方式。 block块对象指的是元素显示为一个方块，默认显示状态下，它将占据整行，其它的 元素只能在下一行显示。 inline行间对象与block刚好相反，它允许其它元素在同一行显示。 none隐藏对象,元素的浮动,float : none | left | right float 属性用来控制元素是否浮动显示。 left向左浮动 right向右浮动 none不浮动,练习1： 网站导航 表格布局 CSS布局,练习2： 新闻

24、列表,练习3：,Css 布局,div 标签, div 与其它标签一样，也是一个XHTML所支持的标签。 div 是XHTML中指定的，专门用于布局设计的容器标签。 在css布局方式中，div 是这种布局方式的核心对象，我们的页面排版不再依赖于表格，仅从div的使用上说，做一个简单的布局只需要两样东西：div 与 css.因此我们称这种布局方式为 div + css 布局。,并列与嵌套div 结构,页面头部 页脚,header,content,footer,header,footer,left,right,盒模型,盒模型就是指CSS布局中的每一个元素，在浏览器的解释中，都被当作一个盒状物。 对我

25、们来说，只需要理解元素在页面中所占据的位置。 ie6 / ie7 / firefox 的最终宽度 = 左外边距 + 左边框宽 + 左内边距 + 宽度 + 右内边距 + 右边框宽 + 右外边距,文档流,文档流是浏览器解析网页的一个重要概念，对于一个XHTML网页，body 元素下的任意元素，根 据其前后顺序，组成了一个个上下关系，这便是文档流。浏览器根据这些元素的顺序去显示它 们在网页中的位置。 文档流是浏览器的默认显示规则,深入浮动,浮动的目的 就是要打破文档流的默认显示规则。如果要让元素按照我们的布局要求进行显示。这时就要利 用float属性。 1.任何申明为 float 的元素自动被设置为

26、一个“块级元素“。 2.在标准浏览器中 浮动元素脱离了文档流 ，所以浮动元素后的元素会占据浮动元素本来应该 所处的位置。 3.如果水平方向上没有足够的空间容纳浮动元素，则转向下一行 。 4.文字内容会围绕在浮动元素周围 。 5.浮动元素只能浮动至左侧或者右侧 。,清除浮动,clear : none | left | right | both none :默认值。允许两边都可以有浮动对象 left :不允许左边有浮动对象 right :不允许右边有浮动对象 both :不允许有浮动对象,元素的定位,position : static | absolute | fixed | relative s

27、tatic :无定位，默认值 absolute：绝对定位 脱离文档流。 通过 top,bottom,left,right 定位。 如果父元素 position 为 static 时，将以body坐标原点进行定位。 如果父元素 position 为 relative 时，将以父元素进行定位。,元素的定位,relative ：相对定位 不脱离文档流 参考自身静态位置通过 top,bottom,left,right 定位。 fixed：固定定位 固定定位实际上只是绝对定位的特殊形式；固定定位的元素是相对于浏览器窗口而固定，而不是相对于其包含元素；即使页面滚动了，它们仍然会处在浏览器窗口中跟原来完全一

28、样的地方。,元素的深度,z-index : auto | number 当元素发生重叠时，可以通过 z-index 属性，设置其重叠的先后顺序。 较大 number 值的对象会覆盖在较小 number 值的对象之上。,z-index: 100;,z-index: 50;,网页布局,1.一列固定宽度 html: 一列固定宽度 css: #layout width:800px; height:500px; border:1px solid #333; background:#ccc; ,2.一列宽度自适应 html: 一列宽度自适应 css: #layout width:80%; height:500px; border:1px s