任务一-CSS基础知识_第1页
任务一-CSS基础知识_第2页
任务一-CSS基础知识_第3页
任务一-CSS基础知识_第4页
任务一-CSS基础知识_第5页
已阅读5页，还剩23页未读， 继续免费阅读

下载本文档

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

文档简介

信息工程系教师：宇虹儒项目四农产品网页美化任务一CSS基础设置知识导航CSS简介

CSS样式规则21

引入CSS样式表

CSS基础选择器34CSS3入门随着网页制作技术的不断发展，陈旧的CSS特性和标准已经无法满足现今的交互设计需求，开发者往往需要更多的字体选择、更方便的样式效果、更绚丽的图形动画。CSS3的出现，在不需要改变原有设计结构的情况下，增加了许多新特性，极大地满足了开发者的需求。一CSS3简介在网页设计中，运用CSS3技术能够让原有的网站变得趣味盎然，很多站点都为自己的页面添加了各种炫酷的CSS3效果。本节将对CSS的发展史及浏览器兼容情况进行介绍。CSS概述1使用HTML对网页进行修饰，存在很大的局限和不足维护困难不利于代码的阅读一CSS3简介CSS概述1该如何解决这些问题呢？一CSS3简介CSS概述1如果希望网页美观、大方，并且升级轻松、维护方便，就需要使用CSS，实现结构与表现的分离。一CSS3简介CSS概述1认识CSS样式CSS提供了丰富的样式font:属性值;字体属性color:属性值;颜色属性float:属性值;浮动属性background:属性值;背景属性一CSS3简介CSS概述1例如：图中文字的颜色、粗体、背景、行间距和左右两列的排版等，都是通过CSS控制的一CSS3简介CSS概述1同时CSS非常灵活，既可以嵌入在HTML文档中，也可以是一个单独的外部文件，如果是独立的文件，则必须以.css为后缀名。例如下面的代码片段：一CSS3简介CSS3发展史2CSS11996年12月W3C发布了第一个有关样式的标准CSS1。CSS21985年5月，CSS2正式推出，这个版本开始使用样式表结构CSS2.12004年2月，CSS2.1正Z式推出。CSS32001年，W3C着手开发CSS第三版规范。虽然完整的、规范权威的CSS3标准还没有尘埃落定。但各主流浏览器已开始支持其中的绝大部分特性。一CSS3简介CSS3浏览器支持情况3CSS3模块Chrome4Safari4Firefox3.6Opera10.5IE10RGBA√√√√√HSLA√√√√√MultipleBackground√√√√√BorderImage√√√√×BorderRadius√√√√√BoxShadow√√√√√Opacity√√√√√CSSAnimations√√××√CSSColumns√√√×√CSSGradients√√√×√CSSReflections√√×××CSSTransforms√√√√√CSSTransforms3D√√××√CSSTransitions√√√√√CSSFontFace√√√√√一CSS3简介CSS3浏览器支持情况3由于各浏览器厂商对CSS3各属性的支持程度不一样，因此在标准尚未明确的情况下，会用厂商的前缀加以区分，通常把这些加上私有前缀的属性称之为“私有属性”。各主流浏览器都定义了自己的私有属性，以便让用户更好的体验CSS的新特性。内核类型相关浏览器私有前缀TridentIE8/IE9/IE10-msWebkit谷歌（Chrome）/Safari-webkitGecko火狐（Firefox）-mozBlinkOpera-o一CSS3简介运用CSS3私有属性时，要遵从一定的书写顺序，即先写私有的CSS3属性，再写标准的CSS3属性。当一个CSS3属性成为标准属性，并且被主流浏览器的最新版普遍兼容的时候，就可以省略私有的CSS3属性。CSS3浏览器支持情况3一CSS3简介二CSS样式规则选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}在上面的样式规则中，选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。其中，属性和属性值以“键值对”的形式出现，用英文“:”连接，多个“键值对”之间用英文“;”进行区分。CSS样式中的选择器严格区分大小写，属性和值不区分大小写，按照书写习惯一般将“选择器、属性和值”都采用小写的方式。多个属性之间必须用英文状态下的分号隔开，最后一个属性后的分号可以省略，但是为了便于增加新样式最好保留。如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英文状态下的引号。在编写CSS代码时，为了提高代码的可读性，通常会加上CSS注释。在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可无。二CSS样式规则引入CSS样式表的方式有哪些？三引入CSS样式表行内式内嵌式链入式内嵌式链入式行内式也称为内联样式，是通过标记的style属性来设置元素的样式。语法格式<标记名style="属性1:属性值1;属性2:属性值2;属性3:属性值3;">内容</标记名>三引入CSS样式表行内式内嵌式链入式内嵌式链入式内嵌式是将CSS代码集中写在HTML文档的<head>头部标记中，并且用<style>标记定义。行内式语法格式<head><styletype="text/css">选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}</style></head>三引入CSS样式表行内式内嵌式链入式内嵌式链入式链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link/>标记将外部样式表文件链接到HTML文档中。行内式语法格式<head><linkhref="CSS文件的路径"type="text/css"rel="stylesheet"/></head>三引入CSS样式表什么是CSS选择器？四CSS基础选择器要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器。四CSS基础选择器标记选择器类选择器id选择器通配符选择器类选择器id选择器通配符选择器标记选择器是指用HTML标记名称作为选择器，按标记名称分类，为页面中某一类标记指定统一的CSS样式。语法格式标记名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}四CSS基础选择器H1-

h6，p,hr,a,img,em,strong,del,ins……标记选择器类选择器id选择器通配符选择器类选择器id选择器通配符选择器类选择器使用“.”（英文点号）进行标识，后面紧跟类名。语法格式.类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}标记选择器四CSS基础选择器标记选择器类选择器id选择器通配符选择器类选择器id选择器通配符选择器id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：语法格式#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}标记选择器四CSS基础选择器标记选择器类选择器id选择器通配符选择器类选择器id选择器通配符选择器通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。语法格式*{属性1:属性值1;属性2:属性值2;属性3:属性值3;}标记选择器四CSS基础选择器标签指定选择器后代选择器并集选择器标签指定式选择器又称交集选择器，由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格，如h3.sp

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

温馨提示

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

最新文档

评论

0/150

提交评论