**将一个页面划分为逻辑区**
<div></div>
*在页面中要使用<div>,但不能滥用 要为<div>增加id 例如:
增加边框
#elixirs{
border-width:thin;
border-style:solid;
border-color:#007e7e;
}
处理elixirs的宽度:width属性允许你指定元素内容区的宽度,设置宽度有多种不同方法:
1、直接用像素
2、如果使用百分数,那么宽度会计算为元素所在容器宽度的一个百分比(容器可以是、
等)
如果没有设置一个元素的宽度,则默认是auto,auto允许内容填满可用的所有空间
如果没有设置一个元素的宽度,则默认是auto,auto允许内容填满可用的所有空间
设置内边距
padding-right:20px;
padding-left:20px;
padding-bottom:20px;
设置外边距
margin-left:20px;
文本居中
text-align属性会对块元素中的所有内联内容对齐。text-align只能在块元素上设置,如果直接在内联元素上使用则不起作用。
text-align:center;
添加背景图片
background-image:url(images/cock.gif);
background-repeat:repeat-x;
选择子孙的方法
div h2{
color:black;
}
#elixirs h2{
color:black;
}
#elixirs>h2{
color:black;
}
学习快捷方式
padding:0px 20px 30px 20px;(上右下左)
margin:0px 20px 30px 20px;(上右下左)
padding:20px 30px;(上和下 左和右)
border:thin solid #007e7e;(可以采用喜欢的任何顺序)
background:white url(images/lala.gif) repeat-x;(可以采用喜欢的任何顺序)
font:font-style font-variant font-weight font-size/line-height font-family
font-size前面的属性是可选的,可以指定这些属性的任意组合,不过他们必须出现在font-size的前面。
font:small/1.6em Verdana,Helvetica,Arial,sans-serif;
建立内联内容的逻辑分组
<ul>
<li><span class=”cd”>The first song</span></li>
<li><span class=”cd”>The second song</span></li>
<li><span class=”cd”>The third song</span></li>
</ul>
在css中
.cd{
font-style:italic;
}
内联元素上的外边距和内边距与块元素稍有不同,如果一个内联元素四周都增加了外边距,只能看到左边和右边会增加空间
伪类
<a>元素和他的多重人格,根据元素的状态指定样式
a:link{
color:green;
}
a:visited{
color:red;
}
a:hover{
color:yellow;
}
另外还有focus和active.浏览器将焦点放在你的连接上时就是focus状态。有些浏览器允许用户点击tab键访问页面上的所有链接,浏览器访问到某个链接时浏览器就拥有焦点。用户第一次单击一个链接时,就处于active状态。
a:focus{
color: #f37e16;
}
a:active{
color: #f5f21f;
}
层叠
1、收集所有样式表
2、找到所有匹配的申明
3、对所有匹配的规则排序(按照作者、读者、浏览器的顺序)
4、现在按特定性对所有声明排序
5、最后对于冲突的规则,按照他们在各自样式表中出现的顺序进行排序。
计算特定值
000
第一个0:选择器每包含一个id加一分
第二个0:每个伪类或者类加一分
第三个0:一个元素名加一分
然后比较大小