搜索
本章目标9.1DIV盒模型介绍9.2CSS概述9.3CSS语法9.4DIV+CSS样式实例布局9.1div盒子模型介绍CSS中，BoxModel叫盒子模型（或框模型），BoxModel规定了元素框处理元素内容（elementcontent）、内边距（padding）、边框（border）和外边距（margin）的方式。在HTML文档中，每个元素（element）都有盒子模型，所以说在Web世界里（特别是页面布局），BoxModel无处不在。下面是BoxModel的图示：一个盒模型包括4个区内容（content）内边距（padding）边框（border）外边距（margin）9.1div盒子模型介绍9.1div盒子模型介绍说明：上图中，由内而外依次是元素内容（content）、内边矩（padding-top、padding-right、padding-bottom、padding-left）、边框（border-top、border-right、border-bottom、border-left）和外边距（marging-top、margin-right、margin-bottom、margin-left）。内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。而且，外边距可以是负值，而且在很多情况下都要使用负值的外边距。9.1div盒子模型介绍下图是W3School的BoxModel图解：9.2CSS概述层叠样式表css（CascadingStyleSheets）的缩写。也称为级联样式表它是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。9.2CSS概述•CSS-级联样式表单–CascadingStyleSheet–对WEB页面进行外观控制的机制–将页面的内容和表现分离•CSS版本–目前为止，CSS有两个官方标准：CSS1和CSS2–CSS1的功能在大多数浏览器中都被支持•—nocss.html、css.html9.2示例-无CSS9.2示例-有CSS9.2.1CSS优点•优点–代码独立，便于控制–样式文件可在浏览器中缓存–便于分工合作–提高了可访问性–提供更多的外观控制手段9.3css样式•CSS样式–内联样式–嵌入样式–外联样式9.3.1内联样式•内联样式—inlineCSS.html–把样式代码内联到标记内•使用style作为属性，样式语句作为属性值•如：•控制table标记的边框样式为不折叠9.3.1内联样式特点•内联样式特点–看上去很直观–针对个别元素控制–和传统的外观控制方式没有本质的不同–不推荐使用9.3.2嵌入样式•嵌入样式—internalCSS.html–使用style标记把样式代码插入到页面中–一般插入到head标记中–如：9.3.2嵌入样式特点•特点–将CSS语句直接写在HTML文档中，但它独立存在，方便维护和修改–仅针对一个HTML文档进行设置–代码是HTML文档的一部分，没有利用浏览器的缓存机制9.3.3外联样式•外联样式—externalCSS.html–通过外部样式文件对页面进行控制–外部的样式文件通过HTML的link元素连接到HTML文档中9.3.3外联样式使用•使用–建立外部样式文件（.css）–外部的样式文件不能含有任何像head或style这样的HTML标记–样式表文件仅仅由样式规则或声明组成9.3.3外联样式特点•特点–当样式被应用到很多的网页时，推荐使用外部样式表–网页制作者使用外部样式表，在改变整个网站的外观时，仅需要改变一个文件–大多数浏览器会保存外部样式表在缓冲区，从而如果样式表在缓冲区就避免了在展示网页时的延迟–在实际开发中一般都使用外联样式9.3.4CSS基本语法•选择符{属性1:属性值1;属性2:属性值2;}–选择符（selector）：指定样式适用的标记，除指定标记外，样式不起作用–属性：样式的关键字–属性值：描述样式的值；–格式：属性与属性之间使用分号分隔，属性与属性值之间使用冒号分隔–如：P{font-size:12pt;color:red;}•使用—html.cssbody{color:black}p{font-family:”sansserif”}p{text-align:center;color:red}p{text-align:center;color:black;font-family:arial}如果是多个单词，使用双引号括上如果有多个属性，使用分号将各个属性分隔开注意代码的格式，使可读性更好9.4CSS基本语法9.5选择符分类•选择符分类–普通选择符–类选择符–id选择符9.5.1普通选择符•普通选择符–任意的HTML标记–其样式仅仅作用在选择符指定的HTML元素上–如：p{color:red}•通用选择符（补充）–其样式作用在所有元素上–如：*{color:red}9.5.2类选择符•类选择符–同一类型的不同元素通过设置不同CLASS来显示不同样式；但一个元素只能设置一个CLASS属性–HTML元素名加上类名，中间用“.”号分开，类名供该HTML元素的CLASS属性使用–如：使用不同颜色显示，下面例子建立了两个类，OddColor和EvenColor，供tr使用•tr.OddColor{color:red}•tr.EvenColor{color:blue}–如果省略HTML元素名只写“.类名”表示这个类名适用于所有的HTML元素的CLASS属性–下面例子建立了一个类note，可以被任何元素使用–.note{font-size:small;color:red}9.5.3id选择符•id选择符–个别地定义每个元素的成分–可以作用到任意HTML元素的ID属性上–尽量少用，因为id选择符具有一定的局限（严格来说，在一个页面中，每个id只能使用一次）–要有“#”在名字前面–如：#svp{font-size:12pt}9.5.4关联•关联—css_choose.html–是一个用空格隔开的两个或更多的单元选择符组成的字符串–这些选择符可以指定一般属性，而且因为层叠顺序的规则，它们的优先权比单一的选择符大–如：pem{background:yellow}表示段落（p）中的强调文本（em）是黄色背景，而其它部分的强调文本不受影响9.5.5组合使用•组合使用练习–建立一个HTML文件，其中有h1-h6标记的文字；–对h1与h2标记使用类型选择符设置样式；–对h3与h4标记使用id选择符设置样式；–对h5标记使用通用的类型选择符设置样式；–对h6标记使用通用的id选择符设置样式–参考css_choose.html，样式可以自己定义。–——css_exercise.html9.6样式就近原则•样式就近–并列的定义•当定义重复时，后出现的定义会覆盖前面的定义–对同一结点指定样式，但层次结构不一样—near.html•在层次结构上最接近指定结点的CSS起作用9.7伪类及伪对象•伪类及伪对象–由CSS自动支持，属CSS的一种扩展型类–名称不能被用户自定义，只能按照标准格式进行应用–伪类可以应用到不同的元素上，但目前所有浏览器只支持a元素与超链接操作相关的伪类–伪对象只应用在特定对象上9.7.1超链接伪类•a:link{font-size:14px;color:#ffffff;text-decoration:none;}•a:visited{color:#db7093;text-decoration:none;}•a:hover{color:#564b47;}•a:active{color:#000000;}//注意必须保持4个伪类的顺序•示例不容易演示，同html课件中的超链接的样式。•不建议使用。9.7.2常用伪对象•示例：pseudoLetter.html、pseudoLine.htmldiv:first-line{color:red;font-size:16px;}p:first-letter{color:red;font-size:16px;}9.8注释•注释–/**/，但要注意不要将注释嵌入到选择器语句里面常用的样式属性属性CSS名称说明颜色color文本属性font-size字体大小font-family字体text-align文本对齐边框属性(用于表单元素)border-style边框样式border-width边框宽度border-color边框颜色定位属性(position)top顶部边距（上边距）left左边距width宽度height高度z-indexz轴索引号，用于层常用的样式属性值一类型CSS属性值字体属性font-familyArial，serif，宋体…font-sizeSmall，medium，large…或直接指定字体大小font-stylenormal,italic…font-weightnormal,bold,lighter,100,200…文本属性text-alignleft,right,center,justifytext-indent度量或%(表示文本首行缩进)text-decorationnone,blink,underline,overline,line-throughtext-transformnone,capitalize,uppercase,lowercasevertical-alignBaseline,super,sub,top,text-top,middle-bottom,text-bottomword-spacing度量(增加或减少单词间的空白)letter-spacing度量(增加或减少字符间的空白)常用的样式属性值二类型CSS属性值框属性borderNone,solid,double,ridge,inset,outset,groove,dotteddashedborder-style同上border-width度量，thick，medium，thinborder-color#RRGGBB，颜色名称margin-top度量或%Margin-left度量或%定位属性top度量width度量或%height度量或%left度量颜色属性color#RRGGBB，颜色名称background-color#RRGGBB，颜色名称，transparentbackground-imageurlbackground-repeatrepeat,repeat-x,repeat-y,no-repeat9.4div+CSS布局实例9.4.1内、外补丁属性body{margin-left:0px;margin-right:0px;margin-top:0px;margin-bottom:0px;}td{padding:2px2px2px2px;}/*以顺时间方向算，从上开始*/td{padding-left:2px;padding-right:2px;padding-top:2px;padding-bottom:2px;}•在html中使用css简单方法1、关键词metaname=keywordscontent=建材市场2、外部链接linkhref=style.cssrel=stylesheettype=text/css9.4.2CSS布局9.4.2CSS布局•在html中使用css简单方法3、伪类a:link{}/*未访问的链接*/a:visted{}/*已访问的链接*/a:hover{}/*鼠标移动到链接*/a:active{}/*选定的链接*/9.4.2CSS布局•在html中使用css简单方法5、ul无序列表属性属性值含义disc实心圆circle空心圆squae实心方块none无样式：list-style:none;9.4.2CSS布局•在html中使用css简单方法6、文字修饰text-decoration属性值含义none无默认underline下划线overline上划线line-through删除