css基础

CSS声明总是以分号(;)结束，声明组以大括号({})括起来:

p {color:red;text-align:center;}

 

 

Id实例

<style>

#para1

{

text-align:center;

color:red;

}

</style>

 

Class实例

<style>

p.center

{

text-align:center;

}

</style>

 

 

不要在属性值与单位之间留有空格。假如你使用 "margin-left: 20 px" 而不是 "margin-left: 20px" ，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。

即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。

 

 

 

 

 

Text（文本）

指定字符之间的空间：h1 {letter-spacing:2px;}

指定行与行之间的空间：p.big {line-height:200%;}

增加单词之间的空白空间：p{ word-spacing:30px;}

设定文本阴影：h1 {text-shadow:2px 2px #FF0000;}

文本转换：

全大写：p.uppercase {text-transform:uppercase;} 
全小写：p.lowercase {text-transform:lowercase;} 
首字母大写：p.capitalize {text-transform:capitalize;}

文本对其方式：

中间对其：h1 {text-align:center;} 
右对齐：p.date {text-align:right;} 
当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐：p.main {text-align:justify;}

 

 

 

 

Font（字体）

设置字体：p{font-family:"Times New Roman", Times, serif;}

属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。多个字体系列是用一个逗号分隔指明。

字体样式：

正常：p.normal {font-style:normal;} 
斜体：p.italic {font-style:italic;} 
另一个斜体，不过浏览器一般不太支持：p.oblique {font-style:oblique;}

 

变细：p.light {font-weight:lighter;}

变粗：p.thick {font-weight:bold;}

变粗：p.thicker {font-weight:900;}

字体大小：

h1 {font-size:40px;} 

为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。

1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em

h1 {font-size:2.5em;} /* 40px/16=2.5em */ 
h2 {font-size:1.875em;} /* 30px/16=1.875em */ 
p {font-size:0.875em;} /* 14px/16=0.875em */

body {font-size:100%;} 

 

Link（连接）

正常状态：a:link {color:#FF0000;}      /* unvisited link */ 
已访问过的状态a:visited {color:#00FF00;}  /* visited link */ 
鼠标放在连接上：a:hover {color:#FF00FF;}  /* mouse over link */ 
鼠标点击的那一刻a:active {color:#0000FF;}  /* selected link */

可以通过吧文本下划线变为空来改变连接状态a:link {text-decoration:none;} 

盒子模型：

· Margin（外边距） - 清除边框区域。Margin没有背景颜色，它是完全透明

· Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响

· Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响

· Content（内容） - 盒子的内容，显示文本和图像

 

div.ex

{

width:220px;

padding:10px;

border:5px solid gray;

margin:0px;

}

</style>

使用时<div class="ex">

这里声明了宽度，不过实际宽度并不是这么大：

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

边框设置（border）

p

{

border-color: transparent;注意：这个是透明边框的属性

border-color：red； 边边是红线

border-top-style:dotted; 顶上是虚线

border-right-style:solid; 右边是实现

border-bottom-style:dotted;

border-left-style:solid;

}

填充（空格或者颜色）（padding）

background-color:yellow;

padding:25px 50px;（左边，右边）