CSS技术基本概述.ppt

《CSS技术基本概述.ppt》由会员分享，可在线阅读，更多相关《CSS技术基本概述.ppt（86页珍藏版）》请在三一文库上搜索。

1、CSS,HTML总结 ,在这里，页面中的 元素是 应用样式的场所，CSS中，元素 名称两边不加,属性名color 代表字体颜色,属性值red,一条样式,样式属性名和值之间用冒号（：）分隔， 每条样式最后加一个分号（；）,应用于 元素的所有样式 放置在一对大括号之间,样式包括： 样式属性名 样式属性值,CSS语句的构成： 样式（属性名、属性值） 应用样式的场所,p color : red; ,这条CSS语句的作用： 选择页面上的所有元素， 将内容的字体颜色 设置为red,称之为p选择符,也叫做“选择符”,CSS语句里添加更多样式： 可以添加若干条样式（属性名、属性值）,p color : red

2、; font-size:32px; ,这条CSS语句的作用： 将页面上元素的内容 的字体颜色设置为red，大小 设置为32像素;,1.3.2 第一个CSS说明CSS的引入,CSS的引入有多种方式，第一个示例采用在页面文件中直接引入CSS样式，方法如下：, css p color:red; 第一段文字 ,在HTML页面中直接引入CSS， 需要在元素里增加一对 样式开始和结束标记（）,标记属性type 值为text/css,css语句置于 标记 之间, css p color:red; 第一段文字 ,内容的样式 采用独立的CSS,原始内容,样式 应用,p选择符 选择页面中 的元素,1.3.3 第一

3、个CSS说明写法,以下写法都可以： CSS不区分大小写，推荐全部小写,p color : red; font-size : 32px; ,p color : red; font-size : 32px; ,包含多条样式时， 习惯第一种写法,1.3.4 第一个CSS说明术语总结,CSS语句的构成： （若干条）样式 样式的属性名 样式的属性值 应用样式的场所选择符,p color : red; ,p选择符,一条样式,样式属性名,样式属性值,1.4 CSS的好处,CSS将HTML格式与内容分离，有利于对内容进行统一的格式设置和修改 CSS样式相比HTML格式化标记的功能更加丰富和强大,不采用CSS示

4、例,采用CSS示例,二、CSS细节,CSS样式 CSS选择符 CSS的引入方式 CSS样式的级联,2.1 CSS样式,HTML中的格式化标记（如等）功能有限，CSS样式的功能更加强大 CSS包括各种样式属性，用于控制字体、颜色、对齐方式和边距以及位置等 CSS样式种类繁多，无须一一记忆,2.1.1 CSS样式字体,字体的样式属性主要包括文字的字体、大小、颜色、显示效果等,示例,向雷锋同志学习！,仅通过HTML如何实现该效果,字体样式的说明,font-family：指定字体 可以指定多个字体，字体之间以逗号（,)分隔 按顺序依次查找计算机中有无指定的字体，有则显示，无则查找下一个，如果都没有查到

5、，采用默认字体,font-family:微软雅黑,楷体,宋体;,字体样式的说明,font-size：字体大小 常用单位：px（像素），pt（点） 40px：px代表像素单位，单位通常不要省略,font-size: 40px;,字体样式的说明,color：字体颜色 可以用预定义的颜色名称 可以用十六进制代码 颜色拾取,color:red;,color:#ff0000;,字体样式的说明,font-weight：控制字体的粗细 取值：normal, bold, lighter, bolder，默认normal font-style：控制文字倾斜 取值：italic，normal，默认normal t

6、ext-decoration：控制下划线等 取值：underline（下划线），line-through（中划线），overline（上划线）,font-weight: bold;,font-style:italic;,text-decoration:underline;,示例,CSS字体样式,2.1.2 CSS样式背景,背景属性包括背景颜色、背景图像以及背景图像的控制 background-color：设置元素的背景色,示例,background-color: silver;,CSS样式背景,background-image：设置元素的背景图像 background-repeat：设置背景图

