一、CSS简介
注意:text-align/text-decoration/text-indent
CSS(cascading style sheets)WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制,简单说就是如何修饰网页的显示样式。---级联样式表、层叠样式表
目前推荐遵循的是W3C发布的CSS3.0
css3在包含了所有css2.0所支持的基础上改变了改进,css遵循的是模块式开发,发布的时间不是一个点而是一个时间段。
1998年5月21日由w3C正式推出的css2.0
(在css1的基础上增加了高级功能,浮动,定位,高级选择器等(子选择器,相邻选择器,通用选择器)
1996年推出CSS1
包含非常基本的属性,比如字体,颜色、空白边
历史
在使用CSS之前,Web开发人员依赖于一些特定的HTML标签和属性来增强网页的视觉体验,而依赖表格来进行布局设计。
和样式有关的一些HTML标签:
- <basefont> 定义整个网页文档的字体
- <font> 定义一个具体的字体类型,颜色和它所包含的文本大小
- <center> 水平居中它所包含的元素
- <big> 使文本变大
- <strike> 为文本添加删除线
和样式有关的一些HTML属性:
- bgcolor 定义元素的背景色
- text 定义文本颜色
- margin 定义元素的边距
在页面整体布局的设计上曾经广泛使用表格 <table> 元素。因为表格提供了一个可视化的网格(grid)使得创建列、对齐和定位页面中的各个元素要相对直观一些;
这些样式和布局方法有很多缺点:
(1)内置的HTML元素和属性,使得表现和内容绑定在一起,如果要提供多样式的网页,必然要提供多份HTML文档内容
(2)HTML表格的代码相当繁琐,需要很多公式化标签,吃力不讨好
(3)HTML表格标记用法是语义错误的: 表格应该只是用来组织多维数据的,而不是用来布局的
(4)改变布局需要更改标记:如果我们想把左边的列移到右边,我们得修改HTML文档结构
(5)HTML表格容易出现语法错误:行和列需要遵循严格的排序和嵌套关系
(6)HTML表格标记用法可读性差:需要使用嵌套表格来支持列中有列的布局,结构将变得非常复杂
这就是为什么内置HTML样式和使用表格进行布局在实践中已经逐渐被抛弃,转而使用div+CSS来代替的原因。
内容和表现分离的好处:
(1)同一份文档可以拥有不同的呈现,提高了文档的可复用性和设计灵活性
(2) 内容和样式分离使得HTML文档精简清晰,可读性高
(3) 由于浏览器会缓存静态文件如CSS/JS,这将有助于提高网站性能和SEO评估
(4) 代码的可维护性好
二、css语法
选择符{属性:属性值; 属性:属性值;}
选择符:表示要定义样式的对象
1)每个CSS样式由两部分组成,即选择符和声明,声明又分为属性和属性值;
2)属性必须放在{}内;
3)属性与属性值用冒号连接
4)当一个选择符有多个属性时,用分号隔开;
5)当一个属性有多个属性值时,用空格分隔;
6)使用空格、换行不影响css样式的显示。
简单样式
width:value+px;设置标签的宽度
height:value+px;设置标签的高度
background:#colorValue; 设置标签的背景颜色
color:#colorValue;设置文本颜色;而不是font-color
border:1px solid #colorValue; 设置标签的边框
边框类型:solid实线边框 double双线边框 dashed虚线(v. 猛冲/猛掷) dotted点状线(v. 点缀布满)
样式表分类
样式:内部样式 外部样式 和 内联样式
1.内部样式
语法:
<style type="text/css">
css语句
</style>
注:使用style标记创建样式时,最好将该标记写在<head></head>里面;
2.外部样式
外部样式的建立及调用(@charset "utf-8";在外部样式表文件内使用。指定该样式表使用的字符编码。该规则后面的分号是必需的,如果省略了此分号,会生成错误信息。)
a:外部样式表的创建。 b:外部样式表的导入。
*方法 一
<link rel="stylesheet" type="text/css" href="目标文件的路径及文件名全称" />
说明:使用link元素导入外部样式表时,需将该元素写在文档头部,即<head>与</head>之间。
*方法 二
<style type="text/css">
@import url(目标文件的路径及文件名全称);
</style>
注:@和import之间没有空格 url和小括号之间也没有空格;必须结尾以分号结束;
两种导入样式的区别
link和import导入外部样式的区别:
差别1:
link属于XHTML标签,而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS。
差别2:
加载顺序的差别:当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式。
差别3:
兼容性的差别:@import是CSS2.1提出的,所以老的浏览器不支持,@import只在IE5以上的才能识别,而link标签无此问题。
差别4:
使用dom控制样式时的差别:当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的
3.内联样式表(行间样式,行内样式,嵌入式样式)
语法:<标签 style="属性:属性值 ; 属性:属性值;"></标签>
样式表的优先级
内联样式表的优先级别最高,内部样式表与外部样式表的优先级和书写的顺序有关,后书写的优先级别高
下面的优先级高
三、选择符(选择器)
1) 元素选择符/类型选择符(element选择器 )
语法:元素名称{属性:属性值;}
说明:元素选择符就是以文档语言对象类型作为选择符,即使用结构中元素名称作为选择符。例如body、div、p,img,em,strong,span等。
用法:当统一或者改变文档某类元素的显示效果时,可以使用类型选择符;
2) id选择器
语法:#id名{属性:属性值;}
说明:
1)使用id选择符时,应该为每个元素定义一个id属性
2)id选择符的语法格式是:#id名{}
3) 起名时要取英文名,不能用关键字(所有的标记和属性都是关键字)
4)一个id名称只能对应文档中一个具体的元素对象,因为id只能定义页面中某一个唯一的元素对象。
5) 最大的用处:创建网页的外围结构。
3)class选择器
语法:.class名{属性:属性值;}
说明: 使用类选择符时,为每个元素定义一个类名称,语法格式是:
<div class=“top”></div>,在css中使用方式为:.top{}
用法:1)class选择符更适合定义一类样式;
div.top{} p.top{}:p标签下的有top类的那个元素
2 ) 一个标记可以设置多个class名
语法:<标记 class="名称1 名称2" ></标记>
3)class名可以重复,class属性可以有多个属性值,中间用空格分割
4)群组选择器
语法:选择符1,选择符2,选择符3{属性:属性值;}
说明:当有多个选择符应用相同的样式时,可以将选择符用“,”分隔的方式,合并为一组。
5) 包含选择器/后代选择符
语法:选择符1 选择符2{属性:属性值;}----------选择符2只要是在选择符里面就可以了,不一定是子类,可以是祖孙类
说明:选择符1和选择符2用空格隔开,含义就是选择符1中包含的所有选择符2;
6) 伪类选择器(伪类选择符)
语法 : :link{属性:属性值;}超链接的初始状态;
:visited{属性:属性值;}超链接被访问后的状态;
:hover{属性:属性值;}鼠标悬停,即鼠标划过超链接时的状态;(div ,p,span,li等等)
:active{属性:属性值;}超链接被激活时的状态,即鼠标按下时超链接的状态;
说明:
1)当这4个超链接伪类选择符联合使用时,应注意他们的顺序,正常顺序为:a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效;
2)使用与超链接相关的伪类选择符时,应为a元素定义href属性;
7)通配符
语法:*{属性:属性值;}
说明:通配选择符的写法是“*”,其含义就是所有元素。
用法:常用来重置样式
全局样式
*{margin:0;padding:0;}
margin:0 auto; 让子元素相对父元素水平居中显示
header会继承body的宽高,body会继承html的宽高,html会继承浏览器硬件页面的宽高
选择符权重
3.对文本的设置是可以继承的,对border和bg的设置不能集成
css中用四位数字表示权重,权重的表达方式如:0,0,0,0
类型选择符的权重为 0001
伪元素选择符的权重为 0001
class选择符的权重为 0010
属性选择符的权重为 0010
伪类选择符的权重为 0010
id选择符的权重为 0100
内联样式的权重为 1000
通配符的权重为 0000
子选择符(>)的权重为 0000
继承样式的权重为 0000
兄弟选择符的权重为 0000
包含选择符的权重:为包含选择符的权重之和
扩展:
1.伪类选择符:
2.子选择器(IE6不支持)
子元素选择器只能选择作为某元素的子元素的元素,子选择器使用了大于号(这个大于号的权重是0,子结合符);
子结合符两边可以有空白符,因此,以下写法都没有问题:h1 > strong h1> strong h1 >strong h1>strong
3.相邻兄弟选择器(IE6不支持) +:
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器,相邻兄弟选择器使用加号“+”做为连接符。
普通兄弟选择器(IE6不支持) ~:
普通兄弟选择器选取所有指定元素的兄弟元素,使用”~”作为连接符。向下找不会向上找
属性选择器
选择器[att][att] 匹配所有具有att属性的元素。
选择器[att=val] 匹配所有att属性等于“val”的元素。
选择器[att~=val]选择具有att属性且属性值为包含val的字符串的元素(如果忽略了波浪号,则说明需要完成完全匹配)。
选择器[att|=val]选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。
浮动:float可以使块状元素并列显示,给所有需要并列显示的元素(如图片和文本对齐时总有点错位)都添加浮动。
子元素可以把父元素撑大,但当设置浮动时,不会把body撑大,元素设置浮动之后,会脱离正常文档流。
高度塌陷:如果父元素在没有设置高度时,高度为0,叫父元素的高度塌陷;
解决办法:,在设置浮动的元素下面设置
- line-height:2 实际默认的单位为em,表示行高为字符的文本高度*number倍数
- line-height:100%,表示行高与当前字体大小一样,200%=fontsize*2
- line-height:34px;
这样量行高:给文本设置行高后,字体会默认垂直居中。
文字水平居中text-align:center
经常对a标签设置,如a{text-decoration:none;}
正的值往右走,给负值往左走.文本中经常用到
百分比是基于父元素的尺寸
若父元素有高度,则不会出现高度塌陷
text-align/text-decoration/text-indent
li和a都可写:hover,但范围不一样