html5快速入门（二）—— CSS简介

时间 2019-11-18

标签 html5 html 快速入门 css 简介栏目 HTML5 繁體版

原文原文链接

前言：css

1.HTML5的发展很是迅速，能够说已是前端开发人员的标配，在电商类型的APP中更是运用普遍，这个系列的文章是本人本身整理，尽可能将开发中不经常使用到的剔除，将常用的拿出来，使须要的朋友可以真正快速入门，若是有哪些不清楚的地方或者错误，欢迎联系我
2.更新时间没有规律，通常会在3天左右更新一篇（全系列预计会有12篇）由于须要工做，因此只能在闲暇之余整理，若是有喜欢的朋友能够关注我，将会第一时间得到更新信息
3.若是有须要Reactive Native + H5跨平台开发的朋友，能够联系我，在本系列结束以前会根据需求的程度决定是否继续
4.全系列文章最后尽量地附上综合实例，帮助朋友更好地理解
5.此系列会涉及到HTML、CSS、JavaScript等html

另：有不少朋友私聊我说图片不能正常显示的问题，测试后发现简书上能够在windows和mac端完美显示，若是看不到图片麻烦移步简书连接前端

CSS简介

CSS(Cascading Style Sheets)：层叠样式表，它用来控制HTML标签的样式，在美化网页中起到很是重要的做用
CSS的编写格式是键值对的形式
- 格式：属性名 : 属性值
```
color:blue;
background-color:green;
font-size:15px;
```

CSS的3种使用形式

行内样式（内联样式）：在标签的style属性中书写（标签都有style属性）

css3

<!-- 行内样式 -->
<!-- 字体大小为25,颜色绿色,背景色亮灰 -->
<div style="font-size: 25px; color: green; background-color: lightgrey;">div容器</div>
<!-- 字体颜色蓝色,边框宽度为1且为黑色 -->
<h2 style="color: blue;border: 1px double black;">Cascading Style Sheets</h2>

效果：
windows

业内样式：在本网页的style标签中书写（由于body标签用来描述内容和结构，其它东西都放到head中,因此将业内样式写在head标签内）数组

<head>
    <meta charset="UTF-8">
    <title>CSS页内样式</title>
    <!-- 页内样式 -->
    <style>
        /* 标签选择器 */
        /* div文字颜色为蓝色,字体大小25,边框为红色单边框 */
        div{
            color: blue;
            font-size: 25px;
            border:2px solid red;
        }
        /* p文字颜色为橘色,字体17,边框为紫色双边框宽度为5 */
        p{
            color: orange;
            font-size: 17px;
            border:5px double blueviolet;
        }
    </style>
    </head>
    <body>
        <div>div容器div容器div容器div容器div容器</div>
        <div>div容器div容器div容器div容器div容器</div>
        <div>div容器div容器div容器div容器div容器</div>
        <div>div容器div容器div容器div容器div容器</div>
        <div>div容器div容器div容器div容器div容器</div>
        <p>段落段落段落段落段落段落段落段落</p>
        <p>段落段落段落段落段落段落段落段落</p>
        <p>段落段落段落段落段落段落段落段落</p>
        <p>段落段落段落段落段落段落段落段落</p>
        <p>段落段落段落段落段落段落段落段落</p>
    </body>

效果：浏览器

外部样式：在单独的CSS文件中书写，而后在网页中用link标签进行引用
- 先新建一个css文件，在css文件内书写咱们须要的样式

布局

```
  div{
      color: blue;
      font-size: 25px;
      border:2px solid red;
  }

  p{
      color: orange;
      font-size: 17px;
      border:5px double blueviolet;
      }

  ```
  - 而后引入外部样式
  <br><br>

  ```

      <head>
          <meta charset="UTF-8">
          <title>CSS外部样式</title>
          <!-- 引入外部样式 -->
          <link rel="stylesheet" href="css/index.css">
      </head>

      <body>
          <div>div容器div容器div容器div容器div容器</div>
          <div>div容器div容器div容器div容器div容器</div>
          <div>div容器div容器div容器div容器div容器</div>
          <div>div容器div容器div容器div容器div容器</div>
          <div>div容器div容器div容器div容器div容器</div>
          <p>段落段落段落段落段落段落段落段落</p>
          <p>段落段落段落段落段落段落段落段落</p>
          <p>段落段落段落段落段落段落段落段落</p>
          <p>段落段落段落段落段落段落段落段落</p>
          <p>段落段落段落段落段落段落段落段落</p>
      </body>

  ```

