分类： CSS

长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。
1、像素
像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单[……]

继续阅读

盒模型代码简写

还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。具体应用在margin和padding的例子如下：
[css]
margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/
[/css]
通常有下面三种缩写方法:
1、如果top、right、bottom、left的值相同，如下面代码：
[css]
margin:10px 10px 10px 10px;
[/css]
可缩写为：
[css]
margin:10px;
[/css]
[……]

继续阅读

清楚了CSS 盒模型的基本概念、 盒模型类型， 我们就可以深入探讨网页布局的基本模型了。布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。
CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。
在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）
[……]

继续阅读

盒模型–边框

盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框：
[css]
div{
border:2px solid red;
}
[/css]
上面是 border 代码的缩写形式，可以分开写：
[css]
div{
border-width:2px;
border-style:solid;
border-color:red;
}
[/css]
[……]

继续阅读

在介绍CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。
常用的块状元素有：
[html]
<div>、<p>、<h1>…<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
[/html]
常用的内联元素有：
[html]
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
[/html]
常用的内联块状元素有：
[html]
<img>、<input>
[/html]
[……]

继续阅读

文字排版
[css]
font-weight:bold; 粗体
font-style:italic; 斜体
text-decoration:underline;下划线
text-decoration:line-through;删除线
[/css]

[……]

继续阅读

权值的规则
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：
[css]
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
[/css]
注意：还有一个权值比较特殊–继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。

[……]

继续阅读