专栏首页iOS开发随笔HTML-CSS的三种使用方式

HTML-CSS的三种使用方式

一、HTML标签的简单使用

HTML标签其实是为了展示文档而发明的,而标签的出现是为了满足文档的展示效果。HTML 提供的标签有很多,比如 divspanaimgp 等等,其中 divspan在语义上不表示任何特定类型的内容,适合用在没有任何语义的场景。

图1-1

图1-2

下图的demo就是HTML标签和CSS的简单使用,代码放在Github

图1-3

二、CSS的三种使用方式
  • 1.(最常用)通过 link 的方式引用 CSS 样式,即系外部引入,这种方式需要一个 CSS 文件路径,比如在当前目录下的 CSS 的名字是 day5.css,可以如下引用,通常是一个 CSS 链接地址,这样可以把样式和 HTML 分离,方便维护。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="day5.css">
    <title>CSS的三种使用方式</title>
</head>
<body>
    <h1 class="head">《前端小课》</h1>
    <h2 class="h2Head">一本帮你入门与进阶的前端书</h2>
</body>
</html>
  • 2.(偶尔用一下)内部引入,在 HTML 中的 head 位置添加 style 标签,CSS 样式放到 style 标签中。这种方式把 HTMLCSS 样式放到了一起,如果页面太复杂将导致页面代码太庞大。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS的三种使用方式</title>
    <style>
        #head{
            color: white;
            text-align: center;
            font-size: 30px;
            font-weight: bold;
        }
    </style>
    
</head>
<body>
    <div id="head">给自己一句鼓励的话</div>
    <div id="contents"></div>
    <div id="button" onclick="btnClick()">鼓励自己一下</div>
</body>
</html>
  • 3.(能不用就不用,一般在浏览器调试的时候可能会用到)内联样式:直接用在标签上,只会对一个标签起作用。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS的三种使用方式</title>
</head>

<body>
    <h1>《前端小课》</h1>
    <p style="color: red; font-size: 18px;">给自己一句鼓励的话</p>
</body>

</html>

所以推荐使用第一种方式,方便维护。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Git 学习笔记

    傅_hc
  • Xib、Nib、Storyboard下修改控件边框颜色、大小、圆角

    傅_hc
  • iOS UICollectionView等分有1px缝隙

    傅_hc
  • 零基础学网页开发入门(制作博客案例)适应手机端div+css+js的综合介绍

    html翻译一下:hype text mark language 超文本标记语言

    刘金玉编程
  • salesforce零基础学习(七十二)项目中的零碎知识点小总结(一)

    项目终于告一段落,虽然比较苦逼,不过也学到了好多知识,总结一下,以后当作参考。 一.visualforce标签中使用html相关的属性使用 曾经看文档没有看得仔...

    用户1169343
  • Thymeleaf 引入公共代码页面

    前面写过,写前端页面的时候,尤其是写后台管理系统,每个页面都会遇到一些重复的代码,比如左侧导航栏,头部的信息,前面也做了一些整合,把代码放在了公共的页面,每个页...

    王小婷
  • html中的<!DOCTYPE html>起到什么作用?前端面试经常考到

    相信很多小伙伴都写过html代码,即使是一些刚接触零基础网页编程的小伙伴也是,但是很多人在学习到html较多以后,却不知,在一个网页创建的时候,很多编辑器都会自...

    刘金玉编程
  • web前端入门

    8 = html + css +javascript(jQuery和vue就是js封装的函数而已)

    小闫同学啊
  • 干货!2018年你值得一看的网页设计作品集赏析

    网页设计作品集对网页设计师而言,既是网页门面,也是个人专业素养的体现。那么在作品集设计上万不能掉以轻心。无论是制作一份简约大方还是极具表现力的精良作品集,设计师...

    奔跑的小鹿
  • HTML是什么?

    html就是要告诉浏览器我的某个东西是什么,没错,这就是它的主要功能。html的实质,他就是一种标签,一种人和浏览器交流的标签,我们只有告诉浏览器这是什么,他才...

    公众号php_pachong

扫码关注云+社区

领取腾讯云代金券