CSS基础市公开课一等奖省赛课获奖课件_第1页
CSS基础市公开课一等奖省赛课获奖课件_第2页
CSS基础市公开课一等奖省赛课获奖课件_第3页
CSS基础市公开课一等奖省赛课获奖课件_第4页
CSS基础市公开课一等奖省赛课获奖课件_第5页
已阅读5页，还剩41页未读， 继续免费阅读

下载本文档

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

文档简介

《基于Web标准网页设计》唐四薪编著清华大学出版社配套网站：CSS基础第1页第四章CSS概述唐四薪CSS基础第2页CSS概述CSS是CascadingStylesSheets缩写，汉字译名为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离一个标识性语言HTML和CSS关系就是“内容”和“形式”关系，由HTML组织网页结构和内容，而经过CSS来决定页面表现形式CSS基础第3页为何需要CSS因为html主要功效是描述网页结构，所以控制网页外观和表现能力很差，1无法准确到像素级调整文字大小，行间距等，2不能对多个网页元素进行统一样式设置，只能一个一个元素设置。学习CSS可实现对网页外观和排版进行更灵活控制，使网页更美观CSS禅意花园（网站，书名）CSS基础第4页CSS基础第5页CSS基础第6页CSS基础第7页html只能对元素一个一个设置样式<body> <h2><fontcolor="#FF0000"face="黑体">CSS标识1</font></h2> <p>CSS标识正文内容1</p> <h2><fontcolor="#FF0000"face="黑体">CSS标识2</font></h2> <p>CSS标识正文内容2</p> <h2><fontcolor="#FF0000"face="黑体">CSS标识3</font></h2> <p>CSS标识正文内容3</p> <h2><fontcolor="#FF0000"face="黑体">CSS标识4</font></h2> <p>CSS标识正文内容4</p></body>产生问题：代码冗余假如要修改元素样式，也要一个个改，修改工作量大CSS基础第8页使用CSS后h2{ font-family:黑体; color:red;}<h2>CSS标识1</h2> <p>CSS标识正文内容1</p> <h2>CSS标识2</h2> <p>CSS标识正文内容2</p> <h2>CSS标识3</font></h2> <p>CSS标识正文内容3</p> <h2>CSS标识4</font></h2> <p>CSS标识正文内容4</p>没有了代码冗余假如要修改，只需修改选择器中内容就能够了CSS基础第9页html弱点而且有很多表现用html是根本无法修改最经典是：行距以象素级修改字体大小为文字设置背景色，边框等CSS基础第10页CSS语法CSS样式表由一系列样式规则组成，浏览器将这些规则应用到对应元素上，下面是一条样式规则。h1{color:red;font-size:25px;}h1color:red;font-size:25px;{}选择器属性值属性值申明申明CSS基础第11页CSS样式规则组成－选择器一条CSS样式规则由选择器(selector)和申明(declarations)组成。选择器是为了选中网页中一些元素，选择器能够是一个标识名，表示将网页中该标识全部元素都选中，也就是定义了CSS规则作用对象。选择器也能够是一个自定义类名，表示将自定义一类元素全部选中，为了对这一类元素进行标识，必须在这一类每个元素标识里添加一个html属性class＝"类名"；选择器还能够是一个自定义id名，表示选中网页中某一个唯一元素，一样，该元素也必须在标识中添加一个html属性id＝"id名"让CSS来识别。

