css课件

1：什么是css?

css是控制html的外观（样式），他的全称叫=层叠样式表=cascading Style Sheet的缩写

2：css的语法：

选择器{

属性：属性值;

属性：属性值;

...

}

3:css的引入方式分为4种：

1：头部引入（在head标签内写入style标签）

2：外链接引入（把css文件引入到html页面）

<link rel="stylesheet" type="text/css" href="路径"/>

3：内联引入（在标签内写style属性）

4：@import引入方式（废弃不用了）

4：引入方式的优先级？

优先级最高样式写法是：标签内

其他的引入方式谁在下谁的优先级高

5:引入方式的优缺点？

外链接引入的优点：

一个CSS文件可控制多个页面

易改版、便于维护

减少代码量、代码简洁规范易于分工协作

有效利用缓存机制

外链接引入的缺点：

相对于单页有垃圾代码

外部引入中的href属性会给服务器造成请求的压力

头部引入的优点：

速度快，没有服务器请求压力

相对于外部引入单页代码量少

头部引入的缺点：

不易改版与维护

代码较乱不易前后台沟通

内联引入优点

优先级最高

内联引入缺点

冗余代码多，代码量大

不利于维护

6：常用的属性和属性值

width 宽

height 高

px 像素

background 背景

color 字体的颜色

7：文字

font-style：italic 斜体

font-family 字体

font-weight ：bold 加粗

font-size px em % 字体大小\

text-transform:

capitalize 首字母大小写

uppercase 全部大写

lowercase 全部小写

text-decoration: 文字装饰效果

underline;加下线

line-through;删除线

overline;加顶线

text-indent px 首行缩进：

dotted点状 solid实线 double双线 dashed虚线

text-align： 文本对齐

left左对齐，默认的对齐方式

right右对齐

center居中对齐

justify两端对齐（针对英文）

Text-align-last:justify 两端对齐（中文）

间距

word-spacing: 单词5间距

letter-spacing: 文字间距

line-height 行间距

vertical-align 垂直居中 bottom 到底部 top到顶部 middle 垂直

选择器的权重

标签内的写法 1000

id 100

class 10

标签 1

群组 合起来算

浮动

float：right

float：left

1：盒子模型的组成部分

边框 内边距 外边距 内容

border padding margin content

2：边框

border-style 实线 solid/虚线 dashed

border-color 颜色

border-width 宽度

border:10px solid yellow ; 这个写法叫复合写法

3：外边距

外边距是标签与标签产生的距离

margin-top:上边距

margin-bottom:下边距

margin-right:右边距

margin-left:左边距

margin:上 右 下 左；

margin:10px 20px 30px 40px ;

margin:上 左右 下 ；

margin:10px 20px 30px ;

margin:上下 左右 ；

margin:10px 20px ;

margin:上下左右 ；

margin:10px;

4:内边距/内填充

内边距是标签与内容产生的距离

padding-top:上边距

padding-bottom:下边距

padding-right:右边距

padding-left:左边距

padding:上 右 下 左；

padding:10px 20px 30px 40px ;

padding:上 左右 下 ；

padding:10px 20px 30px ;

padding:上下 左右 ；

padding:10px 20px ;

padding:上下左右 ；

padding:10px;