Download presentation
Presentation is loading. Please wait.
3
CSS简介 CSS规则组成 CSS使用方法
4
CSS是Cascading Style Sheets的英文缩写,即层叠样式表
CSS文件是一个文本文件,它包含了一些CSS标记,CSS文件必须使用.css为文件名后缀. CSS是大小写不敏感的,CSS与css是一样的. CSS是由W3C的CSS工作组产生和维护的. 提示：可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减 少我们的工作量,所以她是每一个网页设计人员的必修课.
5
1.2 CSS历史 1996年W3C正式推出了CSS1. 1998年W3C正式推出了CSS2. 到2007年为止，第三版已经开始使用. CSS3是W3C现在正在推荐使用的. W3C的CSS主页
6
(1)维护困难：为了修改某个特殊标记的格式，需要花费很多时间，尤其对于整个网站而言，后期修改和维护的成本很高
1.3 CSS的基本思想 CSS出现的根本原因在于，html中的内容与表现代码混杂一起，导致出现了以下几点仅靠html难以解决的问题： (1)维护困难：为了修改某个特殊标记的格式，需要花费很多时间，尤其对于整个网站而言，后期修改和维护的成本很高 (2) 标记不足：对于美工样式的标记，html中明显不足 (3) 网页过胖：由于没有对各种风格样式进行统一控制，因此html的页面往往体积过大 (4)定位困难：在整体布局页面时，html对于各个模块的位置调整很局限， 复杂的页面维护很困难
7
为什么使用CSS样式表3-1 1.4 使用CSS的优势 样式表能实现内容与样式的分离，方便团队开发 样式复用、方便网站的后期维护
页面的精确控制，实现精美、复杂页面 美工做样式 内容与样式和谐统一的完整网页 程序员写代码
8
1.5 CSS用途 应用CSS样式 外观美化 布局、定位
9
CSS简介 CSS规则组成 CSS使用方法
10
如：body{color:red}设置了页面为红色的文字
2.1 CSS语法 <html> <head> <title>样式规则</title> <style type="text/css"> p{ color:red; font-family:"隶书"; font-size:24px;} </style> </head> <body> <h2>登鹳雀楼</h2> <p>白日依山尽，</p> <p>黄河入海流。</p> <p>欲穷千里目，</p> <p>更上一层楼。</p> </body> </html> 基本语法：CSS定义分别由：选择符、属性、属性取值组成 本页面中所有的P标签都应用了此样式 格式：selector{property:value} 选择符可以是HTML中的标记名称，具体表示在后面讲到。 属性和值之间用冒号分开，多个属性之间加分号 CSS是大小写不敏感的,在CSS语法中推荐使用小写 如：body{color:red}设置了页面为红色的文字 例：p{text-align:center;color:red;font-family:黑体} 选择器 用分号隔开 所有的段落都采用P样式，保证风格统一
11
/* css注释 */ 样式表里面的注释使用C语言编程中一样的约定方法去指定，注释的内容会被浏览器忽略，可用于为样式表加注释及调试使用。
12
相对长度单位： 绝对长度单位： 2.3 长度单位 在css样式表中可以使用如下长度单位：
2.3 长度单位 在css样式表中可以使用如下长度单位： 相对长度单位： px 像素（Pixel） div{font-size:12px;} em 相对于当前对象内文本的字体尺寸。 div{font-size:1.2em;} % 百分比 div{font-size:80%;} 绝对长度单位： pt 点（Point）。 cm 厘米（Centimeter）。 mm 毫米（Millimeter）。
13
rgb(x,x,x) 其中x是一个0-255的整数值,如rgb(255,204,0)
2.4 颜色单位和URL值 CSS中的颜色值： #rrggbb (如： #ffcc00) #rgb（如：#fc0） rgb(x,x,x) 其中x是一个0-255的整数值,如rgb(255,204,0) rgb(x%,x%,x%) 其中x是一个0-100的整数值,如rgb(100%,80%,0) CSS指定URL地址方式： body{background-image:url(bg.jpg)} body{background-image:url( body{background-image:url(‘bg.jpg’)} body{background-image:url(“bg.jpg”)}
14
CSS简介 CSS规则组成 CSS使用方法
15
行内样式、嵌入式样式、外部样式和导入样式
3.1 内联样式表 在HTML中使用CSS样式的方式一般有四种： 行内样式、嵌入式样式、外部样式和导入样式 行内样式（也叫内联引用） 就是把CSS样式直接作用在HTML标签中。 <p style="font-size: 10px; color: #FFFFFF;"> 使用CSS内联引用表现段落. </p> 特点：行内样式比其他方法更加灵活，但需要和展示的内容混淆在一起，行内样式会失去一些样式表的优点。
16
使用style标签直接把CSS文件中的内容加载到HTML文档内部的<head>标签里
3.2 嵌入式（也叫内部引用） 使用style标签直接把CSS文件中的内容加载到HTML文档内部的<head>标签里 <head> …… <style type="text/css"> /* 设置本页面p标签中的文字为以下样式*/ p{ font-size: 10px; color: #FFFFFF; } </style> </head> 文档样式表开始，类型为CSS样式 css注释 选择器 样式规则 声明文档样式表结束 特点：适合用于一个HTML文档具有独立的样式时。
17
实现外部引用有两种方式： 使用link标签引用CSS 使用@import导入CSS 3.3 外部引用
CSS外部引用使用了外接的CSS文件,一般的浏览器都带有缓存功能,所以用户不用每次都下载此CSS文件. 外部引用相对于内部引用和内联引用来说是高效的是节省宽带的. 外部引用是W3C推荐使用的 <head> …… <link rel="stylesheet" type="text/css" href="mystyle.css"> <style type="text/css"> @import "mystyle2.css" ……. /*其它CSS定义*/ </style> </head> 关系 类型 css文件名 实现外部引用有两种方式： 使用link标签引用CSS 使用link标签应用CSS
18
如果在同一个选择器上使用几个不同的样式表时，这个属性值将会叠加几个样式表，遇到冲突的地方会以最后定义的为准。
3.4 多重样式表的叠加 如果在同一个选择器上使用几个不同的样式表时，这个属性值将会叠加几个样式表，遇到冲突的地方会以最后定义的为准。 注意：依照后定义的优先，优先级最高的是内嵌样式，内部样式表高于导入外部样式表，链入的外部样式表和内部样式表之间是最后定义的优先级高。 导入样式 链接样式 嵌入样式 行内样式
Similar presentations
