div+Css课前基础知识普及

Div+Css课前基础知识普及css概念如何使用css控制页面Css基本语法CSS概念CSS(CascadingStyleSheets)中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。标记的概念htmlheadtitle页面标题/title/headbodyh2CSS标记/h2pCSS标记的正文内容从这里开始/p/body/htmlHtml的缺陷htmlheadtitle页面标题/title/headbodyh2fontcolor=#0000FFface=黑体CSS标记1/font/h2pCSS标记的正文内容1/ph2fontcolor=#0000FFface=黑体CSS标记2/font/h2pCSS标记的正文内容2/ph2fontcolor=#0000FFface=黑体CSS标记3/font/h2pCSS标记的正文内容3/ph2fontcolor=#0000FFface=黑体CSS标记4/font/h2pCSS标记的正文内容4/p/body/htmlCss的引入htmlheadtitle页面标题/titlestyle!--h2{font-family:幼圆;color:red;}--/style/headbodyh2CSS标记1/h2pCSS标记的正文内容1/ph2CSS标记2/h2pCSS标记的正文内容2/ph2CSS标记3/h2pCSS标记的正文内容3/ph2CSS标记4/h2pCSS标记的正文内容4/p/body/html特点：1.样式表极大地提高了工作效率2.样式通常保存在外部的.css文件中。通过仅仅编辑一个简单的CSS文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。3.允许同时控制多重页面的样式和布局，CSS可以称得上WEB设计领域的一个突破。作为网站开发者，你能够为每个HTML元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。使用CSS控制页面行内样式内嵌式链接式导入样式htmlheadtitle行内样式/title/headbodyh2style=“font-size:16px;color:#000ffd;text-decoration:underline;”CSS标记1/h2pstyle=“font-size:12px;color:red;text-decoration:underline;”CSS标记的正文内容1/ph2CSS标记2/h2pCSS标记的正文内容2/p/body/htmlhtmlheadtitle集体声明/titlestyletype=text/css!--h1,h2,h3,h4,h5,p{/*集体声明*/color:purple;/*文字颜色*/font-size:15px;/*字体大小*/}h2.special,.special,#one{/*集体声明*/text-decoration:underline;/*下划线*/}--/style/headbodyh1集体声明h1/h1h2class=special集体声明h2/h2h3集体声明h3/h3h4集体声明h4/h4h5集体声明h5/h5p集体声明p1/ppclass=special集体声明p2/ppid=one集体声明p3/p/body/htmlhtmlheadtitle集体声明/titlelinkhref=1.csstype=text/cssrel=stylesheet/headbodyh1集体声明h1/h1h2class=special集体声明h2/h2h3集体声明h3/h3h4集体声明h4/h4h5集体声明h5/h5p集体声明p1/ppclass=special集体声明p2/ppid=one集体声明p3/p/body/htmlhtmlheadtitle集体声明/titlestyletype=text/css!--@importurl(1.css);--/style/headbodyh1集体声明h1/h1h2class=special集体声明h2/h2h3集体声明h3/h3h4集体声明h4/h4h5集体声明h5/h5p集体声明p1/ppclass=special集体声明p2/ppid=one集体声明p3/p/body/html@importurl(url);指定导入的外部样式表及目标设备类型url使用绝对或相对地址指定导入的外部样式表文件注意：多重样式将层叠为一个样式表允许以多种方式规定样式信息。样式可以规定在单个的HTML元素中，在HTML页的头元素中，或在一个外部的CSS文件中。甚至可以在同一个HTML文档内部引用多个外部样式表。层叠次序当同一个HTML元素被不止一个样式定义时，会使用哪个样式呢？一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字4拥有最高的优先权。1.浏览器缺省设置（没有设置任何样式情况下）2.外部样式表3.内部样式表（位于head标签内部）4.内联样式（在HTML元素内部）因此，内联样式（在HTML元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：head标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。CSS基本语法CSS属性CSS选择器CSS伪类CSS属性字体font语法font:font-style||font-variant||font-weight||font-size||line-height||font-familyfont-style设置或检索对象中的字体样式。语法：font-style:normal|italic|oblique参数：normal:正常的字体italic:斜体。对于没有斜体变量的特殊字体，将应用obliqueoblique:倾斜的字体例如:p{font-style:italic;}font-variant设置或检索对象中的文本是否为小型的大写字母语法：font-variant:normal|small-caps参数：normal:正常的字体small-caps:小型的大写字母字体例如:stylep{font-variant:small-caps;}/stylebodyp请您用下面的按钮选择这段文字的font-variant属性的值。看一看会发生什么，然后您就会明白这个属性的意义。/p/bodyfont-weight设置或检索对象中的文本字体的粗细语法：font-weight:normal|bold|bolder|lighter|number参数：normal:正常的字体。相当于number为400。声明此值将取消之前任何设置bold:粗体。相当于number为700。也相当于b对象的作用bolder:特粗体lighter:细体number:100|200|300|400|500|600|700|800|900例如:stylep{font-weight:bold}/stylebodyp请您用下面的按钮选择这段文字的font-weight属性的值。看一看会发生什么，然后您就会明白这个属性的意义。/p/bodyfont-size设置或检索对象中的字体大小语法：font-size:absolute-size|relative-size|length参数：absolute-size:根据对象字体进行调节。relative-size:相对于父对像中字体尺寸进行相对调节。使用成比例的em单位计算。length:百分数|由浮点数字和单位标识符组成的长度值，不可为负值。其百分比取值是基于父对象中字体的尺寸。例如：p{font-size:12px;}p{font-size:20%;}line-height检索或设置对象的行高语法：line-height:normal|length参数：normal:默认行高length:百分比数字|由浮点数字和单位标识符组成的长度值，允许为负值。其百分比取值是基于字体的高度尺例如：div{line-height:36px;}div{line-height:10.5;}font-family设置或检索用于对象中文本的字体名称语法：font-family:name参数：name:字体名称，按优先顺序排列，以逗号隔开。例如：div.fixedwidth{font-family:Courier,CourierNew,monospace}按照font语法写一个集体定义例如：p{font:italicsmall-caps60012pts/18pts宋体;}color设置对象的文本颜色语法：color:color；参数：color:指定颜色。例如：div{color:#345456;}div{color:rgb(100,14,200);}div{color:rgb(10%,14%,20%);}div{color:red;}文本texttext-align设置或检索对象中文本的对齐方式。语法：text-align:left|right|center|justify参数：left:左对齐right:右对齐center:居中justify:两端对齐text-decoration检索或设置对象中的文本的装饰语法：text-decoration:none||underline||blink||overline||line-through；参数：none:无装饰blink:闪烁underline:下划线line-through:贯穿线overline:上划线提示：有href特性的a对象默认值为underline。对象strike，s，del，默认值是line-through。没有文本的对象此属性不会作用。text-shadow设置或检索对象中文本的文字是否有阴影及模糊效果。语法：text-shadow:color||length||length||opacity参数：color:指定颜色。length:由浮点数字和单位标识符组成的长度值。可为负值。第一个length指定阴影的水平延伸距离。第二个length指定阴影的垂直延伸距离。opacity:由浮点数字和单位标识符组成的长度值。不可为负值。指定模糊效果的作用距离。如果你仅仅需要模糊效果，将前两个length全部设定为0。例如：p{font-size:36px;color:red;text-shadow:red0px0px5px;}text-indent检索或设置对象中的文本的缩进语法：text-indent:length参数：length:百分比数字|由浮点数字和单位标识符组成的长度值，允许为负值例如：div{text-indent:-5px;}text-overflow设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。语法：text-overflow:clip|ellipsis参数：clip:不显示省略标记（...），而是简单的裁切ellipsis:当对象内文本溢出时显示省略标记（...）例如：div{text-overflow:clip;}white-space如何处理元素内的