前端基础实战 5_第1页
前端基础实战 5_第2页
前端基础实战 5_第3页
前端基础实战 5_第4页
前端基础实战 5_第5页
已阅读5页，还剩26页未读， 继续免费阅读

下载本文档

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

文档简介

CSS核心基础课件目录01CSS基础02CSS选择器03CSS元素样式04CSS3新增样式CSS基础CSS简介CSS是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有字体、字号样式，拥有对网页对象和模型样式进行编辑的能力。CSS是从HTML4开始使用的，是为了更好地渲染HTML元素而引入的。CSS基础CSS的特点CSS为HTML提供了一种样式描述，定义了其中元素的显示方式。CSS是Web设计领域的一个突破，利用它可以实现修改一个小的样式并更新与之相关的所有页面元素。1．丰富的样式定义2．易于使用和修改3．多页面应用4．层叠5．页面压缩CSS基础CSS的使用CSS可以通过以下方式添加到HTML页面中。（1）内联样式：在HTML元素中使用style属性进行设置。（2）内部样式表：在HTML文档的头部<head>标签区域使用<style>标签来包含CSS。（3）外部引用：使用外部CSS文件，可以让一个CSS文件被多个页面引用。在使用CSS的过程中，主要通过选择器来定位某一个或一批元素，并为其设置相应的CSS属性和不同的值来实现不同的样式。CSS基础CSS的使用1．属性属性的名称是合法的标识符，它们是CSS语法中的关键字。一种属性规定格式修饰的一个方面，如color是文本的颜色属性，而font-size规定了文字的大小，background-color定义的是容器的背景色等。（1）属性的合法属性值。（2）属性的默认值。（3）属性所适用的元素。（4）属性的值是否被下一级继承。（5）如果某个属性能取百分值，那么该百分值将如何解释，也就是百分值所对应的标准是什么。例如，margin属性可以取百分值，它是相对于margin所存元素的容器的宽度。（6）属性所属的媒介类型组。CSS基础CSS的使用2．属性值（1）整数和实数：与普通意义上的整数和实数没有多大区别，但在CSS中只能使用浮点小数，而不能像其他编程语言那样使用科学记数法表示实数，如1.2E3在CSS中是不合法的。（2）长度量：一个长度量由整数或实数加上相应的长度单位组成。①em：当前文字的高度，也就是font-size属性的值。②ex：当前文字中小写字母x的高度。③px：一个像素的长度，其实际的长度由显示器的设置决定，例如，在1440像素×900像素的设置下，一个像素的长度就等于屏幕的宽度除以1440。值得注意的是，子级元素不继承父级元素的长度，只继承它们的实际值。（3）百分数量：百分数量就是数字加上百分号。显然，百分数量总是相对的，所以和长度量一样，百分数量不被子级元素继承。CSS基础CSS的使用3．选择器（1）标签选择器：可以向一种元素类型的每个实例应用样式。（2）属性选择器：如ID选择器和Class选择器，通过设置元素的class属性或id属性来定位元素，甚至可以直接使用元素的内嵌属性style来直接设置样式；也可以通过HTML的传统属性来进行定位，如[type="button"]。（3）组合选择器：可以将多个基础选择器组合成更复杂的选择器。（4）伪类选择器：设计伪类和伪元素可以实现一些效果。借助伪元素，可以更改元素的第一个字母和第一行的样式，或者添加源文档中没有出现过的元素。CSS基础CSS的使用4．style属性尽管在选择器中可以使用class和id属性值匹配元素，但style属性本身就可以替代选择器机制。与仅作为选择器引用标识的ID和Class不同，style属性的值直接包含一个或多个CSS声明。通常情况下，使用CSS时，设计者将把所有样式规则置于一个样式表中，该样式表位于文档顶部的style属性内（或在外部进行链接）。但是，使用style属性能够绕过样式表将声明直接放置到文档的开始标签中，从而更直接地影响某个元素，且style属性设置的样式具有最高优先级。它与ID选择器一样，主要的弊端是无法重用。CSS选择器标签选择器一个完整的HTML文档是由很多标签组成的，而标签选择器决定了哪些标签采用相应的CSS。例如，以下简单规则的选择器是td，因此规则作用于文档中所有的td元素。CSS选择器标签选择器CSS选择器标签选择器使用CSS修改后的在线计算器界面如图3-1所示。通过对标签<td>设置CSS，在线计算器的按键部分获得了同样的效果。但是，计算器顶部的3个小圆点也居中显示了，这是因为代码中针对所有