效果：
测试

注意：开发中，通常都使用外部样式,结构比较清晰

CSS经常使用选择器

属性：经过属性的复杂叠加，才能作出漂亮的网页

选择器：经过选择器找到对应的标签设置样式

标签选择器：根据标签名找到对应的标签

<style>
    /* 标签选择器 */
    /* div文字颜色为蓝色,字体大小25,边框为红色单边框 */
    div{
        color: blue;
        font-size: 25px;
        border:2px solid red;
    }
</style>

使用场景：一次性设置对应标签的时候字体
类选择器

/* 类选择器 */
    .test1{
        color: red;
        font-size: 30px;
        border:5px double green;
    }

使用

<div class="test1">类选择器</div>
<p class="test1">类选择器</p>

使用场景：让须要它的标签主动去使用它
id选择器

/* ID选择器 */
    #main{
        font-size: 50px;
    }

使用：

<div id="main">id选择器</div>

使用场景：全局只让一个标签占有（独一无二）
并列选择器（能够理解为或）

/* 并列选择器(或) */
    #main, .test1{
        border:10px solid orange;
    }

使用场景：只要有其中一个选择器就可使用选择器内的样式
复合选择器（能够理解为且）

/* 复合选择器(且,前面不能够是ID选择器) */
    p.test1{
      color: yellow;
    }

使用场景：同时拥有2个选择器的标签即可以使用选择器内的样式
后代选择器

/* 后代选择器 
    前面为父标签，后面为子标签
    */
    div a{
        color: darkgray;
    }

使用场景：设置父标签内的全部子标签（包括子标签内的相同标签的子标签）的时候
直接后代选择器

/* 直接后代选择器 */
    div > p{
        font-size: 90px;
    }

使用场景：设置父标签的子标签的时候
伪类

input:focus{ /* 得到焦点 */

}

使用场景：当标签激活焦点的时候触发
伪元素：和伪类使用类似

div.test1:first-letter{

}

CSS不经常使用选择器

相邻兄弟选择器：与标签上下相邻的同一级标签

div + p{

}

注意条件：相邻，且同一级

属性选择器：能够将其当作数组（一维/二维数组）

div[name]{

}

div[name="Tom"]{

}

div[name][age]{

}

通配符：设置全部标签

*{
    
}

选择器的优先级与权值的关系

相同级别的选择器遵循：就近原则 > 叠加原则
不一样类型的选择器：选择器的针对性越强，它的优先级就越高，这里涉及到权值的问题，先来看下面的表

选择器类型	权值
通配选择符	0
标签选择器	1
类选择器	10
属性选择器	10
伪类	10
伪元素	1
id选择器	100
important	1000

原则：选择器的权值累计越高，优先级越高，若是权值相同，后定义的优先（就近原则）
优先级排序：important > 内联 > id选择器 > 类选择器 > 标签选择器|伪类|属性选择 > 伪元素 > 通配符 > 继承

HTML标签类型

HTML有N多标签，根据显示的类型，主要分为三大类

块级标签：独占一行，能随时设置宽度和高度（如：div、p、h1…h六、ul、li）

<style>
    /* div标签选择器 */
    div{
        /*背景色*/
        background-color: yellow;
    }
</style>

<body>

    <div>我是div容器</div>
    <div>我是div容器</div>
    <div>我是div容器</div>

</body>

效果：

行内标签（内联标签）：多个行内标签能同时显示在一行，宽度高度取决于内容尺寸（如：span、a、label）

<style>
    /* span标签选择器 */
    span{
        /*背景色*/
        background-color: red;
    }
</style>

<body>

    <span>我是span容器</span>
    <span>我是span容器</span>
    <span>我是span容器</span>
    <span>我是span容器</span>

</body>

效果：

行内-块级标签（内联-块级标签）：多个行内-块级标签可显示在同一行，能随时设置宽度和高度（如：input、button）

[Uploading Snip20160614_7_103697.png . . .]

