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

时间:2023-03-08 17:22:53
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>等)