css引入方式、图片下间隙问题、ol标签

ol标签

有序列表
ol-li
各列表项有排列顺序，各列表项之间为并列关系
​
列表容器 
<ol>
    列表项 
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>
​
注意：ol的直接子元素必须是li
li里可以嵌套任何标签
​
块级标签
​
特点：
1.宽度在没有设置的情况下，默认跟父元素宽度一样大
2.高度由内容撑开
3.垂直布局，独占一行
4.自带外间距和内间距
5.自带顺序列表符(1 2 3)
6.去掉自带列表符：list-style:none;(给li、ol设置都可以)
​
应用场景：
1.有顺序的列表
​
有序列表默认从1开始，依次增加顺序
1 2 3 ....
strat属性：开始值
写在ol的开始标签里
<ol start="10">
​
    reversed:倒序属性
    12345
    倒序：54321
    写在ol的开始标签里
    <ol reversed>
​
        <!-- 4 3 2 1 -->
        <ol reversed>
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
            <li>列表项4</li>
        </ol>
​
​
        <!-- 从10开始倒序  10 9  8  7  -->
        <ol start="10" reversed>
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
            <li>列表项4</li>
        </ol>
        
        
        
     type属性：顺序的类型
    写在ol开始标签中
     a 小写字母
     A 大写字母
     i  小写罗马数字
     I  大写罗马数字
     1  数字 默认值
        
<!--   1  数字 默认值 -->
  <ol type="1">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>广州</li>
  </ol>
​
  <!-- a 小写字母 -->
  <ol type="a">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>广州</li>
  </ol>
​
  <!-- A 大写字母 -->
  <ol type="A">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>广州</li>
  </ol>
​
  <!--i 小写罗马数字 -->
  <ol type="i">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>广州</li>
  </ol>
​
  <!--I 大写罗马数字 -->
  <ol type="I">
    <li>北京</li>
    <li>上海</li>
    <li>天津</li>
    <li>广州</li>
  </ol>
​
​

图片下间隙问题

图片下间隙问题原因：
由于图片父元素的高度由内容（图片）撑开，导致图片产生下间隙
​
解决方法：
1.给图片的父元素设置高度，高度为图片的高度
2.把图片转成块级标签 display:block；
3.给图片设置垂直对齐方式：vertical-align:top middle bottom
图片垂直方向上端对齐  vertical-align: top;
图片垂直方向中间对齐  vertical-align: middle;
图片垂直方向下端对齐  vertical-align: bottom;
​
​
​
/*  1.给图片的父元素设置高度，高度为图片的高度 */

/*  2.把图片转成块级标签 display:block； */
/* display: block; */
​


/* 垂直对齐方式 */
/*图片垂直方向上端对齐 */
vertical-align: top;
/*图片垂直方向中间对齐 */
/* middle 中间 */
vertical-align: middle;
/*图片垂直方向下端对齐 */
/* bottom 下面 */
vertical-align: bottom;
}
​
<div class="box">
    <img src="./image/2_11.png" alt="">
</div>

css引入方式--外链式

1.行间引入  
在开始标签写style属性 
样式与结构不分离
​
2.内部引入  
在head标签中以style标签对包着
样式与结构半分离
​
3.外链引入
在html文件外部新建一个css文件夹，在css文件夹中新建一个后缀名为.css的文件
引入位置：在head标签里用link标签引入css文件
​
建议：新建的css文件夹与html文件呈并列关系（兄弟关系）
​
在新建的后缀名为.css的文件里写样式
​
在浏览器开发者模式中（右击检查），点击sources--css文件夹--点开demo.css文件，就能找到相对应的css文件
​
如果demo。css文件没有引入成功，则source里就找不到对应的css文件
​
样式与结构彻底分离
​
平时怎么写样式就在新建的css文件里怎么写
就是用link标签引入一下即可
​
做项目一般都是外链引入
​