在html中加入外部css样式,如何引入CSS样式表?
大家好,又见面了,我是你们的朋友全栈君。
CSS用于修饰网页样式,但是,如果希望CSS修饰的样式起作用,就必须在html档中引入CSS样式表。引入样式表的常用方式有三种,即行内式、内嵌式、外链式,具体介绍如下。
1.行内式
行内式也称内联样式,是通过标记的 Istyle属性来设置标记的样式,其基本语法格式如下:内容标记名>
上述语法中,style是标记的属性,实际上任何HTML标记都拥有 style属性,用来设置行内式。属性和属性值的书写规范与Cs样式规则一样,行内式只对其所在的标记及嵌套在其中的子标记起作用。
通常CSS的书写位置是在
头部标记中,行内式却是写在根标记中,例如下面的示例代码,即为行内式CS样式的写法。
使用CSS行内式修饰一级标题的字体大小和颜色
在上述代码中,使用
标记的style属性设置行内式CSS样式,用来修饰一级标题的字体大小和颜色。效果如下图所示。
需要注意的是,行内式是通过标记的属性来控制样式的,这样并没有做到结构与样式分离,所以一般很少使用。
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代码分离为两个或多个文件,实现了将结构和样式完全分离,使得网页的前期制作和后期维护都十分方便。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/159255.html原文链接:https://javaforall.cn
相关文章
- HTML如何加背景图片_css设置背景图片
- 如何制作网页-初学者入门HTML+CSS
- html设置背景图片透明度代码,css设置图片背景透明度[通俗易懂]
- HTML/CSS面试题(收集)[通俗易懂]
- js把HTML转成对象,将js对象转换为html「建议收藏」
- 【罗盘时钟(星空版)—使用html,js,css编写。(附全部源代码+效果)】[通俗易懂]
- html样式表优点,css样式表的使用有哪些优点?
- HTML添加背景图片_html背景图片铺满网页
- 富文本框_html表单输入框对齐
- 每日分享html之两个input搜索框、两个button按钮、一个logo效果
- 通过HTML和CSS设计一个静态网页(练习实例,附完整代码)
- SAP UI5 index.html 根节点的 css 类填充逻辑
- 常用的HTML和CSS(content)特殊字符图标
- 『知识巩固#1』Html、Css基础整理
- BBEdit for Mac(好用的HTML文本编辑器)v14.6.4注册激活版
- 【CSS】课程网站头部制作 ① ( 头部区域测量 | 头部盒子标签结构 | 整体页面背景颜色设置 | LOGO 盒子设置 | 切片工具切图 | LOGO 相关 HTML 结构及 CSS 样式编写 )
- Bear CSS:基于 HTML 文件快速创建基本的 CSS 样式
- HTML&CSS精选笔记_盒子模型详解编程语言
- HTML&CSS精选笔记_HTML与CSS网页设计概述详解编程语言
- html 文本输入框效果详解编程语言
- HTML <tbody> 标签
- HTML <center> 标签
- Linux环境实现HTML文件编辑(linux编辑html)
- CSS操作MySQL探索无可比拟的新空间(css操作mysql)
- MySQL数据库中如何存储和检索带有HTML标签的文本(mysql中html标签)
- PHP压缩html网页代码(清除空格,换行符,制表符,注释标记)
- php压缩HTML函数轻松实现压缩html/js/Css及注意事项
- PHP删除HTMl标签的实现代码
- 如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
- JavaScript改变HTML元素的样式改变CSS及元素属性