HTML&CSS基础-外部样式表

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

一.如下图所示，有2个文件

p {

    color:pink;

    font-size:40px;

}

style.css文件内容

二.demo.html代码

<!DOCTYPE html>

<html>

    <head>

       <title>尹正杰的网页</title>

       <meta charset="utf-8"/>

      <!--

        还可以将样式编写到外部CSS文件中，然后通过link标签将外部的css文件引入到当前页面中

        这样外部文件中的css样式将会应用到当前页面中。

        将CSS样式统一编写到外部的样式表中，有以下特点:

            完全使结构和表现分离，这样使样式表可以在不同页面中使用;

            最大限度的使样式可以进行复用，将样式统一写在样式表中，然后通过link标签引入，可以利用浏览器缓存加快用户访问的速度以提高了用户体验,所以在开发中我们最推荐使用的方式就是外部的CSS文件。

                举个例子:

                    假如浏览器打开了5个页面，而且这5个页面同时都需要访问2M的CSS文件中的样式。

                    如果每个网页都将样式表定义到自己的网页中那么这2M的CSS文件均是相互独立的，每个人都不会相互影响,当用户访问这5个网站时会重复下载5次2M相同的CSS样式代码，这样既占用了多余的带宽也让用户感觉不到网页很快，因此，我们可以将这公共的2M的CSS文件抽取出来，当第一个页面访问了2M的CSS中的样式时会自动下载到本地缓存一段时间，当第二个，第三个，...第五个页面访问时你会发现很快，因为大家都公共用了这2M的CSS文件，无形中节省了8M的带宽呢，而且还增加的用户的体验。

      -->

      <link rel="stylesheet" type="text/css" href="./style.css"/>

    <head>

    <body>

        <!--

            虽说font标签可以将字体设置为红色，但我们并不推荐这样使用，而是推荐使用css来修饰。

        -->

        <h1>我的博客地址:<font color="red" size="7">https://www.cnblogs.com/yinzhengjie/</font></H1>

        <p><<静夜思>></p>

        <p>窗前明月光，疑是地上霜</p>

        <p>举头望明月，低头思故乡</p>

    </body>

</html>

三.浏览器打开以上代码渲染结果

HTML&CSS基础-外部样式表的更多相关文章

  1. CSS基础篇之了解CSS和它的基本属性

    CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...

  2. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  3. CSS基础教程 -- 媒体查询屏幕适配

    响应式布局 Media Query 的使用方法 在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更 ...

  4. (转)第一天　XHTML CSS基础知识 文章出处：标准之路(http://www.aa25.cn/div_css/902.shtml)

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...

  5. css基础-语法篇

    CSS基础 1.css简介 cascading style sheets    汉译层叠样式表,WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制,简单说就是如何修饰网页信息 ...

  6. CSS基础和选择器

    什么是CSS? CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中.也就是说把HTML元素的样式都统一收集起来写在一个地方或 ...

  7. h5 . css入门 2.CSS基础

    CSS基础 学习目标 1.CSS简介 2.CSS语法 3.样式的创建 4.两种引入外部样式表的区别 5.样式表的优先级和作用域 6.CSS选择器 7.选择器的权重 8.浮动属性的简单应用 9.HTML ...

  8. Web开发——CSS基础

    参考: 参考:http://css.doyoe.com/ 参考:http://www.w3school.com.cn/cssref/index.asp 参考:https://www.w3cschool ...

  9. css基础内容

    css基础内容 CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与表现分离 ...

随机推荐

  1. Android 问题解决 HorizontalScrollView显示不全（转）

    原链接:https://www.jianshu.com/p/003adbcaff9d Android 问题解决 HorizontalScrollView显示不全 <HorizontalScrol ...

  2. haproxy转发真实IP给web

    1.在haproxy.cfg中加入下面参数. option forwardfor               #如果后端服务器需要获得客户端真实ip需要配置的参数,必须要放在listen模块下 2.如 ...

  3. java 正则 replace 忽略大小写

    String description = model.getDescription(); if (!"".equals(description)) { //replace(/\&l ...

  4. 自动问答最新研究成果展示（SQuAD）

    地址:https://rajpurkar.github.io/SQuAD-explorer/ Stanford Question Answering Dataset (SQuAD) is a read ...

  5. B+树比B树更适合实际应用中操作系统的文件索引和数据库索引

    B+树比B树更适合实际应用中操作系统的文件索引和数据库索引 为什么选择B+树作为数据库索引结构?   背景 首先,来谈谈B树.为什么要使用B树?我们需要明白以下两个事实: [事实1]不同容量的存储器, ...

  6. Google Adsense(谷歌网站联盟)广告申请指南

    Google AdSense 是一种获取收入的快速简便的方法,适合于各种规模的网站发布商.它可以在网站的内容网页上展示相关性较高的 Google 广告,并且这些广告不会过分夸张醒目.由于所展示的广告同 ...

  7. log4j重复打印的解决方法

    log4j的logger(旧版本称logger)是层次结构的,子logger会继承父logger的属性,appender也是可继承的属性,这常常 容易导致配置错误而引起的log4j输出重复的log信息 ...

  8. [转帖]从0开始的高并发（一）--- Zookeeper的基础概念

    从0开始的高并发(一)--- Zookeeper的基础概念 https://juejin.im/post/5d0bd358e51d45105e0212db 前言 前面几篇以spring作为主题也是有些 ...

  9. 关于一致性hash,这可能是全网最形象生动最容易理解的文档,想做架构师的你来了解一下

    问题提出 一致性hash是什么?假设有4台缓存服务器N0,N1,N2,N3,现在需要存储数据OBJECT1,OBJECT2,OBJECT3,OBJECT4,OBJECT5,OBJECT5,OBJECT ...

  10. 记一次redis主从同步失败

    zabbix告警突然从某个时间点开始提示CPU使用高,网卡流量也一直居高不下. 首先查看redis日志,发现告警时间点redis主节点被重启了,发生了主备切换,并且在日志中发现这么一段 [3081] ...