HTML引入CSS的方法

1，嵌入式
通过<style>标记，来引入CSS样式；
语法格式：<style type=“text/css”></style>
提示：<style>中CSS样式，只能给当前网页来使用；
同一个网页中，<style>标记可以写多个且没有先后之分，多个<style>标记之间为并列关系（同级）；
2，外联式
通过<link>标记，来引入一个外部的CSS文件（.css），这样的话，可以实现公共的CSS代码被多个网页共享；注意.css类型的文件不能再使用HTML标记,特别是<style>标记不能再写入,直接写CSS代码内容就行了;
<link rel=“stylesheet” type=“text/css” href=“css/public.css” />
<link>标记的常用属性：
rel:也就是引入的是什么类型的文件，取值：stylesheet;
type:内容类型；
href:引入的CSS文件路径或地址；
注意：<link>标记放在<head>标记中；
同一个网页可以使用多个<link>来链入多个外部样式文件；
3，行内式（在HTML标记中直接写一定量的CSS样式，此方式写的CSS样式优先级最高）
每个HTML标记，都有一些公共的属性，如：class,id,title,style,等等
例：<body style=“background-color:blue;font-size:24px;font-family:黑体;”>
<h1>南柯一梦 - 等什么君-辞九门回忆(弹鼓版)（南柯一梦 remix）</h1>
</body>

CSS表格属性

border-collapse :表格边框线合并

盒子模型

我们可以把每个HTML标记，都看成一个个“盒子”；
这些盒子有一些共同特征：内容的宽度或高度，边框线，内填充，外边距；
“盒子”的总宽度=内容的宽度+左边框宽度+左填充+左外边距+右边框宽度+右填充+右外边距

上下外边距合并–这是一种现象

上下两个相邻的块元素，两个元素都指定了四个外边距，那么上下相邻的外边距会自动合并，且是取的较大的那个外边距。
例：

如何实现上下两个<div>之间的距离为100px,该如何实现？
1，上下两个<div>其中上面那个指定margin-bottom:100px,而下面那个margin-top:0px，这样可以实现。
2，可以在上下两个<div>中间，添加一个空的<div>,并给空<div>指定高度为100px;(此方法兼容性较高，因为外边距margin本身在各浏览器的兼容性不好)

@沉木

前端：CSS/13/HTML引入CSS的方法，CSS表格属性，盒子模型，上下外边距合并相关推荐

盒子模型之外边距margin(HTML、CSS)
盒子模型之外边距margin(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta ...
CSS3day(CSS三大特性，行高的继承，选择器的权重，盒子模型：外边距，边框，内边距)
文章目录 CSS三大特性:层叠性.继承性.优先级层叠性继承性行高的继承优先级优先级权重的叠加盒子模型: 边框(border) 表格的细线边框边框会影响盒子的实际大小内边距(paddin ...
CSS基础(part12)--盒子模型之外边距
学习笔记,仅供参考,有错必纠参考自:某不知名网课文章目录盒子模型外边距属性设置块级盒子水平居中文字居中以及盒子居中插入图片和背景图片的区别清除元素的默认内外边距外边距合并(只存在垂 ...
【CSS】尺寸和边框、盒子模型、外边距_02
目录一.CSS3概述二.CSS的语法规范三.基础选择器四.尺寸和边框 1.尺寸属性 2.页面中允许设置尺寸的元素 3.溢出 4.边框 (1) 边框的简写形式 (2) 单边的设置 (3) 单属性 ...
css盒子模型的外边距和内边距
一.内边距 1.定义:内边距:盒子中内容与边框之间的距离 2.用法: (1) 上内边距 padding-top: 20px; (2) 左内边距 padding-left: 15px; (3) 下内边 ...
【CSS】盒子模型案例 ( 盒子模型尺寸计算 | 盒子模型水平居中 | 盒子模型内外边距设置 | 背景图片及位置设置 | 盒子嵌套设置 )
文章目录一.实现效果二.基本 HTML 结构三.设置最外层盒子样式 ( 盒子模型内外边距设置 ) 四.设置标题盒子样式 ( 盒子模型尺寸计算 | 盒子模型水平居中 ) 五.设置列表盒子样式 ( ...
2021-04-05 web前端CSS之权重，盒子边框内外边距
视频学习:黑马程序员pink老师笔记:层叠性相同选择器给设置相同的样式--如果样式冲突,就近原则样式不冲突,不会层叠 <!DOCTYPE html> <html lang=&q ...
CSS外边距合并问题以及方法
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框.浮动框或绝 ...
【温故知新】CSS学习笔记（外边距合并）
CSS外边距合并外边距合并使用margin定义块元素的垂直外边距时,可能会出现外边距的合并. 一.相邻块元素垂直外边距的合并当上下相邻的两个块元素相遇的时候,如果上面的元素有下外边距margin ...

前端：CSS/13/HTML引入CSS的方法，CSS表格属性，盒子模型，上下外边距合并

HTML引入CSS的方法

CSS表格属性

盒子模型

上下外边距合并–这是一种现象

@沉木

前端：CSS/13/HTML引入CSS的方法，CSS表格属性，盒子模型，上下外边距合并相关推荐

最新文章

热门文章