学习不止眼前的教程与笔记 还需实践与创新

搜索

首页>>网站建设>>Javascript>>经验笔记

HTML基础教程(十九) CSS层叠样式表

发布时间:2019-12-26 点击:67

    HTML CSS层叠样式表

    在HTML中,除了元素标签,还有CSS层叠样式表与JS需要学习,本节课我们就来学习一下CSS层叠样式表的使用。

    首先什么是CSS呢,CSS就是(Cascading Style Sheets)层叠样式表的意思,就是用来渲染HTML元素标签的样式的,比如说:元素标签的宽度,高度,大小,背景颜色等。

    一、HTML CSS样式表的定义方式

    1、内联样式:就是前面我们所说的直接在元素标签style属性中定义的方式.

    <p style="background-color:red;">这里是css定义页面背景颜色</p>

    2、内联样式表:在HTML文档的部区域使用

    <html>
    <head>
    <meta charset='utf-8'>
    <title>css样式表</title>
    <style>
    p{
    	background-color:red;
    }
    </style>
    </head>
    <body>
    <p>这里是css定义页面背景颜色</p>
    </body>
    </html>

    3、外部样式表:与前面两种不同的是,外部样式表顾名思义是外部的单独文件,但是我们可以通过link标签来加载该文件来渲染页面,这就意味着你如果有好的样式定义,可以分享该文件给你的小伙伴呦。

    HTML文件代码:

    <html>
    <head>
    <meta charset='utf-8'>
    <link rel="styleheet" href="mystyle.css">
    <title>css样式表</title>
    </head>
    <body>
    <p>这里是css定义页面背景颜色</p>
    </body>
    </html>
    CSS文件代码:
    p{
    	background-color:red;
    }

    其中CSS文件放在HTML的同一目录(如果你熟悉HTML路径的话,可以自定义存放位置),名字为mystyle.css

    以上三种方式的运行结果为下图:

    学习不止眼前的教程与笔记还需实践与创新——小伙伴们块动手试试吧~

赞一个(0)     踩一个(0)    

相关链接

搜索

题库内容推荐

昵称:*
邮箱:
电话:
评论: