css选择符(选择器)
选择符表示要定义样式的对象,可以是元素本身,也可是一类元素或制定名称的元素
在css选择符中,大致可有10种:类选择符、id选择符、class选择符、通配符、群组选择符、包含选择符、伪类选择符、伪对象选择符……
关于选择符的权重问题,css中用四位数来表示权重,权重的表达式如0000
- 类型选择符的权重为 0001
- class选择符的权重为 0010
- id选择符的权重为 0100
- 子选择符的权重为 0010
- 属性选择符的权重为 0010
- 伪类选择符的权重为 0010
- 伪元素选择符的权重为 0010
- 包含选择符的权重为 :为包含选择符的权重之和
- 内联样式的权重为 1000
- 继承样式的权重为 0000
在这里特别要注意的就是关于a标签的伪类选择-在使用a标签的伪类时,不可以打乱顺序
a:link{属性:属性值} 超链接初始化的状态
a:visited{属性:属性值} 超链接被访问后的状态
a:hover{属性:属性值} 鼠标悬停,即鼠标划过超链接时的状态
a:active{属性:属性值} 超链接被激活时的状态,即鼠标按下时它的状态
注意:联合使用的时候,样式的顺序是不能改变的link、visited、hover、active。顺序错误则超链接样式失败。
css核心属性
一、关于文本的css声明
- 文本大小:{font-size:value}
属性值为数值型,单位有几种常见的pt、rem、em、px(9p t= 12px \ 1em = 16px )
也可以使用绝对大小关键字
xx-small : 9px
x-small :11px
small:13px
medium:16px
large:19px
x-large:23px
xx-large:27px
- 文本颜色:{color:颜色值}
- 文本字体:{font-family:“字体”}
- 字体加粗:{font-weight:bold(加粗的)/bolder(更粗的)/ normal(常规)/ 100-500-900} 在css规范中,字体粗细,分为9个等级,分为100-900;其中100对应最轻字体变形,而900对应最重字体变形,500规范字体;600-900加粗字体。
- 倾斜:{font-style:italic(倾斜度小)/ oblique(倾斜度大)/ normal(取消倾斜,常规显示)}
- 水平对齐方式:{text-align:left / right / center / justify(两端对齐对中文不起作用)}
- 垂直对齐方式:{vertical-align:top / bottom / middle}
- 行高:{line-height:normal/value}
文字属性的简写:(顺序)font-style \ font-variant \ font-weight \ font-size \ line-height \ font-family
- 文本修饰:text-decoration:none / underline(添加下划线) / overline(添加上划线) / line-through(添加删除线) / blink (闪烁)
- 首行缩进:{text-indent:value} value可取负值;该属性只对第一行起作用
- 字间距:{letter-spacing:value} 控制英文/汉字的字距
- 词间距:{word-spacing:value} 控制英文单词之间的距离
- 文体流控制:{layout-flow:vertical-ideographic 自上而下 / horizontal自左向右} 只支持IE浏览器
二、关于列表的css声明
- 定义列表符号的样式:list-style-type:disc(实心圆)/ circle(空心圆)/ square(实心方块)/ none
- 使用图片作为列表符号:list-style-image:url(目标图片)
- 定义列表符号的位置:list-style-position:outside(外边)/ inside(里边)
三、关于背景的css声明(边框)
- 背景颜色 : background-color:颜色值
- 背景图片的设置:background-image:url()
- 背景图片平铺属性:background-repeat:no-repeat / repeat / repeat-x / repeat-y
- 背景图的固定:background-attachment:scroll 滚动 / fixed(固定)
- 背景图的位置:background-position:left / center / right / 数值 top/center/bottom/数值
- 边框:border:线型(solid实线/dashed虚线/dotted点线/double双线) 粗细(value) 颜色
右边框:border-right / 左边框:border-left / 上边框:border-top / 下边框:border-bottom
四、文本溢出
overflow(overflow-x / overflow-y):visible 默认值 / hidden(隐藏,内容会被修剪其他内容不可见)/ scroll / auto / inherit
scroll - 里面没有内容时,也会显示内容
auto - 有内容溢出才会出项滚动条
inherit - 规定应该从父元素中继承 overflow属性(一般不使用)
文本溢出
text-overflow:clip / ellipsis
clip:不显示省略号(…)而是简单的裁切
ellipsis:当对象内文本溢出时,显示省略标记
五、空余空间
white-space:normal / pre / nowrap / pre-wrap / pre-line / inherit
normal :默认值
pre:空白会被浏览器保留,其行为方式类似HTML中的pre标签
nowrap:文本不会换行,文本会在同一行上继续,知道遇到<br/>标签为止
pre-wrap:保留空白符序列,但是正常的进行换行
pre-line:合并空白符序列,但是保留换行符
inherit:IE浏览器不支持此属性,从父元素继承whit-space
要让文本显示省略号:
- 容器宽度:width:value;
- 强制文本在一行显示,white-space:nowrap;
- 溢出内容被隐藏overflow:hidden;
- 溢出文本显示省略号:text-overflow:ellispsis
多行显示省略:
- width:value;
- over-flow:hidden;
- text-overflow:ellipsis;
- word-break:break-all;
- display:-webkit-box !important;
- -webkit-box-orient:vertical;
- -webkit-line-clamp:value(设置多少行显示)
六、浮动属性
float:none / left / right
七、盒模型
外边距,边框,内边距,内容区组成
外边距:margin / margin-left / margin-right /margin-bottom / margin-top
margin属性在上下情况下,取最大一个值,谁大取谁(左右无异)
margin第一级会把margin-top传给上一级,这个是要注意的。
内边距:padding / padding-left /padding-right
八、元素类型的转换
盒子模型可通过display属性来改变默认的像是类型
display:18个属性值 该属性设置或检索对象元素应该生成的盒模型的类型;
常用的:block(块元素) / inline(内联元素) / inline-block(行内块元素) / none / list-item / table-header-group / table-footer-group ....
九、position定位属性,检索对象方法:
position:static / absolute / relative / fixed
static:默认值无特定定位;
absolute:绝对定位,将对象从文档中拖离出来,受用left / right / top / bottom等属性,相对其最接近的一个并没有定位设置的元素进行绝对定位,如不存在这样的父对象,则依据body对象,而其层叠通过z-index属性定义;
relative:相对定位,对象不可叠,在文档流偏移位置(占文档流)
fixed:对象定位遵从定位方式(absolute)但要遵守一些规范,参照整个屏幕,低版本的浏览器不支持
CSS Bug 、CSS Hack 、 Filter
在学习的过程,我总结了一些,css的一些bug,首先我先在这里介绍一下什么为css bug,css hack,filter
- CSS Bug:css样式在各浏览器中解析不一致的情况,不能正确显示问题称为css bug
- CSS Hack:css中,Hack是指一种兼容css在不同浏览器中正确显示的技巧方法,因为它们都属于个人对css代码的非官方的修改或者非官方的补丁,有些人更喜欢使用path(补丁)来描述这行为
- Filter:表示过滤的意思,它是一种对特定浏览器或组显示或隐藏规则或声明的方法,用来过滤不同浏览器的Hack类型,使用Hack带来副作用,降低css代码的可读性。增加代码的负担
- 设置css和hack和filter有两种方法:一是利用浏览器自身的bug,来隐藏或显示样式或声明,利用浏览器对css支持的不完善,如对某些规则或语法还没有形成支持来隐藏或显示样式
在这里,我总结了一些常见的IE6的css解析bug以及hack
- 图片间隙(把img元素转为块状元素)
- 双倍浮向(双倍边距)这是最常见的一个bug,当IE6-浏览器在解析浮动元素时,会错误地吧浮向边界加倍显示 (解决方法:给浮动元素添加display:inline;就是把元素设为内联元素)
- 在IE6-以下版本中,部分块元素拥有默认高度(低于18px)-解决方法,给元素添加声明 font-size:0;overflow:hidden;height:0;
- 表单元素行高不一致;给表单元素设置为float
- 在img放入a里面,可给img去除边框,img在a里,在IE浏览器时会有一个边框,就要去除border:0;
- 按钮元素默认大小以及样式不一致 - 解决方式:hack1:统一大小以及样式;hack2:input外套一个标签,在这个标签里写按钮的样式,吧input的边框去除;hack3:如果这个按钮是一个图片,直接把图片作为按钮的背景图即可
- 百分比:在IE6以下版本中解析百分比,会按四舍方式计算从而导致50%加50%大于100%的情况
- 高度塌陷,设置float浮动之后,会造成一个高度塌陷问题,float的bug还是比较多的,解决方式,在浮动元素最后,添加一个空的div标签,然后给这个空标签添加clear:bot和;清除浮动即可,但是这个方式还是比较麻烦,所以,清楚浮动,就在浮动元素的父元素中添加一个伪类after
div:after{conten:"";display:blcok;clear:both;visibity:hidden;height:0;overflow:hidden;}
- 鼠标指针bug cursor属性的hard属性值只有IE浏览器识别,其他浏览器不是别,cursor中pointer属性值IE6+以及其他内核浏览器都可以识别,统一某元素鼠标指针形式为手型添加cursor:pointer;
- 透明属性,IE浏览器写法:filter:alpha(opcity=value1-100)
上面是一些简单的css总结,稍后会总结一下css3的新属性