css的个人总结

理解CSS的关键在于能够设想每个HTML元素的周围都有一个看不见的盒子。

引用外部css文件：link标签，这是一个空元素，也就是不需要结束标签，它位于head元素中。

href:该特性表明css的路径文件 

type:表明引用文件的类型：text/css 

rel:stylesheet.表明css文件和HTML文件的关系，这里是stylesheet.

如:<link type="text/css" href="css/style1.css" rel="stylesheet"/>

为什么使用外部样式表：

原因一：所有网页可以共同使用一个样式表，如果想对网站的外观进行调整，只需编辑一个CSS文件

原因二：将内容和控制内容如何显示分离开是一个很好的思想

如果在html里面则使用style标签 

如：

 <style>

p{color:red;}

 </style>
也有的旧代码会把style放入标签里面，这样的话样式会应用在这个元素中，在现在的网站中应当尽量避免

如：<p style="color:red;">

选择器类型： 

一.通用选择器：*{} 

二.类型选择器：h1,h2,h3{} 

三.类选择器：.note{},匹配元素中class类型的值

四.ID选择器：#introduction{}

五.子元素选择器：li>a{},匹配指定元素的直接子元素

六.后代选择器：p a{}应用于<p>元素中的<a>元素，不论他们之间有没有嵌套其他元素 

七.相邻兄弟选择器：h1+p{}应用于h1元素相邻的第一个p元素，对其他p元素不适用

八.普通兄弟选择器：h1~p{}应用于h1元素的兄弟元素p，但不论它是不是和h1相邻

优先级：

两个选择器完全相同，后出现的选择器优先级高

如果一个选择器比上一个更加具体，则具体的优先级更高

特殊指定：!important来强调这条规则比其他的优先级高

如：p b{color:blue !important;}

继承：

大部分属性会默认继承他的父元素

以下的都是可以被继承的，除了这些之外，其他的都不可被继承：

文本相关属性：font-family, font-size, font-style,font-variant, font-weight, font, letter-spacing,
line-height，text-align, text-indent, text-transform,word-spacing
列表相关属性：
list-style-image, list-style-position,list-style-type, list-style
还有一个属性比较重要，color属性。

特殊设置：

设置为inherit来强制大多数元素从它的父元素中继承

body:{

font-family:Arial,Verdana,sans-serif;

color:red;

padding:10px;

}

.page{

border:1px solid blue;

background-color:red;

padding:inherit;

}

前景色(color):

一.RGB值：rgb(100,100,90);表示红色、绿色、蓝色需要多少

二.十六进制编码：六位十六进制编码（每两位构成一个值，表示红、绿、蓝的数量）

三.颜色名称

CSS3中还引入了另外一种叫HSLA的方式来指定颜色

背景色(background-color):

每个HTML元素都是一个盒子，而这个属性正是这个盒子的背景色

未指定时为透明

透明度：

opacity,rgbs

指定元素和子元素的透明度，该属性值是一个介于0.0～1.0之间的数字，0.5表示50%的透明度

rgbd也可以指定透明度，它只会影响当前元素，不会影响子元素

注意：有些浏览器不能识别RGBA，应该指定两个，RGBA放在后面，这样当支持时就会使用该属性，不支持时就使用前一个

如：

p.two{

background-color:rgb(0,0,0);

backgroud-color:rgba(0,0,0,0.5);

}

CSS3中使用HSL或者HSLA指定颜色

body{

background-color:red;

background-color:hsl(0,0%,78%);

}

p{

background-color:blue;

background-color:hsla(0,0%,78%);

}

属性值：

一.色调：介于0～360度之间

二.饱和度：通过百分数表示，它表示灰色的含量

三.明度：百分数，0%表示黑色，100%表示白色，50%表示标准色

HSLA增加了一个alpha值，即透明度