css(二)----属性（1）

来源：互联网发布：自然排名优化软件编辑：程序博客网时间：2024/05/17 15:03

伪类
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;
}

-------------------------------------------------------------------------------------------------------------------

阅读全文

0 0