CSS整理

来源：互联网发布：人工智能ai具体指什么编辑：程序博客网时间：2024/04/29 06:23

CSS整理

通过HTML文档、CSS文档、对应网页效果对CSS进行整理

[html] view plaincopy
<!--  
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

[css] view plaincopy
/*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) 的方式*/  

对应网页：

0 0