CSS

HTML+CSS+JavaScript

结构+表项+交互

1. 初识CSS

1.1. 什么是CSS?

Cascading Style Sheet(层叠样式表)

CSS:表现(美化网页)

字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动...

1.2. 发展史

CSS1.0 CSS2.0 DIV(块)+CSS,HTML与CSS结构分离,网页变得简单,利于SEO CSS2.1 浮动和定位 CSS3.0 圆角边框、阴影、动画.... 浏览器兼容性

1.3. 入门

格式:

image-20210831141515426
Image

基本入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    规范 <style>内可以编写html代码,每一个声明最好以分号结尾
            语法:
                选择器{
                    声明1: ;
                    声明2: ;
                    声明3: ;
                }
    -->
    <style>
        h1 {
            color: red;
        }
    </style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

CSS和HTML分离

css/style.css

h1 {
  color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

      <!--引入css文件 -->
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
<h1>我是标题</h1>
</body>
</html>
CSS和HTML分离的优势
  • 内容和表现分离
  • 网页结构表现统一,可以实现复用
  • 利于SEO,容易被搜索引擎收录

1.4. CSS的三种导入方式

优先级:就近原则,哪个样式离代码最近,就用哪个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--2.内部样式表-->
    <style>
        h1 {
            color: green;
        }
    </style>

    <!--3.外部样式-->
    <link rel="stylesheet" href="./css/style.css">

</head>
<body>

<!--优先级:就近原则,哪个样式离代码最近,就用哪个-->

<!--1.行内样式:在标签元素中编写一个style属性,编写样式即可-->
<h1 style="color: red;">我是标题</h1>

</body>
</html>

拓展:外部样式的两种写法

  • 链接式

    <!--外部样式-->
    <link rel="stylesheet" href="./css/style.css">
    
  • 导入式

    <!--导入式-->
    <style>
        @import url("./css/style.css");
    </style>
    

1.5. CSS注释

/* 注释内容 */

2. 选择器

作用:选择页面上的某一种元素或者某一类元素

2.1. 基本选择器

标签选择器

语法

标签名{
    声明1:xx;
    声明2:xx;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*标签选择器会选中页面上的所有这个标签*/
        h1 {
            color: #dcff4f;
            background: deepskyblue;
            border-radius: 14px;
        }

        p {
            font-size: 50px;
        }
    </style>

</head>
<body>

<h1>标题1</h1>
<h1>标题2</h1>
<p>段落</p>

</body>
</html>

类选择器Class

选中所有class属性一致的标签,可以跨标签

.类名{
    声明1:xx;
    声明2:xx;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*类选择器格式:.class的名称{}
            好处:可以多个标签归类,是同一个class,可以复用
        */
        .one {
            color: wheat;
        }

        .two {
            color: red;
        }

        .three {

        }
    </style>

</head>
<body>

<h1 class="one">标题1</h1>
<h1 class="two">标题2</h1>
<h1 class="three">标题3</h1>

</body>
</html>

id选择器

全局唯一

#id名{
    声明1:xx;
    声明2:xx;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*id选择器格式:#id名称{} id必须保证全局唯一
            不遵循就近原则,固定的优先级:id选择器>类选择器>标签选择器
        */
        #one {
            color: aquamarine;
        }

        .style1 {
            color: red;
        }

        h1 {
            color: #dcff4f;
        }
    </style>

</head>
<body>

<h1 id="one" class="style1">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>

</body>

优先级:不遵循就近原则,固定的:id选择器>类选择器>标签选择器

使用!important 可以打破这个规定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1 div{
            color: rgba(112, 58, 63, 0.51);
        }
        .t1{
            color: #2b6dab;
        }
        .t2{
            color: #422525 !important;
        }
    </style>
<body>
<div id="div1" test="">
    <div class="t1">未使用important  color: rgba(112, 58, 63, 0.51);</div>
    <div class="t2">使用important color: #422525 !important;</div>
</div>
</body>
</html>

2.2. 层次选择器

image-20200603172936530
Image
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>

</body>
</html>
  1. 后代选择器

在某个元素的后面,所有同类标签

/*后代选择器*/
body p{
    background: red;
}
  1. 子选择器

选择当前选择元素的下一代

/*子选择器*/
body > p{
    background: blueviolet;
}
  1. 相邻兄弟选择器

同级(相邻)向下,只有一个

/*相邻兄弟选择器*/
.active + p{
    background: cadetblue;
}
  1. 通用选择器

(同级)向下的所有元素

/*通用兄弟选择器*/
.active ~ p{
    background: green;
}

2.3. 结构伪类选择器

标签:条件{
    声明1:xx;
    声明2:xx;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--避免使用class和id选择器-->
    <style>

        /*ul的第一个子元素*/
        ul li:first-child {
            background: #9dbe1b;
        }

        /*ul的第最后一个子元素*/
        ul li:last-child {
            background: #411967;
        }

        /*
       选中其父元素的第3个子元素
       */
        p:nth-child(4) {
            background: #c7d8d9;
        }

        /*
        先选中当前元素的父级元素,然后选中父级元素的第n个和当前元素同类型的子元素
        */
        p:nth-of-type(3) {
            background: #886119;
        }

        /*鼠标移动到上面会发生变化*/
        a:hover {
            background: #ec0000;
        }

    </style>
</head>
<body>

<a>a</a>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>

</body>
</html>

2.4. 属性选择器

css标签可以自定义属性,可以随便添加属性,主要用于属性选择器的选择。

class+id结合

  • 属性名
  • 属性名 = 属性值(正则)
  • = 绝对等于
  • *= 包含
  • ^= 以...开头
  • $= 以...结尾
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: #4d4da4;
            text-align: center;
            color: #b93131;
            text-decoration: none;
            margin-right: 5px;
            /*  20px/50px 字体大小/字高  */
            font: bold 20px/50px Arial;
        }
        /*
            1.属性名
            2.属性名=属性值(正则)
            3. = 是绝对等于      *= 是包含
            4. ^= 以...开头
            5. $= 以...结尾
        */
        /*选中存在id属性的元素  a[]{} */
        a[id]{
            background: #31ab48;
        }
        /*选中存在test属性的元素  a[]{}
          test属性是自定义的*/
        a[test]{

        }

        /*选中id=first*/
        a[id=first]{
            background: #85454f;
        }
        /*class中有link的*/
        a[class *= "link"]{
            background: #4fc0c0;
        }
        /*选中href中以http开头的*/
        a[href^=http]{
            background: #8a2a37;
        }

        /* 选中href中以pdf结尾的*/
        a[href$=pdf]{
            background: #15832a;
        }
    </style>
</head>
<body>

<p class="demo">
    <a href="http://www.baidu.com/" class="link item first" id="first">1</a>
    <a href="" class="links item active" target="_blank" title="test">2</a>
    <a href="images/123.html" class="link item">3</a>
    <a href="images/123.png" class="link item">4</a>
    <a href="images/123.jpg" class="link item">5</a>
    <a href="abc" class="link item">6</a>
    <a href="/a.pdf" class="link item">7</a>
    <a href="/abc.pdf" class="link item">8</a>
    <a href="abc.doc" class="link item">9</a>
    <a href="abcd.doc" class="link item last">10</a>
    <a href="abcd.doc" test="">11</a>
</p>

</body>
</html>

3. 美化网页元素

  • 有效的传递页面信息
  • 能吸引用户
  • 凸显页面主题
  • 提高用户体验

span标签:重点要突出的字,使用span套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title1 {
            font-size: 50px;
        }
    </style>
</head>
<body>

This is <span id="title1">java</span>
</body>
</html>

3.1. 字体样式

<style>
  body{
    font-family: "Times New Roman", "fangsong";
  }
  h1{
    font-size: 60px;
    color: #722733;
  }
  .p1{
    font-weight: bold;
  }

  <!-- font:字体风格 字体粗细 字体大小 字体种类 -->
  p{
    font: oblique bolder 16px "楷体" ;
  }
</style>

3.2. 文本样式

  • 颜色 color:RGB/RGBA/单词

  • 对齐方式 text-align: center;水平居中

  • 首行缩进 text-indent: 2em;段首缩进

  • 行高 height: 300px;块高

    line-height: 300px;行高

    行高和块高度一致,就可以实现单行文本上下居中

  • 装饰划线 text-decoration

  • 文本图片水平对齐 vertical-align: middle;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        颜色:
            单词
            RGB:0~F
            RGBA :A:0~1 透明度
        text-align: center;排版 水平居中
        text-indent: 2em;段落首行缩进
        height: 300px;
        line-height: 300px;行高和块高度一致,就可以上下居中
    -->
    <style>
        h1 {
            color: rgba(0, 255, 255, 0.9);
            text-align: center; /*文本居中*/
        }

        .p1 {
            text-indent: 2em;
        }

        .p3 {
            background: blue;
            height: 300px;
            line-height: 300px;
        }

        /*下划线*/
        .l1 {
            text-decoration: underline;
        }

        /*中划线*/
        .l2 {
            text-decoration: line-through;
        }

        /*上划线*/
        .l3 {
            text-decoration: overline;
        }

        /*超链接去下划线*/
        a {
            text-decoration: none;
        }

        /*水平对齐 需要参照物:a和b 
        a,b{
          声明:xxxx;
         }
        */
        img, span {
            vertical-align: middle;
        }
    </style>
</head>
<body>
<a href="">123</a>
<p class="l1">123123</p>
<p class="l2">123123</p>
<p class="l3">123123</p>

<h1>《魁拔》</h1>
<p class="p1">
    是2008年北京青青树动漫科技有限公司以系列动画电影的第一部《魁拔之十万火急》为基础,重新剪辑而成的TV动画。
    由王川执导,田博、马华等编剧,刘婧荦,竹内顺子等配音。
</p>
<p class="p3">
    TV版完整保留了电影的世界观、人物设定、故事内容和情节主线,但重制了片头曲。
    《魁拔妖侠传》是魁拔系列电影的前传,主要讲述的是有关卡拉肖克潘家族的故事,与电影关系并不大。
    目前大家所说的魁拔通常指魁拔系列动画电影。
</p>

<p>
    <img src="./images/a.png" alt="">
    <span>jdlajsdajldjalsjd</span>
</p>

</body>
</html>

3.3. 超链接伪类和阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*默认颜色*/
        a {
            text-decoration: none;
            color: black;
        }

        /*鼠标悬浮的状态*/
        a:hover {
            color: #b28c45;
            font-size: 20px;
        }

        /*鼠标按住未释放状态*/
        a:active {
            color: #38bb51;
        }

        /*text-shadow:阴影颜色 水平偏移 垂直偏移 阴影半径*/
        #price {
            text-shadow: #57ced2 5px 5px 1px;
        }

        p:hover {
            background: #7e37c0;
        }

    </style>
</head>
<body>

<a href="#">
    <img src="../images/1.jpg" alt="">
</a>
<p>
    <a href="#">码出高效:Java开发手册</a>
</p>
<p>
    <a href="#">作者:孤尽老师</a>
</p>
<p id="price">¥99</p>

</body>
</html>

3.4. 列表

#nav {
    width: 300px;
    background: #8d1717;
}

