css课件

2020-09-19  本文已影响0人  lucky_yao

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;

上一篇 下一篇

猜你喜欢

热点阅读