2CSS 20 基础知识.docx

1、2CSS 20 基础知识CSS 2.0 基础知识Css样式表-html一、CSS基本概念： （一）基础知识： 1CSS（Cascading Style Sheets，层叠样式表） W3C标准化组织于1996年12月17日推出了CSS1.0规范，又于1998年5月12日推出了CSS2.0规范。 2CSS样式表的功能：样式的设置，结构的布局 (1)弥补了HTML对网页格式化功能的不足；(2)设置字体变化和大小；(3)页面格式的动态更新；(4)排版定位； （二）CSS规则： 语法格式：selector property1:value1; property2:value2; 解释：selector：C

2、SS的选择器。-选择给哪个html标记写样式。 property：属性。属性：属性值；属性：属性值；设置字体是，用引号引住font-fonily：“宋体，黑体” value：属性的取值。 例如： CSS 2.0有以下4种selector选择器，也称为类： 1重定义HTML标记：第一类选择器（将开始标记的关键字，作为选择器） (1)单个HTML标记的CSS定义： 例如：h1 font-size:12px; color:red;(2)多个HTML标记设置相同的CSS样式： 例如：h1,h2,h3 color:green;（用“,”隔开） 2用户自定义类，也称为通用类： 用class属性给标记起一个

3、名字，那么想要在css中选中该标记，则选择器需以（）开头+class名，是用户自己定义的名称。（同一class名，可以给多个标记使用）例如： html中：我是标题一 CSS中： .note color:green; font-family:楷体_gb2312;用id属性给标记起一个名字，那么想要在css中选中该标记，则选择器以（）开头+id名，是用户自己定义的名称。（同一id名只能使用一次）例如：html中：我是标题一 CSS中： note color:green; font-family:楷体_gb2312; 3虚类：（链接）在body间使用，应用广泛。 a:link 设置正常状态下的链接文

4、字的样式。 a:visited 设置访问过的链接文字的样式。 a:hover 设置鼠标放在链接上的链接文字样式。（滑过事件，可以给所有标记使用）a:active 设置鼠标单击时的链接文字的样式。 4具有上下文关系的HTML标记： 一种用空格隔开的两个或多个标记组成的字符串。 例如： h1 bcolor:red; 含义：位于.之间的.标记的文字颜色显示为红色，其他的.标记对中的文字颜色不变。 注意：嵌套关系可以定义多层，但通常只使用一层。 （三）CSS与HTML的冲突：当对同一段文本应用多个CSS样式时，由于这些样式之间可能存在着矛盾或样式与HTML之间存在着矛盾，可能在显示时无法出现预期的效果

5、。 浏览器显示样式时，遵循以下2个规则：（代码执行顺序：从上到下，从左到右。） 规则1：样式叠加当多个不同的样式作用于同一元素时，若样式之间互不矛盾，则浏览器显示所有的样式。 规则2：距离优先 当多个不同的样式作用于同一元素时，若样式之间存在矛盾，则浏览器显示距离元素较近的样式。（若样式存在冲突时，后设置的样式会覆盖之前设置的样式。哪个选择器设置的越具体，样式会优先显示）（四）CSS的基本写法： 1内部样式块对象表示法其次在头部定义CSS样式，在部位使用已经定义的样式。优先级 定义CSS样式：定义CSS类 若采用用户自定义类，则使用该类的标记采用class属性指定样式的名称。 例如： h5 f

6、ont-size:12px; color:red;h1,h2,h3 font-size:22px; color:green;.note color:yellow; font-family:楷体_gb2312;p b color:red; HTML与CSS技术的综合应用HTML与CSS技术的综合应用HTML与CSS技术的综合应用HTML与CSS技术的综合应用宁静的夏天宁静的夏天全国计算机等级考试全国计算机等级考试2内联定义表示法优先级最高在HTML文件标签中使用style属性来指定样式。 例如： 文字信息3外部样式表示法再次 样式表文件：专门存放CSS样式定义信息的外部文件，扩展名为*.css。

