前端-css

CSS

如何学习

  1. css是什么

  2. css怎么用（快速入门）

  3. css选择器

  4. 美化网页

  5. 盒子模型

  6. 浮动

  7. 定位

  8. 网页动画（特效）

1 什么是css

Cascading Stytle Sheet层叠级联样式表

css：表现（美化网页）

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

1.2 发展史

css1.0

css2.0 DIV+CSS,HTML与CSS结构分离思想，网页变得简单，SEO

css2.1 浮动和定位

css3.0 圆角，阴影，动画... 浏览器兼容性~

1.3 快速入门

style

css的优势：

  1. 内容和表现分离

  2. 网页结构表现统一，可以实现复用

  3. 样式十分的丰富

  4. 建议使用独立于HTML的css文件

  5. 利用SEO，容易被搜索引擎收录！

1.4 css的3种导入方式

行内样式：在标签元素中，编写一个style属性，编写样式即可

内部样式

外部样式

优先级：就近原则

拓展：外部样式两种写法

  • 链接式：

  • HTML

<link rel="styleheet" href="css/style.css">

  • 导入式：

  • css2.1

<style>
    @import url("css/style.css");
</style>

 

2 选择器

作用：选择页面上的某一个或者某一类元素

2.1 基本选择器

  1. 标签选择器

    会选择到页面上所有的这个标签的元素

  2. 类 选择器 class

    可以多个标签归类，是同一个class，可以复用

  3. id 选择器

    #id名称 id必须保证全局唯一

id>类选择器>标签选择器

2.2 层次选择器

  1. 后代选择器：在某个元素的后面

    body p{
                background: rebeccapurple;
            }

  2. 子选择器：一代

    body>p{
                background: aqua;
            }

  3. 相邻兄弟选择器

    .active+p{
                background: blueviolet;
            }

  4. 通用选择器

    .active~p{
                background: chocolate;
            }

2.3 结构伪类选择器

伪类：条件

/*ul的第一个子元素*/
ul li:first-child{
    background: chocolate;
}
​
/*ul的最后一个子元素*/
ul li:last-child{
    background: blue;
}
/*选中p1
选中当前p元素的父级元素，选中父级元素的第一个,并且是当前元素才生效*/
p:nth-child(1){
    background: aqua;
}
​
 /*选中父元素下的p元素的第一个元素*/
p:nth-of-type(1){
    background: aquamarine;
}

2.4 属性选择器（常用）

id + class 结合

<!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: blue;
            text-align: center;
            color: darkgray;
            text-decoration: none;
            margin-right: 20px;
            font: bold 20px/50px Arial;
        }
​
        /*存在id属性的元素*/
        a[id=first]{
            background: aquamarine;
        }
​
        /*class中有links的元素
        = 绝对等于
        *= 包含这个元素
        ^= 以这个开头
        $= 以这个结尾
        */
        a[class*="links"]{
            background: aqua;
        }
​
        /*选中href属性中以HTTP开头的元素*/
        a[href^=http]{
            background: chocolate;
        }
​
        a[href$=pdf]{
            background: cadetblue;
        }
    </style>
</head>
<body>
​
<p class="demo">
    <a href="https://www.baidu.com"class="links item first" id="first">1</a>
    <a href="" class="links item active" target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item ">3</a>
    <a href="images/123.png" class="links item ">4</a>
    <a href="images/123.jpg">5</a>
    <a href="abc" class="links item ">6</a>
    <a href="/a.pdf" class="links item ">7</a>
    <a href="/abc.pdf" class="links item ">8</a>
    <a href="abc.doc" class="links item ">9</a>
    <a href="abcd.doc" class="links item last ">10</a>
</p>
​
</body>
</html>
=
*=
^=
$=

3. 美化网页元素

3.1 为什么要美化网页

  1. 有效的传递页面信息

  2. 美化网页，页面漂亮才能吸引用户

  3. 凸显页面的主题

  4. 提高用户的体验

 

span标签：重点要突出的字，使用span标签套起来

3.2 字体样式

font-family: 字体 font-size: 字体大小 font-weight: 字体粗细 color: 颜色

3.3 文本样式

  1. 颜色

    单词

    RGB 0~F

    RGBA A：0~1

  2. 文本对齐方式：

    text-align: 排版

  3. 行首缩进

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

  4. 行高

    行高和块的高度一致，就可以上下居中

  5. 装饰

    下划线：text-decoration: underline;

    中划线： line-through;

    上划线： overline;

  6. 文本图片水平对齐： vertical-align：middle;

3.4 阴影

