Java相关课程系列笔记之七CSS学习笔记(共19页).doc

《Java相关课程系列笔记之七CSS学习笔记(共19页).doc》由会员分享，可在线阅读，更多相关《Java相关课程系列笔记之七CSS学习笔记(共19页).doc（19页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、精选优质文档-倾情为你奉上CSS学习笔记Java相关课程系列笔记之七专心-专注-专业笔记内容说明CSS（王春梅老师主讲，占笔记内容100%）；目 录一、 CSS概述1.1 CSS的作用早期，依靠HTML元素的属性设置样式，比如：border/align；而每个元素的属性不尽相同，所以样式设置比较混乱；因此，W3C推出了一套标准：使用某种样式声明后，所有的元素通用，即CSS产生，它是对页面的样式进行统一的定义（声明）的。1.2什么是CSS1）CSS（Cascading Style Sheets）：层叠样式表，又叫级联样式表，简称样式表。2）用于HTML文档中元素的样式定义。3）实现了将内容与表现

2、分离。4）提高了代码的可重用性和可维护性。1.3 CSS的基础语法1）样式表由多个样式规则组成，每个样式规则有两个部分：选择器和声明。2）选择器：决定哪些元素使用这些规则。3）声明：由一个或者多个属性/值对组成，用于设置元素的外观表现。二、 如何使用CSS样式表一共有三种使用方式：内联样式、内部样式表、外部样式表。2.1内联样式样式定义在单个的HTML元素中。1）样式定义在HTML元素的标准属性style里。2）不需要定义选择器，也不需要大括号。3）只需要将分号隔开的一个或者多个属性/值对，作为元素的style属性的值。例如：文本2.2内部样式表样式定义在HTML页的头元素中。1）样式表规则位

3、于文档头元素的元素内。2）在文档的元素内添加元素，在元素中添加样式规则。例如： h1 color:green; 文本u 注意事项：元素中的属性type=text/css可省略。且元素里的注释要用CSS规定的注释/*注释*/，而不是HTML里的注释。2.3外部样式表将样式定义在一个外部的CSS文件中（.css文件），由HTML页面引用样式表文件。1）首先需要创建一个单独的样式表文件，用来保存样式规则。一个纯文本文件。该文件中只能包含CSS样式规则。文件后缀为.css。2）然后在需要使用该样式表文件的页面上，使用元素链接需要的外部样式表文件。例如：myStyle.css文件： h1 color:g

4、reen; p background-color;silver;color:blue; html文件里的元素： u 注意事项：rel：代表做什么用；href：代表引如的文件在哪；type：代表引入的文件是什么类型的；text/css：代表纯文本类型的CSS代码。2.4三种用法的区别1）内联样式：将样式定义在元素的style属性里；但没有重用性。 2）内部样式表：将样式定义在元素里的里；但仅限于当前文档范围重用。3）外部样式表：将样式定义在单独的.css文件里，有页面引入它；但可维护性和可重用性高，同时实现了数据（内容）和表现的分离。2.5 CSS样式表特征和优先级1）继承性：大多数CSS的样式

5、规则可以被继承（子元素继承父元素的样式）。2）层叠性：可以定义多个样式表；不冲突时，多个样式表中的样式可层叠为一个，即不不冲突时采用并集方式。3）优先级：即冲突时采用优先级内联 内部 或者 外部。内部和外部：优先级相同的情况下，采取就近原则，以最后一次定义的为优先。所以，当修改时，不想去找，就在CSS中最后的位置重新写一遍新的样式。这也是CSS文件越来越大的原因。u 注意事项：还应注意浏览器的缺省设置。4）所以级联（层叠）样式表CSS的特点是：继承+并集+优先级。三、 CSS选择器3.1元素选择器HTML文档的元素名称就是元素选择器。1）语法，例如：html、h1color:blue;、pco

6、lor:silver;2）缺点：不同的元素样式相同，即不能跨元素。所以做不到同一类元素下的细分。3.2类选择器自定义的某种选择器。1）语法：.className样式声明 例如：.myClass background-color:pink;font-size:35pt; h2中的文本 p中的文本u 注意事项：v html文件中，所有元素都有一个class属性，如：v 类选择器还一种用法：hello，样式s1和样式s2对div共同起作用。3.3分类选择器将类选择器和元素选择器结果起来使用，以实现同一类元素下不同样式的细分控制。如元素，又有按钮又有文本框的，采用分类选择器。1）语法：元素选择器.cl

