CSS学习3

样式表

一、内部样式表

在html内部成为内部样式表,用style标签定义。

可以放在html任何地方,包括html标签外部。

html 复制代码
<html>
	<head>
		<style text="text/css"> 
			/*选择器{属性:值;}*/
			div {
				color: red;
				}
		</style>
	</head>
	<body>
		<div>1234</div>
	</body>
</html>

二、行内样式表(内联样式)

通过style标签设置属性。

<标签名 style="属性:值;"> </标签名>

行内样式表适合于样式比较少的情况。

html 复制代码
<html>
	<head>
		
	</head>
	<body>
		<div style="color:red;">1234</div>
	</body>
</html>

三、外部样式表(外链样式)

建立后缀名为.css的文件,在html里用link链接。

link是一个单标签

html 复制代码
<html>
	<head>
		<link rel="stylesheet" href="s.css"/>
	</head>
	<body>
		<div>1234</div>
	</body>
</html>

总结

  1. 行内样式表权重高;控制标签少;
  2. 内部样式表权重最高;
  3. 外部样式表完全实现结构与样式分离,实现了结构化,使用最多。
相关推荐
Chef_Chen2 分钟前
从0开始学习机器学习--Day19--学习曲线
人工智能·学习·机器学习
Marry1.06 分钟前
uniapp背景图用本地图片
前端·uni-app
夏河始溢11 分钟前
一七八、Node.js PM2使用介绍
前端·javascript·node.js·pm2
记忆深处的声音12 分钟前
vue2 + Element-ui 二次封装 Table 组件,打造通用业务表格
前端·vue.js·代码规范
陈随易13 分钟前
兔小巢收费引发的论坛调研Node和Deno有感
前端·后端·程序员
熊的猫27 分钟前
webpack 核心模块 — loader & plugins
前端·javascript·chrome·webpack·前端框架·node.js·ecmascript
速盾cdn34 分钟前
速盾:vue的cdn是干嘛的?
服务器·前端·网络
四喜花露水1 小时前
Vue 自定义icon组件封装SVG图标
前端·javascript·vue.js
前端Hardy1 小时前
HTML&CSS: 实现可爱的冰墩墩
前端·javascript·css·html·css3
怀旧6661 小时前
spring boot 项目配置https服务
java·spring boot·后端·学习·个人开发·1024程序员节