CSS+DIV网页样式与布局：第二章：CSS的基本语法

第二章：CSS的基本语法

一 CSS选择器（所有的HTML语言中的标记都是通过不同的css选择器进行控制的）。用户只需要

通过选择器对不同的HTML标签进行控制，并赋予各种样式声明，即可实现各种效果。

1、标记选择器（列如  <p> <ul>    p{color:green;}）

2、类别选择器（列如 <p class="p1">    .p1{ color:green;font-size:20px;}）

3、ID选择器（例如  <p  id="p1">         #p1{color:green;}）

注意：页面中id最好不要重复（会导致javascript在查找id时出错）。

二选择器声明（每个选择器的属性都可以一次声明多个，选择器本身也可以同时声明多个，并且任何形式的选择器（包括标记选择器、class选择器、ID选择器等）都是合法的。）

1、集体声明（列如：   h1,h2,h3{color:green;font-size:12px;}）,使用集体声明条件：这些选择器的风格完全相同，或者有部分相同。

2、选择器的嵌套（通过嵌套的方式，对特殊位置的HTML标记进行声明，列如：<p><b></></p>    p b{color:green;font-size:12px;}）

嵌套选择器的使用非常广泛，不只是嵌套的标记本身，类别选择器和ID选择器都可以进行嵌套。例如：   .special  i{ color:green;}

#one   li{padding-left:5px;}

td.top.top1 strong {font-size:16px;}

3、CSS的继承（简单的说就是将各个HTML标记看作一个个容器，其中被包含的小容器会继承所包含它的大容器的风格样式。）

CSS继承是指字标记会继承父标记的所有样式风格，并可以在父标记样式风格的基础上再加以修改，产生新的样式，而子标记的样式风格完全不会影响父标记。

第三章：CSS控制文字效果

一、CSS文字样式（文字的字体、大小、颜色）

字体：font-family属性，例如：p{ font-family:黑体,Arial,宋体,sans-serif;}

注意一些字体的名称中间会有空格，列如 Times New Roman,这时需要用双引号将其引起了，如"Times New Roman"

文字大小：font-size属性，列如p{font-size:12px;}

最常用的单位：px 其显示大小和显示器的大小及其分辨率有关。采用“%” 或者“em”都是相对于父标记而言的比例，如果没有设定父标记的字体大小，则相对于浏览器的默认值。

 文字的颜色：color属性  ，列如  p{color:green;}

注意：在设置某一个段落文字颜色时，通常可以利用<span>标记，将需要的部分进行单独标注，然后再设置<span> 标记的颜色属性。

文字的粗细：font-weight属性，列如   span.five{font-weight:normal;}   span.six{font-weight:500;}

斜体：font-style属性   列如：  h1{font-style:italic;}

字的下划线、顶划线、删除线：text-decoration 属性   例如：p.one{text-decoration:underline;}

英文字母大小写：text-transform属性   列如：p.one{text-transform:uppercase;}

二、CSS段落文字(文字的属性对段落同样适用)

      1、段落的水平对齐方式 text-align属性  (它的值可以设置为左、中、右和两端对齐等。)

列如：p.left{text-algin:left;}     p.right{text-algin:right;}

 2、段落的垂直对齐方式   vertical-align属性  列如：td.top{vertical-align:top;}    td.bottom{vertical-algin:bottom;}  注意：该属性对于块级元素并不起作用，列如<p> <div>等，但是对于表格而言，这个属性则显得十分重要。

3、行间距和字间距   行间距line-height属性  列如：p.one{line-height:8pt;}  p.two{line-height:1.5em;}

                                     字间距  letter-spacing属性  列如：p.one{letter-spacing:-2pt;}

p.two{letter-spacing:5em;}

4、首子放大 主要是通过float语句对首子下沉进行控制，并且用<span>标记，对首子设置单独的样式，达到突出显示的目的。列如：

p  span{

font-size:60px;

float:left;

padding-right:5px;

font-weight:bold;

font-family:黑体;

color:yellow;

}

第四章：用CSS设置图片效果（包括图片的边框、对齐方式和图文混排等）

1、图片的边框   boder属性     子属性 border-style定义边框的样式如 虚线、实线或者点划线等

border-color定义边框的颜色   border-width定义边框的粗细  

列如：   img.test1{

border-style:dotted;

border-color:#FF9900;

border-width:5px;

}

在css中还可以分别设置4个边框的不同样式，即分别设定  border-left、border-right 、 border-top   、border-bottom

列如：img{

border-left-style:dotted;

border-left-color:#FF9900;

border-left-width:5px;

}

熟练之后，border属性还可以将各个值写在同一个语句中，用空格分离。列如

      img.test1{

border:5px   double   #FF00FF;//将各个值合并

}

     img.test2{

border-right:5px  double  #FF00FF;

border-left:8px   solid   #0033FF;

}

除了border属性可以将各个属性值写在一起，css的很多其他属性也可以进行类似的操作，列如font以及margin   padding

列如：

p{

font:italic  bold  30px Arial,Helvetica,sans-serif;

padding:0px 5px 0px 3px;

}

2、图片的缩放   width   height 两个属性来实现   列如  img.test1{width:70%; height:110px;}

3、图片的对齐 横向对齐方式  text-align   图片的对齐不能直接设置图片的text-align属性，而是通过设置父元素的该属性来实现的。

4、图文混排  float属性来实现文字环绕。

5、图片与文字间距   只需要给图片设置padding属性即可。列如

    img{

float:left;

margin-right:50px;

margin-bottom:25px;

}

   第五章：用CSS设置网页中的背景

1、背景颜色   页面背景色   background-color属性

2、页面的背景图片  background-image属性   列如  body{background-image:url(03.jpg);}

3、背景图片的重复  background-repeat属性  重复方式包括（水平重复、竖直重复及不重复）

列如

body{

padding:0px;

margin:0px;

background-image:url(bg1.jpg);

background-repeat:repeat-y;

background-color:#0066FF;

}

4、背景图片的位置   background-position属性   

   列如   body{

padding:0px;

margin:0px;

background-image:url(bg4.jpg);

background-repaeat:no-repeat;

background-position:bottom  right;

background-color:#eeeee8;

}

5、固定背景图片   background-attachment属性  值为fixed来轻松实现效果（对于大幅的背景图片，当浏览器出现滚动条时，通常不希望图片随着文字的移动而移动，而是固定在一个位置上。）

 6、添加多个背景图片（在css中一个标记只能用一次background属性，因此只有给多个标记添加不同背景来实现类似的效果，如在body标记设置了背景图片的基础上再添加table和div等标记。）

7、背景样式综合设置     background: blue  url(bg7.jpg) no-repaeat  fixed  5px  10px  ;

第六章：用CSS设置表格与表单的样式

1、CSS与表单  表单中的元素（输入框、文本框、单选项、复选框、下拉菜单和按钮等。<form>、<input>、<textarea>、<select>、<option>等）