7、 在外部创建CSS样式表文件。 在要使用外部样式的html文件的.标记中写明： 在要使用外接样式的html文件的.标记中直接使用外部样式。 注：写在外部（相对于HTML文件）CSS文件中，需要在HTML文件的.之间，用标记进行引用（CSS文件路径），然后就可以在外部CSS文件中设置HTML标记的样式。 例如： 外部样式表文件：hw.css h1font-family:黑体; color:red; .hxfont-family:楷体_gb2312; color:blue; html文件：aa.html 该标题使用了外部样式表文件 调用外部样式表文件中的web自定义样式。 浏览器执行样式表顺序：内

8、联样式 内部样式表 外部样式表 (服从就近原则)样式叠加或样式冲突样式冲突：1样式的优先级：内联样式 内部样式表 外部样式表2，距离优先：a后设置的样式会覆盖先设置的样式b设置的越具体，样式越优先显示。（五）CSS的单位单位描述单位描述cm厘米in英寸，1in=2.54cmmm毫米pt点，1pt=1/72 inem相对长度单位。相对于当前对象内文本的字体尺寸pc皮卡，1pc=12ptex相对长度单位。相对于字符“x”的高度。此高度通常为字体尺寸的一半px像素%百分比 二、CSS属性： CSS提供了以下9种属性类，共71个： 1字体：控制网页中字符的字体样式。 2文本：控制网页中文本的段落布局。

9、 3颜色：控制网页中文本的颜色。 4背景：对网页背景作适当的设置。 5定位：控制元素在页面上的位置及元素间的重叠。 6列表：对页面的列表样式进行修改。 7盒子：包括边界、填充、边框的设置。8鼠标形状：控制鼠标的外观。 9滤镜：作用于文字或图像的外观特效。三、字体属性（共5个）：1. font-family:指定字体类形或字体类形列表。（* 相当于HTML中标记的face属性）如：font-family: “黑体”;2. font-size：指定字号。（* 相当于HTML中标记的size属性）如:font-size:18px;取值类型值说明绝对大小xx-small、x-small、small、m

10、edium、large、x-large、xx-largemedium为缺省值，字体从前向后越来越大。相对大小smaller、larger分别表示比上一级元素中的字体小或大一号。长度值直接给出长度值字体显示为给定长度的大小。百分比直接给定百分比表示与缺省字体的百分比。 3font-style：指定字体样式。取值：normal（普通）、italic（斜体）、oblique（倾斜）。如：font-style:italic 4font-weight：指定字体粗细。 取值：normal（正常值，粗细度约为300）、bold（粗体，粗细度约为700）；bolder（特粗体，粗细度约为900）、lighte

11、r（比正常值细）；取值范围：100900（9个等级，数字越小越细）。 5font-variant：字体变量。（不常用） 取值：normal（正常值）、small-caps（把小写字母转换为大写字母，并显示为小型大写字母）四、文本属性（共8个）： 1letter-spacing：设置字符间距。 取值: normal（正常值）、具体长度值（带单位）。单位参照css单位 注意：系统认为字符间距是单个英文字母之间、单个中文汉字之间的距离。 2word-spacing：设置单词间距。 取值：normal（正常值）、具体长度值（带单位）。 注意：系统以空格分辨单词，英文单词之间的空格、中文汉字之间的空格均

12、认可。 3text-decoration：文本修饰属性。 取值：none（正常值）、underline（下划线）、overline（上划线）、line-through（删除线）、blink（闪烁，该值仅Netscape浏览器支持，IE无此效果）。 4text-align：文本水平对齐方式。 取值：left（左对齐）、right（右对齐）、center（居中对齐）、justify（两端对齐）。 5line-height:文本行高（让文本垂直居中的话，此属性取值需等于父盒子的高）。 取值：normal（正常值）、具体长度值（带单位）。 6text-transform:控制英文大小写。 取值：non

13、e（无文本转换）、capitalize（单词首字母大写）、uppercase（小写转换为大写）、lowercase（大写转换为小写）。 7text-indent:设置首行缩进。取值：normal（正常值）、具体长度值（带单位）。text-indent:2em; 首行缩进2em。（两字符）。 8vertical-align:文本垂直对齐方式。 取值：baseline（基线）、sub（下标）、super（上标）、top（顶部）、text-top（文本顶部）、middle（中间）、bottom（底部）、text-bottom（文本底部）。五、颜色属性（共1个）：（颜色16进制，颜色名字，或是颜色RG

