CSS前5课总结

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

点击查看大图

地对地导弹

第一课：

使用CSS控制页面：

1，行内样式

2，内嵌式

color:#0000FF; /*紫色*/

text-decoration:underline; /*有下划线*/

font-weight:bold; /*粗体*/

font-size:25px; /*字体大小*/

}

</style>

<body>

<p>紫色、粗体、下划线、25px的效果1</p>

<p>紫色、粗体、下划线、25px的效果2</p>

</body>

3，链接式
<link href="1.css" type="text/css" rel="stylesheet">

<body>

<h2>CSS标题1</h2>

<p>紫色、粗体、下划线、25px的效果1</p>

<h2>CSS标题2</h2>

<p>紫色、粗体、下划线、25px的效果2</p>

1.css文件:

H2{

color:#0000FF;

}

color:#FF00FF;

text-decoration:underline;

font-weigth:bold;

font-size:20px;

}

</body>

(注：

rel：relationship的英文缩写.

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

)

4，导入样式

@import ur1(1.css);

</style>

第二课：CSS基本语法

CSS选择器：

分类：

1，标记选择器

<style>

h1{

color:red;

font-size:25px;

}

</style>

2，类别选择器

.one{

color:red; /*红色*/

font-size:18px; /*文字大小*/

}

.two{

color:green;

font-size:20px;
}

</style>

<body>

<p class="one">class选择器1</p>

<p class="two">class选择器2</p>

</body>

3，ID选择器

<style>

#one{

font-weigth:bold; /*粗体*/

}

#two{

font-size:30px; /*字体30px*/

}

</style>

<body>

<p id="one">ID选择器1</p>

<p id="two">ID选择器2</p>

</body>

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

声明：

1，集体声明

h1,h2,h3,h4,h5,p{

color:purple; /*文字颜色*/

font-size:15px; /*字体大小*/

}

h2.special, .special,#one{

text-decoration:underline; /*下划线*/

}

</style>

<body>

<h1>集体声明h1</h1>

<h2 class="special">集体声明h2</h2>

<h3>集体声明h3</h3>

<h4>集体声明h4</h4>

<h5>集体声明h5</h5>

<p>集体声明p1</p1>

<p class="special">集体声明p2

<p id="one">集体声明p3</p>

</body>

2，选择器的嵌套

p b{ /*p标记中的b标记的样式*/

color:maroon;

text-decoration:underline;

}

</style>

<body>

<p>嵌套使<b>用CSS</b>标记的方法</p>

嵌套之外的<b>标记</b>不生效

<body>

显示效果：

CSS的继承

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

第三课：CSS文字效果

文字样式

字体：font-family

<style>

h2{

font-family:黑体,幼圆;

}

font-family:Arial,Helvetion,sans-serif;

}

</style>

<body>

</body>

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

文字大小：font-size

<style>

p.inch{font-size:0.5in;}

p.cm{font-size:0.5cm;}

p.mm{font-size:4mm;}

p.pt{font-size:12pt;}

p.pc{font-size:2pc;}

</style>

<body>

</body>

文字颜色：color

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

（1）RGB：红蓝绿

（2）16进制表示

（3）英文单词

<style>

h2{ color:rgb(0%,0%80%;)}

color:#333333;

font-size:13px;

}

p span{ color:blue;}

</style>

<body>

<h2>冬至的由来</h2>

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

</body>

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

<div>在CSS定义中属于一个块级元素。<div>可以包含段落、标题、表格甚至其他部分。这使DIV便于建立不同集成德类，如章节、或备注。在页面效果上，使用<div>会自动换行，使用<span>就会保持同行）

文字粗细：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

<style>

font-size:80px;

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

font-family：Arial，Helvetica，sans-serif;

}

.g1,g2{ color:#184dc6;}

.o1,e{ color:#c61800;}

.o2{color:#efba00;}

.l{color:42c34a;}

</style>

<body>

</body>

段落文字

段落间水平对齐方式:

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-**)

<style>

img.test1{

border-style:dotted; /*点画线*/

border-color:#FF9900; /*边框颜色*/

border-weigth:5px; /*边框粗细*/

}

img.test2{

border-style:dashed; /*虚线*/

border-color:blue;

border-2px;

/*或者使用一句：border:dashed 2px blue;*/

}

</style>

<body>

</body>

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

img.test2{

border-left:dashed 2px blue;

border-right:dotted 5px red;

}

)

2,图片缩放

<style>

img.test1{

50%; /*相对宽度*/

}

</style>

<body>

</body>

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

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设置表格和表单样式

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

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

显示效果：

1，表格颜色

显示效果：

2，表格边框：border

显示效果：