/*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/
{
    text-shadow:#3cc7f5 10px  -10px   2px;
}

3.5 超链接伪类

正常情况下，a, a:hover

3.6 列表

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

3.7 背景

背景颜色

背景图片

<style>
div{
    backgroud-image: url("");
}
​
.div1{
    background-repeat:  repear-x;
}
</style>

3.8 渐变

background-color: #0093E9;
background-image: linear-gradient(272deg, #0093E9 0%, #80D0C7 100%);
​

4. 盒子模型

4.1 什么是盒子模型

margin：外边距

padding：内边距

border：边框

4.2 边框

  1. 边框的粗细

  2. 边框的样式

  3. 边框的颜色

4.3 内外边距

盒子的计算方式：你这个元素到底多大？

margin+border+padding+内容的宽度

4.4 圆角边框

4个角

<style>
    div{
        width: 100px;
        height: 100px;
        border: 10px solid rebeccapurple;
        border-radius: 20px 10px;
    }
</style>

4.5 阴影

 

5.浮动

5.1 标准文档流

块级元素：独占一行

h1-h6   p   div 列表...

行内元素：不独占一行

span    a   img strong...

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

5.2 display

block 块元素

inline 行内元素

inline-block 是块元素，但是可以内联，在一行！

5.3 float

左右浮动 float

5.4 父级边框塌陷问题

clear

clear: right;   右侧不允许有浮动元素
clear: left;    左侧不允许有浮动元素
clear: both;    两侧不允许有浮动元素
clear: none;

解决方案：

  1. 增加父级元素的高度

    #father{
        border:1px #000 solid;
        height: 800px
    }

  2. 增加一个空的div标签，清除浮动

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

  3. overflow

    在父级元素中增加一个overflow属性
    overflow: hidden;

  4. 父类添加一个伪类：after

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

小结：

  1. 浮动元素后面增加空的div

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

  2. 设置父元素的高度

    简单，元素假设有了固定的高度，就会被限制

  3. overflow

    简单，下拉的一些场景避免使用

  4. 父类添加一个伪类：after（推荐）

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

5.5 对比

  • display

    方向不可以控制

  • float

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

6. 定位

6.1 相对定位

<!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: 25px;
        }
        #father{
            border: 1px solid #666;
            padding: 0;
        }
        #first{
            background-color: aqua;
            border: 1px dashed rgba(91, 120, 170, 0.99);
            position: relative;/*相对定位:上下左右*/
            top: 30px;
        }
        #second{
            background-color: blueviolet;
            border: 1px dashed rgba(62, 89, 123, 0.99);
        }
        #third{
            background-color: fuchsia;
            border: 1px dashed #2fdb35;
            position: relative;
            bottom: 20px;
        }
    </style>
</head>
<body>
​
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
​
</body>
</html>

相对定位：position: relative;

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

top: 20px;
left:  20px;
bottom:  20px;
right:  20px;

 

6.2 绝对定位

定位：基于xxx定位，上下左右

  1. 没有父级元素定位的前提下，相对于浏览器定位

  2. 假设父级元素存在定位，我们通常会相对于父级元素进行偏移

  3. 在父级元素范围内移动

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

<!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: 25px;
        }
        #father{
            border: 1px solid #666;
            padding: 0;
        }
        #first{
            background-color: aqua;
            border: 1px dashed rgba(91, 120, 170, 0.99);
            position: absolute;
            right: 100px;
        }
        #second{
            background-color: blueviolet;
            border: 1px dashed rgba(62, 89, 123, 0.99);
        }
        #third{
            background-color: fuchsia;
            border: 1px dashed #2fdb35;
        }
    </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: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){/*fixed，固定定位*/
            width: 50px;
            height: 50px;
            background: blue;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
​
<div>div1</div>
<div>div2</div>
​
</body>
</html>

 

6.4 z-index

图层~

z-index：默认为0，最高无限

<!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/03.jpg" alt=""></li>
        <li class="tipText">的哈哈的骄傲和</li>
        <li class="tipBg"></li>
        <li>时间：2021-08-02</li>
        <li>地点：陕西</li>
    </ul>
</div>
</body>
</html>
#content{
    width: 200px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid black;
}
ul,li{
    padding: 0;
    margin: 0;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 200px;
    height: 25px;
    top: 150px;
}
.tipText{
    color: white;
    z-index: 5;
}
.tipBg{
    background: #2fdb35;
    opacity: 0.5;/*背景透明度*/
​
}

 

posted @ 2021-08-02 20:00  y4396  阅读(35)  评论(0)    收藏  举报