CSS整理
CSS整理
通过HTML文档、CSS文档、对应网页效果对CSS进行整理
<!-- 1、CSS 指层叠样式表 (Cascading Style Sheets),样式定义如何显示 HTML 元素 样式通常存储在样式表中 2、优先权由高到低:内联样式(HTML元素内部),内部样式表(head标签内部), 外部样式表,浏览器缺省设置 3、外部样式表:每个页面使用link标签链接到样式表。link标签在(文档的)头部 4、当单个文档需要特殊的样式时,就应该使用内部样式表。 使用 style 标签在文档头部定义内部样式表 5、由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。 请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。 6、语法:选择器[,选择器2,...]{属性:值; [属性:值; ...]} 7、多重声明(每行以分号结尾)和空格的使用使得样式表更容易被编辑 但不要在属性值与单位之间留有空格 8、如果涉及到与 HTML 文档一起工作的话,class 和 id 名称对大小写是敏感的。 9、在现代布局中,id 选择器常常用于建立派生选择器。 和 id 一样,class 也可被用作派生选择器: 类名的第一个字符不能使用数字 10、只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。 11、css定位分为相对定位,绝对定位和浮动: http://www.w3school.com.cn/css/css_positioning.asp --> <html> <head> <link rel="stylesheet" type="text/css" href="mycss.css" /><!--外部样式表--> <style type="text/css"> /*内部样式表*/ /*text-decoration 属性大多用于去掉链接中的下划线,none为没有,默认:underline。 background-color 属性规定链接的背景色*/ a:link {color:#FF0000;} /* 未被访问的链接 */ a:visited {color:#00FF00; background-color:#FFFF85;} /* 已被访问的链接 */ a:hover {color:#FF00FF; text-decoration:none;} /* 鼠标指针移动到链接上 */ a:active {color:#0000FF;} /* 正在被点击的链接 */ </style> </style> <title>CSS整理</title> </head> <body class="center"> <!--内联样式与外部样式表共同作用--> <h3 id="red">h3为红色</h3> <h4 class="hh">h4的颜色</h4> <h5 class="blue">h5为蓝色</h3> <h5 style="color: sienna; margin-left: 20px">h5部分</h5> <!--内联样式--> <a href="http://blog.csdn.net/wtfmonking" target="_blank">这是一个链接</a> <ul> <li>咖啡</li> <li>茶</li> <li>可口可乐</li> </ul> <p> CSS 指层叠样式表 (Cascading Style Sheets),样式定义如何显示 HTML 元素 样式通常存储在样式表中 </p> <table> <tr> <th>Firstname</th> <th>Lastname</th> </tr> <tr> <td>Bill</td> <td>Gates</td> </tr> <tr> <td>Steven</td> <td>Jobs</td> </tr> </table> <body> </html>
mycss.css
/*ID选择器与类选择器区别:ID只能在文档中使用一次,ID不是使用词列表*/ #red {color:red;} /*id选择器*/ .blue{color:blue;} /*类选择器,这种是指所有类名相同的元素都应用*/ .center { margin-left:auto; /*外边距*/ margin-right:auto; width:70%; background-color:#f4f240; } h4.hh{color:#370851} /*结合元素选择器(词列表)*/ p { background-color: #ffffff; /*使用background-color设置背景色*/ text-indent: 5em; /*使用text-indent设置文本缩进*/ text-align: center;/*使用text-align设置文本左右中两端(justify)对齐方式*/ word-spacing: 0px; /*使用word-spacing设置字间隔*/ letter-spacing: 0px/*使用etter-spacing设置字母间隔*/ /*使用text-transform进行字符转换,默认:none,uppercase转全大写, lowercase转全小写,capitalize首字母大写*/ text-transform: blink; /*使用textdecoration进行文本装饰,默认:none,underline下划线, overline上划线,line-through贯穿线,blink文本闪烁*/ text-decoration: none; /*white-space处理空白符,默认normal忽略空白符, pre:不忽略空白符,nowrap:防止文本换行*/ white-space: normal; font-family: Georgia;/*使用font-family设置字体*/ /*font-stylenormal设置字体风格:文本正常显示,italic:文本斜体显示, oblique:文本倾斜显示*/ font-style: normal;} /*font-weight 属性设置文本的粗细, normal:默认,bold:粗体(700),具体数字*/ font-weight:bold; /*font-size设置字体大小,默认大小是16px=1em, 可以使用像素,em或百分比为单位,最好用em或百分比*/ font-size:16px; /*轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围, 可起到突出元素的作用,outline:在一个声明中设置所有的轮廓属性。*/ outline-color:#00ff00; /*设置轮廓的颜色。*/ outline-style:dotted; /*设置轮廓的样式。*/ outline-width:3px; /*设置轮廓的宽度。*/ } body{ background-image: url(image/1.jpg);/*使用background-image设置背景图像*/ /*使用 background-repeat设置背景图平铺,repeat:x,y都平铺, repeat-x:水平平铺,repeat-y:垂直平铺,no-repeat:不平铺*/ background-repeat: no-repeat; /*background-position用于背景定位,默认值是 0% 0% 或 top left 可以使用一些关键字:top、bottom、left、right 和 center。 通常,这些关键字会成对出现,不过也不总是这样。 还可以使用长度值,如 100px 或 5cm, 最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。*/ background-position: 50px 100px; /*background-attachment使图像相对于可视区是固定的(fixed)*/ background-attachment: fixed; } /*css列表: list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。 list-style-image 将图象设置为列表项标志。 list-style-position 设置列表中列表项标志的位置。 list-style-type 设置列表项标志的类型。 http://www.w3school.com.cn/css/pr_list-style-type.asp*/ ul { list-style: square inside url(‘image/4.gif‘) } /*表格:table属性: border-collapse 设置是否把表格边框合并为单一的边框。 border-spacing 设置分隔单元格边框的距离。 caption-side 设置表格标题的位置。 empty-cells 设置是否显示表格中的空单元格。 table-layout 设置显示单元、行和列的算法。 */ table, td, th { border:1px solid green; /*边框及颜色*/ } th { background-color:green; color:white; padding:15px; /*内边距*/ vertical-align:bottom; /*顶部底部中部对齐方式*/ text-align:right; /*左右中对齐方式*/ } /*CSS 框模型 (Box Model) 规定了元素框处理元素内容(height,width)、 内边距(padding)、边框(border) 和 外边距(margin) 的方式*/
对应网页:
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。