CSS学习

熟悉CSS的使用，能够提高页面布局的效率。

CSS的规则

CSS语句由两个主要的部分组成：选择器和声明

插入样式表的方法

插入样式表的方法有三种：
1. 外部样式表
2. 内部样式表
3. 内联样式表
当同一个 HTML 元素被不止一个样式定义时，多重样式将层叠为一个。如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将由优先级高的样式表决定
例如，外部样式表拥有针对 h3 选择器的三个属性：

h3{
    color:red;
    text-align:left;
    font-size:8pt;
}

而内部样式表拥有针对 h3 选择器的两个属性：

h3{
    text-align:right;
    font-size:20pt;
}

假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：
color:red;
text-align:right;
font-size:20pt;

另外使用！important限定的定义优先级最高。
例如在外部样式表中将 h3 选择器的三个属性改为：

h3{
    color:red;
    text-align:left !important;
    font-size:8pt;
}

则h3最终得到的样式是：
color:red;
text-align:left;
font-size:20pt;
虽然内部样式表优先级比外部样式表高，但是外部样式表text-align使用了！important，其优先级变为最高。

隐藏元素

隐藏一个元素可以通过把display属性设置为”none”，或把visibility属性设置为”hidden”。二者的区别是：
- visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
- display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

元素的重叠 z-index

在项目中，我用在做弹出框（将弹出框div的z-index设得比正常页面高）。详细讲解可以参考下面博客。
z-index详解

定位Position

1. static定位： Position的默认值。遵循基本的定位规定（不会受到top, bottom, left, right影响），不能通过z-index进行层次分级。
2. Fixed定位 ：相对于浏览器窗口，即使窗口是滚动的它也不会移动。
3. relative定位 ：相对于自身正常的位置
4. absolute定位 ：相对于最近的父元素

返回 Java EE Web开发系列导航。