CSS三:CSS的三种引入方式
CSS的引入方式共有三种:行内样式、内部样式表、外部样式表。
一、行内样式
使用style属性引入CSS样式。
示例:
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>
实际在写页面时不提倡使用,在测试的时候可以使用。
例如:
<!DOCTYPE> <html> <head><meta charset="utf-8" /><title>行内样式</title> </head> <body><!--使用行内样式引入CSS--><h1 style="color:red;">Leaping Above The Water</h1><p style="color:red;font-size:30px;">我是p标签</p> </body> </html>
二、内部样式表
在style标签中书写CSS代码。style标签写在head标签中。
示例:
<head>
<style type="text/css">
h3{
color:red;
}
</style>
</head>
例如:
<!DOCTYPE> <html> <head><meta charset="utf-8" /><title>内部样式表</title><!--使用内部样式表引入CSS--><style type="text/css">div{background: green;}</style> </head> <body><div>我是DIV</div> </body> </html>
三、外部样式表
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表,有两种方式:链接式、导入式。
语法:
1、链接式
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
2、导入式
<style type="text/css">
@import url("css文件路径");
</style>
例如:
<!DOCTYPE> <html> <head><meta charset="utf-8" /><title>外部样式表</title><!--链接式:推荐使用--><link rel="stylesheet" type="text/css" href="css/style.css" /> <!--导入式--><style type="text/css">@import url("css/style.css");</style> </head> <body><ol><li>1111</li><li>2222</li></ol> </html>
链接式和导入式的区别
<link>
1、属于XHTML
2、优先加载CSS文件到页面
@import
1、属于CSS2.1
2、先加载HTML结构在加载CSS文件。
四、CSS中的优先级
1、样式优先级
行内样式>内部样式>外部样式(后两者是就近原则)
例如:
行内样式和内部样式比较优先级:
<!DOCTYPE> <html> <head><meta charset="utf-8" /><title>行内样式和内部样式表的优先级</title><!--内部部样式表--><style type="text/css">p{color: blue;}</style> </head> <body><!--行内样式--><p style="color: red;">我是p段落</p> </html>
浏览器运行效果:
结论:行内样式优先级高于内部样式表。
内部样式表和外部样式表比较优先级:
a、内部样式表在外部样式表上面
<!DOCTYPE> <html> <head><meta charset="utf-8" /><title>内部样式表和外部样式表的优先级</title><!--内部部样式表--><style type="text/css">p{color: blue;}</style><!--外部样式表--><link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body><p>我是p段落</p><div>我是div</div><ol><li>1111</li><li>2222</li></ol> </html>
浏览器运行效果:
b、外部样式表在内部样式表上面
<!DOCTYPE> <html> <head><meta charset="utf-8" /><title>内部样式表和外部样式表的优先级</title><!--外部样式表--><link rel="stylesheet" type="text/css" href="css/style.css" /> <!--内部部样式表--><style type="text/css">p{color: blue;}</style> </head> <body><p>我是p段落</p><div>我是div</div><ol><li>1111</li><li>2222</li></ol> </html>
浏览器运行效果:
结论:内部样式表和外部样式表使用就近原则,即谁写在下面以谁为准。
注意:导入式和链接式的优先级也是使用就近原则。
2、选择器优先级
优先级:ID选择器>类选择器>标签选择器
<!DOCTYPE> <html> <head><meta charset="utf-8" /><title>选择器的优先级</title><style type="text/css">#a{color: green;}.b{color: yellow;}h2{color: red;}</style> </head> <body><h2>111</h2> <!--红色--><h2 id="a" class="b">222</h2> <!--绿色--><h2 class="b">333</h2><!--黄色--> </html>
浏览器运行效果:
CSS三:CSS的三种引入方式相关推荐
- html之CSS设计(四种引入方式、各种选择器)
文章目录 一.CSS简介 二.四种引入方式 三.CSS选择器 四.练习代码 本文主要介绍一下CSS的基本操作,四中引入方式和选择器.属性选择器的使用 一.CSS简介 1.介绍: 也叫层叠样式表,用来控 ...
- 006 CSS三种引入方式
CSS三种引入方式 一.三种方式的书写规范 1.行间式 <div style="width: 100px; height: 100px; background-color: red&q ...
- 简述css样式的三种引入html的方式,css-1,css的三种引入方式 基本选择器
css三种引入方式 和四种基本选择器 /*内接样式*/ /*1 选择器 选中的是 '共性'*/span{color:green;font-size:30px; } /*组合选择器*/ul,ol{lis ...
- css三种引入方式以及其优先级的说法
css 三种引入方式 方式一:行间式 1.在标签头部的style属性内 2.属性值满足css语法 3.属性值用key:value形式赋值,value具有单位 4.属性值之间用 分号 : ...
- css的三种引入方式
css三中引入方式: 行间样式>内部样式=外部样式(内部样式和外部样式优先级相同,文档后面的会覆盖前面的) <!DOCTYPE html> <html> <head ...
- CSS的三种引入方式:外部样式、内部样式和行内样式
CSS的三种引入方式:外部样式.内部样式和行内样式 外部样式 链接式:link标签 导入式:@import 链接式与导入式的区别 内部样式 行内样式 样式优先级 外部样式 即CSS代码保存在外部,HT ...
- css三种引入方式与标签选择器
目录 css三种引入方式 选择器 标签选择器: class选择器: id选择器: 后代选择器: 子代选择器: 组合选择器: 通配符选择器: css三种引入方式 1.行间样式:权重最高1000,在标签的 ...
- CSS的三种引入方式与JS的三种引入方式
CSS的三种引入方式 前端三剑客分为html,css,js, html作为骨架,楼体是观看者看到的第一元素,而css和js是美化并增加功能的肉体羽毛或者楼体工装,肉体羽毛需要安装到骨架上,才能使整体完 ...
- CSS3基础(基础认知,选择器,字体属性,文本属性,CSS 的三种引入方式)
CSS3基础 1. 基础认知 1.1 CSS 简介 CSS 的使用场景是什么? 美化网页,布局页面 CSS 的中文名称是什么? 层叠/级联样式表(Cascading Style Sheets) CSS ...
- css样式 三种引入方式 选择器 常用属性:背景属性 字体属性 边框属性 内间距 外间距 盒子模型
一.CSS简介 1.什么是css 重叠样式表 主要是负责标签的样式 美化页面 一个网页分三大部分 结构层: 主要由html负责 负责页面的结构 表现层: 主要由css负责 页面的展示样式 美化页面 行 ...
最新文章
- 视觉进阶 | 用于图像降噪的卷积自编码器
- 29.进程和线程的区别
- 【Python】透视表、统计表、汇总表、报表
- MyBatis学习总结(16)——Mybatis使用的几个建议
- 深入浅出Node.js(八):Connect模块解析(之二)静态文件中间件
- JAVA编译时出现的错误提示
- Linux 中设置环境变量的三种方法
- 深入探讨JavaScript函数
- 使用Web API和React创建用户注册和登录
- python基础(十):异常和断言
- 专题四——线段树、树状数组
- 微信小程序生成海报图片 小程序生成海报教程
- ICP算法详解——我见过最清晰的解释
- 仿生蛇类机器人 特点_仿生蛇机器人
- map iterator it 的用法
- linux平台使用yum安装mysql
- 《Adobe Premiere Pro CS4经典教程》——复习
- 介绍一下openkylin(开放麒麟),优麒麟和统信UOS
- 高等代数 具有度量的线性空间(第10章)2 实内积空间
- [web面试必备]深入浅出HTTP协议