```
<style>
     /* input标签选择器 */
    input{
        /*背景色*/
        background-color: yellow;
    }
</style>

<body>

    <input type="text">
    <input type="date">
    <input type="text">
    <input type="date">

</body>

```
效果：

修改标签的显示类型 —— display/visibility

在开发中，咱们常常须要将各类类型的标签拼凑在一块儿，而若是按照上面标签的类型来看，显然块级标签后就没办法再添加其余标签，这样也就大大下降了灵活性。这个时候咱们就须要来看看`display属性，它们能够用来修改标签的显示类型，提升标签之间拼凑时的灵活性

display属性有4个值

none：隐藏标签（同时隐藏内容和占位，也能够说同时隐藏结构）
block：让标签变为块级标签
inline：让标签变为行内标签
inline-block：让标签变为行内-块级标签（内联-块级标签）

div{
        /*设置背景色*/
        background-color: red;
    }

    /* 隐藏 */
    .noneDiv{
        display: none;
        /*设置背景色*/
        background-color: yellow;
    }

    /* 块级 */
    .blockInput{
        display: block;
        /*设置背景色*/
        background-color:orange;
    }

    /* 行内 */
    .inlineDiv{
        display: inline;
        /*设置背景色*/
        background-color: green;
    }

    /* 行内-块级 */
    .inline-blockDiv{
        display: inline-block;
        /*设置背景色*/
        background-color: gray;
    }

</style>

<body>

    <div>默认的div</div>
    <div class="noneDiv">隐藏div标签</div>
    <div class="inlineDiv">变成行内标签的div</div>
    <div class="inline-blockDiv">变成行内-块级标签的div</div><br><br>

    <!--默认的input-->
    <input type="text">
    <input type="text">
    <!--变成块级标签的input-->
    <input class="blockInput" type="text">
    <input class="blockInput" type="text">

</body>

效果：

visibility属性有4个值
- visible：显示标签（默认）
- hidden：隐藏标签（只隐藏内容，可是依旧占位）
- collapse：这个属性主要用在表格中，它能够删除一行或一列，但不会影响表格的布局，并且被行或列占据的空间会留给其余内容，若是用在其余标签，则呈现hidden的效果
- inherit：规定应该从父标签继承visibility属性的值
```
<style>
    div{
        /*高*/
        height:100px;
        /*背景色*/
        background-color: yellow;
    }

    /* 隐藏 */
    .hiddenDiv{
        visibility: hidden;
    }
    </style>

    <body>
        <div>div</div>
        <div class="hiddenDiv">隐藏的div</div>
        <div>div</div>
    </body>
```
效果：

CSS属性分类

CSS有不少属性，若是根据继承性划分，主要分为两大类
- 可继承属性：父标签的属性值会传递给子标签（通常是文字控制属性）
  - 全部标签可继承（visibility、 cursor）
  - 继承（letter-spacing、word-spacing、white-space、line-height、color、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction）
  - 块级标签可继承（text-indent、text-align）
  - 列表标签可继承（list-style、list-style-type、list-style-position、list-style-image）
```
<style>
    /* 文字控制类 */
    body{
        color:red;
        font-size:25px;
    }
</style>
```
- 不可继承属性：父标签的属性值不会传递给子标签（通常是区块控制属性）
```
<style>
    /* 区块控制类 */
    div{
        color:red;
        font-size:25px;
    }
</style>
```
总结：通常若是是大小、形状之类的通常都不可继承的

盒子模型

先来看看盒子里面的结构 —— 盒子由内容、内边距、边框、外边距构成
标准的盒子模型标准是这样的
若是全部浏览器都遵循这样的规则，那么就不会产生适配等问题，可是恰恰有个顽皮的熊老人（这个搅屎棍→ →）搞了本身的模型标准
也就是说网页上的每个标签都是盒子，每一个盒子都有4个属性
- content（内容）：盒子里面装的东西（网页中一般是指文字和图片）
  - height：设置元素高度
  - max-height:设置元素最大高度
  - max-width：设置元素的最大宽度
  - width：设置元素宽度
  - min-height：设置元素最小高度
  - min-width：设置元素最小宽度
- padding（填充，内边距）
  - padding：在一个声明中设置全部内边距属性
  - padding-top:设置元素的上内边距
  - padding-right：设置元素的右内边距
  - padding-bottom：设置元素的下内边距
  - padding-lfet：设置元素的左内边距
```
<style>
    div{
        /*这边直接使用复合属性padding:属性顺序为上\右\下\左(顺时针)若是只设置2个值,那么第一个值指上下,第二个值指左右*/

        padding: 25px 20px;
        /*背景颜色*/
        background-color: blue;
    }      
