CSS前5课总结

CSS《精通CSS.DIV网页样式与布局》视频前5课总结：

 

点击查看大图

地对地导弹

第一课：

使用CSS控制页面：

1，行内样式

正文内容

 

2，内嵌式

 

     

紫色、粗体、下划线、25px的效果1

     

紫色、粗体、下划线、25px的效果2

    

紫色、粗体、下划线、25px的效果2

 

 

3，链接式

   

CSS标题1

   

紫色、粗体、下划线、25px的效果1

   

CSS标题2

   

紫色、粗体、下划线、25px的效果2

 

1.css文件:

H2{

        color:#0000FF;

}

p{

       color:#FF00FF;

text-decoration:underline;

font-weigth:bold;

font-size:20px;

}

 

(注：

rel：relationship的英文缩写.

REL属性用于定义连接的文件和HTML文档之间的关系。StyleSheet，的意思就是样式调用，REL=StyleSheet指定一个固定或首选的样式而REL="Alternate StyleSheet"定义一个交互样式。

)

 

4，导入样式

 

 

第二课：CSS基本语法

 

 

CSS选择器：

分类：

1，标记选择器

 

2，类别选择器
 

   

class选择器1

   

class选择器2

   

h3同样适用

3，ID选择器

  

ID选择器1

  

ID选择器2

 

(注：ID可以用在CSS中，也可以用在JavaScript中，当在JS中用ID对html进行寻找时，如果同一个ID用在两个标记中，将导致JS的语法混乱)

 

声明：

1，集体声明

 

  

集体声明h1

  

集体声明h2

  

集体声明h3

  

集体声明h4

  

集体声明h5

  

集体声明p1

  

集体声明p2

  

集体声明p3

 

2，选择器的嵌套

    

嵌套使用CSS标记的方法

      嵌套之外的标记不生效

显示效果：

 

CSS的继承

如果一个标记被包含在另一个标记中，则他会继承前一个标记的样式；

 

 

第三课：CSS文字效果

文字样式

字体：font-family

   

立春

   

韩学敏，你好！

 

(注：解释p{font=family:Arial,Helvetica,sans-serif;}——浏览器对字体进行检测，如果有第一个字体Arial，则采用Arial，如果没有则检测是否有第二个字体Helvetica….如果这些字体都没有，则采用浏览器默认字体)

 

文字大小：font-size

 

      

文字大小，0.5in

文字大小，0.5cm

文字大小，4mm

文字大小，12pt

文字大小，2pc

 

文字颜色：color

颜色的表示方法有很多中：

（1）RGB：红蓝绿

（2）16进制表示

（3）英文单词

       

冬至的由来

       

冬至过节源于汉代，盛于唐宋，相沿至今。《清嘉录》甚至有“冬至大如年”之说

（注：标记：在CSS定义中属于一个行内元素，在行内定义一个区域，也就是一行可以被划分好几个区域，从而实现某种特定效果。本身没有任何属性。

在CSS定义中属于一个块级元素。

可以包含段落、标题、表格甚至其他部分。这使DIV便于建立不同集成德 类，如章节、 或备注。在页面效果上，使用

会自动换行，使用就会保持同行）

 

文字粗细：font-weigth

(注：1，可以采用数字，也可以采用英文单词；

          2，bold:粗体；lighter：正常；

)

 

文字斜体：font-style

(斜体：italic；正常：normal)

 

下划线、顶划线、删除线

(注：下划线：text-decoration:underline;

顶划线：text-decoration:overline;

删除线：text-decoration:line-through;

闪烁：text-decoration:blink;)

(注：IE浏览器不支持“闪烁”的效果，只有firefox支持)

 

英文字母大小写

(注：单词首字母大写：text-transform:capitalize;

           全部大写：text-transform:uppercase;

           全部小写：text-transform:lowercase; )

例子：模拟Google公司logo

   

goo

gle

  

 

段落文字

段落间水平对齐方式:

text-align:left(左对齐)/right(右对齐)/center(居中对齐)/justify(两端对齐)

 

段落间垂直对齐方式：

vertical-align:top(顶端对齐)/bottom(底端对齐)/middle(中间对齐)

 

行间距、字间距：

line-height:1.5em;/*行间距，相对数值*/

line-height:8pt;        /* 行间距，绝对数值,行间距小于字体大小*/

 letter-spacing:-2px;       /*字间距*/

首字放大：float：left;  /*首字下沉*/

 

第四课  CSS图片效果

 

图片样式

1，图片边框

(border-**)

    

    

 

(注：还可以对边框的上下左右分别设置：

img.test2{

      border-left:dashed 2px blue;

      border-right:dotted 5px red;

}

)

 

2,图片缩放

   

 

(注：1，width:50%——相对宽度，宽度始终为浏览器的50%；

width:80px——绝对宽度，不会随着浏览器大小的变化而变化；

2，

如果宽度为绝对值，高度为相对值，则浏览器的宽高度发生变化时，宽度不变，高度随着浏览器的变化而变化，实现缩放

 

)

 

图片对齐

1，横向对齐：text-align:left/center/right;

 

2，纵向对齐:vertical-align:baseline/bottom/middle/sub/super/text-bottom/text-top/top;

 

横向对齐left、center、right的效果图：

 

 

图文混排

1，文字环绕

显示效果：

 

2，设置图片与文字的间距

 

 

第五课：CSS页面背景

 

第六课：CSS设置表格和表单样式

 

 

给出如下一个表格，分别设置表格的颜色、表格的边框

年度收入 2004 - 2007

	2004	2005	2006	2007
拨款	11,980	12,650	9,700	10,600
捐款	4,780	4,989	6,700	6,590
投资	8,000	8,100	8,760	8,490
募捐	3,200	3,120	3,700	4,210
销售	28,400	27,100	27,950	29,050
杂费	2,100	1,900	1,300	1,760
总计	58,460	57,859	58,110	60,700

 

显示效果：

 

1，表格颜色

显示效果：

 

2，表格边框：border

显示效果：