三种引入CSS的方式

文章目录

    • CSS基础知识
      • 概述
      • CSS的注释
      • 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>

运行效果

在这里插入图片描述

外链式

通过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,这种方式严重违背了解耦结构和样式的原则 将结构和样式再次耦合在一起,但是由于其优先级极高,所以使用较多

background-color:设置背景色;

color:设置字体颜色

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

运行效果
在这里插入图片描述

优先级

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

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

可以自己通过三种方式同时对div标签进行样式渲染,测试下优先级

你可能感兴趣的:(前端,css,前端)