7、assName样式声明例如： p.myClass color:red;font-size:20pt h2中的文本 p1中的文本 p2中的文本3.4元素id选择器以某个元素id的值作为选择器。比较特殊的、页面整体结构的划分一般使用id选择器。 1）语法：定义id选择器时，选择器前面需要有一个“#”号，选择器本身则为文档中某个元素的id属性的值。例如：#header color:red;background:yellow; This is Titleu 注意事项：v html文件中，所有元素都有一个id属性。且某个id选择器仅使用一次。3.5派生选择器依靠元素的层次关系来定义。某一包含元素下的一些

8、相同子元素使用派生选择器。1）语法：通过依据元素在其位置的上下文关系来定义样式，选择器一端包括两个或多个用空格分隔的选择器。例如：h1 spancolor:red; This is aimportantheading3.6选择器分组对某些选择器定义一些统一的设置（相同的部分）。1）语法：选择器声明为以逗号隔开的元素列表。 例如：h1,p,div border:1px solid black;3.7伪类选择器伪类用于向某些选择器添加特殊的效果。1）语法：使用冒号“：”作为结合符，结合符左边是其他选择器，右边是伪类。2）常用伪类：有些元素有不同的状态，典型的是元素。:link：未访问过的链接:ac

9、tive：激活:visited：访问过的链接:hover：悬停，鼠标移入，所有元素都能用:focus：获得焦点例如：a:link color:black;font-size:15pt; a:visited color:pink;font-size:15pt; a:hover font-size:20pt; a:active color:red; 3.8选择器优先级1）基本规则：内联样式 id选择器 类选择器 元素选择器2） 优先级从低到高排序：div .class div.class #id div#id #id.class div#id.class例如：四、 CSS单位4.1尺寸1）%：百分

10、比2）in：英寸3）cm：厘米4）mm：毫米5）pt：磅（1pt等于1/72英寸，绝对）6）px：像素（计算机屏幕上的一个点，相对）7）em：1em等于当前字体尺寸，2em等于当前字体尺寸的两倍4.2颜色1）rgb(x,x,x)：RGB值，如rgb(255,0,0)2）rgb(x%,x%,x%)：RGB百分比值，如rgb(100%,0%,0%)3）#rrggbb：十六进制数，如#ff00004）#rgb：简写的十六进制数，如#f00（两两相同可简写）4.3尺寸属性1）width和height：宽度和高度。2）overflow：当内容溢出元素框时如何处理，可取的值有：visible/hidden

11、/scroll（总是显示滚动条）/auto（溢出时才会显示滚动条）五、 边框样式5.1简写方式border:width style color;5.2单边定义border-left/right/top/bottom:width style color;5.3单边宽度border-widthborder-left/right/top/bottom-width;5.4单边样式border-styleborder-left/right/top/bottom-style;5.5单边颜色border-colorborder-left/right/top/bottom-color;5.6案例input.b

12、tnheight:30px;width:80px;color:black;background:#f0f0f0;border-left:2px solid #fff;border-top:2px solid #fff;border-right:2px solid #6a6a6a;border-bottom:2px solid #6a6a6a;background:#c0c0c0;六、 框模型框模型（box modal）定义了元素边框、内容、其他元素之间的内边距和外边距的问题。6.1 框模型图6.2 width和height指定内容域的宽度和高度。6.3边框、内外边距对元素尺寸的影响增加内边距、

13、边框和外边距不会影响内容域的尺寸，但是会增加元素框的总尺寸。6.4案例#box width:70px;margin:10px;padding:5px u 注意事项：注意元素所占面积的变化。6.5内边距和内容元素之间的距离。1）语法：padding:30px;2）单边设置：padding-left/top/right/bottom:30px;3）简写方式：padding:10px 20px; 上下 左右 padding:10px 20px 30px 40px; 顺时针，上右下左6.6外边距与下一个元素之间的空间量。1）语法：margin:30px;2）单边设置：margin-left/top/r

14、ight/bottom:30px;3）简写方式：margin:10px 20px; 上下 左右 margin:10px 20px 30px 40px; 顺时针，上右下左4）特殊写法：margin:0px auto; 对matgin而言，margin可取值为auto，使某个框居中显示；屏幕宽度减去元素宽度，除以2，左右平分七、 背景样式7.1背景色background-color:颜色;7.2背景图像background-image:url(a.jpg);/*注意，url里没有双引号*/7.3背景平铺background-repeat:repeat（默认的）/no-repeat/repeat-x

15、/repeat-y;7.4背景固定background-attachment:scroll/fixed;/*scroll:背景和内容一起滚动;fixed:背景固定，类似于水印的效果，走到哪跟到哪*/7.5背景定位background-position:left top;/*可写px、%、center单词*/7.6组合设置background:background-color | background-image | background-repeat | background-attachment | background-position; 7.7案例background:#9dcdfe u

