第 2 章 CSS 样式基本知识
来源:互联网 发布:tw域名 编辑:程序博客网 时间:2024/05/21 14:07
- 内联式 css 样式直接写在现有的 HTML 标签中
- 嵌入式 css 样式写在当前的文件中
- 外部式 css 样式写在单独的一个文件中
- 三种方法的优先级
内联式 css 样式,直接写在现有的 HTML 标签中
CSS 样式可以写在哪些地方呢?从 CSS 样式代码插入的形式来看基本可以分为以下 3 种:内联式、嵌入式和外部式三种。这一小节先来讲解内联式。
内联式 css 样式表就是把 css 代码直接写在现有的 HTML 标签中,如下面代码:
<p style="color:red">这里文字是红色。</p>
并且 css 样式代码要写在style=" "
双引号中,如果有多条 css 样式代码设置可以写在一起,中间用分号隔开。如下代码:
<p style="color:red;font-size:12px">这里文字是红色。</p>
嵌入式 css 样式,写在当前的文件中
嵌入式 css 样式,就是可以把 css 样式代码写在<style type="text/css"></style>
标签之间。如下面代码实现把<span>
标签中的文字设置为红色:
<style type="text/css">span{color:red;}</style>
嵌入式 css 样式必须写在<style></style>
之间,并且一般情况下嵌入式 css 样式写在<head></head>
之间。
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>嵌入式css样式</title><style type="text/css">span{ color:blue;}</style></head><body> <p>慕课网,<span>超酷的互联网</span>、实践体验;<span>服务及时贴心</span>快速成为技术高手</p></body></html>
外部式 css 样式,写在单独的一个文件中
外部式 css 样式(也可称为外联式)就是把 css 代码写一个单独的外部文件中,这个 css 样式文件以“.css”为扩展名,在<head>
内(不是在<style>
标签内)使用<link>
标签将 css 样式文件链接到 HTML 文件内,如下面代码:
<link href="base.css" rel="stylesheet" type="text/css" />
注意:
- css 样式文件名称以有意义的英文字母命名,如 main.css。
rel="stylesheet" type="text/css"
是固定写法不可修改。<link>
标签位置一般写在<head>
标签之内。
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>嵌入式css样式</title><link href="style.css" rel="stylesheet" type="text/css" /></head><body> ...</body></html>
三种方法的优先级
有的小伙伴问了,如果有一种情况:对于同一个元素我们同时用了三种方法设置 css 样式,那么哪种方法真正有效呢?
- 使用内联式 CSS 设置“超酷的互联网”文字为粉色。
- 然后使用嵌入式 CSS 来设置文字为红色。
- 最后又使用外部式设置文字为蓝色( style.css 文件中设置)。
但最终你可以观察到“超酷的互联网”这个短词的文本被设置为了粉色。因为这三种样式是有优先级的,记住他们的优先级:内联式 > 嵌入式 > 外部式
但是嵌入式>外部式有一个前提:嵌入式 css 样式的位置一定在外部式的后面。如右代码编辑器就是这样,<link href="style.css" ...>
代码在<style type="text/css">...</style>
代码的前面(实际开发中也是这么写的)。感兴趣的小伙伴可以试一下,把它们调换顺序,再看他们的优先级是否变化。
其实总结来说,就是–就近原则(离被设置元素越近优先级别越高)。
但注意上面所总结的优先级是有一个前提:内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下。
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>嵌入式css样式</title><link href="style.css" rel="stylesheet" type="text/css"><style type="text/css">span{ color:red;}</style></head><body> <p>概述<span style="color:blue ; font-size:16px">超酷的互联网</span>、IT技术免费学习平台,创新的网络一站式学习、实践体验;服务及时贴心,内容专业、有趣易学。专注服务互联网工程师快速成为技术高手!</p></body></html>
style.css
span{ color:blue;}
- 第 2 章 CSS 样式基本知识
- 第七章 CSS样式基本知识
- css样式表基本知识
- CSS样式基本知识
- CSS样式基本知识
- CSS样式基本知识
- CSS样式基本知识
- CSS样式基本知识
- CSS样式基本知识
- CSS样式基本知识
- CSS样式基本知识,添加样式,
- CSS——NO.2(CSS样式的基本知识)
- 【CSS笔记二】CSS样式基本知识
- HTML第九节(css样式基本知识)
- Web开发之CSS样式基本知识
- 第2章 Swing的基本知识
- 第1章 基本知识
- 7. CSS样式基本知识与选择器、继承、层叠和特殊性
- st的输入输出模式
- Makefile 管理工具 — Automake and Autoconf
- RecyclerView动画
- Android 开发一些好用的第三方包
- Swift FlatMap or Map
- 第 2 章 CSS 样式基本知识
- html行级元素与块级元素的比较
- JSP的9个内置对象
- 基于xml配置springmvc
- android之播放多媒体文件一(播放音频)
- SpringMVC深度探险(三) —— DispatcherServlet与初始化主线
- 结构体数组中
- EditText中imeOptions属性使用及设置无效解决
- WPF动画结束后的行为方式