.title {
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: #13a9a9;
}

/*
list-style:
            none;去掉圆点
            circle;空心圆
            decimal:数字
            square:正方形
*/

ul li {
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

a {
    text-decoration: none;
    font-size: 14px;
    color: black;
}

a:hover {
    color: #7c5c20;
    text-decoration: underline;

}

3.5. 背景图像

背景颜色

背景图片

div {
    width: 1400px;
    height: 700px;
    border: 1px solid #932e2e;
    background-image: url("../images/1.jpg");
    /*默认平铺  repeat*/
}

.div1 {
    background-repeat: repeat-x; /*水平平铺*/

}

.div2 {
    background-repeat: repeat-y; /*竖直平铺*/
}

.div3 {
    background-repeat: no-repeat; /*不平铺*/
}

/*
  background:颜色 图片链接 位置 平铺方式
  background: red url("../images/a.jpg") 270px 10px no-repeat
*/

3.6. 渐变

background-color: #FFFFFF;
background-image: linear-gradient(124deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%);

4. 盒子模型

image-20210901132059665
Image

盒子模型的三个属性

  • margin:外边距
  • padding:内边距
  • border:边框

边框

  • 边框的粗细
  • 边框的样式
  • 边框的颜色
/*body总有一个默认的外边距margin:8dp*/
body {
    margin: 0;
}

#app {
    width: 300px;
    border: 1px solid #652b2b; /*粗细 样式 颜色*/
}