16、rl(a.jpg) no-repeat fixed left top;u 注意事项：v 如使用组合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置。比如设置background:white等价于设置background:white none repeat scroll 0% 0% 如果在此之前设置background-image属性，则其设置将被background-image的默认值none覆盖。v 错误，img没有占一定的面积、空间，所以不能设置背景。八、 文本/字体样式8.1指定字体1）语法：font-family:name;font-family:ncursiv

17、e/fantasy/monospace/serif/sans-serif;2）取值说明：name：字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格，则应使用引号括起第二种声明方式使用所列出的字体序列名称。如果使用fantasy序列，将提供默认字体序列。8.2字体颜色1）语法：color:color;u 注意事项：用颜色名称指定 color 不被一些浏览器接受。但使用 RGB 值指定颜色能被所有里浏览器识别并正确显示。8.3字体大小1）语法：font-size:xx-small/x-small/small/medium/large/x-large/xx-large/larger/sma

18、ller/length;2）取值说明：xx-small：绝对字体尺寸。根据对象字体进行调整。最小 x-small：绝对字体尺寸。根据对象字体进行调整。较小small：绝对字体尺寸。根据对象字体进行调整。小medium：默认值。绝对字体尺寸。根据对象字体进行调整。正常large：绝对字体尺寸。根据对象字体进行调整。大x-large：绝对字体尺寸。根据对象字体进行调整。较大xx-large：绝对字体尺寸。根据对象字体进行调整。最大larger：相对字体尺寸。相对于父对像中字体尺寸进行相对增大。使用成比例的 em 单位计算smaller：相对字体尺寸。相对于父对像中字体尺寸进行相对减小。使用成比例的

19、 em 单位计算length：百分数/由浮点数字和单位标识符组成的长度值，不可为负值。 其百分比取值是基于父对象中字体的尺寸。u 注意事项：字体一般为10-12磅。8.4字体加粗1）语法：font-weight:normal/bold/bolder/lighter/100/200/300/400/500/600/700/800/900;2）取值说明：normal：默认值，正常的字体，相当于 400 。声明此值将取消之前任何设置 bold ：粗体。相当于 700 。也相当于 b 对象的作用 bolder：比 normal 粗 lighter：比 normal 细 100：字体至少像 200 那样

20、细 200：字体至少像 100 那样粗，像 300 那样细 300：字体至少像 200 那样粗，像 400 那样细 400：相当于 normal 500：字体至少像 400 那样粗，像 600 那样细 600：字体至少像 500 那样粗，像 700 那样细 700：相当于 bold 800：字体至少像 700 那样粗，像 900 那样细 900：字体至少像 800 那样粗8.5文本排列1）语法：text-align:left/right/center/justify; 2）取值说明：left：默认值。左对齐right：右对齐 center：居中对齐 justify：两端对齐u 注意事项：v 此

21、属性作用于所有块级元素，在一个div对象里的所有块级元素会继承此属性值。v 只对块级元素生效，对行内元素无效！ 8.6行高常用于控制文本的垂直布局。1）语法：line-height:normal/length;2）取值说明：normal：默认值。默认行高 length：百分比数字/由浮点数字和单位标识符组成的长度值，允许为负值。 其百分比取值是基于字体的高度尺寸。u 注意事项：设置为和包含元素一样高，即可实现垂直居中效果。8.7文字修饰1）语法：text-decoration:none | underline | blink | overline | line-through;2）取值说明：n

22、one：默认值。无装饰blink：闪烁 underline：下划线line-through：贯穿线 overline：上划线u 注意事项：v 假如none值在属性声明的最后，所有的先前的其他取值都会被清除。例如，声明text-decoration: underline overline blink none 等于声明text-decoration: none。 v 指定块对象的此属性将影响其所有内联子对象。8.8文本缩进首行缩进，常用于段落。1）语法：text-indent:length;2）取值说明：length：百分比数字/由浮点数字和单位标识符组成的长度值，允许为负值，默认值为 0 。九

23、、 表格样式是表格特有的的属性。9.1垂直对齐vertical-align:top/middle（默认）/bottom;单元格中垂直方向上的对齐9.2边框合并border-collapse:separate（默认）/collapse; 对table设置此属性，对td设置无效9.3边框边距border-spacing:value;u 注意事项：v 对table设置边框，仅仅是显示表格的外边框（不是单元格的）。v margin:0px auto;/*块级元素可用matgin居中*/v text-align:right;对行内不管用十、 布局10.1浮动定位说明图10.2什么是浮动定位1）将元素排除

