六讲基础教程_第1页
六讲基础教程_第2页
六讲基础教程_第3页
六讲基础教程_第4页
六讲基础教程_第5页
已阅读5页，还剩28页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

CSS基础教程CSS基础教程CSS概述CSS指层叠样式表(CascadingStyleSheets)样式定义如何显示HTML元素样式通常存储在样式表中把样式添加到HTML4.0中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在CSS文件中多个样式定义可层叠为一样式解决了什么问题？主流浏览器厂商不断扩展HTML颜色和样式分离是必须的Zenofcss禅意花园样式表极大地提高了工作效率解放设计人员可复用的样式使用样式指定和引用两种方式层叠次序浏览器缺省设置外部样式表内部样式表（位于<head>标签内部）内联样式（在HTML元素内部）CSS的语法选择器，以及一条或多条声明selector{declaration1;declaration2;...declarationN}selector{property:value}h1{color:red;font-size:14px;}值的不同写法和单位p{color:#ff0000;}p{color:#f00;}p{color:rgb(255,0,0);}p{color:rgb(100%,0%,0%);}记得写引号p{font-family:"sansserif";}多重声明p{text-align:center;color:black;font-family:arial;}空格和大小写body{color:#000;background:#fff;margin:0;padding:0;font-family:Georgia,Palatino,serif;}选择器的分组h1,h2,h3,h4,h5,h6{color:green;}继承及其问题body{font-family:Verdana,sans-serif;}摆脱继承body{font-family:Verdana,sans-serif;}td,ul,ol,ul,li,dl,dt,dd{font-family:Verdana,sans-serif;}p{font-family:Times,"TimesNewRoman",serif;}派生选择器listrong{font-style:italic;font-weight:normal;}<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p><ol><li><strong>我是斜体字。这是因为strong元素位于li元素内。</strong></li><li>我是正常的字体。</li></ol>strong{color:red;}h2{color:red;}h2strong{color:blue;}<p>Thestronglyemphasizedwordinthisparagraphis<strong>red</strong>.</p><h2>Thissubheadisalsored.</h2><h2>Thestronglyemphasizedwordinthissubheadis<strong>blue</strong>.</h2>CSSid选择器id选择器可以为标有特定id的HTML元素指定特定的样式。id选择器以"#"来定义。#red{color:red;}#green{color:green;}<pid="red">这个段落是红色。</p><pid="green">这个段落是绿色。</p>单独的选择器#sidebar{ border:1pxdotted#000; padding:10px; }id选择器和派生选择器在现代布局中，id选择器常常用于建立派生选择器。#sidebarp{ font-style:italic; text-align:right; margin-top:0.5em; }#sidebarp{ font-style:italic; text-align:right; margin-top:0.5em; }#sidebarh2{ font-size:1em; font-weight:normal; font-style:italic; margin:0; line-height:1.5; text-align:right; }CSS类选择器在CSS中，类选择器以一个点号显示.center{text-align:center}<h1class="center">Thisheadingwillbecenter-aligned</h1><pclass="center">Thisparagraphwillalsobecenter-aligned.</p>类选择器派生和id一样，class也可被用作派生选择器.fancytd{ color:#f60; background:#666; }td.fancy{ color:#f60; background:#666; }对带有指定属性的HTML元素设置样式属性选择器[title]{color:red;}<h2title="Helloworld">Helloworld</h2><atitle="W3School"href="">W3School</a>属性和值选择器下面的例子为title="W3School"的所有元素设置样式：[title=W3School]{border:5pxsolidblue;}<imgtitle="W3School"src="/i/w3school_logo_white.gif"/><br/><atitle="W3School"href="">W3School</a><hr/>设置表单的样式属性选择器在为不带有class或id的表单设置样式时特别有用input[type="text"]{width:150px;display:block;margin-bottom:10px;background-color:yellow;font-family:Verdana,Arial;}input[type="button"]{width:120px;margin-left:35px;display:block;font-family:Verdana,Arial;}插入样式外部样式表内部样式表内联样式外部样式表<head><linkrel="stylesheet"type="text/css"href="mystyle.css"/></head>hr{color:sienna;}p{margin-left:20px;}body{background-image:url("images/back40.gif");}内部样式表<head><styletype="text/css">hr{color:sienna;}p{margin-left:20px;}body{background-image:url("images/back40.gif");}</style></head>内联样式<pstyle="color:sienna;margin-left:20px">Thisisaparagraph</p>多重样式外部h3{color:red;text-align:left;font-size:8pt;}内部h3{text-ali

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论