CSS的引入样式及标签的显示模式

最新推荐文章于 2022-11-17 22:05:16 发布

yin_mo

最新推荐文章于 2022-11-17 22:05:16 发布

阅读量219

点赞数

文章标签： html css

本文链接：https://blog.youkuaiyun.com/yin_mo/article/details/107008007

版权

本文详细介绍了CSS的三种引入方式：外部样式表、内部样式表和内联样式，并深入解析了display属性的三种模式：block、inline和inline-block，帮助读者掌握不同元素的布局特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS的引入方式：
1、外部样式表：在head中插入link标签，通过href属性，引入CSS文件
2、内部样式表：在head中插入style标签，将样式写在style标签中
3、内联样式（行内样式）：通过在标签内部使用style属性添加样式

标签显示模式（display）
1、display：block； //行内转块级元素（也可用来显示隐藏的事件）
块级元素特点：1.高度、行高、、宽度和内外边距都能控制
2.独占一行，使用时从新的一行开始
3.宽度是默认元素的100%
4.可容纳内联元素和其他块元素

2、display：inline //块转行内元素
行内元素特点（内联元素）：1.和相邻航元素在一行上
2.无法对其设置高度和宽度（设置是无效的），但是水平方向上的内外边距可以设置
3.默认宽度为内容宽度
4.只能容纳文本或其他行内元素

3、display：inline-block //块、行内元素转行内块元素
行内块元素特点：1.和相邻行内元素（行内块元素）在一行，之间有间隙
2.默认宽度是内容宽度
3.高度，行高，宽度和内外边距都能被控制
常见的行内块元素有input、img

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yin_mo

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

（一）css-显示模式、基本属性、特性

前端可乐的博客

11-03

332

css 显示模式 、字体属性、文本属性、css三大特性

CSS引入方式

weixin_45976564的博客

09-09

490

CSS引入方式一.行内样式表（行内式）行内样式表(内联样式表）是在元素标签内部的style属性中设定CSS样式，适用于修改简单样式 <div style="color:red; font-size:12px;">青春不常在，学习是正道</div> style其实就是标签的属性在双引入中间，写法要符合CSS规范可以控制当前的标签设置样式由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用。使.

参与评论您还未登录，请先登录后发表或查看评论

css样式引入方式，及常用设置标签样式

weixin_30408309的博客

04-20

367

一. 三种样式引入方式 1. 内联式-直接写在div标签中,不推荐用 <div style="color:red;font-size:20px;font-family:'Microsoft Yahei';line-height:30;"> 你好，我叫韩妹妹<br\> 你叫什么名字 </div> 　　 2. 内嵌式，一...

css导入的三种方式

weixin_42971706的博客

11-21

241

行内样式表 <body> <div> <p style="color: brown"> 我是一个段落 </p> </div> 内联样式 <head> <meta charset="UTF-8"&amp

css样式引入

weixin_30332705的博客

03-26

128

一、HTML引入css样式方法：四种方式样式优先级：行内样式>内嵌式（内部样式）>外部样式（链接式+导入式）(后两者是就近原则) 1. 行内样式：在标签中标记style属性 <p style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p> 2.内嵌式（内部样式表）：在&...

【网站前端】第10章 CSS引入样式

Seven Yang

12-13

203

本文为黑马程序员pink老师前端视频整理所得的学习笔记。

CSS的引入方式：行内样式表（行内式）、内部样式表（嵌入式）、外部样式表（链接式）

最新发布

08-31

1. **CSS引入方式**： - **内联样式**：通过在HTML元素的`style`属性中直接编写CSS代码，如`;">内容</div>`。 - **内部样式表**：将CSS代码放在HTML文档的`<head>`部分内的`<style>`标签中，如`<style>body{...

详解CSS文件中的4种引入方式:行内,内联式,外部式,导入式

11-19

CSS引入方式-行内式通过 style这个标签属性,将css键值对直接写入标签内 <p xss=removed></p>  css引入方式-内嵌式（嵌入式）使用style标签将css属性名和属性值引入到html页面中,通常style标签放置在head标签中。为什么css样式要放置在head标签中呢,因为代码从上到下执行,如果先加载结构,那么用户看到的就将是干巴巴的内容,而没有通过美化,而先加载样式后加载结构,就相当于孩子出生就是穿着衣

引入css样式表的三种方式（全）

FishC的博客

11-17

3422

引入css样式表的三种方式（详细）

零基础学习WEB前端开发(十九)：CSS的引入方式（行内样式表、内部样式表、外部样式表）

陶小桃Blog

11-07

3693

一、内部样式表内部样式表，也叫内嵌样式表，写到html页面内部，是将所有的CSS代码抽取出来，单独放到<style>标签中。前面笔记所记录的都是这种内部样式表。 <style>标签理论上可以放在html文档的任何地方，但一般都放在文档的<head>标签中。用这种方式，可以方便控制当前整个页面中的元素样式设置代码结构清晰，但是没有实现样式与结构的完全分离二、行内样式表行内样式表是用来修改段落中的一部分样式，就局部内容进行简单修改。语法：

网页中引入样式表的几种方法

Web前端开发

05-24

979

一、直接在元素标签中使用STYLE属性：例如：二、直接在网页中使用STYLE标签：例如： body { 　　color: yellow; 　　background: #FFFFCC; 　　font-size: 19pt} td,p { 　　color:green; 　　font-size: 9pt} --> 三、使用标签引入: 假设我

HTML&CSS样式页面的头部标签

lovehuayud的专栏

09-21

3514

4.1 HTML头部标签 HTML头部标签是,主要包括页面的基本描述语句，例如后面介绍的CSS一般都定义在head元素中。与之间用于包含当前文档的有关信息，例如标题和关键字等。位于头部的内容都不会直接显示在网页上。4.2 标题标签 title4.3 基底网址标签标签可以设定URL地址，一般常用来设定浏览器中文件的绝对路径，然后在文件中只需写下文件的相对位置，在浏览器中浏览是时候这些位置会自

CSS入门基础知识（五）——引入方式

qq_46678602的博客

09-01

292

CSS标签入门基础知识 CSS引入方式 css的三种样式表按照css样式书写的位置（或者引入的方式），css样式可以分为三大类： 1、行内样式表（行内式） 2、内部样式表（嵌入式） 3、外部样式表（链接式）内部样式表内部样式表（内嵌样式表）是写到html页面内部，是将所有的css代码抽出来，单独放到一个< style>标签中。例子： 1、内部样式表理论上< style>标签可以放在html文档的任何地方，但一般会放在文档的< head>标签中。 2、通过这种方式

带标签的字符串如何在前端展示

weixin_43549003的博客

10-21

3314

富文本编辑器编辑的字符串返回给后台后，再返回给前台时，变成了如“ < p> < B> 字符串 < /B> </ p>”这样的字符串。那么我们如何在前端展示呢？ <span v-html="title"></span> 像这样，title为带标签的字符串，这样就可以在前端网页上显示出来了小例子在表格中展示富文本文字 <el-table-column label="题库标题" align="center" prop="tit

HTML三种引入样式的方式

Ryan的博客

04-24

4716

HTML三种引入样式的方式 1.外部样式：是通过link元素引入 <link rel="stylesheet" type="text/css" href="样式写入地址"> 2.内部样式：又称内部样式表，必须写在head标签中，用style标签申明 <style type="text/css" >h3{color:red; } dd{font-size: sma...