Css复习

Css复习

一、概念

Css是cascade style sheets的缩写，简称层叠样式表。实际开发中，html控制网页的内容，css文件控制内容该怎么显示，大大提高了开发的速度。

二、基本语法

1、css规则由两个主要部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

2、每条声明由一个属性和一个值组成。

selector {property: value}

 

三、属性值的单位

1、颜色值

英文单词  red、green、blue...

16进制    #ff0000;

rgb颜色值：rgb(255,0,0); 

2、大小

 em：1em=16px

 cm

px(像素)---相对于屏幕分辨率的百分比

四、设置样式

1、内联样式表

内联样式表，在标签内部使用style属性关联样式，缺点是如果给很多元素设置样式太繁琐

2、嵌入样式表

嵌入样式表，像嵌入javascript代码一样，将css代码嵌入到style标签中，缺点是，如果其他文档也需要样式表，还是需要反复写style标签

 

3、外部样式表

将css样式封装到一个文件中，其他文件需要这种样式时再加载

<link rel="stylesheet" type="text/css" href="css/layout.css">

4、输入样式表

将一个样式表输入到另一个样式表

（1）在CSS文件中通过 @import 加载 

 

(2)在html文件<style>标签中嵌套：

 

5、优先级

(1)，就近原则,

(2)，加载顺序，后加载的会修改之前的样式

<link rel="stylesheet" href="css/border.css"/>

<style>

p{

border:2px solid green;

}

</style>

五、选择器

1、类选择器，就是通过class属性找到某个标签的方法

任何html的标签至少会有 class属性、id、name、style

Class属性的xxx标签

 

 

2、id选择器，通过id属性来找到某个标签的方法

 

 

3、关联选择器，又称上下文关系选择器。通过上下文关系来确定标签的位置

 

意思：找到ul标签里面 class 为 vegetable的li标签

 

4，组合选择器

就是组合 多个 html 标签，来设置样式

需求：

给 class='vegetable'，id="div1"， class="p1"设置样式，让其字体为 30px，颜色为蓝色

 

注意：

同一个标签，只能有一个 id属性，因为id是唯一的

Class属性可以有多个，为了区别其他的，建议这样写：标签名.class属性名  p.p1

 

5，伪元素选择器

伪元素，就是 同一个html标签，在不同的状态下，有不同的效果，这样的元素称为伪元素

目前，支持伪元素的，只有 a标签 和 p标签

伪元素的状态：

超链接：

    A:hover   鼠标移上去的时候

A:link    默认状态

A:visited   访问过之后

A:active   

P:first-letter  一个段落中首个字母的状态

P:first-line   一个段落中首航的状态

由于伪元素选择器 兼容性不好，不建议大家使用，可以以后通过javascrip

t来实现

6、选择器的继承：

关联 >  id选择器 > class选择器 > html选择器

六、CSS中常见的属性和值

1、字体属性

字体族谱    font-family

字体风格    font-style  normal 普通，italic 斜体

字体大小    font-size  

字体加粗     font-weight   bold

2、控制文本的属性

字母间隔  letter-spacing  允许负值

文字间隔  word-spacing 

文字修饰  text-decoration    

underline下划线  overline 上划线  line-through 删除线  blink闪烁 

横向排列  text-align

文本缩进  text-indent

行高      line-height

字体变形  text-transform   uppercase大写

3、背景属性

背景颜色：background-color

背景图片：background-image:url()

背景重复：background-repeat  repeat   repeat-x  repeat-y   no-repeat

背景附件：background-attachment  

背景位置：background-position  横向：left center right  纵向：top  center bottom