HTML5+CSS开发 CSS简介 CH3-3 CSS3简介.pptVIP

HTML5应用开发 CSS3简介 CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1 的基础上增加了很多强大的新功能，目前主浏览器 Chorme、Safari、Firefox、Opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分。是浏览器的私有属性虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容，前缀还是少不了的。 CSS3 把很多以前需要使用的图片和脚本来实现的效果，甚至动画效果，现在只需要短短几行代码就能搞定。比如：圆角、图片边框、文字阴影和盒阴景、渐变、个性化字体、多图片背景、变形处理（旋转、缩放、倾斜、移动）、过渡、动画、多栏布局、媒体查询等。 CSS（Cascading Styles Sheets，层叠样式表），是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 CSS的主要用途 页面元素美化 页面布局 HTML CSS 结构 表现 网页 CSS样式表由一系列样式规则组成，浏览器将这些规则应用到相应的元素上，下面是一条样式规则。 h1{ color: red; font-size: 25px; } 关羽 { 身高：185cm; 体重：105kg } 一条CSS样式规则由选择器(selector)和声明(declarations)组成。 选择器是为了选中网页中某些元素的，选择器可以是一个标记名，表示将网页中该标记的所有元素都选中 h1 color: red; font-size: 25px; { } 选择器 属性 值 属性 值 声明 声明 选择器可以是“标记名”、“.类名”或“#id名” ，它们的作用范围如下 p{…} .xx{…} #cc{…} h1{…} CSS属性 含义 举例 font-size 字体大小 font-size:14px; color 字体颜色 color:red; line-height 行高 line-height:160%; text-decoration 文本修饰如增删下划线 text-decoration:none; text-indent 文本缩进 text-indent:2em; background-color 背景颜色 background-color:#fea; 如果属性的某个值不是一个单词，则值要用引号引起来： p { font-family: sans serif ; } 如果一个属性有多个值，则每个值之间要用空格隔开：a { margin: 6px 4px 3px ; } 要为某个属性设置多个候选值，则每个值之间用逗号隔开：p {font-family: Times New Roman, Times, serif ;} HTML和CSS是两种作用不同的语言，它们同时对一个网页产生作用，必须通过一些方法，将CSS与HTML挂接在一起，才能正常工作。 在HTML中，引入CSS的方法有 行内式 嵌入式 导入式 链接式 html标记都有一个通用的style属性，行内式就是在该属性内添加CSS属性和值，如： p style=color:red; line-height:160%; width=92%一段/p 不推荐使用，因为它没有体现出CSS统一设置许多元素样式的优势。 仅在调试个别元素样式，或网站后台编辑器中使用 将页面中所有CSS样式集中写在style和/style之间 style标记必须写在文档头部区域内 外部样式表是将CSS代码保存成一个单独的.css文件 使用导入式也可引入外部样式表，如： style @import url(style2.css); /style 外部样式表文件 链接式和导入式最大的区别在于链接式使用HTML的标记引入外部CSS文件，而导入式则是用CSS的规则引入外部CSS文件，因此它们的语法不同 使用链接式时，会在装载页面主体部分之前装载CSS文件 使用导入式时，要在整个页面装载完之后再装载CSS文件 import把CSS文件的内容复制到HTML文件中，link直接向CSS文件读取所定义的CSS样式 head style !-- h1 { color：red； } -- /style /head 内部样式表 h1 { color：red； } 外部样式表