课件css层叠表配套资源_第1页
课件css层叠表配套资源_第2页
课件css层叠表配套资源_第3页
课件css层叠表配套资源_第4页
课件css层叠表配套资源_第5页
已阅读5页,还剩14页未读 继续免费阅读

下载本文档

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

文档简介

CSS

层叠样式表什么是CSSCSS的版本CSS的特点CSS的三种使用方式什么是CSS?CSS指的就是层叠样式表。

(CascadingStyleSheets)它的作用是用来定义我们的浏览器如何显示html元素它的存在是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在CSS文件中多个样式定义可层叠为一CSS的使用方式外联样式内联样式内部样式页面调用外部后缀名为.css的样式表文件在<head>标签中创建css样式内容在开始标签的style属性中直接写css样式(不推荐)外联样式单独创建后缀名为.css的样式表文件。在页面的<head>标签中使用<link>标签导入这个样式表文件。<head><linkhref=“style.css"rel="stylesheet"type="text/css"/></head>内联样式在<head>标签中直接创建css样式。<head>

<styletype="text/css”>

<--css样式内容-->

</style></head>内部样式直接在开始标签中的style属性里写css样式。<pstyle=“color:#ff0000;">

这里是段落</p>CSS基础语法选择符{}属性:值;属性:值;属性:值;……外联样式和内联样式都是这样的写法。CSS基础语法内部样式直接在网页元素的开始标签的style属性中添加<pstyle=“属性:值;属性:值;….">

这里是段落</p>实际代码讲解CSS选择符CSS中的选择符分为三种:元素选择符类选择符id选择符元素选择符元素选择符就是指页面的元素,当我们使用元素选择符来设置css属性的时候,整个网页中的该元素都会变成所设置的样式。p{color:#ff0000;font-weight:bold;}p是段落{ 内容颜色:红色; 字体粗细:加粗;}这样的设置会让整个网页中的所有p元素都具有该样式。类选择符类选择符所创建的样式,只有通过网页元素的class属性调用,才能对该元素起作用。.red_b{color:#ff0000;font-weight:bold;}<pclass=“red_b”>这里是段落</p>类选择符的起名没有过多限制,但是应该注意两点,第一是避免使用网页元素的名称,第二是要具有一定的含义。id选择符id选择符创建的css样式,它无法通过class属性调用,它只对网页中具有相同id的元素起作用#red_b{color:#ff0000;font-weight:bold;}<pid=“red_b”>这里是段落</p>实际代码讲解CSS特点在一个网页中,可以同时使用三种样式的CSS(外联样式,内联样式,内部样式)。CSS具有层叠的特点,也就意味着它具有优先级的概念,当一个属性拥有多个样式的时候,它会按照优先级的顺序,在保持原有样式的基础上,再将新的样式赋予它。CSS特点CSS具有继承性当最外层的父标签调用或设置了某些属性的时候,父标签中的所有子标签都会具有相同的样式。即:子标签继承父标签的样式。CSS优先级使用方式优先级选择符优先级外联样式1级根据选择符优先级内联样式2级在原有基础上根据选择符覆盖上新样式元素选择符1级赋予网页类选择符2级在原有基础上赋予Id选择符3级在原有基础上再赋予最后执行内部样式(style中的设置)。CSS高级派生选择符(基本只用于元素选择符)当页面多个元素都会用到同一种css设置的时候,我们可以将多个元素放在一起,中间用逗号(,)隔开。body,div,p,table,span{ font-size:12px; color:#000000;}CSS高级派生子级(多用于类选择符或元素选择符)设置了调用了这个类的里面的子级元素.to

温馨提示

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

评论

0/150

提交评论