CSS基础第12页CSS申明而申明则用于定义元素样式。在上面示例中，h1是选择器，介于花括号{}之间全部内容都是申明，申明又能够分为属性和值，属性和值用冒号隔开。（注意CSS属性和值写法与html属性区分）。属性和值能够设置多个，从而实现对同一标识申明各种样式格调。假如要设置多个属性和值，则每条申明之间要用分号隔开；CSS基础第13页CSS属性值写法假如属性某个值不是一个单词，则值要用引号引发来：p{font-family:"sansserif"}；假如一个属性有多个值，则每个值之间要用空格隔开：a{margin:6px4px3px}；要为某个属性设置多个候选值，则每个值之间用逗号隔开：p{font-family:"TimesNewRoman",Times,serif}；CSS基础第14页在HTML中引入CSS方法CSS基础第15页在HTML中引入CSS方法HTML和CSS是两种作用不一样语言，它们同时对一个网页产生作用，所以必须经过一些方法，将CSS与HTML挂接在一起，才能正常工作。在HTML中，引入CSS方法有行内式、内嵌式、导入式和链接式4种CSS基础第16页行内式html标识都有一个通用style属性，行内式就是在该属性内添加CSS属性和值，如：<tdstyle="color:#FF0000;text-decoration:underline"width="88%">有时我们需要做测试或对个别元素设置CSS属性时，能够使用这种方式，这种方式因为CSS属性就在标识内，其作用对象就是标识内元素。所以不需要指定CSS选择器，只需要书写CSS属性和值。但它没有表达出CSS统一设置许多元素样式优势。CSS基础第17页嵌入式嵌入式将页面中各种元素CSS样式设置集中写在<style>和</style>之间，<style>标识是专用于引入嵌入式CSS一个html标识，它只能放置在文档头部，即下面这段代码只能放置在html文档<head>和</head>之间。<styletype="text/css">h1{color:red;font-size:25px;}</style>对于单一网页，这种方式很方便。不过对于一个包含很多页面网站，假如每个页面都以嵌入式方式设置各自样式，不但麻烦，冗余代码多，而且网站每个页面格调不好统一。所以一个网站通常都是编写一个独立CSS文件，使用以下两种方式之一，引入到网站全部html文档中注意：能够将CSS样式规则写在注释符内，不会被忽略CSS基础第18页链接式和导入式链接式和导入式目标都是将一个独立CSS文件引入到HTML文件，我们在学习CSS或制作单个网页时，为了方便可采取行内式或嵌入式方法，但若要制作网站则主要应采取链接式方法引入CSS。链接式和导入式最大区分在于链接式使用HTML标识引入外部CSS文件，而导入式则是用CSS规则引入外部CSS文件，所以它们语法不一样CSS基础第19页链接式和导入式区分链接式是在网页文档头部经过link标识引入外部CSS文件，格式以下：<linkhref="style1.css"rel="stylesheet"type="text/css"/>而使用导入式，则需要使用以下语句：<styletype="text/css">@importurl("style2.css");</style>CSS基础第20页另外，这两种方式显示效果也略有不一样。使用链接式时，会在装载页面主体部分之前装载CSS文件，这么显示出来网页从一开始就是带有样式效果，而使用导入式时，要在整个页面装载完之后再装载CSS文件，假如页面文件比较大，则开始装载时会显示无样式页面。从浏览者感受来说，这是使用导入式一个缺点。import把CSS文件内容复制到HTML文件中，link直接向CSS文件读取所定义CSS样式CSS基础第21页选择器分类（重点）CSS基础第22页CSS选择器分类标识选择器伪类选择器类选择器id选择器CSS基础第23页标识选择器标识是元素固有属性，CSS标识选择器用来申明哪种标识采取哪种CSS样式，所以，每一个html标识名称都能够作为对应标识选择器名称。如图1所表示，标识选择器将拥有同一个标识全部元素全部选中。如：<styletype="text/css">p{ /*标识选择器*/color:blue;font-size:18px;}</style>CSS基础第24页伪类选择器所谓伪类就是指标识状态。网页中链接标识能响应浏览者点击。a标识有四种状态能描述这种响应，分别是a:link、a:visited、a:hover、a:active，a标识在这几个状态下样式能够经过伪类选择器来分别定义，伪类选择器标识和伪类之间用“:”隔开。其格式为

