anchor伪类:专用于控制链接的显示效果
a:link(没有接触过的链接),用于定义了链接的常规状态。
a:hover(鼠标放在链接上的状态),用于产生视觉效果。
a:visited(访问过的链接),用于阅读文章,能清楚的判断已经访问过的链接。
a:active(在链接上按下鼠标时的状态),用于表现鼠标按下时的链接状态。
伪类选择器 : 伪类指的是标签的不同状态:
a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:hover{
color: aqua;
}
</style>
</head>
<a href="#">fe</a>
</body>
</html>
before after伪类
:before p:before 在每个<p>元素之前插入内容
:after p:after 在每个<p>元素之后插入内容
例:p:before{content:"hello";color:red;display: block;}
=================================================================
选择器的优先级
css的继承
继承是CSS的一个主要特征,它是依赖于祖先-后代的关系的。继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。
body{color:red;} <p>helloyuan</p>
这段文字都继承了由body {color:red;}样式定义的颜色。然而CSS继承性的权重是非常低的,是比普通元素的权重还要低的0。
p{color:green}
发现只需要给加个颜色值就能覆盖掉它继承的样式颜色。由此可见:任何显示申明的规则都可以覆盖其继承样式。
此外,继承是CSS重要的一部分,我们甚至不用去考虑它为什么能够这样,但CSS继承也是有限制的。有一些属性不能被继承,如:border, margin, padding, background等。
=================================================================
css的优先级
所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。
样式表中的特殊性描述了不同规则的相对权重,它的基本规则是:
1 内联样式表的权值最高 style=""------------1000;
2 统计选择符中的ID属性个数。 #id --------------100
3 统计选择符中的CLASS属性个数。 .class -------------10
4 统计选择符中的HTML标签名个数。 p ---------------1
按这些规则将数字符串逐位相加,就得到最终的权重,然后在比较取舍时按照从左到右的顺序逐位比较。
1、文内的样式优先级为1,0,0,0,所以始终高于外部定义。
2、有!important声明的规则高于一切。
3、如果!important声明冲突,则比较优先权。
4、如果优先权一样,则按照在源码中出现的顺序决定,后来者居上。
5、由继承而得到的样式没有specificity的计算,它低于一切其它规则(比如全局选择 符*定义的规则)。
=================================================================
css属性操作
http://css.doyoe.com/
-------------------------------------------------------------------------------------------------------------------
css text
文本颜色:color
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定:
十六进制值 - 如: #FF0000
一个RGB值 - 如: RGB(255,0,0,0.3) 最后一个值为透明度
颜色的名称 - 如: red
p { color: rebeccapurple; }
-------------------------------------------------------------------------------------------------------------------
水平对齐方式
text-align 属性规定元素中的文本的水平对齐方式。
left 把文本排列到左边。默认值:由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
-------------------------------------------------------------------------------------------------------------------
文本其它属性
color : #999999; /*文字颜色*/
font-family : 宋体,sans-serif; /*文字字体*/
font-size : 9pt; /*文字大小*/
font-style:itelic; /*文字斜体*/
font-variant:small-caps; /*小字体*/
letter-spacing : 1pt; /*字间距离*/
line-height : 200%; /*设置行高*/
font-weight:bold; /*文字粗体*/
vertical-align:sub; /*下标字*/
vertical-align:super; /*上标字*/
text-decoration:line-through; /*加删除线*/
text-decoration: overline; /*加顶线*/
text-decoration:underline; /*加下划线*/
text-decoration:none; /*删除链接下划线*/
text-transform : capitalize; /*首字大写*/
text-transform : uppercase; /*英文大写*/
text-transform : lowercase; /*英文小写*/
text-align:right; /*文字右对齐*/
text-align:left; /*文字左对齐*/
text-align:center; /*文字居中对齐*/
text-align:justify; /*文字分散对齐*/
vertical-align属性
vertical-align:top; /*垂直向上对齐*/
vertical-align:bottom; /*垂直向下对齐*/
vertical-align:middle; /*垂直居中对齐*/
vertical-align:text-top; /*文字垂直向上对齐*/
vertical-align:text-bottom; /*文字垂直向下对齐*/
-------------------------------------------------------------------------------------------------------------------
颜色及背景属性
[ 颜 色」( color ), 设置颜色。 Color:blure color:#00080 color:#0c0
「背景颜色」( background-color ), 设置背景颜色。 background-color :blure background-color :#00080 background-color :#0c0
「背景图像」( background-image ), 设置网页背景图像。 background-image:url(/images/xx.gif)
「背景重复」( background- repeat ), 控制背景图像的平铺方式,有不重复( no-repeat )、重复( repeat ,沿水平、垂直方向平铺)、横向重复 ( repeat-X ,图像沿水平方向平铺)和纵向重复( repeat-Y ,沿图像垂直方向平铺)等 4 种选择。
「背景附件」( background-attachment ), 用于控制背景图像是否会随页面的滚动而一起滚动。有固定( fixd ,文字滚动 时,背景图像保质固定)和滚动( scroll ,背景图像随文字内容一起滚动)两种选择。
「水平位置」 / 「垂直位置」( background-position ), 确定背景图像的水平、垂直位置
。共有左对齐( left )、右对齐 ( right )、顶部( top )、底部( bottom )、居中( center )和值(自定义背景图像的起点位置,可使用户对背景图像的位置做出更精确的控 制)等 6 种选择。
[ 背景 ] ( background ), 《背景颜色》 || 《背景图像》 || 《背景重复》 || 《背景附件》 || 《背景位置》
-------------------------------------------------------------------------------------------------------------------
边框
「边框宽度」( border-width ), 控制边框的宽度,其中分为 4 个属性: border-top-width 顶边框的 宽度、 border-right-width 右边框的宽度、 border-bottom-width 底边框的宽度、 border-left-width 左 边框的宽度。
「边框颜色」( border-color ), 设置各边框的颜色。若要使边框的四边显示不同的颜色, 可在设置中分别列出。如,
p{: #ff0000 #009900 #0000ff #55cc00}
浏览器将四种颜色依次理解为: 上边框、右边框、底边框和左边框(自上开始顺时针)。
「边框样式」( border-style ), 设定边框的样 式,共有无( none )、虚线( dotted )、点划线线( dotted )、点划线( dashed )、实线( solid )、双线( double )、槽状( grove )、脊状( ridge )、凹陷( inset )和凸起( outset )等 9 种。
「边框样式」( border ) , < 边框宽度 > | < 边框样式 > | < 边框颜色 >
-------------------------------------------------------------------------------------------------------------------
分类列表
序号 中文说明 标记语法
1 控制显示 {display:none|block|inline|list-item}
2 控制空白 {white-space:normal|pre|nowarp}
3 符号列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none} 设置列表项标志的类型。
4 图形列表 {list-style-image:URL} 将图象设置为列表项标志。
5 位置列表 {list-style-position:inside|outside} 设置列表中列表项标志的位置。
6 目录列表 {list-style:目录样式类型|目录样式位置|url} 简写属性。用于把所有用于列表的属性设置于一个声明中
7 鼠标形状 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}
-------------------------------------------------------------------------------------------------------------------
[display]
值 描述
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
table 此元素会作为块级表格来显示(类似 <table> ),表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似 <table> ),表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody> )。
table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead> )。
table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot> )。
table-row 此元素会作为一个表格行显示(类似 <tr> )。
table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup> )。
table-column 此元素会作为一个单元格列显示(类似 <col> )
table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th> )
table-caption 此元素会作为一个表格标题显示(类似 <caption> )
inherit 规定应该从父元素继承 display 属性的值。
-------------------------------------------------------------------------------------------------------------------
dispaly属性
none(隐藏某标签)
p{display:none;}
注意与visibility:hidden的区别:
visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。
display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。
block(内联标签设置为块级标签)
span {display:block;}
注意:一个内联元素设置为display:block是不允许有它内部的嵌套块元素。
inline(块级标签设置为内联标签)
li {display:inline;}
inline-block
display:inline-block可做列表布局,其中的类似于图片间的间隙小bug可以通过如下设置解决:
#outer{
border: 3px dashed;
word-spacing: -5px;
}
-------------------------------------------------------------------------------------------------------------------