CSS 在 HTML 中的定义方法

来源：互联网发布：linux 文件夹权限 777 编辑：程序博客网时间：2024/06/08 13:12

转自：http://my.oschina.net/syc2013/blog/109319

一在网页中使用CSS有3种方法：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
1元素内部的CSS
 
    语法：<元素名称 style = "属性:属性值"></元素名称>
 
    示例：<image src = "images/org.jpg"style = "border:5px solid #333333;width:400px;height:500px" />
 
    说明：该样式定义图片的边框为5px的实线边框，颜色为深灰色，同时定义了图片的大小。
 
 
 2页面头部的CSS
 
    语法：
 
        <style>
        选择符{属性：属性值;}
        </style>
 
    注意：
 
    1) 从页面头部调用CSS是将CSS写在页面的head元素中
 
    2)使用头部调用CSS时，在页面中国必须有相应的调用代码，
 
       a. 类选择符的调用代码:<元素名称 class= "类选择符名称"></元素名称>
 
       b. ID选择符的调用代码: <元素名称 id = "id选择符名称"></元素名称>
 
    示例：
 
        <head>
        <style>
        .font{
            font-size:72px;color:#333333;
            position:absolute;top:50px;left:50px;
            border:2px solid #000;}
        </style>
        </head>
        <body>
        <divclass= "font">头部调用CSS></div>
        </body>
 
 
    3) 外部的CSS
 
    A.  通常有两种写法：
 
    a. 使用link元素调用CSS
 
    语法：<link rel = “stylesheet”href = "css文件路径"type = "text/css"/>
 
    其中rel = "stylesheet"指的是调用的相关文件的样式为样式表文件，type = "text/css"指的是文件的类型为样式表文本
 
    b. 使用@import调用CSS
 
    语法：<style type = "text/css">@importurl(css文件路径)；</style>
 
    说明：@impor的调用方法可以也可以写在CSS文件中，用来调用其他的CSS
 
    B. 两种方法的区别：
 
        @import的调用方法只能在样式文件中或者在style元素中才能正常使用，而在link元素调用的样式文件中依然可以使用@import来再次调用其他的样式文件
 
    C. 示例：
 
        <link href = "style/mai.css"rel = "stylesheet"type = "text/css"/>
 
        main.css文件中的代码：
 
        .@importurl(css1.css);
        .main{
            border:1px solid #666666;margin:100px auto;
            font-size:20px;}

二样式的优先级

在元素中直接定义CSS的优先级最高，其次是在头部调用CSS样式，最后是从外部文件中调用CSS样式

元素中直接定义CSS –> 在头部调用CSS样式 –> 从外部文件中调用CSS样式

0 0