h2 {
    font-size: 16px;
    background: #5daeb0;
    line-height: 30px;
    margin: 0;
    color: #FFFFFF;
}

form {
    background: #154849;
}

/*
  设置第一个input,因为大的div下没有input标签,所以就找了小的div的input标签
*/
div:nth-of-type(1) > input {awwwddd
    border: 3px solid #c43a3a;
}

div:nth-of-type(2) > input {
    border: 3px dashed #b23fc9;
}

div:nth-of-type(2) > input {
    border: 2px dashed #51815b;
}

内外边距

/*body总有一个默认的外边距margin:8dp*/
body{
    margin: 0;
}
/*  margin:0;一个参数为上下左右
    margin: 0 auto;上下为0,左右自动,实现水平居中
    margin:0 1px 2px 3px;四个参数为上右下左,顺时针
*/
#app{
    width: 300px;
    border: 1px solid #913232;/*粗细 样式 颜色*/
    margin: 0 auto;
}
h2{
    font-size: 16px;
    background: #4ec0c4;
    line-height: 30px;
    margin: 0;
    color: #FFFFFF;
}
form{
    background: #226c6e;
}
input{
    border: 1px solid #ec0606;
}
div:nth-of-type(1){
    padding: 10px;
}

盒子的计算方式:这个元素到底多大?

