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. Transaction-Mybatis源码

    github地址:https://github.com/dchack/Mybatis-source-code-learn (欢迎star) TransactionFactory 官方文档: 在 MyB ...

  2. 使用epoll实现一个udp server && client

    udp server #!/usr/bin/env python #-*- coding:utf-8 -*- import socket import select import Queue #创建s ...

  3. 部署TiDB集群

    架构图 节点规划 120.52.146.213 Control Machine 120.52.146.214 PD1_TiDB1 120.52.146.215 PD2_TiDB2 120.52.146 ...

  4. javascript中var、let、const的区别

    这几天修改别人的js,发现声明变量有的用var,有的用let,那它们有什么区别呢? javascript中声明变量的方式有:var.let.const 1.var (1)作用域: 整个函数范围内,或者 ...

  5. VS2015 控制台cl编译器全局环境变量配置

    Visual C++的cl.exe编译器是微软推出的编译器 为了可以在CMD里使用cl.exe手工执行编译操作 设置环境变量 PATH C:\Program Files (x86)\Microsoft ...

  6. CentOS下安装Tomcat

    CentOS版本:CentOS-7-x86_64-Minimal-1810 1.安装JDK 详情查看:CentOS下安装JDK-rpm文件.CentOS安装JDK-tar.gz文件 2.下载tomca ...

  7. kafka高可用性集群

    kafka集群并测试其高可用性 介绍 Kafka是由Apache软件基金会开发的一个开源流处理平台,由Scala和Java编写.Kafka是一种高吞吐量的分布式发布订阅消息系统,它可以处理消费者在网站 ...

  8. activiti学习5:开启流程和流程前进

    目录 activiti学习5:开启流程和流程前进 一.流程和任务的关系 二.开启流程 2.1根据流程定义key开启流程 三.查询用户任务 3.1 TaskQuery 四.完成任务 activiti学习 ...

  9. 我瞅瞅源码系列之---drf

    我瞅瞅源码系列之---drf restful规范 从cbv到drf的视图 / 快速了解drf 视图 版本 认证 权限 节流 jwt 持续更新中...

  10. Linux基础(08)信号通信机制

    1.Linux中的信号(有32个)  信号会中断一些函数的阻塞 https://zhidao.baidu.com/question/1766690354480323100.html #define S ...