理解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值,即透明度