CSS

最新推荐文章于 2022-06-25 16:19:22 发布

爆Tai

最新推荐文章于 2022-06-25 16:19:22 发布

阅读量291

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43461864/article/details/109069897

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、什么是CSS

如何学习

CSS是什么
CSS怎么用(快速入门)
CSS选择器(重点+难点)
美化网页
盒子模型
浮动
定位
网页动画(特效效果)

1.1、什么是CSS

Cascading Style Sheet层叠级联样式表

CSS：表现（美化网页）

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

1.2、发展史

CSS1.0

CSS2.0 DIV（块）+CSS，HTML与结构分离的思想，网页变得简单，SEO

CSS2.1 浮动，定位

CSS3.0 圆角，阴影，动画… 浏览器兼容性

练习格式：

1.3、快速入门

style

基本入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范，<style> 可以编写css的代码，每一个声明，最后使用分号结尾
    语法：
         选择器{
             声明1;
             声明2;
             声明3;
         }
    -->
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>
<h1>我是木瓜腾</h1>
</body>
</html>

css的优势

内容和表现分离
网页结构表现统一，可以实现复用
样式十分的丰富
建议使用独立于html的css文件
利用SEO，容易被搜索引擎收录！

1.4、CSS的3种导入方式

上面那个分别是内部样式和外部样式

还有个块内样式，如

<h1 style="color: red">番薯坚</h1>

优先级：就近原则

2、选择器

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

2.1、基本选择器-重要

1、标签选择器：选择一类标签标签{}

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

    <style>
        /*
        标签选择器，会选择到页面上所有的这个标签的元素
        */
        h1{
            color: green;
            background: aqua;
            border-radius: 24px;
        }
        p{
            font-size: 80px;
        }
    </style>

</head>
<body>
<h1>学java</h1>
<h1>学java</h1>
<p>番薯坚</p>
</body>
</html>

2、类选择器 class：选择所有class属性一致的标签，跨标签 .类名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        类选择器的格式，.class的名称{}
        好处，可以多个标签归类，是同一个class，可以复用
        */
        .jiange{
            color: green;
        }
        .wenge{
            color: aqua;
        }
    </style>
</head>
<body>
<h1 class="jiange">学java</h1>
<h1 class="wenge">学java</h1>
<p class="jiange">番薯坚</p>
</body>
</html>

3、id选择器：全局唯一！ #id名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* id选择器 ：id必须保证全局唯一！
           #id名称{}
        */
        #jiange{
            color: green;
        }
        h1{
            color: aqua;
        }
        .tengge{
        color: red;
        }
    </style>

</head>
<body>
<h1>学java</h1>
<h1 class="tengge">学java</h1>
<p id="jiange">番薯坚</p>
</body>
</html>

优先级：id > class > 标签

2.2、层次选择器

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

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

/*后代选择器*/
body p{
    background: darkred;
   }

2、子选择器，一代，儿子

/*子选择器*/
body>p{
  background: darkred;
}

3、相邻弟选择器同辈

/*相邻弟选择器：只有一个，相邻向下*/
.active + p{
   background: darkred;
}

4、通用选择器

/*通用选择器,当前选中元素的向下的所有兄弟元素*/
.active~p{
     background: darkred;
}

2.3、结构伪类选择器

伪类：条件

<style>
    /*ul下的li的第一个元素*/
    ul li:first-child{
        background: green;
    }
    /*ul下的li的最后一个元素*/
    ul li:last-child{
        background: yellow;
    }
    /*选择父元素下的p元素的第二个类型*/
    p:nth-of-type(2){
        background: darkred;
    }

2.4、属性选择器-（常用而且重要）

id+class结合~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       demo p{
          
       }
    
    
        /*属性名，属性名=属性值（正则）
        = 绝对等于
        *= 包含这个元素
        ^= 以这个开头
        $= 以这个结尾
        */
        /*存在id属性的元素  a[]{}*/
        a[id]{
          background: darkred;
        }

        /*id=first的属性*/
        a[id=first]{
            background: yellow;
        }

        /*class中存在link的元素  正则
        因为class有多个属性所以要双引号*/
        a[class*="link"]{
            background: aqua;
        }

        /*选择href中以http开头的元素*/
        a[href^=http]{
            background: black;
        }

        /*选择href中以doc结尾的元素*/
        a[href$=doc]{
            background: blue;
        }
        
    </style>
</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com" class="link item first" id="first">1</a>
    <a href="image/123/png" class="link item">2</a>
    <a href="abc" class="link item">3</a>
    <a href=""abc.pdf class="link item">4</a>
    <a href="abcd.doc" class="link item end">5</a>
