CSS 在 HTML 中的定义方法

最新推荐文章于 2025-02-26 21:09:33 发布

penwan

最新推荐文章于 2025-02-26 21:09:33 发布

阅读量783

点赞数

分类专栏： CSS 文章标签： css

CSS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了三种在网页中使用CSS的方法：元素内部的CSS、页面头部的CSS及外部的CSS，并详细阐述了各自的语法、示例及优先级。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

 
        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>
       
        <div 
        class 
         = 
        "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"
        >
        @import 
         url(css文件路径)；</style>
       
        说明：
        @impor
        的调用方法可以也可以写在CSS文件中，用来调用其他的CSS
       
        B. 两种方法的区别：
       
        @import
        的调用方法只能在样式文件中或者在style元素中才能正常使用，而在link元素调用的样式文件中依然可以使用
        @import
        来再次调用其他的样式文件
       
        C. 示例：
       
        <link href = 
        "style/mai.css" 
         rel = 
        "stylesheet" 
         type = 
        "text/css"
        />
       
        main.css文件中的代码：
       
        .
        @import 
         url(css1.css);
       
        .main{
       
        border:1px solid #
        666666
        ;margin:100px auto;
       
        font-size:20px;}