7、像的重复 取值：no-repeat（不重复），repeat（在水平和垂直方向上重复），repeat-x和repeat-y（分别在水平和垂直方向上重复），默认repeat,background-image: url( “bg.jpg” ) ;,示例,可以用相对地址 或绝对地址,示例,CSS背景样式,2.1.3 CSS样式文本,文本属性包括对齐方式、文字间距、行距等 text-align：设置文本的水平对齐方式 取值：left，center，right，默认left,示例,text-align: center;,HTML的格式化用法 VS CSS,CSS样式属性和HTML属性很多写法不完全一致，比

8、如：text-align（CSS中），align（HTML标记属性） HTML中一些格式化标记，比如（粗体）（斜体）等，在CSS中，通过新的样式属性来展现 传统HTML中用于格式化的标记（，等）不再推荐使用，推荐采用CSS来实现 相比HTML格式化标记，CSS提供的样式功能更加丰富,对比,示例,p font-family:微软雅黑,楷体,宋体; color:red; font-size:32px; font-weight:bold; font-style:italic; text-decoration:underline; 第一段文字, 第二段文字 ,2.1.4 CSS样式边框,在CSS看来，

9、HTML元素都有一个边框 CSS边框属性设置元素边框的颜色、宽度、样式等,border-style（边框样式）：控制边框的外观 取值：none(无边框)，solid(实线)，dashed（虚线)，dotted（点线），double（双线），groove(凹槽)，inset（凹边），ridge（凸槽），outset（凸边） border-color（边框颜色）： 取值：颜色名，或十六进制 border-width（边框宽度）： 通常采用像素单位,示例,border属性：通过该属性同时设置边框样式、宽度、颜色,border: 5px solid green;,多个值之间以空格分隔， 多个值的顺序随

10、意,示例,定义边框的一侧：可以定义任何一侧(上、下、左、右）的边框的样式、宽度或颜色 border-top border-bottom border-left border-right 比如：定义边框上侧,border-top-style: dashed; border-top-width:5px; border-top-color:green;,border-top: 10px dashed navy;,示例,div border:5px solid blue; border-top:10px dashed navy; ,对于边框上侧： border-top样式 覆盖了border样式,CS

11、S边框样式,2.1.5 CSS样式高度和宽度,height和width属性控制元素矩形区域的大小 常用单位：px（像素），pt（点）,示例,width:200px; height:200px;,补白,2.1.6 CSS样式补白,元素内容与边框之间有一层“补白”（也叫“填充”）,元素内容区,边框,补白,补白,补白,CSS样式补白,padding属性控制元素内容与边框之间的补白,示例,2.1.7 CSS样式边界,元素与元素之间有一层边界,元素内容区,补白,补白,补白,补白,元素内容区,元素B 边框,元素A 边框,边 界,CSS样式边界,margin属性控制元素之间的边界,示例,“盒模式”： CSS

12、中，每个元素被看待成一个“盒子”box，这个盒子有“边框”，盒子内容与边框之间有“补白”，盒子与盒子之间有“边界”,2.1.8 CSS样式定位,定位类型由position属性指定 position取值：absolute和relative 指定定位类型后，可用下列属性来提供具体位置 left：左边的位置偏移 right: 右边的位置偏移 top：顶部的位置偏移 bottom：底部的位置偏移,定位说明,positon取值absolute时，表示相对于父元素；position取值relative时，表示相对于自身 left取值25px，absolute下，元素左边将偏离父元素25像素； relati

13、ve下，元素左边距离自身原始位置偏移25像素,absolute示例1,absolute示例2,2.1.9 CSS样式display,样式属性display，描述元素如何显示 取值：block，inline，list-item，none 理解：元素在网页上的显示占据一块矩形区域（盒模式），display属性控制该矩形区域如何显示 block：使元素显示在下一行 none：使得元素隐藏不显示,示例,2.1.10 CSS样式的继承,示例,body font-family:微软雅黑,楷体,宋体; , 你好，欢迎光临饮料铺! 卡布奇诺，15元 来自意大利的咖啡，口味香浓 绿茶，10元 来自中国的茶饮，清

14、凉爽口 ,里嵌套的元素 继承了body的字体样式,继承的覆盖,body font-family:微软雅黑,楷体,宋体; p font-family: 华文行楷,微软雅黑; , 你好，欢迎光临饮料铺! 卡布奇诺，15元 来自意大利的咖啡，口味香浓 绿茶，10元 来自中国的茶饮，清凉爽口 ,p的字体样式覆盖 从body继承的字体样式,示例,在CSS里，被应用的样式规则总是最具体的 比如，如果有一个样式，定义了一个更具体的，则浏览器会执行更具体的那条样式,body font-family:微软雅黑,楷体,宋体; p font-family: 华文行楷,微软雅黑; ,CSS样式继承的说明,一个元素的C

15、SS样式属性，（部分地）会被嵌套在其内的元素（子孙元素）所继承 继承的样式可以被子孙元素重新定义的相同样式所覆盖 哪些属性可以继承？ 主要是字体相关的样式（如字体、颜色、大小、粗斜体等） 其它大部分属性不被继承 如边框、位置等 根据理解，动手验证，不用死记硬背,示例,二、CSS细节,CSS样式 CSS选择符 CSS的引入方式 CSS样式的级联,2.2 CSS选择符,CSS语句中的选择符（selector)定义了样式应用的场所（对象），即受样式影响的是哪些HTML元素 三种主要类型的选择符： HTML标记选择符 class（类）选择符 ID选择符,！,理解,HTML标记选择符就是HTML标记（不