14、B） color：指定文本颜色。（* 相当于HTML中标记的color属性） 取值：可以是颜色16进制代码，也可以是颜色名称。六、背景属性（共5个）： 1background-color:设定背景颜色。（* 相当于HTML中标记的bgcolor属性） 2background-image:设定背景图片。（* 相当于HTML中标记的background属性） 格式：selector background-image:url(image_path); 3background-repeat:背景图片重复方式。 取值：repeat（图片平铺）、repeat-x（以x轴方向平铺）、repeat-y（以y轴

15、方向平铺）、no-repeat（不重复） 4background-position:设定图片位置。 取值：水平和垂直两值。垂直：top（图片垂直局顶）、bottom（图片垂直居底）、水平：center（图片居中）、left（图片水平居左）、right（图片水平居右）、value（具体值），格式为：selector background-position:x y; 5background-attachment:设定图片附件。（* 相当于HTML中标记的bgproperties属性） 取值：scroll（页面滚动时图片滚动）、fixed（页面滚动时图片不动）七、定位属性（层）（共10个，难点）：

16、1position:规定Web元素的定位方式。 取值：absolute（绝对定位）、relative（相对定位） 含义： 绝对定位：位置被设置为absolute的元素，可被定位于相对于包含它的元素的指定坐标。此元素的位置可通过left、top、right以及bottom属性来规定元素的位置。 相对定位：让操作的元素参照前一个元素的末端位置进行偏移。(参照物)注：若想给子元素通过添加绝对定位，给其调整位置，则其父元素必须先进行相对定位。（子绝父相） 2top:依据定位方式，元素顶端与参照物顶端的距离。单位为像素。（元素必须进行绝对定位）3left:依据定位方式，元素左端与参照物左端的距离。单位为

17、像素。（元素必须进行绝对定位）4right:依据定位方式，元素右端与参照物右端的距离。单位为像素。（元素必须进行绝对定位） 5bottom:依据定位方式，元素下端与参照物下端的距离。单位为像素。（元素必须进行绝对定位）6width:定位元素的宽度。 7height:定位元素的高度。 8.z-index:z轴，决定定位元素先后顺序的覆盖关系，值高的元素会覆盖值低的元素（该属性仅限于绝对定位状态）。 9overflow:溢出属性，当定位元素的内容超出定位元素所能容纳的范围时所采取的方案。 取值：visible（可见）、hidden（隐藏）、scroll（滚动条）、auto（自动）。 含义： vis

18、ible:无论定位元素的大小，内容都可以显示出来。 hidden:将多出定位元素的部分内容隐藏。 scroll:不管内容是否超出定位元素的范围，都添加滚动条。 auto:只在定位元素内容超出定位元素的范围时才显示滚动条。 注意： top、left用来确定定位元素的位置；width、height用来确定定位元素的范围。 overflow属性对于HTML中的标记不起作用，图片会随着width、height属性的变化而进行缩放。若想使图片也受该属性的影响，必须将标记加放在盒子内，例如：.之间，再在标记中使用class属性确定样式。 “定位元素”相当于DreamWeaver中的“层”。 10clip:

19、剪辑，限定只显示裁切出来的区域。 解释：裁出的区域为矩形，只要确定两个点的坐标即可。一个是矩形左上角的顶点，由top、left指定；另一个是矩形右下角的顶点，由bottom、right指定。 格式：selector clip:rect(top right bottom left); 含义：top:第一个顶点的x坐标。 left:第一个顶点的y坐标。 bottom:第二个顶点的x坐标。 right:第二个顶点的y坐标。 注意：该属性只能再position属性选为absolute（绝对定位）时才可以使用。 分析下列例子： .dw1position:absolute;top:20px;left:10

20、px; .dw2position:relative;top:20px;left:10px;width:200;height:100;overflow:auto; .dw3position:absolute;clip:rect(20px 100px 100px 20px); 全国计算机等级考试 全国计算机等级考试博文报名点；全国计算机等级考试博文报名点；全国计算机等级考试博文报名点；全国计算机等级考试博文报名点；全国计算机等级考试博文报名点；全国计算机等级考试博文报名点。文报名点；全国计算机等级考试博文报名点。- 八、列表属性（共3个，重点）： 1list-style-type:设置项目符号和编