</p>
</body>
</html>

= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾

3、美化网页

3.1为什么要美化网页

1、有效的传递页面信息

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

3、凸现页面的主题

4、提高用户的体验

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

3.2字体样式

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

-->
<style>
    body{
        font-family:"Arial Black",楷体;
        color: blue;
    }
    h1{
        font-size: 50px;
    }
   .p1{
       font-weight: bolder;
   }

</style>

3.3、文本样式

1、颜色 color rgb rgba

2、文本对齐的方式 text-align =center //排版通常是处理左中右

3、首行缩进 text-indent：2em；

4、行高 line-height：单行文字上下居中！line-height=height

5、装饰 text-decoration：

6、文本图片水平对齐：vertical-align:middle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img,span{
            vertical-align: middle;
        }
        /*默认颜色*/
        a{
          text-decoration: none;
            color: #000;
        }
        /*鼠标悬浮状态(只需要记住：hover)*/
        a:hover{
            color:orange ;
            font-size: 50px;
        }
        /*鼠标按住未释放状态*/
        a:active{
            color: green;
        }
        a:visited{
            color: pink;
        }

    </style>
</head>
<body>
<p>
    <img src="image/1.jpg" alt="">
    <span>木瓜腾</span>
</p>
<p>
    <a href="#">码出高效</a>
</p>
<p>
    <a href="#">作者</a>
</p>

</body>
</html>

3.4、阴影

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

3.5、超链接伪类

正常情况下，a，a:hover

/*默认颜色*/
a{
  text-decoration: none;
    color: #000;
}
/*鼠标悬浮状态(只需要记住：hover)*/
a:hover{
    color:orange ;
    font-size: 50px;
}

3.6、列表

/*ul li*/
/*
lis-style
   none 去掉原点
   circle 空心圆
   decimal  数字
   square  正方形
   */

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

3.7、背景

背景颜色

背景图片

<style>
   div{
      width: 1000px;
      height: 700px;
      border: 1px solid red;
            background-image:url("image/Cover3.jpg") ;
            /*默认是全部平铺的*/
        }
   .div1{
            /*水平平铺*/
            background-repeat: repeat-x;
        }
   .div2{
            /*竖直平铺*/
            background-repeat: repeat-y;
        }
   .div3{
            /*不平铺*/
            background-repeat: no-repeat;
        }
 </style>

3.8、渐变

https://www.grabient.com/

这里找css样式

4、盒子模型

4.1、什么是盒子模型

margin：外边距

padding：内边距

border：边框

4.2、边框

1、边框的粗细

2、边框的样式

3、边框的颜色

<style>
    /*body总有一个默认默认的外边距margin:8,常见操作*/
    /*h1,ul,li,q,body{
        margin: 0;
        padding: 0;
     text-decoration: none;
    }*/
    /*border:粗细，样式，颜色*/
    #box{
        width: 300px;
        border: 1px solid red;
    }

    h2{
        font-size: 16px;
        background-color: #FFCC70;
        line-height: 30px;
        color: white;
    }
    form{
        background: #FFCC70;
    }
    div:nth-of-type(1) input{
        border: 3px solid black;
    }
    div:nth-of-type(2) input{
        border: 3px dashed #4d0b8c;
    }
    div:nth-of-type(3) input{
        border: 3px dashed green;
    }
</style>

4.3、内外边距

外边距的妙用：居中 //必须块元素中设置了宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    外边距的妙用：居中 -->
    <style>
        #box{
            width: 300px;
            border: 1px solid red;
            margin:0 auto;
        }

/*        顺时针旋转：上右下左
        margin:0
        margin:0 1px
        margin:0 1px 2px 3px*/
        h2{
            margin-top: 0;
            font-size: 16px;
            background-color: #FFCC70;
            line-height: 30px;
            color: red;

        }
        form{
            background: #FFCC70;
        }
        div:nth-of-type(1){
            border: black 1px solid;
        }
    </style>
</head>
<body>
<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名</span>
            <input type="text">
        </div>
        <div>
            <span>密码</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱</span>
            <input type="text">
        </div>
    </form>
</div>
</body>
</html>

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

margin+border+padding+内容宽度

4.4、圆角边框

<style>
    div {
        width: 100px;
        height: 100px;
        background: red;
        border-radius: 50px;
    }
</style>