16、加），如：p，div，body 如果在CSS中将某个HTML标记定义成选择符，则在CSS所应用的网页中，所有的这种HTML标记都按照相应的样式进行显示,示例,2.2.1 HTML标记选择符,2.2.2 类（class）选择符,用HTML标记比如段落作为HTML选择符定义的样式规则，将影响所有段落，如果想采用不同样式，可以创建不同的样式类，通过类选择符应用不同样式类,定义：选择符直接以点（.）开头，后跟类名(任意合法名称)，即“.类名” 应用：类选择符根据HTML标记的class属性进行选择，选择class属性等于该“类名”的任何HTML标记,.类名 样式1； 样式2； ,选择class属性为“

17、类名”的任何元素,类选择符的定义和应用,类选择符的应用：使用HTML标记的class属性,.style1 样式 ,.style2 样式 ,段落内容1 段落内容2,示例,class = “style1”,class = “style2”,选择class为“style1”的元素,选择class为“style2”的元素,.style 样式; ,段落内容,选择class为“style”的任何元素,示例,层内容,类选择符选择class属性等于该类名的任何元素,2.2.3 ID选择符,id： HTML标记（元素）的可选属性，一个HTML元素可以设置id属性值，标识该HTML元素 HTML标记（元素）的na

18、me属性 在一个页面中，id值是唯一的，name属性值可以重复,段落内容,段落内容,ID和NAME, ,ID选择符,如果一个HTML标记设置了id属性，可以通过“id选择符”设置该HTML标记的样式 ID选择符定义和应用 定义：以（#）开头后跟ID值，即“#ID值” 应用：ID选择符根据HTML标记的id属性进行选择，选择id属性值等于该“ID值”的任意一个元素,#style 样式; ,段落内容,HTML标志可以有id属性， 值为任意合法名称,示例,选择id为“style”的任意一个元素,选择符小结,类选择符和ID选择符: 一个页面，类选择符可以重复使用，多个HTML标记的class属性值是可

