HTML - CSS

不使用CSS

        <!-- 
                可以将CSS样式编写到元素的style属性当中
                将样式直接编写到style属性中,这种样式我们称为内联样式
                内联样式只对当前的元素中的内容起作用,内联样式不方便复用
                内联样式属于结构与表现耦合,不方便后期的维护,不推荐使用的
                <p style="color:red;font-size:40px;">锄禾日当午,汗滴禾下土</p>
                <p style="color:red;font-size:40px;">谁知盘中餐,粒粒皆辛苦</p>
        -->

使用CSS

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>CSS</title>
        <!--
            内部样式表
            也可以将CSS样式编写到head中的style标签里
            将样式表编写的style标签中,然后通过CSS选择器选中指定元素
            然后可以同时为这些元素一起设置样式,这样可以使样式进一步的复用
            将样式表编写到style标签中,也可以使表现和结构进一步分离它也是我们推荐的使用方式  
            <style type="text/css">
                p{
                    color:red;
                    font-size:40px;
                }
        
            </style>
        -->
        
        <!--
            还可以将样式表编写到外部的CSS文件中,然后通过link标签来将外部的CSS文件引入到当前页面中,
            这样外部文件中的css样式表将会应用到当前页面中。
            
            将CSS样式统一编写到外部的样式表中,完全使结构和表现分离,可以是样式表可以在不同的页面中使用,
            最大限度的使样式可以进行复用,将样式统一写在样式表中,然后通过link标签引入,可以利用浏览器的缓存
            加快用户访问的速度提高了用户体验,所以在开发中我们最推荐使用的方式就是外部的CSS文件
        -->
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <p>谁知盘中餐,粒粒皆辛苦</p>
        <p>谁知盘中餐,粒粒皆辛苦</p>
        <p>谁知盘中餐,粒粒皆辛苦</p>
        <p>谁知盘中餐,粒粒皆辛苦</p>
        <p>谁知盘中餐,粒粒皆辛苦</p>
        <p>谁知盘中餐,粒粒皆辛苦</p>
    </body>
</html>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 7,508评论 0 30
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 8,595评论 0 5
  • 开始学习CSS,为网页添加样式 1、认识CSS样式 CSS全称为“层叠样式表 (Cascading Style S...
    张文靖同学阅读 4,565评论 0 12
  • 引言: 之前老婆推荐了“简书”,一直没有机会下载运用,今天看到老婆在简书里发表一篇文章,为了声援老婆,祭奠第...
    行者通灵阅读 2,701评论 0 2

友情链接更多精彩内容