HTML5快速入门(二)—— CSS简介

时间:2021-12-10 14:49:42

前言:

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

另:有很多朋友私聊我说图片不能正常显示的问题,测试后发现简书上可以在windows和mac端完美显示,如果看不到图片麻烦移步简书链接


CSS简介

  • CSS(Cascading Style Sheets):层叠样式表,它用来控制HTML标签的样式,在美化网页中起到非常重要的作用
  • CSS的编写格式是键值对的形式

    • 格式:属性名 : 属性值


    
    color:blue;
    background-color:green;
    font-size:15px;
    

CSS的3种使用形式

  • 行内样式(内联样式):在标签的style属性中书写(标签都有style属性)


    <!-- 行内样式 -->
    <!-- 字体大小为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>
    

    效果:
    HTML5快速入门(二)—— CSS简介

  • 业内样式:在本网页的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>
    

    效果:

HTML5快速入门(二)—— CSS简介

  • 外部样式:在单独的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>
    
    ```
    

    效果:
    HTML5快速入门(二)—— CSS简介

注意:开发中,一般都使用外部样式,结构比较清晰


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…h6、ul、li)


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

    效果:
    HTML5快速入门(二)—— CSS简介

    • 行内标签(内联标签):多个行内标签能同时显示在一行,宽度高度取决于内容尺寸(如:span、a、label)


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

    效果:
    HTML5快速入门(二)—— CSS简介

    • 行内-块级标签(内联-块级标签):多个行内-块级标签可显示在同一行,能随时设置宽度和高度(如: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>

```
效果:

HTML5快速入门(二)—— CSS简介


修改标签的显示类型 —— 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>
    

    效果:
    HTML5快速入门(二)—— CSS简介

  • 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>
    

    效果:
    HTML5快速入门(二)—— CSS简介


CSS属性分类

  • CSS有很多属性,如果根据继承性划分,主要分为两大类

    • 可继承属性:父标签的属性值会传递给子标签(一般是文字控制属性)
      • 所有标签可继承(visibility、 cursor)
      • 继承(letter-spacing、word-spacing、white-space、line-heightcolorfont-familyfont-size、font-style、font-variant、font-weighttext-decoration、text-transform、direction)
      • 块级标签可继承(text-indenttext-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>
    
  • 总结:一般如果是大小、形状之类的一般都不可继承的

盒子模型

  • 先来看看盒子里面的结构 —— 盒子由内容、内边距、边框、外边距构成
    HTML5快速入门(二)—— CSS简介
  • 标准的盒子模型标准是这样的
    HTML5快速入门(二)—— CSS简介
  • 如果所有浏览器都遵循这样的规则,那么就不会产生适配等问题,但是偏偏有个顽皮的熊老人(这个搅屎棍→ →)搞了自己的模型标准
    HTML5快速入门(二)—— CSS简介
  • 也就是说网页上的每一个标签都是盒子,每个盒子都有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>
    

    效果:
    HTML5快速入门(二)—— CSS简介

    • 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>
    

    效果:
    HTML5快速入门(二)—— CSS简介

    • border(边框):盒子本身
      • border是个复合属性,属性的顺序是(border-width,border-style,border-color)


    <style> div{ /*边框设置 宽21px 双框 红色*/ border: 20px double red; } </style>
    
    <body>
    <div>div标签div标签</div>
    </body>
    

    效果:
    HTML5快速入门(二)—— CSS简介


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>

效果:
HTML5快速入门(二)—— CSS简介

补充:既然有透明度,那么就有不透明度(最简单的蒙版效果)

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

    <body>
        <div>div1.0</div>
    </body>

效果:
HTML5快速入门(二)—— CSS简介
- 块阴影和圆角阴影:box-shadow text-shadow
HTML5快速入门(二)—— CSS简介

    <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>

效果:
HTML5快速入门(二)—— CSS简介
- 圆角: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>

效果:
HTML5快速入门(二)—— CSS简介
- 边框图片: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>
    

    效果:
    HTML5快速入门(二)—— CSS简介

    • position属性:结合left、right、top、bottom属性就不一样了(显然这个比较厉害)
    • 注意:他的位置是相对于浏览器窗口来决定的
      HTML5快速入门(二)—— CSS简介


    <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>
    

    效果:
    HTML5快速入门(二)—— CSS简介


居中

  • 水平居中

    • 如果是行内、行内块级标签,设置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>
    

    效果:
    HTML5快速入门(二)—— CSS简介

    • 如果是块级标签,则需设置 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>
    

    效果:
    HTML5快速入门(二)—— CSS简介

  • 垂直居中

    • 如果是行内、行内块级标签,设置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>
    

    效果:
    HTML5快速入门(二)—— CSS简介

    • 如果是块级标签,需要通过定位来做(一般不会将块级标签做垂直居中操作)


    <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>
    

    效果:
    HTML5快速入门(二)—— CSS简介

昨晚的文章不完整,这个才是第二篇的完整版,对造成的不便感到抱歉,综合实例单独做一篇吧!