DW_09使用CSS样式表

主讲：韩维良2020年3月网站建设第9章使用CSS样式表2020年3月21日星期六教育学院第一节认识CSS语言一、CSS样式概述层叠样式简称CSS（CascadingStyleSheet技术是一种是用于控制网页样式的标记性语言），是以HTML为基础的语言，用于定义网页中内容的格式，它扩展了HTML的功能（如行间距），美化网页，使网页设计者以更有效的方式设置网页格式。3网站建设第9章使用CSS样式表2020年3月21日星期六教育学院主要特点：可以独立地为网页中的各种对象定义格式，即样式，包含多方面的格式要求，并为样式定义一个名称，从而可将一种样式用于多个网页。保证了同一样式的多次重复使用。CSS样式表中的层叠是指多个CSS样式表可以同时应用于同一个页面或网页中的同一元素，浏览器根据CSS定义的层叠规则来决定哪一种样式具有最高优先级。4网站建设第9章使用CSS样式表2020年3月21日星期六教育学院1、可以将网页样式与内容分离。2、能以前所未有的能力控制页面的布局。3、可以制作出体积更小，下载更快的网页。4、可以更快、更容易的维护及更新大量的网页。5、让浏览器成为更友好的界面。网站建设第9章使用CSS样式表2020年3月21日星期六教育学院二、CSS样式作用1、CSS可以定义网页的多种样式，美化网页，如文字的大小颜色、段落格式、排版定位、对象位置、图片特效、鼠标指针样式等；2、样式与文档分离，通过修改样式表，实现页面格式的自动更新；3、CSS可以独立于网页文件，从而实现网站页面风格的批量修改。网站建设第9章使用CSS样式表2020年3月21日星期六教育学院第二节CSS语言基本语法◆CSS样式由“选择符”和“声明”组成。◆选择符说明样式作用的对象是谁；◆声明由“属性”和“属性值”组成。◆每条声明之间用“;”分隔。◆文本编辑器编辑生成，大小写不等价；selectors{property:value;}选择符属性属性值声明网站建设第9章使用CSS样式表2020年3月21日星期六教育学院CSS的思想就是首先指定对什么“对象”进行设置，然后指定对该对象的哪个方面的“属性”进行设置，最后给出该设置的“值”。因此，概括来说，CSS就是由3个基本部分——“对象”、“属性”和“值”组成的。而且在一个样式中可以设置多个属性及其值。举例：定义一个样式体验。网站建设第9章使用CSS样式表2020年3月21日星期六教育学院选择符的类别：CSS选择符的使用有四种情况：（1）单元素名作为选择符元素名{样式规则}（2）CLASS（类）作为选择符.class名称{样式规则}圆点引导（3）ID(标识符)作为选择符＃ID号{样式规则}#号引导网站建设第9章使用CSS样式表2020年3月21日星期六教育学院（4）元素组合作为选择符元素名1，元素名2，…….元素名n{样式规则}.class名称1，.class名称2，….class名称n{样式规则}＃ID号1，＃ID号2，…….＃ID号n{样式规则}用逗号分隔的多个选择符的组合。如下：H1,H2{font-family:arial;text-align:center;color:red;}.a,.b,.c{font-family:隶书;color:yellow;}#1,#2{color:blue;font-family:楷体;}#2{font-size=100pt;}.c{font-size=100pt;}网站建设第9章使用CSS样式表2020年3月21日星期六教育学院第三节CSS基本应用1、在标签内部定义样式属性在Html标签内部设计样式属性：标签名style=“属性1:值；属性2:值；”标签内容/标签名如：img{border:thickdouble;}即重新定义一个Html标签的样式，只能用于再定义特定标签的样式。网站建设第9章使用CSS样式表2020年3月21日星期六教育学院2、使用style标签定义仅在单个文档内部使用的样式，一般在文档首部定义：styletype=text/css!--选择符{属性1:值;属性2:值;……}--/styleheadstyletype=text/css!--.base{font-family:黑体;color:blue;}--/style/head网站建设第9章使用CSS样式表2020年3月21日星期六教育学院3、使用link标签导入外部CSS文件一般定义样式常用的方式，一个样式可被用于多个网页文件，只要修改了CSS样式文件中的样式，则所有使用该样式的网页格式同步发生变化，。使用LINK（链接）标签，语法：HEADLINKhref=”样式表文件.css”rel=“stylesheet”type=”text/css”/HEAD网站建设第9章使用CSS样式表2020年3月21日星期六教育学院4、使用@import命令导入外部CSS文件与Link标签的功能相同，可用于导入一个外部样式文件。语法：STYLETYPE=text/css@importurl(“样式表文件.css”);/STYLE要求：必须放在Style标签中使用。网站建设第9章使用CSS样式表2020年3月21日星期六教育学院第四节CSS样式优先级层叠样式表的一般处理原则：（1）当两个不同的样式应用于同一段文本时，浏览器会显示所有的样式属性。如：一个样式定义字体为宋体，另一个样式定义颜色为红色，则这段文本显示为红色宋体，（2）如果两个样式发生冲突，则根据样式与文本的远近关系来选择样式，最近优先原则，越近越优先。（3）CSS样式比HTML定义的样式具有优先权。（4）内部样式优先于外部样式。网站建设第9章使用CSS样式表2020年3月21日星期六教育学院当一个网页文档中为同一个对象定义多个样式时，根据这些样式的优先级决定谁有效。一、环境方面的优先级顺序1、网页设计者定义的样式；2、浏览者在浏览器中设置的样式；3、浏览器自带的默认样式。二、应用方面的优先级顺序1、在标签内部添加的样式属性；2、使用style标签定义的样式3、导入的外部样式；网站建设第9章使用CSS样式表2020年3月21日星期六教育学院三、选择符方面的优先级顺序1、ID选择符（优先权值为100）；2、类选择符（优先权值为10）；3、Html标签选择符（优先权值为1）；网站建设第9章使用CSS样式表2020年3月21日星期六教育学院第五节CSS设备类型（略）用于指定CSS样式所作用的设备类型，使之能在不同的设备上正确显示。方法一：@importurl(样式表文件)设备类型；方法二：@media设备类型{属性1：值；属性2：值；}网站建设第9章使用CSS样式表2020年3月21日星期六教育学院第六节CSS单位和属性一、CSS单位1、长度单位主要用于定义对象的宽度、高度、字号、字间距、文本缩排、行高、边距、间距、边框宽度等属性。绝对类型：英寸（in）、厘米（cm）、毫米（mm）、点（point，写作pt）、字高（派卡pica，印刷单位，写作pc）相对类型：em:相对于当前字符的高度；ex:相对于字母x的高度；px:像素（相对于屏幕分辨率）网站建设第9章使用CSS样式表2020年3月21日星期六教育学院2、百分比单位％。相对于上一级对象的相同属性作为参照值，为其百分之多少。格式：“+/-”+数值+“%”如：表格的宽度是屏幕宽度的80%。网站建设第9章使用CSS样式表2020年3月21日星期六教育学院3、颜色单位◆颜色名称，如red，blue；◆百分比合成颜色，RGB(**%,**%,**%)如：RGB(100%,100%,100%)——表示白色◆数字合成颜色，RGB(**,**,**)如：RGB(255,255,255)——表示白色◆十六进制数合成法#RRGGBB或者#RGB如：#FF00CC#F0C网站建设第9章使用CSS样式表2020年3月21日星期六教育学院4、URL单位指链接路径，有相对路径和绝对路径之分，其中相对路径又分为相对根目录的路径和相对文档的路径。一般站外链接用绝对路径，站内链接用相对路径。链接路径相对路径相对根目录的路径相对文档的路径绝对路径网站建设第9章使用CSS样式表2020年3月21日星期六教育学院二、CSS属性1、CSS盒模型CSS将元素假设放在一个矩形区域中，然后对这个矩形区域进行属性设置，共有五类属性：边界(Margin)、边框(Border)、填充(Padding)、大小(Height、Weight)、背景（background）等。网站建设第9章使用CSS样式表2020年3月21日星期六教育学院24边界边框填充对象网站建设第9章使用CSS样式表2020年3月21日星期六教育学院边界(Margin)：区块与其他对象的空白距离，有5个属性：Margin-top、Margin-bottom、Margin-left、Margin-right、Margin等。边框(Border)：自身的外围边框属性，有3类属性：边框宽度、边框颜色、边框样式，而宽度又有5个属性：Border-top-width、Border-bottom-width、Border-left-width、Border-right-width、Border-width填充(Padding)：区块内元素与区块边框的空白距离，有5个属性：Padding-top、Padding-bottom、Padding-left、Padding-right、Padding等。网站建设第9章使用CSS样式表2020年3月21日星期六教育学院26网站建设第9章使用CSS样式表2020年3月21日星期六教育学院27padding-rightpadding-leftborder-rightborder-leftmargin-rightmargin-leftwidth元素的总宽度元素的总宽度=左边界+左边框+左填充+Width+右边界+右边框+右填充网站建设第9章使用CSS样式表2020年3月21日星期六教育学院28网站建设第9章使用CSS样式表2020年3月21日星期六教育学院元素的总高度=上边界+上边框+上填充+height+下边界+下边框+下填充padding-toppadding-bottomborder-topborder-bottommargin-topmargin-bottomheight元素的总高度网站建设第9章使用CSS样式表2020年3月21日星期六教育学院2、CSS定位CSS定位(Positioning)属性允许你对元素进行定位。position属性值的含义：static:没有特殊定位，遵循基本的定位规定，不能通过z-index进行层次分级。如层的定位：Relative：不脱离文档流，参考自身静态位置通过top(上),bottom（下）,left（左）,right（右）定位，并且可以通过z-index进行层次分级。即相对于自身原有的位置定位到某处，元素仍保持其未定位前的形状，它原本所占的空间仍保留。网站建设第9章使用CSS样式表2020年3月21日星期六教育学院31#box_relative{position:relative;left:30px;top:20px;}网站建设第9章使用CSS样式表2020年3月21日星期六教育学院absolute:脱离文档流，相对于其包含块通过top,bottom,left,right定位。元素框从文档流完全删除，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。网站建设第9章使用CSS样式表2020年3月21日星期六教育学院33#box_relative{position:absolute;left:30px;top:20px;}网站建设第9章使用CSS样式表2020年3月21日星期六教育学院CSS的定位属性属性描述position把元