元素大小:margin+border+padding+内容宽度

image-20210901132059665
Image

圆角边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- border-radius: 50px 20px; 左上右下  右上左下-->
    <!-- border-radius: 100px 100px 0 0; 左上 右上  右下 左下-->
    <!--圆圈:圆角 = 半径 -->
    <style>
        div {
            width: 100px;
            height: 50px;
            border: 10px solid red;
            border-radius: 100px 100px 0 0;
        }

        img {
            border-radius: 100px;
        }
    </style>
</head>
<body>
<div></div>
<img src="images/1.jpg" alt="">
</body>
</html>

盒子阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
     margin:0 auto;居中要求:外面是一个块元素,块元素有固定的宽度,body有无限宽度
     一般和text-align:center 配合使用    
   -->
    <style>

        div {
            width: 1000px;
            height: 500px;
            text-align: center;
        }

        img {
            border-radius: 100px;
            box-shadow: 10px 10px 100px yellow;
            margin: 0 auto;
            text-align: center;
        }
    </style>
</head>
<body>

<div>
    <img src="images/1.jpg" alt="">
</div>

</body>
</html>

5. 浮动

5.1. 标准文档流

块级元素:独占一行

h1~h6 p div 列表...

行内元素:不独占一行

span a img strong...

行内元素可以被包含在块级元素中,反之则不可以

5.2. display

<!--display:
            block;块元素
            inline;行内元素
            inline-block;是块元素,但是可以内联,在同一行
            none;不显示