4.5、盒子阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <!--  margin:0 auto; 居中
    要求：块元素，块元素有固定的宽度-->
    <style>
        img{
            border-radius: 50px;
            box-shadow: 10px 10px 100px yellow;
        }
    </style>
</head>
<body>
 <!--块居中必须设置宽度-->
<div style="width: 100px ;height: 100px;margin:0 auto;">
    <img  src="image/Cover3.jpg" alt="">
</div></body>
</html>

5、浮动

5.1、标准文档流

//即图中右边的网页模板

块级元素：独占一行

h1~h6  p  div 列表...

行内元素：不独占一行

span   a  img  strong...

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

5.2、display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        block块元素
        inline行内元素
        inline-block  是块元素，但是可以内联，在一行！
        none
        */
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
    </style>
</head>
<body>
<div>11</div>
<span>22</span>
</body>
</html>

1、这个也是一种实现行内元素排列的方式，但是很多情况都是用float

5.3、float

1、左右浮动 float

//浮起来的意思是向屏幕外方向浮起来

div{
    margin: 10px;
    padding: 5px;
}
.first{
    border: 1px #000 solid;
}
.a1{
    border: 1px #F00 dashed;
    display: inline-block;
    float: right;
}
.a2{
    border: 1px #00f dashed;
    display: inline-block;
    float: right;
}
.a3{
    border: 1px #060 dashed;
    display: inline-block;
    float: right;
}
.a4{
    border: 1px #666 dashed;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    float: right;
}

html中的部分代码

<body>
<div class="first">
    <div class="a1"><img src="image/1.jpg" alt=""></div>
    <div class="a2"><img src="image/2.jpg" alt=""></div>
    <div class="a3"><img src="image/3.jpg" alt=""></div>
    <div class="a4">
        浮动的文字可以向左也可以向右
    </div>
</div>
</body>

5.4、父级边框塌陷的问题

上图中浮动的元素不在父级的div边框内的，需要解决

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: hidden;

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

这个和增加div差不多

#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: #a13d30;
            border: 1px dashed #b27530;
            position: relative;/*相对定位：上下左右*/
            top: -20px; /*距离上面-20的位置,即上移*/
            left: 20px;/*距离左边加20px的位置，即右移*/
        }
        #second{
            background-color: #255099;
            border: 1px dashed #255066;
        }
        #third{
            background-color: #1c6699;
            border: 1px dashed #1c6615;
            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>

相对定位：postion:relative;

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

top: -20px; /*在上面-20的位置,即上移*/
left: 20px;/*在左边加20px的位置，即右移
bottom: -10px;
right: 20px;

6.2、绝对定位

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

//在父级是postion：realtive的条件下

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size:12px ;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
            padding: 0;
            position: relative; //父级要这样设置
        }
        #first{
            background-color: #a13d30;
            border: 1px dashed #b27530;
        }
        #second{
            background-color: #255099;
            border: 1px dashed #255066;
            position: absolute;
            left: 100px;
        }
        #third{
            background-color: #1c6699;
            border: 1px dashed #1c6615;
        }

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

6.3、固定定位

<!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: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>

6.4、z-index

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

图层~

如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/css.css">
</head>
<body>
<div id="content">
    <ul>
        <li><img src="image/2.jpg" alt=""></li>
        <li class="tipText">go，on</li>
        <li class="tipBg"></li>
        <li>时间：2099-01-01</li>
        <li>地点：月球</li>
    </ul>
</div>
</body>
</html>

#content{
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    width: 150px;
    border: 1px #000 solid;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*父级元素相对定位*/
content,ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    height: 25px;
    width: 216px;
    top:125px;
}
.tipBg{
    /*filter:Alpha(opacity=50);*和下面的一样效果/
    /*opacity: 0.5; 背景透明度*/
    background: #000000;

}
.tipText{
    z-index: 999;
    color: white;
}

7、动画

去菜鸟教程看

爆Tai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS

文章目录1、什么是CSS1.1、什么是CSS1.2、发展史1.3、快速入门1.4、CSS的3种导入方式2、选择器2.1、基本选择器-重要2.2、层次选择器2.3、结构伪类选择器2.4、属性选择器-（常用而且重要）3、美化网页3.1为什么要美化网页3.2字体样式3.3、文本样式3.4、阴影3.5、超链接伪类3.6、列表3.7、背景3.8、渐变4、盒子模型4.1、什么是盒子模型4.2、边框4.3、内外边距4.4、圆角边框4.5、盒子阴影5、浮动5.1、标准文档流5.2、display5.3、float5.4、父
复制链接

扫一扫

专栏目录