三种引入CSS的方式

这篇具有很好参考价值的文章主要介绍了三种引入CSS的方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

CSS基础知识

概述

Cascading Style Sheet 层叠样式表

前端三大基础之一(Html结构 CSS样式 JS动作)

最早由网景公司(Netscape)提出,在1996年受到w3c的认证,发布了第一版,迄今为止已经是第四版,专门用来负责页面的样式 取代了Html同时渲染结构和样式造成的页面混乱。

使用html同时渲染页面样式和结构的弊端:结构样式耦合在一起,浏览器解析困难,可读性差,毫无代码重用性。

CSS的注释

/**/ 这是css的标准注释,不能使用<!-- -->

CSS的格式

CSS通过选择器(selector)机制从全文精确拿取元素,通过设置名值对的方式来设置样式

sel{  
  样式名:样式值;  
  样式名2:样式值2;  
 }

三种引入CSS的方式

准备几个HTML标签用来测试

<body>
	<h2>我是H2标题</h2>
	<hr>
	<a href="#">我是一个链接</a>
	<span id="test">我是一个span标签</span>
	<div class="test">看看我听谁的?</div>
</body>

内嵌式

直接将css代码书写在head标签内,这是一种优缺点都不是 很明显的书写方式,注意style标签只能书写css代码,不能书写html的标签

<head>
		<meta charset="UTF-8">
		<style>
			h2{
				/* 设置字体 */
				font-family:DFPWaWaW5;
				/*
					设置颜色 此处设置矢车菊蓝
				*/
				color:cornflowerblue;
				/*
					设置字体大小
				*/
				font-size:30px;
			}
		</style>		
</head>

运行效果

三种引入CSS的方式,前端,css,前端

外链式

通过link标签引入一个独立的css文件到本页面
rel:表示引入的是一个样式表
href:表示引入css文件的路径
这种设置 css 的方式被普遍使用,实现了代码重用性

<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="./css/style.css">
</head>

新建style.css文件

/*
    设置默认的a链接样式
*/
a{
    /* 设置颜色 */
    color:deepskyblue;
    /*
        去掉链接自带的下划线
    */
    text-decoration: none;
}

/*
    通过设置伪类来设置某种状态下a链接的样式
    sel:伪类{

    }
    :hover表示鼠标悬停时的样式
*/
a:hover{
    color:orangered;
    /* 字体加粗 */
    font-weight: bolder;
    /* 添加下划线 */
    text-decoration: underline;
}

/*
    设置被点击之后的链接的样式,注意,只要被点击后就会出现
    此样式,刷新页面无效
*/
a:visited{
    color:#663399;
}

运行效果

三种引入CSS的方式,前端,css,前端

行内式

在标签内直接书写css,这种方式严重违背了解耦结构和样式的原则 将结构和样式再次耦合在一起,但是由于其优先级极高,所以使用较多

background-color:设置背景色;

color:设置字体颜色

<span id="test" style="background-color: pink;color:red">我是一个span标签</span>

运行效果
三种引入CSS的方式,前端,css,前端

优先级

当三种引入方式同时对一个元素进行样式的渲染时,优先级问题

优先级从高到低 行内式> 外链式和内嵌式谁放在后面,会覆盖之前出现冲突得样式

可以自己通过三种方式同时对div标签进行样式渲染,测试下优先级文章来源地址https://www.toymoban.com/news/detail-793960.html

到了这里,关于三种引入CSS的方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS||引入方式

    目录 CSS引入方式 行内样式表(行内式) 内部样式表(嵌入式) 外部样式表(链接式) 引入外部样式表 CSS(层叠样式表)是一种用来描述文档样式的样式表语言,它主要用于描述网页的展示样式。在网页开发中,我们通常会用到不同的CSS引入方式来管理和应用样式,包括行

    2024年01月18日
    浏览(37)
  • CSS引入方式

    表示方式 --------预定义的颜色名---------red,green,blue rgb表示法-----红绿蓝三原色,每项取值范围:0-255-----rgb(0,0,0),rgb(255,255,255) 十六进制表示法-----#开头,将数字转换成十六进制表示--------#00000000,#ff000000 元素选择器    /* 元素选择器 */         span{    

    2024年02月10日
    浏览(34)
  • CSS的引入方式有哪些?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月14日
    浏览(38)
  • CSS基础方法——引入方式、属性、基础选择器

    CSS 主要用于设置 HTML 页面中的文本样式(字体、大小、颜色、对齐方式……)、图片样式(宽高、边框样式、边距……)以及版面的布局和外观显示样式。 行内样式 写在标签中,通常不使用,只做了解 内部样式 写在head中,通常使用这种方法,配合选择器进行使用 css在使用

    2024年01月23日
    浏览(39)
  • 【JavaEE】_CSS引入方式与选择器

    目录 1. 基本语法格式 2. 引入方式 2.1 内部样式 2.2 内联样式 2.3 外部样式 3. 基础选择器 3.1 标签选择器 3.2 类选择器 3.3 ID选择器 4. 复合选择器 4.1 后代选择器 4.2 子选择器 4.3 并集选择器 4.4 伪类选择器 选择器+若干属性声明 使用style标签,直接把CSS写到HTML文件中: 注:style标

    2024年02月09日
    浏览(39)
  • 三种方式使用纯 CSS 实现星级评分

    本文介绍三种使用纯 CSS 实现星级评分的方式。每种都值得细品一番~ 五角星取自 Element Plus 的 svg 资源 三种实现方式的 html 结构是一样的 利用 radio + label 的方式实现点击效果;将 label 的 for 属性保持和 radio 的 id 一致,并将 radio 框隐藏,这样点击 label 就是点击 radio 了; la

    2024年03月14日
    浏览(41)
  • 【CSS】文字描边的三种实现方式

    text-shadow –webkit-text-stroke svg MDN text-shadow 代码 用 text-shadow 实现八个方向的文字阴影。 优缺点 优点 兼容性好 缺点 文字边缘会有锯齿。 如上图,当文字很大时,尤其明显。因为我们只设置了8个方向的阴影,这些方向交界处容易出问题。 文字必须设置颜色 如果我们把文字设

    2024年02月02日
    浏览(57)
  • CSS的三种链接方式(内联式、嵌入式、外部式)

    其实就是用html中style属性 嵌入式css样式,就是可以把css样式代码写在style type=“text/css”/style标签之间。 (样式一多,内联式就很繁杂,不易于阅读和维护,这没法发挥CSS的优势了) 外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“

    2024年02月06日
    浏览(56)
  • web前端html+css页面内容的六种隐藏方式

    一、使用透明度 语法:opacity:0 注意:元素消失,但是还会占据空间,只是视觉看不出来   二、使用display 语法:display:none 注意:元素消失,不会占据空间   三、scale 缩放 语法:transform:scale(0)    值大于1放大,小于1缩小 注意:元素消失,但是还会占据空间   四、使用vis

    2024年02月08日
    浏览(53)
  • 【CSS】CSS 特性 ( CSS 优先级 | 优先级引入 | 选择器基本权重 )

    定义 CSS 样式时 , 可能出现  多个 类型相同的 规则   定义在 同一个元素上 , 如果 CSS 选择器 相同  ,  执行 CSS 层叠性  , 根据  就近原则  选择执行的样式 , 如 : 出现两个 div 标签选择器 , 都设置 color 文本颜色 ; 如果 CSS 选择器 不同 ,  则需要考虑 CSS 优先级 问题 ,  需要计

    2024年02月10日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包