td

元素设置了相同的水平居中的属性，所以影响到了第1行的内容。CSS选择器ID选择器以下示例通过对单元格分别设置不同的CSS来达到使每一个单元格都显示不同样式的效果。CSS选择器ID选择器利用ID选择器设置表格样式后的效果如图3-2所示。CSS选择器Class选择器基于3.2.2小节的示例重新设置样式，使用CSS来对单元格设置样式，并对某个单元格设置多个Class选择器，所有样式就都会作用在这个单元格上，示例代码如下。CSS选择器Class选择器使用Class选择器优化表格后的效果如图3-3所示。CSS选择器组合选择器组合选择器可以结合所有标签、ID、Class等对元素进行灵活定位，算是基础选择器的升级版，也就是组合使用基础选择器，因为组合选择器中有一些CSS的专有语法，所以初学者比较难看懂，下面列举几个常用的组合选择器，如表3-1所示。CSS选择器伪类选择器伪类是指不需要显式声明的类，一般是页面自带的一些特别的类。开发者可以针对任何元素使用伪类，以实现一些页面特效。伪类选择器如表3-2所示。CSS元素样式文本与图像在HTML中，显示文本的标签非常多，通常使用比较多的是<p></p>和<span></span>以及后面会讲到的<div></div>。当然，单元格也可以存放文本，还有其他一些专门针对文本样式的预定义标签，如<h1>～<h6>、<i>、<b>等。这些标签都可以应用CSS。CSS元素样式文本与图像现在使用纯CSS来完成针对<p>或<span>标签的文本内容格式化，代码如下。CSS元素样式文本与图像（1）font-size：设置文本的文字大小，单位为像素，也可以使用相对单位，这将在后续章节中介绍。（2）font-style：文本风格，值为normal表示正常显示，值为italic表示斜体显示。（3）font-family：文本的字体名称，需要使用系统存在的字体名称，且不能输入错误，如果字体名称输入错误，则会使用系统的默认字体。（4）color：文本的颜色，使用颜色名或RGB编码均可。（5）font-weight：设置字体的粗细，值为bold时表示加粗。（6）width：设置元素的宽度。（7）border：设置元素的边框，这是一个组合属性，其是由如下3个属性构成的。①border-style：值为soild时表示边框为实线。当然，其值还可以为dashed（表示虚线）和dotted（表示点）等。②border-width：边框的宽度。③border-color：边框的颜色。CSS元素样式表格3.3.1小节的示例代码使用style属性来完成CSS属性的设置CSS元素样式超链接超链接默认情况下会有下画线，且颜色不可更改。在这种情况下，需要对超链接进行格式化，CSS中对超链接定义了下述4个伪类，分别应对超链接的4种情况。（1）a:link：超链接的默认显示样式。（2）a:hover：鼠标指针悬停时的样式。（3）a:active：单击时的样式。（4）a:visited：超链接被访问后的样式。CSS元素样式列表1．针对<ol>或<ul>标签（1）可以使用list-style组合属性，包括如下属性。①list-style-type：设置列表项标记类型，其可能的值及说明如表3-3所示。CSS元素样式列表CSS元素样式表单表单是网页中比较常见的元素，通常用于与用户进行数据交互。对于表单元素，通常会使用以下属性。（1）font系列属性：设置字体样式。（2）width和height系列属性：设置大小。（3）background：设置背景图像，与之相关的属性及说明如表3-5所示。CSS3新增样式边框阴影CSS3中增加了不少新的样式，本节先介绍其中比较常用的一些用于页面美化的样式，如边框阴影、边框圆角、背景固定与渐变等。边框阴影通过box-shadow进行设置，基本语法如下。box-shadow:x轴偏移量y轴偏移量

模糊半径

阴影扩散半径

阴影颜色

内外阴影（可选）。CSS3新增样式边框圆角CSS3中新增了边框圆角效果，可以使边框实现圆润过渡，如图3-11所示。CSS3新增样式背景固定与渐变如果想要使背景固定，则可以为元素设置background-attachment:fixed，或直接设

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

温馨提示

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

最新文档

评论

0/150

提交评论