http://www.pqshow.com/design/htmlcss/12513.html
1,群选择器.
说明:当几个元素样式属性一样时,可以调用同一个申明,元素之间用逗号分隔、
说明:可以使用派生选择器给一个元素里的子元素定义样式,例如这样:
3.ID选择器.
说明:用css布局主要用层div来实现,而div得样式通过'id选择器'来定义.
例如我们首先定义一个层.
id选择器同样也支持派生,例如:
4.类别选择器。
说明:css里面用一个点来表示类别选择器的定义,例如:
在页面中,用class="类别名"的方法调用:
5.定义链接的样式(伪类样式)、
说明:css中用4个伪类来定义链接样式,分别是:a:link,a:visited,a:hover,a:active。例如:
<ul class="inventory">
<li><a href="/angelfish">Angelfish</a>(67 items)</li>
<li><a href="/angeld">Angels/Frogfish</a>(35 items)</li>
<li><a href="/anthias">Angelfish</a>(5526 items)</li>
<li><a href="/basslets">Angelfish</a>(15 items)</li>
<ul>
说明:当几个元素样式属性一样时,可以调用同一个申明,元素之间用逗号分隔、
p,td,li
{
font-size : 12px ;
}
2,派生选择器.
font-size : 12px ;
}
说明:可以使用派生选择器给一个元素里的子元素定义样式,例如这样:
li strong
{
font-style : italic ;
font-weight : normal ;
}
就是为li的子元素strong定义一个斜体不加粗的模式.
font-style : italic ;
font-weight : normal ;
}
3.ID选择器.
说明:用css布局主要用层div来实现,而div得样式通过'id选择器'来定义.
例如我们首先定义一个层.
<
div
id
="menubar"
></
div
>
然后在样式表里这样定义、
#menubar
{
margin : 0px ;
background : #FFFFF ;
}
其中menubar是自己定义的div的名字,注意前面要加'#'号。
margin : 0px ;
background : #FFFFF ;
}
id选择器同样也支持派生,例如:
#menubar p
{
text-aglin : right ;
margin-top : 10px ;
}
这个方法主要用来定义层,和那些比较复杂,有多个派生的子元素、
text-aglin : right ;
margin-top : 10px ;
}
4.类别选择器。
说明:css里面用一个点来表示类别选择器的定义,例如:
.12px{
text-aglin:center;
font-family:宋体;
font-size:12px;
}
<span class="12px">12px大小的字体</span>
这个方法比较灵活,可以随时新建和删除、
5.定义链接的样式(伪类样式)、
说明:css中用4个伪类来定义链接样式,分别是:a:link,a:visited,a:hover,a:active。例如:
a:link
{
font-weight
:
bold
;
text-decoration
:
none
;
color
:
#c30
}
a:visited { font-weight : bold ; text-decoration : none ; color : #c60 }
a:hover { font-weight : bold ; text-decoration : none ; color : #FFFFF }
a:active { font-weight : bold ; text-decoration : none ; color : #EEE }
a:visited { font-weight : bold ; text-decoration : none ; color : #c60 }
a:hover { font-weight : bold ; text-decoration : none ; color : #FFFFF }
a:active { font-weight : bold ; text-decoration : none ; color : #EEE }
以上语句分别定义了"链接,以访问过的链接,鼠标停在上方时,点下鼠标时"的样式.
注意,以上4个样式可以"缺",但不可以打乱顺序,否则样式会跟你预想的不一样.他们的原则是:爱恨原则。
即love hate原则,顺序是love中的"l"是link,"v"是visited,hate中的"h"是hover,"a"是active。
6.组合使用选择器创造精致的设计效果。
用漂亮的图案代替普通无序列表沉闷的黑点,先用css规则告诉类别属性inventory的无序列表。
ul.inventory
{
list-style : disc url(/images/common/lister2.gig) inside ;
}
list-style : disc url(/images/common/lister2.gig) inside ;
}
他的调用标记:
![](http://www.pqshow.com/uploads/allimg/200911/2009111517031923.gif)
<ul class="inventory">
<li><a href="/angelfish">Angelfish</a>(67 items)</li>
<li><a href="/angeld">Angels/Frogfish</a>(35 items)</li>
<li><a href="/anthias">Angelfish</a>(5526 items)</li>
<li><a href="/basslets">Angelfish</a>(15 items)</li>
<ul>
7.缩写是按照顺时针的顺序.
margin:25px 0 25px 0;
8.行高.
说明:正常行高的150%.
line-height:150%;
好了,最近几天在做项目Login和Main页面的布局与Css,又不是职业美工,边做边学,把有用的东西记录下来与大家分享。搁笔、