a:hovercolor:green;font-size:20px;{}标识名属性值属性值申明申明伪类名CSS基础第25页经过伪类选择器制作动态超链接伪类选择器能够看成是一个特殊标识选择器，它用来选中在某种状态下标识假如分别定义a标识在四种不一样状态下含有不一样颜色，在鼠标悬停时还将添加下划线。需要注意两点：一、链接伪类选择器书写应遵照LVHA次序，即CSS代码中四个选择器出现次序应为a:link→a:visited→a:hover→a:active，若违反这种次序鼠标停留和激活样式就不起作用了。二、各种伪类选择器将继承a标识选择器定义样式。CSS基础第26页类选择器标识选择器一旦申明，那么页面中全部该标识元素都会产生对应改变。比如当申明<p>标识为红色时，页面中全部<p>元素都将显示为红色不过假如希望其中某一些<p>元素不是红色，而是蓝色，就需要将这些<p>元素自定义为一类，用类选择器来选中它们；或者希望不一样标识元素应用同一样式，也能够将这些不一样标识元素定义为同一类，以下所表示一个<p>元素和一个<h3>元素被定义为了同一类。类选择器以半角“.”开头，且类名称第一个字母不能为数字CSS基础第27页以上定义了类别名元素都会应用对应类选择器样式，其中第四行经过class="onetwo"将两种样式同时加入，得到红色20象素大字体。第一行p元素因未定义类别名则不受影响，仅作为对比时参考.classcolor:green;font-size:20px;{}类别选择器属性值属性值申明申明类别名称CSS基础第28页<styletype="text/css">.one{color:red; /*红色*/}.two{font-size:20px; /*文字大小*/}</style><p>选择器之标识选择器1</p><pclass="one">应用第一个class选择器样式</p><pclass="two">应用第二种class选择器样式</p><pclass="onetwo">同时应两种class选择器样式</p><h3class="two">h3一样适用</h3>

CSS基础第29页id选择器id选择器使用方法与class选择器基本相同，不一样之处于于一个id选择器只能应用于html文档中一个元素，所以其针对性更强，而class选择器能够应用于多个元素。id选择器以半角“#”开头，且id名称第一个字母不能为数字CSS基础第30页ID选择器#idcolor:yellow;font-size:30px;{}ID选择器属性值属性值申明申明CSS基础第31页ID选择器<styletype="text/css">#one{font-weight:bold; /*粗体*/}#two{font-size:30px; /*字体大小*/color:#009900; /*颜色*/}</style><body><pid="one">ID选择器1</p><pid="two">ID选择器2</p><pid="two">ID选择器3</p><pid="onetwo">ID选择器3</p>

CSS基础第32页上例中，第一行应用了#one样式，第二行和第三行将一个id选择器应用到了两个元素上，显然违反了一个id选择器只能应用在一个元素上要求，但浏览器却也显示了CSS样式格调且没有报错。即使如此，我们在编写CSS代码时，还是应该养成良好编码习惯，一个id最多只能赋予一个html元素，因为每个元素定义id不只是CSS能够调用，JavaScript等脚本语言也能够调用，假如一个html中有两个相同id属性元素，那么将造成JavaScript在查找id时犯错，比如函数getElementById()。第四行在浏览器中没有任何CSS样式格调显示，这意味着ID选择器不支持像class选择器那样多格调同时使用。因为元素和id是一一对应关系，不能为一个元素指定多个id，也不能将多个元素定义为一个id。类似id="onetwo"这么写法是完全错误CSS基础第33页类名和id名大小写关于类名和id名大小写：CSS大致上是不区分大小写语言，不过对于标识实体类名和id名是否区分大小写取决于标识语言是否区分大小写，假如使用XHTML，那么类名和id名是区分大小写，假如是HTML，则不区分大小写CSS基础第34页DW中对CSS可视化编辑CSS基础第35页新建CSS规则过程DW对CSS建立和编辑有很好支持，对CSS全部操作都集中在“CSS样式”面板中，普通我们首先关键点“新建CSS规则”来新建样式，这时会弹出如图所表示对话框：CSS基础第36页CSS规则定义面板CSS基础第37页编辑CSS样式－也在CSS面板里CSS基础第38页用CSS修饰文本－

简单CSS属性应用CSS基础第39页CSS文本属性CSS中控制文本样式属性主要有font-属性类和text-属性类，再加上修改颜色color属性和行高line-height属性。DW中这些属性设置是放在CSS规则定义面板“类型”和“区块”中。其中text-indent表示首行缩进，在每段开头空两格通常是用text-indent:2em;来实现，text-decoration:none;表示去掉下划线，line-height:150%;表示调整为1.5倍行间距。CSS基础第40页文本对齐属性(text-align)这个属性用来设定文本对齐方式。有以下值：left(居左，缺省值)right(居右)center(居中)justify(两端对齐)

示例代码以下：.p2{text-align:right}注意：行内元素无法应用对齐属性，为何？CSS基础第41页文本修饰属性(text-decoration)这个属性主要设定文本划线属性。有以下值：none(无，缺省值)under

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

温馨提示

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

最新文档

评论

0/150

提交评论