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. java自定义jar包让jemeter使用

    背景:可能在做定义化的要求上,jmeter原有的jar包,已经不能满足我们,就需要自己写一个方法,以下就是写入的一个模拟post的请求,在jmeter中使用的案例 一:写代码 1.代码中的有两个包,原 ...

  2. docker 国内镜像加速

    CentOS7 对于使用 systemd 的系统,请在 /etc/docker/daemon.json 中写入如下内容(如果文件不存在请新建该文件): {"registry-mirrors& ...

  3. FFmpeg 的bug

    发现一个ffmpeg 的bug, 我用老版本的ffmpeg解码播视频,对同样的视频,音频部分得到的是6通道,一直有杂音 周末呢换了新版本的ffmpeg4.2的库,得到是4,6,8三个通道在切换,我修改 ...

  4. Web API之Web Components

    本文参考<你的前端框架要被web组件替代了>. 于2011年面世的Web Components是一套功能组件,让开发者可以使用 HTML.CSS 和 JavaScript 创建可复用的组件 ...

  5. Gerrit - Gerrit与GitLab集成

    1 - 简介 虽然Gerrit 本身提供 Code Review和 Git 仓库的两大功能,但实际上很多项目用的是其他的Git仓库,例如GitLab和GitHub. 一般情况下,Gerrit位于最终代 ...

  6. openstack集群访问外部服务出现访问失败

    场景描述: openstack私有云中的容器服务A(部署在openshift上)需要通过http访问阿里云中的B服务,中间需要经过openstack的nat网关,以及阿里云的lb.但在访问时发现访问失 ...

  7. 防火墙阻止了虚拟机与主机之间互相ping通解决方案

    1. 打开WIN10防火墙,选择高级设置 2.入站规则 3.找到配置文件类型为“公用”的“文件和打印共享(回显请求 – ICMPv4-In)”规则,设置为允许. 如果上面步骤没有问题还ping不通,可 ...

  8. MQTT的Res接口发布消息

    MQTT(这里采用的V2版本)发布消息的常见方法: 1.通过MQTT客户端连接MQTT服务器,建立长连接,通过接口发布消息 最常见的客户端: <dependency> <groupI ...

  9. XML中的XPATH和DTD

    大家好,乐字节小乐又来了,上次给大家说道的是XML解析,这次接着讲述XML文档中的语言:XPATH.DTD 一.先来说说XPATH 1.XPATH 概念 XPath 是一门在 XML 文档中查找信息的 ...

  10. 如何修改通过Anaconda安装的jupyter notebook的工作目录

    通过Anaconda安装jupyter notebook,对新手来说是一个非常明智的选择,可以避免很多不必要的麻烦! jupyter notbook默认情况下的工作目录是c:\user\...,接下来 ...