html 属性大全

来源：互联网发布：sql server 2008r2 编辑：程序博客网时间：2024/06/05 04:31

零基础学HTML语言零基础学HTML语...零基础学HTML语...-->

</style>

</head>

<body bgcolor="#ffffff">

<p class="red">
士大夫井冈山地方官
</p>

<p>
九连环离开计划
</p>

</body>

还有一种方法就是限定可以应用它的页面元素

例：
〈
head>

<title>.....</title>

<style type="text/css">



</style>

</head>

<body bgcolor="#ffffff">

<p class="red">
士大夫井冈山地方官
</p>

<h1 class="red">
九连环离开计划
</h1>

</body>

3 id
选择符


与
class
选择附类似，只是把
'.'
换成
'#'

例：
<body>

<head>

<style type="text/css">



</style>

</head>

<body>

<table width="250" border="1" height="50">

<tr>

<td align="center" id="select">id
选择符
</td>

</tr>

</table>

</body>

</html>

我们看到在调用ID选择附时与CLASS选择附类似，只是将class=""换成了id=""，方便页面脚本语言的调用关联选择符

<body>

<head>

<style type="text/css">



</style>

</head>

<body>

<table width="250" border="1" height="50">

<tr>

<td align="center"><p>
关联选择符
</p></td>

</tr>

</table>

<p>
关联选择符
</p>

</body>

</html>

我们设定了在元素中
<td>
的元素
<p>
所包含文字的样式，只有在两个条件都满足是，样式在
会起作用，

伪类选择符


是只能用在
css
选择符里，而不能用在
html
代码中的选择符

例：

〈
html>

<head>

<style type="text/css">



</style>

</head>

<body>

<p><a href="#">
关联选择符
</a><p>

<p><a href="#">
关联选择符
</a><p>

<p><a href="#">
关联选择符
</a><p>

<p><a href="#">
关联选择符
</a><p>

〈
/body>

</html>

正确的顺序是
a:link\a:visited\a:hover
否则会引起页面上连接颜色混乱

伪元素选择符


与伪类选择符定义类似，目前被大多数浏览器支持的有两个：首行伪元素（
first-line
）和首
字符伪元素
(first-letter)
是用来实现首行大写和首行下沉效果的

例：首行

<html>

<head>

<style>



</style>

</hesd>

<body>

<p>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...</p>

</body>

</html>

长度随浏览器窗口大小而改变

首字

<html>

<head>

<style>



</style>

</hesd>

<body>

<p>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...</p>

</body>

</html>

以上两种都只能应用于块状元素上

css
规则

1.
继承


例：
<html>

<head>

<style type="text/css">



</style>

</hesd>

<body>

<table width="300" border="1" height="150">

<tr>

<td align="center">

<p>css
规则
</p>

</td>

</table>

</body>

</html>

<p>
为最高级
<td>
次一级两种
css
用在一个属性元素上，相同的覆盖，不同的继承，

2.
组合


例
:td{font-size:12pt}

p1{font-size:12pt}

组合后


td,.p1{font-size:12pt}

3.
层叠


在样式里定义过后，在表格属性中又定义一次

<html>

<head>

<style type="text/css">



</style>

</hesd>

<body>

<table width="300" border="1" height="150">

<tr>

<td align="center" style="color:#0000ff" class="red">
决撒地方官
</td>

</tr>

</table>

</body>

</html>

css
单位

分四大类：

1
长度单位


数值可以是整数，小数，正数，负数，
0
，后加单位（负值不要轻易使用）

换算关系：


1in(
英寸
)=6pc(
派
)

1in(
英寸
)=72pt(
磅
)

1in(
英寸
)=2.54(
厘米
)

1cm(
厘米
)=10mm(
毫米
)

1cm(
厘米
)=0.3937(
英寸
)

1pt(
磅
)=1/72in(
英寸
)=0.2478mm(
毫米
)

1pc(
派
)=1/6in(
英寸
)=
我国新四号铅字的尺寸

2
百分比单位

3
颜色单位

4 url
单位

div
属性

color : #999999

文字颜色

font-family :
宋体

文字字型

font-size : 10pt
文字大小


font-style:itelic
文字斜体育

font-variant:small-caps
小字体

letter-spacing : 1pt
文字间距

line-height : 200%
设定行高

font-weight:bold
文字粗体

vertical-align:sub
下标字

vertical-align:super
上标字

text-decoration:line-through
加
?h
除线

text-decoration:overline
加顶线

text-decoration:underline
加底线

text-decoration:none ?h
除连接底线

text-transform : capitalize
首字大写

text-transform : uppercase
英文大写

text-transform : lowercase
英文写

text-align:right
文字
*
右对齐

text-align:left
文字
*
左对齐

text-align:center
文字置中对齐


这些是一些简单的文字效果，可以应用到
css
的页面中。

背景

background-color:black
背景颜色


background-image : url(image/bg.gif)
背景图片

background-attachment : fixed
固定背景

background-repeat : repeat
重复排列
-
网页预设

background-repeat : no-repeat
不重复排列

background-repeat : repeat-x
在
x
轴重复排列

background-repeat : repeat-y
在
y
轴重复排列

background-position : 90% 90%
背景图片
x
与
y
轴的位置

链接

A
所有超连接

A:link
超连接文字格式


A:visited
浏览过的连接文字格式

A:active
按下连接的格式

A:hover
鼠标移至连接

边框

border-top : 1px solid black
上框


border-bottom : 1px solid #6699cc
下框

border-left : 1px solid #6699cc
左框

border-right : 1px solid #6699cc
右框

border: 1px solid #6699cc
四边框

虚线

<TEXTAREA STYLE="border:1px dashed pink">
实线

<TEXTAREA STYLE="border:1px solid pink">

0 0