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. 【翻译】Flink Table Api & SQL — 性能调优 — 流式聚合

    本文翻译自官网:Streaming Aggregation  https://ci.apache.org/projects/flink/flink-docs-release-1.9/dev/table ...

  2. CSS继承控制：inherit、initial和unset

    CSS里有三种常用的属性值继承方式:inherit,initial和unset.我们用一个简单的例子来演示一下: <ul style="color: green;"> ...

  3. c#的BeginInvoke和EndInvoke使用demo

    BeginInvoke方法可以使用线程异步地执行委托所指向的方法.然后通过EndInvoke方法获得方法的返回值(EndInvoke方法的返回值就是被调用方法的返回值),或是确定方法已经被成功调用. ...

  4. JobStorage.Current property value has not been initialized. You must set it before using Hangfire Client or Server API.

    JobStorage.Current property value has not been initialized. You must set it before using Hangfire Cl ...

  5. 利用docker搭建RTMP直播流服务器实现直播

    一.rtmp服务器搭建 环境: centos 7.* 1.先安装docker(省略) 2.下载docker容器 docker pull alfg/nginx-rtmp 3.运行容器(记得打开防火墙端口 ...

  6. linux 使用 Python 画图工具matplotlib 提示display 错误

    import matplotlib.pyplot as plt Traceback (most recent call last): File "<stdin>", l ...

  7. 使用echarts绘制条形图和扇形图

    使用echarts绘制条形图和扇形图 简单举例说明下echarts如何绘制条形图和扇形图 代码示例 <!doctype html> <html lang="en" ...

  8. 字符串A转换到字符串B，只能一次一次转换，每次转换只能把字符串A中的一个字符全部转换成另一个字符，是否能够转换成功

    public class DemoTest { public static void main(String[] args) { System.)); } /** * 有一个字符串A 有一个字符串B ...

  9. linux 压缩文件 查找

    zgrep '20190521155553776237' stdout-20190521.log.gz

  10. 【LEETCODE】67、分治递归，medium&hard级别，题目：215、312

    我被这些题整哭了,你呢??? 日了狗啊...... 好难啊.... 按照这个样子搞,不用找工作了,回家放牛去....... package y2019.Algorithm.divideandconqu ...