在学习之前,我们需要对HTML和XHTML有基本的了解。
什么是CSS
CSS指层叠样式表,样式定义如何显示HTML元素,通常储存在样式表中。将样式添加在HTML 4.0 中,可以解决内容与表现分离的问题,内联样式在HTML元素内部拥有最高的优先权。
CSS语法组成
CSS由选择器以及一条或多条声明构成,选择器通常是需要改变样式的HTML元素,声明则由一个属性和一个值组成,属性是希望设置的样式属性,每个属性有一个值,属性和值被冒号分开。
CSS选择器
1.通过依据元素在其位置的上下关系来定义样式,通过这种方式应用规则的选择器被称为上下选择器,在CSS2中被叫做派生选择器。
2.id选择器可以为标有特定id的HTML元素指定特定的样式,以“#”定义,在现代布局中,id选择器常常用于建立派生选择器,id选择器作为派生选择器可以是只能在文档中出现一次的元素被使用很多次。id选择器也可以单独发挥作用。ID选择器允许以一种独立于文档元素的方式指定样式,在某些方面,ID选择器类似类选择器,但在语法上ID选择器前缀不同,也要引用id属性中的值。ID选择器在一个HTML文档中,仅会使用一次,并且不能结合使用,可以通过独立元素选择ID。取决于文档的语言,ID选择器和类选择器区分大小写。
3.在CSS中,类选择器以一个点号显示,和id一样,class也可用作派生选择器,元素也可以基于类而被选择,类选择器也可以以一种独立于文档元素的方式来指定样式,可单独使用,也可结合使用。在使用类选择器之前,需要修改具体的文档标记,以便类选择器正常使用,将两个类选择器链接在一起,仅可以选择同时包含这些类名的元素。
4.属性选择器可以根据元素的属性及属性值来选择元素。选择有某个属性的元素而不论属性值是什么,可以选择简单属性选择器。属性选择器还可以根据具体属性值,只选择有特定属性值的元素。属性与属性值必须完全匹配。如果需要属性值中的词列表进行选择,需要使用波浪号。CSS2完成后还发布了子串匹配属性选择器,包含了更多的部分值属性选择器。还有一种特定属性选择类型,最常见的用途是匹配语言值。
5.后代选择器又称为包含选择器,可以选择作为某元素后代的元素,有了后代选择器,HTML中不可能实现的任务成为可能。有关后代选择器,两个元素之间的层次间隔可以是无限的。
6.CSS子元素选择器只能选择作为某元素子元素的元素,如果不想选择任意的后代元素,只选择某个元素的子元素,可以使用子元素选择器。
7.CSS相邻兄弟选择器可选择紧接在另一元素后的元素,且二者有相同父元素。相邻兄弟结合符还可以结合其他结合符。
如何创建CSS
外部样式表,内部样式表,内联样式
CSS伪类
CSS伪类用于向某些选择器添加特殊的效果,CSS类可与伪类搭配使用。在支持CSS的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态和鼠标悬停状态。伪类可以与CSS类配合使用。lang伪类可以为不同的语言定义特殊的规则。
CSS伪元素
CSS伪元素用于向某些选择器设置特殊效果,CSS类也可以与伪元素配合使用。可以结合多个伪元素使用。first-line用于向文本的首行设置特殊样式,first-letter用于向文本的首字母设置特殊样式(只能用于块级元素),before伪元素可以在元素的内容前面插入新内容,after伪元素可以在元素的内容后面插入新内容。
CSS样式
包括:背景、文本、字体、链接、列表、表格、轮廓。
CSS定位
CSS为定位和浮动提供一些属性,利用这些属性,可以建立列式布局,将布局一部分与另一部分重叠……
CSS有三种基本定位机制:普通流,浮动和绝对定位,除非专门指定,否则所有框都在普通流中定位。
CSS相对定位可以使一个元素出现在它所在的位置上。
设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原本不存在一样,元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。绝对定位不占据空间。绝对定位的元素的位置相对于最近的已定位的先定位祖先元素,如果元素没有已定位的祖先元素,那么就相对于最初的包含块。
CSS浮动,浮动的框可以向左或向右移动,直到它的边缘碰到另一个浮动框的边框。
CSS对齐:使用position属性或float属性进行左对齐和右对齐。
CSS尺寸属性允许你控制元素的高度和宽度,也可以增加行间距。
通过CSS,可以把乏味的HTML菜单转换为漂亮的导航栏,导航栏=链接列表。