24、在普通流之外。2）将浮动元素放置在包含框的左边或者右边。3）浮动元素依旧位于包含框之内！4）浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框为止！u 注意事项：流模式：从上到下，从左到右10.3浮动定位移动图10.4 float属性1）语法：设置浮动，float:none/left/right;2）取值说明：none：默认值。对象不飘浮 left：文本流向对象的右边 right：文本流向对象的左边u 注意事项：v 多元素浮动，建议高度都一样。v 多元素飘在同一行，要确认总长度不超过父元素的长度。v 某个元素浮动，可能会影响后续的元素，后续的元素自动向上补齐！10.5 clea

25、r属性clear属性用于清除某测浮动元素所带来的影响。1）语法：clear:none/left/right/both;2）取值说明：none：默认值。允许两边都可以有浮动对象left：不允许左边有浮动对象 right：不允许右边有浮动对象both：不允许有浮动对象 例如：div text p text - p text10.6 display属性设置元素的显示方式。1）HTML元素分为行内元素和块级元素行内元素：位于一行中，高和宽自适应。块级元素：独占一行，自定义高和宽。所以有些时候，希望改变元素的显示方式。例如：a的大小自适应，它是行内元素inline。 div就可以用width/heigh

26、t属性，它是块级元素block。2）语法：display:inline/block/none;3）取值说明：block：将元素转为块级元素。inline：将元素转为行级元素。none：不显示。u 注意事项：v 常会结合JS实现一些动态的效果。v li属于块级元素。十一、 列表样式特定于列表元素。11.1列表项前的标识符号图像1）语法：list-style-image:none/url(url); 2）取值说明：none：默认值，不指定图像。url(url)：使用绝对或相对url地址指定图像。u 注意事项：若此属性值为none或指定url地址的图片不能被显示时，list-style-type属性

27、将发生作用。11.2列表项前使用的预设标识符号1）语法：list-style-type:disc/circle/square/decimal/none;2）取值说明：disc：默认值，实心圆circle：空心圆square：实心方块 decimal：阿拉伯数字 none：不使用项目符号 十二、 定位12.1定位概述1）普通定位：页面中的块级元素框从上到下一个接一个地排列，每一个块级元素都会出现在一个新行中，内联元素将在一行中从左到右排列水平布置。2）浮动定位：见第十章。3）相对/绝对定位。12.2 position（定位）属性更改定位模式为相对定位、绝对定位、固定定位1）语法：position

28、:static/absolute/fixed/relative;2）取值说明：static：默认值。无特殊定位，元素遵循HTML定位规则（即默认的流布局模式） absolute：将元素从文档流中拖出，使用left、right、top、bottom等属性相对于最近的有position属性的祖先元素，如果没有，那么它的位置相对最初的包含块，比如按进行绝对定位。而其层叠通过z-index属性定义 relative：元素不可层叠，但将依据 left、right、top、bottom等属性在正常文档流中偏移位置 fixed：元素定位遵从绝对定位，但是要遵守一些规范。低版本的IE中，这个属性无效12.3偏

29、移属性实现元素框位置的便宜。1）语法：top/bottom/right/left:auto/length;2）取值说明：auto：默认值，无特殊定位，根据HTML定位规则在文档流中分配。length：由浮点数字和单位标识符组成的长度值/百分数。必须定义position属性值为absolute或者relative此取值方可生效12.4堆叠属性1）语法：z-index:auto/number;2）取值说明：auto：默认值，为0，遵从其父元素的定位。number：无单位的整数值，可为负数。u 注意事项：v 较大number值的元素会覆盖在较小number值的元素之上。如两个绝对定位元素的此属性具有

30、同样的number值，那么将依据它们在HTML文档中声明的顺序层叠。v 此属性仅仅作用于position属性值为relative或absolute的元素。v 默认布局使用堆叠无效。12.5相对定位：relative1）元素仍保持其未定位前的形状。2）原本所占的空间仍保留。3）元素框会相对它原来的位置偏移某个距离。4）在相对定位元素之后的文本或元素占有他们自己的空间而不会覆盖被定位元素的自然空间。5）相对定位会保持元素在正常的HTML流中，但是它的位置可以根据它的前一个元素进行偏移。6）在相对定位元素在可视区域之外，滚动条不会出现。12.6绝对定位：absolute1）绝对定位会将元素拖离出正常的HTML流，而不考虑它周围内容的布局。2）要激活元素的绝对定位，必须指定left、right、top、bottom属性中的至少一个。3）绝对定位元素之后的文本或元素在被定位元素被拖离正常HTML流之前会占有它的自然空间。4）绝对定位元素在可视区域之外会导致滚动条出现。