21、号的类型。取值描述disc缺省值，实心黑点。circle空心圆圈。square方形黑块。decimal数值：1，2，3lower-alpha小写字母：a，b，cupper-alpha大写字母：A，B，Clower-roman小写罗马字母：i，ii，iiiupper-roman大写罗马字母：I，II，IIInone无样式。 2list-style-image:设置图片为列表项目的符号。 格式：selector list-style-image:url(image_path); 3list-style-positon:设置项目符号是否跟随列表项缩进而缩进。目录列表项标记显示在文本内还是文本外。 取

22、值：outside（列表项目符号紧贴左侧边框，不跟随列表项缩进而缩进）、inside（跟随列表缩进）。000000000000000000000000000000000000000000000000000000000000000000000000000000000九、盒子属性（共27个，重点）：盒子：在格式化页面对象时，CSS将所有的对象都放置在一个容器中，这个容器称为盒子，也叫区块。. 盒子有四大类属性，共27个： （一）外边界margin（共5个）：盒子与浏览器窗口边界或前一个元素边界的距离。 1margin-left:左边界宽度。 2margin-top:上边界宽度。 3margin-r

23、ight:右边界宽度。 4margin-bottom:下边界宽度。 5margin:按照上、右、下、左的顺序同时设置四个边界的宽度。 格式：selector margin:top right bottom left; 注意： 如果仅指定一个值，则四个边界采用相同的（设置的宽度）宽度。 如果指定了2个或3个值，则没有指定边界宽度的边将采用对边的宽度。 如果指定的是负值，可以获得特殊的效果。（margin可以出现负值） （二）内填充（共5个）：盒子边框与盒子内容之间的距离。1padding-left:左填充宽度。 2padding-top:上填充宽度。 3padding-right:右填充宽度。

24、4padding-bottom:下填充宽度。 5padding:按照上、右、下、左的顺序同时设置四个填充的宽度。 格式：selector padding:top right bottom left; 注意： 如果仅指定一个值，则四个填充采用相同的（设置的宽度）宽度。 如果指定了2个或3个值，则没有指定填充宽度的边将采用对边填充的宽度。 不能指定为负值。 （三）边框（共15个）：盒子填充与边界之间的部分。1宽度属性：border-left-width:左边框宽度。border-top-width: 上边框宽度。border-right-width: 右边框宽度。border-bottom-wid

25、th: 下边框宽度。border-width: 按照上、右、下、左的顺序同时设置四个边框的宽度。 2颜色属性：border-left-color:左边框颜色。border-top-color:上边框颜色。border-right-color:右边框颜色。border-bottom-color:下边框颜色。border-color: 按照上、右、下、左的顺序同时设置四个边框的颜色。 3样式属性：border-left-style:左边框样式。border-top-style:上边框样式。border-right-style:右边框样式。border-bottom-style:下边框样式。bord

26、er-style: 按照上、右、下、左的顺序同时设置四个边框的样式。边框样式取值描述none无边框dotted边框由点组成dashed边框由短线组成solid实线边框double双实线边框groove沟槽ridge脊状inset凹陷。outset凸出 border:3px #00FF00 solid;去掉图片边框的写法：border:0 none;（四）浮动（共2个）：将对象环绕在一个元素的周围。 1float：设置元素浮动到页面的边缘。 取值:none（缺省值，不浮动）、left（元素在页面左边缘浮动）、right（元素在页面右边缘浮动）。 2clear:指定一个元素是否有漂浮在它旁边的对象。（clear:both; 清除浮动） 取值：none（缺省值，允许浮动）、left（元素左边不允许有对象漂浮）、right（元素右边不允许有对象漂浮）、both（元素不允许有对象漂浮）。 注意：禁止漂浮的元素应该移到漂浮对象的下边。十、鼠标形状：（共1个） 语法格式：selector cursor:value; 功能：设置鼠标在经过某一对象时的形状。鼠标形状属性值描述pointer手形。crosshair交叉十字。text文本选择符。waitWindows沙漏形状。default默认的鼠标形状。help带问号的鼠标。