您的位置：首页 > Web前端 > CSS

Html设置css的4种方式和css 6种声明方式

2015-02-08 00:13 591 查看
来源：http://www.pdjz.qdedu.net/showarticle.asp?articleid=1959

css 层叠样式表

引入层叠样式表的方法包括：

1，外联式样式表

2，内嵌样式表

3，元素内定

4，导入样式表

外联式样式表

例：<head>

<link rel="stylesheet" href="/css/default.css">

</head>

<body>

....

</body>

</html>

属性：rel 用来说明<link>元素在这里要完成的任务是连接一个独立的css文件。而href属性给出了所要连接css文件的url地址

内嵌式样式表：

例：<html>

<head>

<style type="text/css">

<!--

td{font:9pt;color:red}

.font105{font:10.5pt;color:blue}

-->

</style>

</head>

<body>....</body>

</html>

元素内定

格式：<p style="font-size:10.5pt">

导入式样式表

〈html>

<head>

<style type="text/css">

<!--

@import url(css/home.css);

-->

</style>

<body>

....

</body>

</html>

css的优先级

越接近目标的样式定义优先级越高，高优先级样式将继承低优先级样式的未重叠定义但覆盖重叠的定义

如果4种样式表对同一元素定义了不同的样式，那么他们的优先级顺序从高到低是，元素内定，内嵌样式表，导入样式表，外联样式表。

css结构

例：td{font-size:10.5pt;color:#666666}

css样式包含两个基础部分，

选择符<td>和声明{font-size:10.5pt;color:#666666}

声明也有两部分组成：

属性font-size,color和值10.5pt,#666666

选择符分为6种

1元素选择符

当页面上多个元素的样式相同时，可以将多个元素放在一起定义，中间以逗号分开 例：td,p,li,input,select{font-size:12px;}

2class(类)选择符

例：〈head>

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

<style type="text/css">

<!--

.red{font-size:10.5pt;color:#ff0000}

-->

</style>

</head>

<body bgcolor="#ffffff">

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

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

</body>

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

例：〈head>

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

<style type="text/css">

<!--

h1.red{color:#ff0000}

-->

</style>

</head>

<body bgcolor="#ffffff">

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

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

</body>

3 id选择符

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

例：<body>

<head>

<style type="text/css">

<!--

#select{font-size:18px;color:#0000ff}

-->

</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=""，方便页面脚本语言的调用

4 关联选择符

<body>

<head>

<style type="text/css">

<!--

td p{font-size:18px;color:#0000ff}

-->

</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>所包含文字的样式，只有在两个条件都满足是，样式在会起作用，

5伪类选择符

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

例：

〈html>

<head>

<style type="text/css">

<!--

a:link{color:#000000}

a:visited{color:#cccccc}

a:hover{color:#ff0000}

a:active{color:#ooooff}

-->

</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否则会引起页面上连接颜色混乱

6伪元素选择符

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

例：首行

<html>

<head>

<style>

<!--

p:first-line{color:red;font-size:20pt}

-->

</style>

</hesd>

<body>

<p>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...</p>

</body>

</html>

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

首字

<html>

<head>

<style>

<!--

p:first-letter{color:red;font-size:50pt;float:left;}

-->

</style>

</hesd>

<body>

<p>dfgsadfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdfgsdf...</p>

</body>

</html>

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

css规则

一继承

例：<html>

<head>

<style type="text/css">

<!--

td{font-size:12pt}

p{color:red}

-->

</style>

</hesd>

<body>

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

<tr>

<td align="center">

<p>css规则</p>

</td>

</table>

</body>

</html>

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

二组合

例:td{font-size:12pt}

p1{font-size:12pt}

组合后

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

三层叠

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

<html>

<head>

<style type="text/css">

<!--

red{color:#ff0000 limportant}

-->

</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单位

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航