在html中加入外部css样式,如何引入CSS样式表?

在html中加入外部css样式,如何引入CSS样式表?CSS用于修饰网页样式,但是,如果希望CSS修饰的样式起作用,就必须在html档中引入CSS样式表。引入样式表的常用方式有三种,即行内式、内嵌式、外链式,具体介绍如下。1.行内式行内式也称内联样式,是通过标记的Istyle属性来设置标记的样式,其基本语法格式如下:内容标记名>上述语法中,style是标记的属性,实际上任何HTML标记都拥有style属性,用来设置行内式。属性和属性值的书写…

大家好,又见面了,我是你们的朋友全栈君。

CSS用于修饰网页样式,但是,如果希望CSS修饰的样式起作用,就必须在html档中引入CSS样式表。引入样式表的常用方式有三种,即行内式、内嵌式、外链式,具体介绍如下。

e701c7178d69d11a6431318fc9b94db8.png

1.行内式

行内式也称内联样式,是通过标记的 Istyle属性来设置标记的样式,其基本语法格式如下:内容标记名>

上述语法中,style是标记的属性,实际上任何HTML标记都拥有 style属性,用来设置行内式。属性和属性值的书写规范与Cs样式规则一样,行内式只对其所在的标记及嵌套在其中的子标记起作用。

通常CSS的书写位置是在

头部标记中,行内式却是写在根标记中,例如下面的示例代码,即为行内式CS样式的写法。

使用CSS行内式修饰一级标题的字体大小和颜色

在上述代码中,使用

标记的style属性设置行内式CSS样式,用来修饰一级标题的字体大小和颜色。效果如下图所示。

071567679c2a2d14c184ebe90f898fcc.png

需要注意的是,行内式是通过标记的属性来控制样式的,这样并没有做到结构与样式分离,所以一般很少使用。

2. 内嵌式

内嵌式是将CSS代码集中写在HTML文档的

头部标记中,并且用< style>标记定义,其基本语法格式如下:

选择器 {属性1:属性值1;属性2:属性值2;属性3:属性值3;}

/style>

上述语法中,

3.外链式

外链式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过标记将外部样式表文件链接到HTML文档中,其基本语法格式如下:

<1ink href=”css文件的路径” type=”text/css” re1=”stylesheet”  />

上述语法中, 标记需要放在

头部标记中,并且必须指定标记的个属性,具体介绍如下。

●href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。

●type:定义所链接文档的类型,在这里需要指定为“text/css”,表示链接的外部文件为CS样式表。

●rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。

外链式是使用频率最高是最实用的CSS样式表,因为它将HTML代码与CSS代码分离为两个或多个文件,实现了将结构和样式完全分离,使得网页的前期制作和后期维护都十分方便。

1577370495235_%E5%AD%A6IT%E5%B0%B1%E5%88%B0%E9%BB%91%E9%A9%AC%E7%A8%8B%E5%BA%8F%E5%91%98.gif

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/159255.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • flake8规范_flake8

    flake8规范_flake8一.概述flake8(代码规范利器)是下面三个工具的封装:1)PyFlakes2)Pep83)NedBatchelder’sMcCabescript二.安装pipinstallflake8三.使用(rd)➜webgit:(develop)✗flake8views.py#检查一个文件views.py:1:1:E265blockcomments…

    2025年11月9日
    3
  • 【高级开发必掌握SQL】SQL优化篇「建议收藏」

    【高级开发必掌握SQL】SQL优化篇「建议收藏」SQL优化

    2022年10月3日
    4
  • jmeter并发测试教程_jmeter怎么进行并发测试

    jmeter并发测试教程_jmeter怎么进行并发测试jmeter是Apache组织开发的基于Java的压力测试工具,用于对软件做压力测试,很多用户使用的时候不知道jmeter怎么进行并发测试,接下来就跟小编一起来看看吧,有需要的小伙伴不要错过!jmeter怎么进行并发测试1、打开jmeter.bat文件,添加线程组,编辑线程数,这里设置100个线程数,循环2次,就是一台机器发送100*2=200个请求。2、点击线程组,右击添加→取样器→HTTP请求…

    2022年9月1日
    6
  • mybatis拦截器详解_短信拦截器

    mybatis拦截器详解_短信拦截器Mybatis拦截器介绍目录前言Interceptor接口注册拦截器Mybatis可拦截方法利用拦截器进行分页  拦截器的一个作用就是我们可以拦截某些方法的调用,我们可以选择在这些被拦截的方法执行前后加上某些逻辑,也可以在执行这些被拦截的方法时执行自己的逻辑而不再执行被拦截的方法。Mybatis拦截器设计的一个初衷就是为了供用户在某些时候可以实现自己的逻辑而不必去动Mybatis…

    2025年10月12日
    3
  • cpu用户态和内核态区别_内核拷贝数据到用户态

    cpu用户态和内核态区别_内核拷贝数据到用户态这里写目录标题内核态与用户态的区别用户态到内核态的切换操作系统需要两种CPU状态:内核态(KernelMode):运行操作系统程序,操作硬件用户态(UserMode):运行用户程序操作系统有三个特权级别:R0、R1、R2和R3。R0相当于内核态,R3相当于用户态,不同级别能够运行不同的指令集合。内核态与用户态的区别用户态的程序运行在3级特权级上,因为这是最低特权级,是普通的用户进程运行的特权级,大部分用户直接面对的程序都是运行在用户态。内核态的程序运行在0级特权级上。处于用户态执行时

    2026年1月19日
    2
  • RSA 加密算法原理简述

    RSA 加密算法原理简述概述本文旨在说明RSA加密算法的原理及实现,而其相关的数学部分的证明则不是本文内容。版权说明著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。作者:Q-WHai发表日期:2016年2月29日本文链接:http://blog.csdn.net/lemon_tree12138/article/details/50696926来源:CSDN…

    2022年6月12日
    26

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号