</style>

<body>
    <div>div标签div标签</div>  
</body>
```
效果：
- margin（外边距）：让盒子与盒子之间保留必定空隙
  - margin：在一个声明中设置全部外边距属性
  - margin-top:设置元素的上外边距
  - margin-right：设置元素的外边边距
  - margin-bottom：设置元素的下外边距
  - margin-lfet：设置元素的左外边距
```
<style>
    div{
        /*外边距和内边距类似*/
        margin: 30px 40px;

        /*背景颜色*/
        background-color: darkmagenta;
    }

</style>

<body>
    <div>div标签div标签</div>
</body>
```
效果：
- border（边框）：盒子自己
  - border是个复合属性，属性的顺序是（border-width，border-style，border-color）
```
<style>
    div{
        /*边框设置 宽21px 双框 红色*/
        border: 20px double red;
    }
</style>

<body>
<div>div标签div标签</div>
</body>
```
效果：

CSS3新特性

RGBA透明度：RGB(红色R+绿色G+蓝色B),RGBA则在其基础上增长了Alpha通道，用来设置透明值

<style>
        div{
            /*设置宽高*/
            width: 200px;
            height: 50px;
        }

        .test1{
            background-color: rgba(123,0,0,1.0);
        }
        .test2{
            background-color: rgba(123,0,0,0.8);
        }
        .test3{
            background-color: rgba(123,0,0,0.0);
        }
        .test4{
            background-color: rgba(123,0,0,0.6);
        }
        .test5{
            background-color: rgba(123,0,0,0.4);
        }
        .test6{
            background-color: rgba(123,0,0,0.2);
        }
    </style>
    
    <body>
        <div class="test1">div1.0</div>
        <div class="test2">div0.8</div>
        <div class="test3">div0.0</div>
        <div class="test4">div0.6</div>
        <div class="test5">div0.4</div>
        <div class="test6">div0.2</div>
    </body>

效果：

补充：既然有透明度，那么就有不透明度（最简单的蒙版效果）

<style>
        div {
            /*设置宽高*/
            width: 200px;
            height: 50px;
            /*设置背景色*/
            background-color: red;
            /*设置不透明度*/
            opacity:0.35;
        }
    </style>
    
    <body>
        <div>div1.0</div>
    </body>

效果：

块阴影和圆角阴影：box-shadow text-shadow

<style>
        div {
            /*设置宽高*/
            width: 200px;
            height: 50px;
            /*设置背景色*/
            background-color: red;
            
            /*设置外边距*/
            margin: 20px;

            /*设置块阴影
             参数一:水平偏移
             参数二:垂直偏移
             参数三:模糊距离
             参数四:阴影颜色
            */
            box-shadow: 10px 10px 10px blue;
        }
    </style>
    
    <body>
        <div>div</div>
        <div>div</div>
        <div>div</div>
        <div>div</div>
        <div>div</div>
    </body>

效果：

圆角：border-radius

<style>
        div {
            /*设置宽高*/
            width: 200px;
            height: 50px;
            /*设置背景色*/
            background-color: red;
            /*设置外边距*/
            margin: 20px;
        }
        .test1{
            /*底部左边*/
            border-bottom-left-radius: 30px;
        }
        .test2{
            /*顶部右边*/
            border-top-right-radius: 30px;
        }
        .test3{
            /*底部右边*/
            border-bottom-right-radius: 30px;
        }
        .test4{
            /*顶部左边*/
            border-top-left-radius: 30px;
        }
        .test5{
            /*四个角*/
            border-radius: 10px;
        }
    </style>

    <body>
        <div class="test1">div</div>
        <div class="test2">div</div>
        <div class="test3">div</div>
        <div class="test4">div</div>
        <div class="test5">div</div>
    </body>

效果：

边框图片：border-image(不经常使用，用到再说)
形变：transform: none | [ ]（后面结合实例，便于理解）

CSS布局

默认状况下，全部网页标签都在标准流布局中（从上往下，从左往右，相互依赖）
脱离标准流（就是固定在一个地方），脱离标准流主要的两种方式有两种

注意：标签只要一浮动，它的类型就会被强制转为行内块级标签

float属性：让标签浮动在父标签的左边和右边（显然不够灵活）
- left：浮动在父标签的最左边
- right：浮动在父标签的最右边

<style>
    #main{

        background-color: yellow;
        width: 350px;
        height: 200px;
    }

    .test1{
        background-color: red;

        float: left;
    }
    .test2{
        background-color: blue;

        float: right;
    }
</style>

<body>
    <div id="main">
    <div class="test1">左</div>
    <div class="test2">右</div>
    </div>
</body>

效果：

position属性：结合left、right、top、bottom属性就不同了（显然这个比较厉害）
注意：他的位置是相对于浏览器窗口来决定的

<style>
    #main{

        background-color: yellow;
        width: 350px;
        height: 200px;
    }

    .test1{
        background-color: red;

        position: absolute;
        top: 20px;
        left: 20px;
    }
    .test2{
        background-color: blue;

        position: absolute;
        bottom: 20px;
        right: 20px;
    }
</style>

<body>
    <div id="main">
        <div class="test1">左</div>
        <div class="test2">右</div>
    </div>
</body>

效果：

居中

水平居中

若是是行内、行内块级标签，设置text-align: center;

<style>
    #main{

        background-color: yellow;
        width: 350px;
        height: 200px;
        /*设置内容水平居中(可继承)*/
        text-align: center;
    }

    span{
        background-color: blue;
    }
</style>

<body>
    <div id="main">
        <span>行内标签</span>
    </div>
</body>

效果：

若是是块级标签，则需设置 margin: 0 auto;

<style>
    #main{

        background-color: yellow;
        width: 350px;
        height: 200px;
        /*设置内容水平居中(可继承)*/
        text-align: center;
    }

    .test1{

        width: 200px;
        background-color: blue;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        /*或者*/
        /*margin: 0 auto;*/
    }
</style>

<body>
    <div id="main">
        <div class="test1">块级标签</div>
    </div>
</body>

效果：

垂直居中

若是是行内、行内块级标签，设置line-height:总高度;

<style>
    #main{

        background-color: yellow;
        width: 350px;
        height: 200px;
        /*设置内容水平居中(可继承)*/
        text-align: center;
    }

    .test1{
        width: 350px;
        height: 30px;
        background-color: blue;

        /*设置垂直居中,让它等于父标签的高度*/
        line-height: 200px;
    }
</style>

<body>
    <div id="main">
        <span class="test1">行内标签</span>
    </div>
</body>

效果：

若是是块级标签，须要经过定位来作（通常不会将块级标签作垂直居中操做）

<style>
    #main{

        background-color: yellow;
        width: 350px;
        height: 200px;
        /*设置内容水平居中(可继承)*/
        text-align: center;
        /*告诉父标签使用绝对定位*/
        position: relative;
    }

    .test1{
        width: 200px;
        height: 30px;
        background-color: blue;

        /*重写,设置内容居中*/
        line-height: 30px;
        margin: 0 auto;
        /*设置相对路径*/
        position: absolute;
        top:50%;
        left:50%;
        /*平移使其与父标签居中显示*/
        transform: translate(-50%, -50%);
    }
</style>

<body>
    <div id="main">
        <span class="test1">行内标签</span>
    </div>
</body>

效果：

昨晚的文章不完整，这个才是第二篇的完整版，对形成的不便感到抱歉，综合实例单独作一篇吧！

1. JQuery快速入门-简介
2. zookeeper快速入门——简介
3. ARCore快速入门--简介
4. 快速入门:BUMO 简介
5. CSS——快速入门
6. 第二篇 CSS快速入门
7. CSS 入门简介
8. Python3快速入门（一）——Python简介
9. JSVC简介之快速入门
10. Linux快速入门（02）Linux简介
更多相关文章...
• SQL 快速参考 - SQL 教程
• Eclipse 快速修复 - Eclipse 教程
• Java Agent入门实战（一）-Instrumentation介绍与使用
• YAML 入门教程