css又被叫做层叠样式表。
学习css的话可以先学习样式表,然后在学习样式。
css样式表:
1,行内样式表
2,内部样式表
3,链接样式表
4,导入样式表
一.行内样式表:
我们将行内样式表理解为紧跟标签的样式表,类似:<p style="样式值">....</p>
二.内部样式表
内部样式表一般也是写在html文件中的,一般是写在html文件的head标签中。类似:
<head>
<style>
样式
</style>
</head>
三.链接样式表
链接样式表一般写在外部css文件中,这样写最大的好处是实现了表现和样式的分离。一般在html文件中使用的话t也是在head标签种,类似:
<head>
<link href="路径" type="text/css" rel="stylesheet"/>
</head>
需要注意:link标签中type和rel是固定的,不可以更改和删除。其次就是对于路径的理解。
路径:
1.相对路径 :这个文件所在的路径所引起的和其他文件(或文件夹)的关系。
1.对于同在一个文件夹中的文件,使用的时候直接使用它的名字就可以。
2.对于一个文件(image1.jpg)在文件夹(例如:image文件夹)中里面,一个在文件夹外面的情况,使用的时候:../image/image1.jpg
3.对于一个文件在文件夹(image)里面,另一个文件在另一个文件夹(html)的里面,使用的时候:image/image1.jpg
2.绝对路径:一般是指文件所在的绝对位置,通常是从盘符开始的路径
1.对于本地的绝对路径的引用,使用的话:file:///+地址(在路径开头加上file:///是为了多浏览器的兼容)
2.对于网络文件的引用,直接就是该文件的网络地址就可以了
四.导入式样式表
导入式样式表其实和链接样式表类似的,都是在外部建立css文件,然后引用给html文件,同样实现了样式和表现的分离。
类似:
<head>
<style>
@import url(路径)
</style>
</head>
在使用的样式表的时候,我们要注意他们的优先级。那么这些样式表的优先级是怎样的?
很简单,在理论上来说行内样式表的优先级是最高的,因为行内样式表距离要加css的标签最近,所以总结起来他们的优先级可以用四个字来描述:就近原则。
第二大部分
css样式的定义:
选择器{样式}
选择器{样式:样式值;....}
注意:在css样式中的某些样式是具有继承性的,也就是说:css中的某些样式不仅可以作用于该标签,还可以作用于该标签的后代中。
css样式选择器:
1.基本选择器
1.全局选择器 :*{...}
2.标签(标记)选择器 :标签{...}
3.类别选择器:.className{....}
4.id选择器:#idName{....}
注意:类别选择器和id选择器都是先定义后使用。
类别选择器的特点:
1.同一个页面可以使用多个类别选择器,但是id选择器只能在一个页面出现一次
2.一个类别选择器可以被多个页面使用
id选择器的特点:
1.在一个页面中相同的id名只能出现一次,所以同一个id名的选择器只能在一个页面选择一次。
注意:在样式不一样的情况下,如果是多个类别选择器,则所有的样式都可以实现,使用方法
<p class="className1 className2.....">....</p>
但是对于多个id选择器来说,即使他们的样式不同,也不可以写成上面的形式。
注意:在样式一样的情况下,也就是常说的发生冲突的情况下,这时候需要考虑选择器的优先级:
1.两个都是类别选择器的时候:那个在后面那个就会显示,因为代码是从上向下读的,所以前面的会被后面给代替掉。
2.但是当选择器不一样时,这时候就要考虑选择器的优先级拉
选择器的优先级:
行内>id选择器>类别选择器>标记选择器>全局选择器>权重
可以用权重来表示:
行内 1000
id选择器 100
类别选择器 10
标记选择器 1
全局选择器 0
权重根据文献是 0.1
举个例子:
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
注意:有些情况下,我们可以为某些样式设置最高权重,可以通过!important来实现。!important一般都是写在分号之前。
2.层级选择器
1,群组选择器
群组选择器一般用在这样的情况:
当多个标签都要设置成某种一样的样式时。即(标记1,标记2,....){.....}
类似:h1,span{color:red;}这样的写法相当于:h1{color:red;}
span{color:red;}
2,后代选择器
后代选择器的写法:中间用空格隔开(可以是标签或者其唯一的标记(类或id))
3,子元素选择器
子元素选择器的写法:中间用大于号>隔开(可以是标签或者是其唯一的标记(类或者id))
注意后代选择器和子元素选择器的区别:
后代选择器的话是相对于其所有的后代来说的,包括"儿子","孙子","重孙子"....等等
子元素选择器的话是相对于其第一代儿子来说的,不包括其儿子后面的代数。
4,动态伪类选择器
动态伪类选择器的话,最常见的地方一般就是a标签。
动态伪类选择器可以分为:
1.标签:link{} 链接时的状态
2.标签:visited{} 访问过后的状态
3.标签:hover{} 鼠标滑过的状态(重要)
4.标签:active{} 鼠标点击的状态
这些情况对于a标签都可以使用,但是对于其他的标签来说最常用的是:hover和:active
5,:nth选择器
:nth选择器的话其实就是将标签设置上了个数;可以将其分为三个部分:
1.标签:first-child{...} 第一个子元素
2.标签:last-child{...} 最后一个子元素
3.标签:nth-child(n){....} 第n个子元素
第三大部分
css的样式:也可以成为css格式化排版。
文字样式(排版):
1.font-family:... 字体
2.font-size:12px; 字体的大小
3.color:red;#0000;... 字体的颜色
4.font-weight:bold;normal 字体的加粗
5.font-style:italic;... 字体的样式
段落样式(排版):
1.text-align:.. 文本对齐方式
2.text-indent:... 文本缩进
3.text-decoration:... 文本是否加划线
4.line-height:... 行间距
5.line-height:height 保持文本上下居中显示
背景样式(排版):
1,background-color:.. 背景颜色
2,background-image:url(路径) 背景图片
3,background-repeat: 背景是否平铺
4,background-position:left/center./... 背景位置
注意:背景样式(排版)是复合属性;那么什么是复合属性呢?
复合属性:就是可以将其他的属性复合起来,即只写一个background就可以了。
列表样式(排版):
1.list-style-type:... 列表符号类型
2.list-style-image:url(路径) 列表的前面的图片
3.list-style-position 列表的前面的位置
注意:列表属性也是复合属性。