CSS属性大全（三）

visibility:隐藏标签--hidden；表格可以写成visibility：类名；

display：不显示标签，也不占用控件（none：隐藏；block：显示；inline：两个元素显示同一水平线）

position：相对于浏览器位置（relative ：相对位置；absolute：绝对位置；fixed：固定位置；这是一些常见的位置属性值）

当属性值为absolute的时候：可以调整top bottom left right 也可以用auto

z-index:元素优先级；数值越大优先级越高

clip:rect(0px,60px,200px,0px);设置元素的形状;如果overflow：visible是这个，就不起作用

overflow：设置滚动条（scroll：横向纵向都有；hidden：隐藏；auto：自动；visible：默认）

cursor：更改光标属性（auto、crosshair、default、e-resize、help、move、n-resize、ne-resize、nw-resize、pointer、progress、s-resize、se-resize、sw-resize、text、w-resize、wait）大概有这么多

float：浮动（left、right）

clear:不允许设定的位置浮动元素（left、right、both：左右两侧都不允许浮动、none：默认、inherit：从父元素继承

小案例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>水平菜单(runoob.com)</title> 
<style>
ul
{
	float:left;
	width:100%;
	padding:0;
	margin:0;
	list-style-type:none;
}
a
{
	float:left;
	width:6em;
	text-decoration:none;
	color:white;
	background-color:purple;
	padding:0.2em 0.6em;
	border-right:1px solid white;
}
a:hover {background-color:#ff3300;}
li {display:inline;}
</style>
</head>

<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>

<p>
上面的示例中,我们让ul元素和元素浮动。
li元素将显示为内联元素(没有换行符的元素之前或之后)。这迫使列表为一行。
ul元素的宽度的100%,每一个超链接列表的宽度6 em(当前字体大小的6倍)。
我们添加一些颜色和边界使其更高档。</p>

</body>
</html>

counter-reset：对部分进行编号（"Section 1"、"1.1"、"1.2"）

body {counter-reset:section;}
h1 {counter-reset:subsection;}
h1:before
{
	counter-increment:section;
	content:"提示内容" counter(section) ". ";
}
h2:before 
{
	counter-increment:subsection;
	content:counter(section) "." counter(subsection) " ";
}


	<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML Tutorial</h2>
<h2>CSS Tutorial</h2>

<h1>Scripting tutorials</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>

<h1>XML tutorials</h1>
<h2>XML</h2>
<h2>XSL</h2>

p:first-child i 选择器第一个P元素中的所有i元素

p > i:first-child 选择器匹配p元素中第一个i元素

p:first-letter 选择器设置p元素第一个字体的样式

p:first-line 选择器设置p元素第一行的样式属性加上 font-variant:small-caps 设置第一行文字的第一个字母样式

h1:before {content:url(smiley.gif);} 在第一个元素之前插入一些东西

h1:after {content:url(smiley.gif);}在第一个元素之后插入一些东西

[title]{color:red;} title属性的样式

CSS属性大全（三）

猜你喜欢