文章列表
如果同个元素有两个或以上冲突的CSS规则,浏览器有一些基本的规则来决定哪一个非常特殊而胜出。
它可能不像其它那么重要,大部分案例你不需要担心冲突,但大型而且复杂的CSS文件,或有很多CSS文件组成的,可能产生冲突。
选择器一样的情况下后面的会覆盖前面的属性。比如:
Example Source Code [www.52css.com]
p { color: red; }
p { color: blue; }
p元素的元素将是蓝色,因为遵循后面的规则。
然而,你不可能经常用相同的选择器冲突达到目的,当你使用嵌套选择器,合理的冲突来了。比如:
Example Source ...
伪元素吸附在选择上和pseudo classes伪类很像,像这样selector:pseudoelement{property: value;}。有四种方式。
First letters and First lines 首字母和首行
first-letter伪元素作用到元素的第一个字母,first-line作用到元素的顶行。你可以,例如为段落创建一个drop caps和首行加粗。
Example Source Code [www.52css.com]
p:first-letter {
font-size: 3em;
float: left;
}
p:first-li ...
At-rules分装不同的CSS规则,应用在特定场合。
Importing
import@规则引用另外的样式。例如,如果你想添加另外样式到现在的样式,可以这样:
@import url(addonstyles.css);
这很像使用link元素连接CSS到HTML,本质上说有一个内 ...
使用CSS布局非常简单,如果你习惯使用tables布局,可能开始时有点困难,但其实很容易,事实上只是观念的不同。
你需要把网页的每个部分看成独立的块,你可以绝对或相对定位块。
Positioning 定位
positon属性可以指定元素为absolute,relative,static或是fixed。
static是元素默认属性,按HTML出现的先后顺序。
relative比较像static,但元素可以使用top,right,bottom和left设定初始属性。
absolute把元素从HTML里面拉出,一切由它自己决定,在这里,绝对定位元素可以使用top,right,b ...
操作HTML元素的诀窍在于明白它们工作的方法在于没有特定的形式。一些由标签组成的大部分页面可以设定任何样式。浏览器默认的样式里的大部分html元素由字体样式、margin,padding组成,本质上是显示类型。
display属性基本上分为inline,block,和none。
inline就像它的本意——显示为inline的元素为行。strong,anchor锚和em强调元素默认是行。
block元素前后换行。标题和段落元素是块元素。
none,意思不显示元素,在可用性上可以实现漂亮的效果,交替样式或hover效果的高级运用。
设定表现可以更好运用在网页制作上。
E ...
背景图片Background Images有许多属性可以操作。
幸运的是,可以使用background处理所有:
Example Source Code [www.52css.com]
body {
background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;
}
上面合并了下面属性:
Example Source Code [www.52css.com]
background-color出现在前面。
background-image图片的位置。
backg ...
一些CSS属性允许使用一串值代替许多属性,值使用空格分开。
margin,pdding和border-width允许合并margin-top-width, margin-right-width, margin-bottom-width等等,形式像这样:property:top right bottom left;逆时针顺序。
所以下面的:
Example Source Code [www.52css.com]
p {
border-top-width: 1px;
border-right-width: 5px;
border-bottom-width: 10 ...
请你注意一些CSS伪类属性不被所有浏览器支持,但有四个伪类可以安全使用在链接上
伪类像是指定选择器状态或关联选择器的门闩。它们的形式如:selector:pseudo class { property: value; },在选择器和伪属性之间使用冒号。
Example Source Code [www.52css.com]
link 没有点击过的链接
visited以点击过的链接
active获得焦点时的链接(比如在点击时)
hover 鼠标在链接上面
Example Source Code [www.52css.com]
a.snowman:link {
...
Grouping 分组
当许多选择器有同样属性时,可以使用逗号组合它们。
例子:
Example Source Code [www.52css.com]
h2 {
color: red;
}
.thisOtherClass {
color: red;
}
.yetAnotherClass {
color: red;
}
上面的可以写成这样:
Example Source Code [www.52css.com]
h2, .thisOtherClass, .yetAnotherClass
{
color: red;
}
Nesting 嵌套
...
前面的学习我们仅仅使用HTML选择器(在HTML页面里为html标签,如 P)
现在我们学习使用clss和id定义属于自己的选择器。
这样,同样的html元素可以通过class或ID使用不同的表现。
在CSS里,使用点号(.)创建class选择器,使用hash符号(#)创建ID选择器。
例子:
Example Source Code [www.52css.com]
#top {
background-color: #ccc;
padding: 1em
}
.intro {
color: red;
font-weight: bold;
}
...
如果你学完HTML初级教程即可学习CSS初级教程,使用CSS处理HTML样式。
下面的代码覆盖了初级教程的所有方面,保存下面的CSS文件并且在浏览器里观看连接的HTML,你可以明白各个CSS属性的用法。最好的学习方法就是理解作用在HTML上的CSS文件,改变CSS HTML会发生什么变化。
Example Source Code [www.52css.com]
body {
font-family: arial, helvetica, sans-serif;
font-size: 80%;
color: black;
background-color: ...
CSS Borders 边框
边框可以运用到body里的大部分HTML元素。
制作一个元素的边框,你需要border-style边框样式。值可以是: solid, dotted, dashed, double, groove, ridge, inset and outset,具体样式大家可以实际下。
border-width设定宽度,通常使用pixels即单位是px,同样有四边属性:border-top-width, border-right-width, border-bottom-width and border-left-width。
border-color设定边框颜 ...
margin和padding用来隔开元素,margin是隔开元素与外边,padding是隔开元素里边。
例子h2:
Example Source Code [www.52css.com]
h2 {
font-size: 1.5em;
background-color: #ccc;
margin: 1em;
padding: 3em;
}
元素四边可以设置的属性:margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom ...
有一系列属性可以改变网页文字的大小和形状,概要如下:
font-family
文字使用的字体,比如宋体,Times New Roman,Arial等等
这个属性必须详细制定,不能使用偏僻的字体,要使用安全字体(比如arial,verdana和times new roman和宋体),可以同时指定许多字体,只要使用逗号分开即可。这样的用意是,如果用户电脑里没有第一个字体浏览器可以使用后面指定的字体。这非常有用,因为不同的电脑拥有不同的字体。例子font-size: arial,helvetica,pc用户可以使用arial而苹果mac用户可以使用helvetica。
注意:如果字体的 ...
css可以处理16,777,216颜色,可以使用名字、rgb值或十六进制代码。
Example Source Code [www.52css.com]
red红色
等同于
rgb(255,0,0)
等同于
rgb(100%,0%,0%)
等同于
#ff0000
等同于
#f00
有17个预先确定的颜色,它们是:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
olive, orange, purple, red, silver, teal, white, and yellow.
t ...