19、以相同的 一个页面中，HTML标记的ID值是唯一的，ID选择符通常用于为某一个特定的HTML元素设置样式,示例,选择符小结,三种选择符: HTML标记选择符(标记名不加) 根据HTML标记名进行选择 类选择符(用.定义) 根据HTML标记的class属性进行选择 ID选择符(用#定义) 根据HTML标记的id属性进行选择,课堂练习，问以下选择符的含义：,table 样式 ,td ,.td ,#TitlePanel ,2.2.4 选择符的进一步学习,组合选择器 可以在一条CSS语句中定义若干个选择器，每个选择器之间用逗号（，）分隔,p,h1,h2color:red; font-weight:bo

20、ld;, 元素的 文本内容都为红色，粗体,示例,选择符的进一步学习,关联选择器 只选择特定元素的子孙元素,div pcolor:red; font-weight:bold; ,只选择嵌套在div元素里的p元素 两者之间以空格进行分隔,div p color:red; font-weight:bold; ,选择,不选择,示例,.style p color:red; font-weight:bold; ,选择,选择class为”style”的元素 内嵌套的p元素,不选择,#style p color:red; font-weight:bold; ,选择id为”style“的元素 内嵌套的p元素,课

21、堂练习，问以下选择符的含义： ：学习网页源码时，能看懂各种选择符的含义,.grid ,.grid table ,#grid table ,新浪首页源文件中的CSS,.grid,table ,！,要求,.grid table td ,选择符的进一步学习,伪类选择器： 对同一个HTML元素的各种状态的一种定义方式 比如：对于超链接（）的正常状态、访问过的状态、光标移动上去的状态 常用伪类选择器： a:hover 光标移动到超链接上时的状态 a:visited 超链接访问过后的状态,示例,二、CSS细节,CSS样式 CSS选择符 CSS的引入方式 CSS样式的级联,2.3 应用CSS样式的不同方式,

22、HTML文档内定义内部样式表 链接外部样式表 嵌入外部样式表 直接定义HTML标记的style属性（内联样式）,2.3.1 HTML文档内定义内部样式表, css p color:red; 第一段文字 ,只在该页面内有效,2.3.2 链接外部样式表,在文件里(后缀名为css)定义各种样式规则，页面中创建到该文件的外部链接,body background-color:#d2b48c; border:10px solid gray; padding:20px; font-family:微软雅黑; ,蓝色部分 写在单独的样式文件 （后缀名为css),文件里不需要 标记,一个样式文件可被 多个文档引入

23、,样式文件示例, css . ,之间的标记链接外部样式文件,相对或绝对地址,链接示例1,链接示例2,链接外部样式文件表,2.3.3 嵌入外部样式表,定义好的外部样式表还可以通过import命令嵌入在页面中，该命令通常放置在标记之间 旧版浏览器不支持（IE6及以下）, import url(样式文件名.css)； ,相对或绝对地址,示例,2.3.4 内联样式表,内联样式直接定义HTML标记的style属性, css 段落文字 ,HTML标记的style属性,style属性值 ：（若干条）css样式,内联样式只针对该元素有效,二、CSS细节,CSS样式 CSS选择符 CSS的引入方式 CSS样式的

24、级联,2.4 CSS样式的级联（层叠）,CSS（Cascade Style Sheet） 级联（层叠）样式表 同一个元素，可能会被多个“选择符”选中，即存在着多个级联（层叠）的样式表影响该元素的样式 如果一个元素被多个选择符选择，对于同一条样式，在CSS里，被应用的样式规则总是最具体的,body font-family:微软雅黑,楷体,宋体; p font-family: 华文行楷,微软雅黑; , 你好，欢迎光临饮料铺! 卡布奇诺，15元 来自意大利的咖啡，口味香浓 绿茶，10元 来自中国的茶饮，清凉爽口 ,p元素被body和p选 择符同时选中,对于同一条样式 font-family,应用最

25、具体的,p color:green; font-size:24px; .style p color:red; font-size:40px; ,被p选择符选中 字体绿颜色,24像素,被p和.style p同时选中,应用最具体规则： 字体红色,大小40px,示例,p color:green; font-size:24px; font-style:italic; .style p color:red; font-size:30px; font-weight:bold; ,示例,被p和.style p同时选中,应用最具体规则： 字体红色，大小40px 斜体和粗体显示,CSS综合练习&作业,阅读所提供bookshop网站页面，描述CSS是如何修饰页面效果的，包括各选择符应用在哪些元素，以及应用的样式效果 有不明白处，在作业中进行说明,