CSS样式基本知识

本是古典何须时尚 2022-06-14 00:40 279阅读 0赞

## 1 内联式css样式，直接写在现有的HTML标签中 ##

CSS样式可以写在哪些地方呢？从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。这一小节先来讲解内联式。

`内联式`css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：

<p style="color:red">这里文字是红色。</p>

注意要写在元素的开始标签里，下面这种写法是错误的：

<p>这里文字是红色。</p style="color:red">

并且css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码：

<p style="color:red;font-size:12px">这里文字是红色。</p>

## 2 嵌入式css样式，写在当前的文件中 ##

现在有一任务，把右侧编辑器中的“超酷的互联网”、“服务及时贴心”、“有趣易学”这三个短词文字字号修改为18px。如果用上节课我们学习的内联式css样式的方法进行设置将是一件很头疼的事情（为每一个<span>标签加入sytle="font-size:18px"语句），本小节讲解一种新的方法嵌入式css样式来实现这个任务。

嵌入式css样式，就是可以把css样式代码写在<style type="text/css"></style>标签之间。如下面代码实现把三个<span>标签中的文字设置为红色：

<style type="text/css">
    span{
    color:red;
    }
    </style>

嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。如右边编辑器中的代码。

## 3 外部式css样式，写在单独的一个文件中 ##

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“`.css`”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：

`<link href="base.css" rel="stylesheet" type="text/css" />`

注意：

(1) css样式文件名称以有意义的英文字母命名，如 main.css。

(2) rel="stylesheet" type="text/css" 是固定写法不可修改。

(3) <link>标签位置一般写在<head>标签之内。

## 4 三种方法的优先级 ##

有的小伙伴问了，如果有一种情况：对于同一个元素我们同时用了三种方法设置css样式，那么哪种方法真正有效呢？在右边编辑器就出现了这种情况

(1) 使用`内联式`CSS设置“超酷的互联网”文字为`粉色`。

(2) 然后使用`嵌入式`CSS来设置文字为`红色`。

(3) 最后又使用`外部式`设置文字为`蓝色`（style.css文件中设置）。

但最终你可以观察到“超酷的互联网”这个短词的文本被设置为了`粉色`。因为这三种样式是有优先级的，记住他们的优先级：`内联式 > 嵌入式 > 外部式`

但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样，<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面（实际开发中也是这么写的）。感兴趣的小伙伴可以试一下，把它们调换顺序，再看他们的优先级是否变化。

其实总结来说，就是`--就近原则（离被设置元素越近优先级别越高）`。

发表评论取消回复

表情：

评论列表（有 0 条评论，279人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS文本样式基本设置--小结

一、分类 1. text-indent 首行缩进，单位em 1. text-align 文本对齐方式，left,center,right 1. text-dec

- 日理万妓/ 2024年03月27日 16:39/ 0 赞/ 100 阅读

相关 css基本知识

CSS的使用：CSS与html三种结合方式 1.内联样式 2.内部样式 3.外部样式 <link rel="stylesheet" href="css/

不念不忘少年蓝@/ 2022年09月04日 07:50/ 0 赞/ 88 阅读

相关 css样式图片body,图片样式的使用-基本介绍-CSS(016)

在css中，对于图片的大小，我们使用width和height两个属性来定义。语法： width:像素值； height:像素值；示例代码：图片大小 img \

秒速五厘米/ 2022年09月02日 14:57/ 0 赞/ 192 阅读

相关 HTML+CSS的基本知识

1.HTML的最基本知识开头文档的声明: <! DOCTYPE html PUBLIC ""-//W3C/DTD XHTML 1.0 TRAN

「爱情、让人受尽委屈。」/ 2022年08月07日 13:46/ 0 赞/ 176 阅读

相关 CSS样式基本知识

1 内联式css样式，直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢？从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。这一小

本是古典何须时尚/ 2022年06月14日 00:40/ 0 赞/ 280 阅读

相关 css的基本使用-文本样式

文字样式字体定义元素内文字以什么字体来显示 font-family：字体名|字体集多个字体，用逗号隔开

清疚/ 2022年04月23日 22:34/ 0 赞/ 265 阅读

相关 CSS样式小知识点

1、hover样式 hover除了在a:hover,li:focus,li:hover之外，还可以写成页内js <a href="http://www.divcss

朴灿烈づ我的快乐病毒、/ 2022年01月10日 04:25/ 0 赞/ 375 阅读

相关 CSS知识点（样式）

1.字体样式 font-family: “楷体”; font-size: 50px; font-style: italic; font-weight: 900

客官°小女子只卖身不卖艺/ 2021年11月17日 21:42/ 0 赞/ 540 阅读

相关 CSS 基础样式及基本属性

目录 CSS 基础样式及基本属性行内样式内嵌式链接式 CSS 样式的基本属性背

太过爱你忘了你带给我的痛/ 2021年10月25日 12:44/ 0 赞/ 457 阅读

相关 Vuejs基本知识(十)【使用样式】

样式用起来特别简单. 直接写到 `<style>` 段落里面即可. 如下代码所示： <template> <div class='hi'>

墨蓝/ 2021年06月26日 16:06/ 0 赞/ 506 阅读