-->
<style>
    div {
        width: 100px;
        height: 100px;
        border: red solid 1px;
        display: inline;
    }

    span {
        width: 100px;
        height: 100px;
        border: red solid 1px;
        display: inline-block;
    }
</style>

这个是一种能够实现行内元素排列的方式,更多情况都使用float

5.3. float

左右浮动

div {
    margin: 10px;
    padding: 5px;
}

#father {
    border: 1px solid rgba(191, 120, 126, 0.51);
}

.layer01 {
    border: 1px dashed #d22525;
    display: inline-block;
    float: left;
}

.layer02 {
    border: 1px dashed #2d982d;
    display: inline-block;
    float: left;
}

.layer03 {
    border: 1px dashed #54548f;
    display: inline-block;
    float: left;
}

.layer04 {
    border: 1px dashed paleturquoise;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    float: left;
    clear: both;
}

父级边框塌陷问题

clear:

  1. right; 右侧不允许有浮动元素
  2. left; 左侧不允许有浮动元素
  3. both;两侧都不允许有浮动元素

解决方案:

  • 设置父级元素高度

    #father{
        border: 1px solid red;
        height: 800px;
    }
    
  • 增加一个空的div子标签,清除浮动

    简单,代码中尽量避免空的div

    <div class="clear"></div>
    
    .clear{
        clear: both;
        margin: 0;
        padding: 0;
    }
    
  • overflow

    • 简单,某些场景避免使用(下拉框)
    在父级元素中增加一个 overflow: hidden;
    
  • 父类添加一个伪类 after(重要)

    写法稍微复杂一点,但是没有副作用,推荐使用

    #father:after{
        content: '';
        display: block;
        clear: both;
    }
    

5.4. 对比

  • display

    方向不可控制

  • float

    浮动起来会脱离标准文档流,所以要解决父级塌陷的问题

6. 定位

6.1. 相对定位

相对定位:position: relative;

相对于原来的位置,进行指定的偏移,相对定位的话,它仍然在标准文档流中,原来的位置会被保留

top: -20px;
left: 20px;
bottom: -10px;
right: 20px;
<!DOCTYPE html>
<html lang="en">
<head>
    <!--相对定位:相对于自己原来的位置进行定位-->
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body {
            padding: 20px;
        }

        div {
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 15px;
        }

        #father {
            border: 1px solid #ab1818;
            padding: 0;
        }

        #first {
            background-color: #37da68;
            border: 1px dashed #194a79;
            position: relative; /*相对定位:上下左右*/
            top: -20px;
            left: 20px;
        }

        #second {
            background-color: #1f626b;
            border: 1px dashed #0f6c8a;
        }

        #third {
            background-color: #a8253d;
            border: 1px dashed #ff82fc;
            position: relative;
            bottom: -10px;
            right: 20px;
        }
    </style>
</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>

练习:方块定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box {
            width: 300px;
            height: 300px;
            border: red 1px solid;
            padding: 10px;
        }

        a {
            width: 100px;
            height: 100px;
            text-decoration: none;
            background: pink;
            line-height: 100px;
            text-align: center;
            color: #FFFFFF;
            display: block;
        }

        a:hover {
            background: #6284FF;
        }

        .a2, .a4 {
            position: relative;
            left: 200px;
            top: -100px;
        }

        .a5 {
            position: relative;
            top: -300px;
            right: -100px;
        }
    </style>
</head>
<body>

<div id="box">
    <a href="#" class="a1">链接1</a>
    <a href="#" class="a2">链接2</a>
    <a href="#" class="a3">链接3</a>
    <a href="#" class="a4">链接4</a>
    <a href="#" class="a5">链接5</a>
</div>

</body>
</html>
image-20210901172359160
Image

6.2. 绝对定位

  • 父级元素没有进行定位的前提下,相对于浏览器定位
  • 假设父级元素存在定位,通常相对于父级元素进行偏移,在父级元素范围内移动

