CSS 复习

CSS复习：

由于样式和html内容写在一起，导致代码特别紊乱，于是提出思想：

Html内容 和 显示 相分离

Html 只负责写内容，搭建框架

CSS只负责装饰内容，装饰框架

举例子：html 比喻房子    css比喻修饰、装饰房子（挂一幅画、粉刷颜色...）

Css----  cascade style sheet  层叠样式表

1，CSS的基本语法

（1）CSS是由  选择器 和 声明（声明=属性+值）来组成的

（2）每一条声明里面 有属性、值

选择器{属性：值；属性：值....}

选择器：找到某个标签的一种方法/机器

h1(选择器)      {color(属性):red（值）;font-size(属性):14px;（值）   }

Css属性的单位：

 颜色值：

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

       16进制    #ff0000;

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

 大小值：

浏览器默认的字体大小，16px 

Px----像素（pixel）-----

电脑的分辨率：1366x768像素

整个屏幕 是由 1366像素点组成   纵向是由 768个像素点组成，像素点 一个一个的颜色值

16px 是什么意思？

所以像素 是一个相对的长度，和浏览器的分辨率相关

他是分辨的百分比  16/浏览器所占的大小

2，CSS的四种样式表

（1）内联样式表 

缺点是如果给很多元素设置样式太繁琐

<p style="color:red;background-color:yellow">

</p>

（2）嵌套样式表

缺点：如果其他文件也需要这种样式的话，需要反复再去写同样的样式

嵌入样式表，像嵌入javascript代码一样，将css代码嵌入到style标签中

缺点是，如果其他文档也需要样式表，还是需要反复写style标签

（3）外部样式表

最常用的

多个文件需要同一种样式的时候，我们可以将共同的样式 封装起来，保存成一个css文件

通过link标签 加载的

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

注意：不要写在<style> </style>标签中

（4）输入样式表

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

@import url(bg.css);

@import url(text-align.css);

@import url(font.css);

@import url(border.css);

（2）在html文件<style>标签中嵌套：

<style>

@import url(XXX.css);

</style>

CSS样式的优先级：

1，就近原则,

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

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

<style>

p{

border:2px solid green;

}

</style>

2，CSS选择器

分类：

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   选择超链接的状态

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

3，选择器的继承

和CSS样式优先级，有类似之处

关联的选择器 > id选择器 > 类选择器 > 元素选择器

越精确的优先级越高

3、CSS中常见的属性和值：

1，字体属性：

字体族谱    font-family

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

字体大小    font-size  

字体加粗     font-weight   bold

Color：字体颜色

2，控制文本的属性：

字母间隔  letter-spacing  允许负值

文字间隔  word-spacing 

文字修饰  text-decoration    

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

横向排列  text-align

文本缩进  text-indent

行高      line-height

字体变形  text-transform   uppercase大写

控制文本的属性

Letter-spacing：字母间隔

Word-spacing：文字间隔

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