CSS学习笔记——样式书写位置

1.内部样式表（内嵌式）

将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，style标签一般放在head标签中，也可以放在HTML文档的任何地方。

<style type="text/CSS">
   div {
   font-size:24px;
   color:red;
   }
</style>

2.内联样式（行内式）

通过标签的style属性进行设置,只对所在标签和嵌套在子标签起作用。

<div style="width: 200px;height: 200px;background-color: cyan;text-align: center;line-height: 100px;">Hello World</div>
<p style="color:red" >Hello World</p>
<h1 style=" text-align:center">Hello World</h1>

3.外部样式表（外链式）

外链式是将所有的样式放在一个或者多个以.css为扩展名的外部样式表中，通过link标签链接到HTML文档。

 <link href="css文件路径" type="text/CSS" ref="stylesheet" /> 
 link是单标签

总结：在三种标签书写位置方式中，外链式使用最多，同时实现了将结构和样式彻底分离。

4.标签显示模式（display）

HTML标签一般分为块标签和行内标签 也称块元素和行内元素。

4.1.块级元素（block-level）

块级元素：每一个块元素通常都会独自占据一整行或者多整行，可以设置宽度，高度，对齐，背景等属性
特点：
  1）宽度默认占整个容器的100%，
  2）可以容纳内联元素和其他块元素，
  3）高度、宽度、外边距和内边距都可以控制，
  4）能够自动换行。

常见的块级元素：<h1-h6>、<P>、<div>、<ul>、<ol>、<li> 其中div是最常见，最典型的块级元素

4. 2.行内元素（inline-level）

行内元素：不占有独立的区域，仅仅依靠自身的字体大小和图像的尺寸来支撑结构，一般不设置宽度，高度，对齐等属性。
特点：
  1）默认宽度为它本身内容的容纳的宽度，
  2）行内元素只能容纳文本或其他行内元素（a除外 a不能在容纳其他标签元素），
  3）高，宽无效，但水平方向的padding和margin可以设置，垂直方向无效，
  4）不会自动换行，和相邻的元素在同一行。

4.3.行内块元素（inline-block）

行内元素有一个特殊的标签img，input，td，可以设置宽高和对齐属性。
特点：
  1）默认宽度就是它本身内容的宽度，
  2）高度、行高、外边距和内边距都可以控制，
  3）不会换行，和相邻的行内元素在同一行上，但是之间会有空白缝隙。

4.标签显示模式转换 display

块转行内：display:inline
行内转块：display:block
块、行内转行内块：display:inline-block