拖动时候会改变位置。

相对于父级或者浏览器的位置,进行指定的偏移,绝对定位的话,它不在在标准文档流中,原来的位置不会被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div {
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 15px;
        }

        #father {
            border: 1px solid red;
            padding: 0;
            position: relative;
        }

        #first {
            background-color: #3f7951;
            border: 1px dashed #2a8c5e;
        }

        #second {
            background-color: #4da1a9;
            border: 1px dashed #4b8ca1;
            position: absolute;
            right: 30px;
        }

        #third {
            background-color: #9f162f;
            border: 1px dashed #a913a6;
        }
    </style>
</head>
<body>

<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>

</body>
</html>

6.3. 固定定位

fixed,固定定位,一直定在那,拖动时候也不会改变位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            height: 1000px;
        }

        div:nth-of-type(1) { /*绝对定位,相对于浏览器初始位置*/
            width: 100px;
            height: 100px;
            background: #182349;
            position: absolute;
            right: 0;
            bottom: 0;
        }

        div:nth-of-type(2) { /*fixed,固定定位,一直定在那*/
            width: 50px;
            height: 50px;
            background: #43ab57;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

6.4. z-index

图层

默认是0,最高无限制,一般最高设置999

数值越高,表示所在的层数越靠顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div id="content">
    <ul>
        <li><img src="images/bg.jpg" alt=""></li>
        <li class="tipText">这是一个标题</li>
        <li class="tipBg"></li>
        <li>时间:2099-1-1</li>
        <li>地点:月球一号基地</li>
    </ul>
</div>

</body>
</html>

opacity: 0.5; 背景透明度

#content {
  width: 380px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  font-size: 12px;
  line-height: 25px;
  border: 1px solid red;
}

ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*父级元素相对定位*/
#content ul {
  position: relative;
}

.tipText, .tipBg {
  position: absolute;
  width: 380px;
  height: 25px;
  top: 200px;
}

.tipBg {
  background: #51b494;
  opacity: 0.5; /*背景透明度*/
}

.tipText {
  z-index: 999; /*相当于置顶*/
}

7. 变形

https://www.runoob.com/css3/css3-2dtransforms.html

8. 总结

img
Image

8.1. 缺点

CSS层叠样式表是一门标记语言,并不是编程语言,因此不可以自定义变量,不可以引用等,换句话说就是不具备任何语法支持,它主要缺陷如下:

  • 语法不够强大,比如无法嵌套书写,导致模块化开发中需要书写很多重复的选择器;
  • 没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难以维护;
  • 这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题,前端开发人员会使用一种称之为【CSS预处理器】的工具,提供CSS缺失的样式层复用机制、减少冗余代码,提高样式代码的可维护性。大大的提高了前端在样式上的开发效率。

9. CSS预处理器

CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只需要使用这种语言进行CSS的编码工作。转化成通俗易懂的话来说就是“用一种专门的编程语言,进行Web页面样式设计,再通过编译器转化为正常的CSS文件,以供项目使用”

常用的CSS预处理器

  • SASS:基于Ruby ,通过服务端处理,功能强大。解析效率高。需要学习Ruby语言,上手难度高于LESS。
  • LESS:基于NodeJS,通过客户端处理,使用简单。功能比SASS简单,解析效率也低于SASS,但在实际开发中足够了,所以如果我们后台人员如果需要的话,建议使用LESS。

10. UI框架

  • Ant-Design:阿里巴巴出品,基于React的UI框架
  • ElementUI、iview、ice:饿了么出品,基于Vue的UI框架
  • BootStrap:Teitter推出的一个用于前端开发的开源工具包
  • AmazeUI:又叫“妹子UI”,一款HTML5跨屏前端框架
Copyright © rootwhois.cn 2021-2022 all right reserved,powered by GitbookFile Modify: 2022-11-26 20:03:31

results matching ""

    No results matching ""