01CSS的使用：CSS与html结合方式

输出机器

于 2022-03-09 15:37:59 发布

阅读量94

点赞数

分类专栏： CSS 文章标签： css html webview 开发语言前端

本文链接：https://blog.csdn.net/qq_44974028/article/details/123378286

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

目录结构

实现代码及意思注释

内联样式：样式写在具体的标签中，只对本标签生效

内部样式：样式写在<head></head>标签中，对本文件生效

外部样式：样式写在单独的文件夹中，前提是用<link>标签引入，可以被所有HTML文件引用

<!DOCTYPE html>
<html>
    <head>
        <title>01CSS的使用：CSS与html结合方式</title>
        <!-- 内部样式 -->
        <style>
            #mystyle{
                color: bisque;
                width: 30;
                height: 40;
            }
        </style>
        <!-- 外部样式 -->
        <link rel="stylesheet" type="text/css" href="./CSS/mystyle1.css">
    
    </head>
    <body>
        <!-- 
            CSS的使用：CSS与html结合方式
                1. 内联样式
                        在标签内使用style属性指定css代码
                        如：<div style="color:red;">hello css</div>
                2. 内部样式
                        在head标签内，定义style标签，style标签的标签体内容就是css代码
                         如：
                            <style>
                                #mystyle{
                                    color: bisque;
                                    width: 30;
                                    height: 40;
                                }
                            </style>
                            <span id="mystyle">内部样式表实例</span>
                3. 外部样式
                        定义css资源文件。
                        在head标签内，定义link标签，引入外部的资源文件
                        如：
                            mystyle1.css文件：
                             p{
                                color: #dd1414;
                                font-size: 300%;
                            }
                             <link rel="stylesheet" type="text/css" href="./CSS/mystyle1.css">
                             <p>外部样式表实例</p>

                    注意：
                        3种方式,css作用范围越来越大
                        第3种引入css格式可以写为：
                            <style>
                                @import "css/mystyle1.css";
                            </style>
         -->
         <!-- 内联样式 -->
         <div style="color: aquamarine; height: 20; width: 20;">内联样式表实例</div>

         <!-- 内部样式 -->
         <span id="mystyle">内部样式表实例</span>

         <!-- 外部样式 -->
         <p>外部样式表实例</p>

    </body>
</html>

输出机器

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
01CSS的使用：CSS与html结合方式

目录结构实现代码及意思注释内联样式：样式写在具体的标签中，只对本标签生效内部样式：样式写在<head></head>标签中，对本文件生效外部样式：样式写在单独的文件夹中，前提是用<link>标签引入，可以被所有HTML文件引用<!DOCTYPE html><html> <head> <title>01CSS的使用：CSS与html结合方式</title> ..
复制链接

扫一扫