CSS课堂笔记

课堂笔记

第一天 CSS

课程目标:

1. css作用与基本语法

2. 掌握选择器

3. 了解css常用属性

主要内容：

1.

2.

3.

4.

5.

6.

7. css作用介绍 css的基本语法* css在html中的四种用法* 样式的优先级规则 css常用选择器（类、id、标签）* css常用属性 css盒子模型

8. html+css作业

一、css介绍

二、css基本语法

选择器{

样式属性1:属性值;

样式属性n:属性值;

}

三、css四种用法

1. 行内样式

如：<p style="color:red;font-size:12px;">行内样式</p>

2. 内嵌样式

如：

<style type="text/css">

p{

color:red;

font-size:28px;

}

</style>

3. 外部样式

导入式

如：

<style type="text/css">

@import url(css/mycss.css);

p{

color:red;

font-size:28px;

}

</style>

链接式

如：<link href="css/mycss.css" rel="sytlesheet" type="text/css"/> rel属性：定义当前文档和链接文件的关系

四、样式的优先级规则

样式的优先级遵循——就近原则(出现重复的样式定义时，最近定义的样式优先级别最高)

五、css常用选择器

1. 标签选择器

语法：标签名称{ }

如：p{color:red;}

2. id选择器

语法：#id名称{ }

如：#p{color:red;}

3. 类选择器

语法：.类名称{ }

如：.p{color:red;}

4. 包含选择器

语法：选择器1 选择器2 { }

说明：选择所有被“选择器1”包含的“选择器2”

如：div p{color:red;}

5. 选择器分组

语法：选择器1 , 选择器2 { }

说明：选择“选择器1”和“选择器2”

如：div,p{color:red;}

6. 伪类选择器

语法：标签名称:伪类名 { }

如：

a:link { color: red } /* unvisited links */

a:visited { color: blue } /* visited links */

a:hover { color: yellow } /* user hovers */

a:active { color: lime } /* active links */

六、css常用属性

1. 字体设置

1.1 font-size常用单位介绍

单位

% 百分比

1em 等于当前的字体尺寸。

2em 等于当前字体尺寸的两倍。

em 例如，如果某元素以 12pt 显示，那么 2em 是24pt。

在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的

字体。

像素 (计算机屏幕上的一个点)。几乎所有浏览器的默认字体大小都是

px 16px；

另外：1em=16px, 12px=0.75em 描述

如果将em换算后：body{font-size:62.5%}，则1em=10px

1.2 color的3种表示方法介绍(英文单词、#RRGGBB、rgb(r,g,b)) 单位 描述

英文颜色名 颜色名称 比如：red

rgb(x,x,x) RGB(0-255) 值 (比如 rgb(255,0,0))

rgb(x%, x%, x%) RGB(0.0%-100.0%)百分比值 (比如 rgb(100%,0%,0%)) 十六进制数（0-f）(比如 #ff0000)。如果每个参数各自在两位 #rrggbb 上的数字都相同，那么本单位也可缩写为 #rgb的方式。例如： #ff8800 可以缩写为 #f80。

1.3样式简写方法介绍

如：

span{

font-style:normal; /*设置字体样式*/

font-weight:bold; /*设置字体粗细*/

font-size:1.5em; /*设置字体大小*/

font-family:宋体,黑体; /*设置字体名称序列*/

}

简写法：

span{

font:normal bold 1.5em 黑体,宋体;

}

2. 文本设置

如：

p{

text-decoration:underline;/*设置文本装饰*/

}

3. 背景设置

div{

width:800px; /*设置标签宽度*/

height:800px; /*设置标签高度*/

background-color:white; /*设置背景颜色*/

background-image:url('***.jpg');/*设置背景图*/

background-repeat:no-repeat; /*设置背景平铺*/

}

简写法：

div{

width:800px; /*设置标签宽度*/

height:800px; /*设置标签高度*/

background:white url('***.jpg') no-repeat;

}

4. 列表设置

ol li{

list-style-type:none; /*设置列表项的预设标记*/

}

5. display属性

display设置元素如何显示

如：

ul li{

display:inline;

}