css概念，样式，选择器

CSS 概念：cascade style sheets的缩写，简称层叠样式表

由于样式和html内容写在一起，导致代码特别紊乱，为提高开发效率。

于是提出思想：

Html内容 和 显示 相分离；

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

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

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

CSS基本语法：

（1）CSS是由  选择器 和 声明来组成的

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

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

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

Css属性的单位：

颜色值

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

       16进制    #ff0000;

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

大小

      em：1em=16px

      cm

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

      百分比

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

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

例：电脑的分辨率：1366x768像素

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

CSS的四种样式表：

（1）.内联样式表:在标签内部使用style属性关联样式

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

<p style=”color:red”> CSS的四种样式表</p>

(2).嵌入样式表:像嵌入javascript代码一样，将css代码嵌入到style标签中

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

<style>  css代码   </style>

（3）.外部样式表  (最常用的)

多个文件需要同一种样式的时候，我们可以将共同的样式封装起来，保存成一个css文件，再通过link标签加载。

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

（4）输入样式表

1.在CSS文件中通过 @import url（css文件名）加载 

2.在html文件和嵌入样式表一样

<style>@import  url(css文件名);</style> 

CSS样式的优先级：

1.就近原则：

先加载的的样式会被后加载的样式修改

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

<style>

p{

border:2px solid green;

}

</style>

3.内联样式优先级最高。

CSS选择器

分类：

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

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

Class属性的xxx标签

.p{

border:1px solid red;

}

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

#p{

border:1px solid red;

}

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

ul li.vege{

Backgronug-color:blue;

}

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

4.组合选择器:就是组合 多个 html 标签，来设置样式

ul li.vege,p.p1,#div1{

Color:red;

}

注意：

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

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

5.伪元素选择器

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

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

伪元素的状态：超链接

    A:hover   鼠标移上去的时候

A:link    默认状态

A:visited   访问过之后

A:active   

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