Css层叠样式表
Css层叠样式表,允许网页设计者定义网页元素的样式,字体颜色及其它高级样式.
样式表说白了就是表示网页标签元素长什么样式,由一组决定显示格式,这些规则用定定义网页中任何HTML元素内容的显示格式
例: h1 {color:red;font-size:14px;}
选择器 声明(属性,值) 声明(属性,值) 里面属性与值采用字典的格式;
1.Css语法
由一到多个规则组成,规则由选择器与格式声明语句两部分组成
选择器就是你要改变的那个样式的HTML元素,类似于选择那个控件
声明语句放在{}内;
每一条格式声明语句由"属性名:属性值"对组成,属性名与属性值间以冒号隔开,每条声明语句以分号";"结束
CSS对大小写不敏感;
2.属性:
在格式声明语句中,属性名称与属性值之间以冒号":"隔开,属性值不需要使用引号括起来,除非属性值是由多个单词组成; (字典)
有的属性可以指定多个属性值,多个属性值以","隔开;
当定义多个值时,浏览器按照前后顺序选择属性值.如果第1个值有效,则尝试使用,如果第1个无效,则使用第2个,依次类推
例:
div.news.title{
font-family:"华文行楷","宋体","Times New Roman",Arial;
text-align:center;
font-weight:bold;
color:#444444;
background-color:#808080;
}
3.选择器分类:
基本选择器,组合选择器,属性选择器,伪类选择器;
基本选择器:
选择器 含义 举例
通用选择器 通用选择器,将匹配任何元素.不建议使用,IE不支持,大网站增加客户端负担 *{margin:0px}
标签选择器 匹配标签元素 p{font-size:14px};
类选择器 定义一类HTML元素样式,以"."来定义 .box{width:800px;}
Id选择器 Id选择器可以为标有特定ID的HTML指定的样式,只能使用一次.ID选择器以"#"来定义 #title{font-size:14px};
组合选择器
(疑问:后代选择器与子元素选择器不要搞混了)
E,F多元素选择器 多元素选择器,同进匹配所有E或F的元素,E或F之间使用逗号分隔 p,h1,h2{margin:0px};
E F后代选择器 匹配所有属性E元素后代的F元素,E F之间使用空格分隔 #slidebar p{font-color:#990000;}
E>F子元素选择器 匹配所有E元素的子元素F div>p{color:#990000;}
E+F相邻元素选择器 匹配所有紧随E元素之后的同级元素F div+div{color:#990000;}
注意:后代选择器:浏览器CSS匹配从右到左进行查找,好处就是尽早过滤掉无关样式规则与元素(可是为什么从右往就可以呢?)
属性选择器
E[attr] 匹配所具有att属性的E元素,不考虑它的值 h1[align]{......} input[type][size]{......}
E[attr = val] 匹配所有attr属性值等于val的E元素 h1[align = center]{.......} 属性值 一般不加引号;
伪类选择器
<a>标记的选择器 ,对应4种不同的状态:未访问的链接link,鼠标放上的状态hover,已访问链接visited,当前活动链接active. CSS允许对于元素的不同状态, 定义不同的格式化信息
选择器的 含义
a:link 未访问的链接
a:hover 鼠标移动到链接上
a:visited 已访问的链接
a:active 选定的链接
a.red:link class等于red的a元素
a.red:visited 同上
a.red:active 同上
a.red:hover 同上
4.CSS中的注释
/* 注释*/
例: td{
color:black;/*定义颜色*/
font-size:14px;/*定义大小*/
text-align:center;/*对齐方式*/
}
5.HTML中添加样式表
style定义内部样式表---内嵌式
1.内部样式通过<style>元素直接在HTML文档中定义样式表,2.它可以出现在HTML的任何地方,一般情况下在<head></head>之间定义<style></style>,3.通过<style>定义的内部样式表只能应用于当前HTML文档中的元素;
<html>
<head>
<style type = "text/css">
table{border:1px solid#cccccc;}
</style>
</head>
外部级联样式表----外联式
多个HTML需要进行共享样式表,应使用外部级联式样式表.
将包含规则的样式表保存后缀为.css的文件,在<head>标记通过<link>标记引入
其中,rel属性定义当前与href属性中链接文档之间的系,属性值stylesheet表示链接文档外门部的一个样式表文件;type属性表示链接文件的MIME类型;href为要链接文件的地址,可以是相对路径,也可以是绝对路径.
<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "css文件地址"/>
</head>
在.css文件中,只包括各项规则,不出现<style></style>标记对.
一个HTML文档中,可以根据需要链接任意个外部样式表文件.多个样式表文件中的规则将根据被链接进行叠加与覆盖
行内样式----------style属性
每个HTML元素均有一个style属性,该属性值为当前元素直接定义样式,该样式只应用到当前元素及其包含的内层元素.
Style属性的值与样式表规则{}内的内容相同.
<h1 style = "height:30px;line-hight:30px">一级标题内容</h1>
导入外部样式表
导入外部样式表是<style></style>标记内引用外部样式表文件的内容,也可在CSS文件中使用.导入通过@improt语句实现.
使用进@improt语句必须出现在其它规则定义之前,语法:@import(样式表地址)
区别:<link>元素是HTML的一个标签,而@improt是Css的一个标签,是CSS的一部分,只能在CSS内部使用;
<style type = "text/css">
@import url(css/main.css);
p{color:#444444;}
</style>
6.CSS优先级
选择器的优先级 !important>行内样式>ID选择器>Class选择器>元素选择器
定义!important的选择器,优先级最高,但IE6不支持.
例如: h1{color:#ff0000 !important;}
<style type = "text/css">
/*行内样式优先级最高*/
#title{color:#0000ff;} /*ID选择器比Class选择器优先级高*/
.title{color:#00ff00;}/*Class选择器比元素选择器优先级高*/
h1{color:#ff0000;} /*元素选择器,优先级最低*/
<style>
<h1 class= "title" id = "title" style = "color:#999900">人社部官员</h1>
指定越精确优先级越高,通常标签 class ID 行内样式选择器的优先级分别是1 10 100 1000,数字越大越精确;
举例:
div.box span{}优先级为12
.box span{} 优先级为11,优先级小于上边
7.CSS高效原则
让浏览器在查找style匹配的时候尽可能少的查找找到;
原则:
不要在ID选择器前使用标签名 例如:div#box 简写形式#box
不要在class选择器前使用标签名 例如: div.box简写形式 .box
尽量少使用层级关级 例如: .box .news .title h1 简写形式 .title h1
使用class代替层级关系 例如: .box .news .title 简写形式 .title
8.CSS的属性
尺寸属性 height/width 值auto自动,浏览器会自动计算高度,length:使用px定义高度,%:基于包含它的块级对象的百分比高度/宽度
字体属性:
font-family 宋体,黑体 字体
font-size 12px,14px 大小
font-style normal italic 样式
font-weight normal bold bolder lighter 粗细
font 设置文字各种属性的简捷方式
Font可以同时设置字符的各种属性,各属性间用空格隔开,如果同时设置font-size与font-height这两属性值可以使用"/"隔开;
font{italic bold 12px/20px arial,sans-serif;}
Css文本属性
color #ff000000或red或rob(3,5,8) 设置文本颜色
line-height 正整数或百分比 设置行高
letter-spacing 正整数或负值 字符间距
text-align left center right 对齐方式
vertical-align Top middle bottom baseline等当前元素与相邻元素的垂直对齐关系
text-transform Capitalize uppercase lowercase 大小写转换
text-indent %或像素 首行文本缩进
text-decoration none underline overlain line-though 文本的修饰
word-spacing normal,length 单词间距
p{text-decoration:underline overlain line-through;} //同时设置多线;
CSS属性--------伪类属性
:link 向未被访问的链接添加样式
:visited 向已被访问的链接添加样式
:hover 当鼠标悬浮在元素上方时,向元素添加样式;
CSS属性--------列表属性
list-style square inside url(arrow.gif) 在一个声明中设置所有列表属性
line-style-image url 图像路径 将图像设置为列表项标记
line-style-position inside outside 设置列表项标记放置位置
list-style-type none disc square circle 设置列表项标记的类型
CSS属性------表格属性
属性 值 含义
border-collapse separate(默认),collapse(合并) 是否合并表格边框
border-spacing length 相邻单元格边框之间的距离,如果设置一个值,水平与垂直一样;如果设置两个值,水平与垂直分开设置
caption-slide top或bottom 规定表格标题的位置
CSS属性 背景属性
background-color #f0000,red,rgb(255,0,0) 背影颜色
background-image url图像路径与名称 背景图像
background-repeat repeat repeat-x repeat-y no-repeat 背景图像是否重复
Background-position center center或x% y%或expos typos 背景图像起始位置
background-attachment scroll或fixed 设置背景图像是固定还是滚动
background url(1.jpg) no-repeat center 设置背景的简写形式
CSS属性---边框属性
border border:1px solid #444444 设置所有边框属性
border-top 设置顶边框
border-right 设置右边框
border-bottom 设置底边框
border-left 设置左边框
边框线型: -None无 solid实线 dotted点状线 dashed虚线 double双线 groove3D凹槽边框
CSS属性 ---内外边距
padding padding:5px 0px 同时设置四个边距,顺序:上右下左
padding-top 上填充距离
padding-right 右填充距离
padding-bottom 下填充距离
padding-left 左填充距离
margin 同时设置四个边距,顺序:上右下下左
margin-top 上边距
margin-right 右边距
margin-bottom 下边距
margin-left 左边距
外边距合并,两个垂直外边距相遇形成一个外边距,合并后的外边距的高度等于两个发生合并边距高度中的较大的那一个.
当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开,它们两个上和下外边距也会发生合并);
注释:只有普通文档流中块框的垂直外边框才会发生外边距合并.行内框,浮动框或绝对定位之间的外边距不会合并;
9.CSS属性 定位属性
position absolute fixed relative static 规定元素的定位类型
top/right/bottom/left auto,%,length 设置定位上外边距边界与其包含块上/右/底/左 块边界之间的偏移
display none,block,inline等 规定元素应该生成的框的类型
float left,right,none 规定框是否应该浮动
clear left,right,both,none 规定元素的那一侧不允许其它浮云元素
overflow visible,scroll,hidden,auto 当内容溢出元素框时发生的事情
visibility hidden,visible 规定元素是否可见,即使不可凶元素也会占据页面上的空间
z-index auto,数值 设置元素的堆叠顺序
cursor url,pointer,text,wait等 规定要显示的光标的类型(形状)
position定位属性的几种状态
absolute 生成绝对的元素,相对于static定位以外的第一个父元素进行定位.元素的位置通过 "left" "top" "right"以及"bottom"属性进行规定
relative 生成相对定位的元素,相对于其正常位置进行定位.因此"left20"会向元素的LEFT位置添加20像素
fixed 生成绝对定位的元素,相对于浏览器窗口进行定位.元素的位置通过"left","top","right"以及"bottom"属性进行规定.
static 默认值,没有定位,元素出现在正常的文档流中(忽略top,bottom.left,right或者z-index声明)
position属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对成固定元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认位置偏移.
相对定位---relative
设置为相对定位的元素会偏移某个距离,元素仍然保持其未定位前的形状态,它原本所占的空间仍保留.注意:在使用相对定位时,无论是进行移动,元素仍然占据原来的空间,因此移动元素会导致它覆盖其它框.
绝对定位 absolute
设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块.元素原先在正常文档中所占的空间会关闭,就像该元素原来不存在一样.元素定位后生成个块级框,而不论原来它在正常流中生成何种类型的框.
绝对定位使元素的位置与文档流无关,因此不占据空间,与相对定位不同在这里.相对定位实际上被看作普通流定位模型的一部分, 因此元素的位置相对于它在普通流中的位置
绝对定位的元素的位置相对于最近已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块; (通俗一点就是相对于最近的基准,如果没有基准,如无那么就相对于最原始包含它的那个元素)
8.显示属性display
none 此元素不会被显示
block 此元素将显示为块级元素,此元素前后会带有换行符
inline 默认,此元素会被显示为内联元素,元素前后没有换行符
inline-block 行内块元素
table 作为块级表格来显示(类似<table>),表格前后带有换行符
inline-table 内联表格来显示(类似<table>),表格前后没有换行符
table-row 此元素会作为一个表格行显示(类似<tr>)
table-cell 作为一个表格单元格显示(类似<td>和<th>)
9.CSS浮动与清理
float Left,right,none 使元素向左或向右浮动
clear Left,right,both,none 规定元素的那一侧不允许其它浮动元素
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动的边框为止.
浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样.
CSS清除浮动
假设希望让一个图片浮动到文本块的左边,并且希望这幅图片与文本包含在另一个具有背景颜色和边框的元素中.
因为浮动元素脱离了文档流,所以包围图片和文本的div不占据空间
如何在让包围元素在视觉上包围浮动元素呢?需要在这个元素中的某个地方应用clear;
10.盒子模型
CSS盒子模型(Box Model)规定了元素处理元素内容,内边距,边框与外边距的方式;
CSS中width与height指的是内容的宽度与高度.增加内边距,边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸.
大多数浏览器会按照页面设置的DTD来呈现内容,介理IE5.x和6 使用的是非标准模型,它的width不是内容宽度,而是内容内边距与边框的宽度总和;
如何解决:回避,就是不要给元素添加指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素和子元素中;
