css

1、css

如何学习css

  1. css是什么

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

  3. css选择器（重点+难点）

  4. 美化页面（文字，阴影，超链接，列表，渐变。。。）

  5. 盒子模型

  6. 浮动

  7. 定位

  8. 网页动画（特效效果）

1.1、什么是css

  • cascading Style Sheet 层叠级联样式表

  • css：表现（美化网页）

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

发展史：

css1.0，

css2.0：DIV（块）+css，html与css结构分离的思想，网页变的简单，SEO

0css2.1：浮动，定位

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

1.2、快速入门

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

推荐使用

image-20210116225944279

css的优势：

  1. 内容和表现分离

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

  3. 样式十分的丰富

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

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

1.3css的三种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式-->
    <style>
        h1{
            color: blue;
        }
    </style>
    <!--外部样式-->
    <link rel="stylesheet" href="css/style.css">
    <!--优先级 就近原则-->
</head>
<body>
<!--行内样式，在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: aquamarine">你还</h1>
</body>
</html>

1.4选择器

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

1.4.1基本选择器

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器，会选择到页面上所有的这个标签的元素*/
        h1{
            color: #ffc5f2;
            background: #ffc5f2;
            border-radius: 10px;
        }
        p{
            font-size:80px;
        }
    </style>
</head>
<body>
<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，可以复用
        */
        .lichengjie{
            color: #985;
        }
        .lihao{
            color: #6527;
        }
        .liziqiang{
            color: blue;
        }
    </style>
</head>
<body>
<h1 class="lichengjie">李成杰</h1>
<h1 class="lihao">李昊</h1>
<h1 class="liziqiang">李自强</h1>
​
<p class="lichengjie">P标签</p>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器：id必须保证全局唯一
        #id名称{}
        优先级：
        不遵循就近原则，固定的
        id>class>标签 
        */
        #lcj{
            color: darkmagenta;
        }
        .style1{
            color: #ffc5f2;
        }
        h1{
            color: #2d1dc1;
        }
​
    </style>
</head>
<body>
<h1 id="lcj" class="style1">标题1</h1>
<h1 class="style1">标题1</h1>
<h1 class="style1">标题1</h1>
<h1>标题1</h1>
<h1>标题1</h1>
</body>
</html>

优先级： 不遵循就近原则，固定的 id>class>标签

1.4.2层次选择器

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

/*后代选择器：表示ul下的所有p标签*/
ul p{
    color: #ff0c00;
}

2、子选择器

/*子选择器:只有一代 表示body下的p标签，定位不到ul下的*/
body>p{
    color: #785d5d;
}

3、兄弟选择器

/*相邻兄弟选择器：对下不对上*/
.xiongdi+p{
    color: blue;
}

4、通用选择器

/*通用兄弟选择器，当前选择元素的向下的所有兄弟元素*/
.xiongdi~p{
    color: red;
}
<body>
<p>p1</p>
<p class="xiongdi">p2</p>
<p>p3</p>
<ul>
    <li><p>p4</p></li>
    <li><p>p5</p></li>
    <li><p>p6</p></li>
</ul>
<p class="xiongdi">p7</p>
<p>p8</p>
</body>

1.4.3、结构伪类选择器

伪类

        /*ul的第一个子元素*/
        ul li:first-child{
            background:red ;
        }
        /*ul的最后一个子元素*/
        ul li:last-child{
            background: #ffc5f2;
        }
        /*选中p1：定位到父类，选择当前的第一个元素
        选择当前p元素的父级元素，选中父级元素的第一个,并且是当前元素才生效
        */
        p:nth-child(1){
            background: #2d1dc1;
        }
        /*选中父元素，下的p元素的第一个元素*/
        p:nth-of-type(1){
            background: yellow;
        }

1.4.4、属性选择器（重点）

<!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: #2d1dc1;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        /*属性选择器：a[]{}*/
        /*属性名，属性名=属性值（正则）*/
        a[id=first]{
            background: yellow;
        }
        /*class中含有links的元素
        =是绝对等于
        *=是通配
        */
        a[class*="linkes"]{
            background: yellow;
        }
        /*选中href中以http开头的元素
        ^=表示以什么开头
        $=表示以什么结尾
        */
        a[href^=http]{
            background: yellow;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="index.html" class="linkes item first" id="first">1</a>
    <a href="" class="linkes item first" target="_blank" title="test">2</a>
    <a href="images/123.html"class="linkes item">3</a>
    <a href="images/123.png"class="linkes item">4</a>
    <a href="images/123.jpg"class="linkes item">5</a>
    <a href="abc">6</a>
    <a href="/a.pdf">7</a>
    <a href="/abc.pdf">8</a>
    <a href="abc.doc">9</a>
    <a href="abcd.doc">10</a>
</p>
</body>
</html>

1.5美化页面元素

1.5.1为什么要美化网页

1、有效的传递页面信息

2、美化网页

3、凸显页面的主题

4、提高用户的体验

 

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

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

1.5.2字体样式

<!--
    font-family:字体
    font-size:字体大小
    font-size:字体粗细
    color:字体颜色
-->
<style>
    body{
        font-family: Arial,楷体;
        color:#2d1dc1;
    }
    h1{
        font-size:50px;
    }
    .p1{
        font-weight: bold;
    }
</style>

1.5.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>
    <!--
    颜色： 单词
    RGB 0~F
    RGBA A：0~1
​
    text-align:排版，居中。
    text-indent: 2em首行缩进2个字符
            height: 300px;
            line-height: 300px;
    行高，和块的高度一致，就可以上下居中
    -->
    <style>
        h1{
            color: rgba(0,255,255,0.5);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: #ffc5f2;
            height: 300px;
            line-height: 300px;
        }
        /*下划线*/
        .l1{
            text-decoration: underline;
        }
        /*中划线*/
        .l2{
            text-decoration: line-through;
        }
        /*下划线*/
        .l3{
            text-decoration: overline;
        }
        /*
        水平对齐~参照物，a。b
        */
        img,span{
            vertical-align: middle;
        }
    </style>
    <!--
   水平对齐~参照物，a。b
   -->
</head>
<body>
<p class="l1">123123</p>
<p class="l2">123123</p>
<p class="l3">123123</p>
<h1>海贼王</h1>
<p class="p1">传奇海盗哥尔•D•罗杰在临死前曾留下关于其毕生的财富“One Piece”的消息，</p>
​
   <p>由此引得群雄并起，众海盗们为了这笔传说中的巨额财富展开争夺，各种势力、</p>
   <p>政权不断交替，整个世界进入了动荡混乱的“大海贼时代”。生长在东海某小村</p>
    <p>庄的路飞受到海贼香克斯的精神指引，决定成为一名出色的海盗。为了达成这个</p>
    <p>目标，并找到万众瞩目的One Piece，路飞踏上艰苦的旅程。一路上他遇到了</p>
   <p class="p3"> 无数磨难，也结识了索</p>
<p>
    <img src="images/a.png" alt="">
    <span>罗罗诺亚·索隆</span>
</p>
</body>
</html>

1.5.4阴影

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

1.5.5超链接伪类

正常情况下，a，a：hover

/*默认的颜色*/
a{
    text-decoration: none;
    color: black;
}
/*鼠标悬浮的颜色*/
a:hover{
    color: orange;
}
/*鼠标按住未释放的状态*/
a:active{
    color: yellow;
}

1.5.6列表

#nav{
    width: 241px;
}
.title{
    font-size: 18px ;
    font-weight: bold;
    font-indent:1em;
    line-height: 35px;
    background: #785d5d;
}
ul{
    background: #ffc5f2;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: #000000;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

1.5.7背景

  1. 背景颜色

  2. 背景图片

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

1.5.8渐变

https://www.grabient.com/

body{
    /*background-color: #FFDEE9;*/
    background-image: linear-gradient(270deg, #FFDEE9 0%, #B5FFFC 100%);

}

1.6盒子模型

1.6.1什么是盒子

image-20210118204216476

margin:外边距

padding：内边距

border：边框

1.6.2边框

1.边框的粗细

2.边框的样式

3.边框的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*body总有一个默认的外边距*/
        body{
            margin:0;
            padding: 0;
            text-decoration: none;
        }
        /* border: 粗细，样式，颜色*/
        h2{
            font-size: 16px;
            background-color: #07ff95;
            line-height: 30px;
            color: white;
        }
        #app{
            width:300px ;
            border: 2px solid red;
        }
        form{
            background: #07ff95;
        }
        div:nth-of-type(1) input{
            border: 3px solid black;
        }
        div:nth-of-type(2) input{
            border: 3px dashed yellowgreen;
        }
        div:nth-of-type(3) input{
            border: 3px solid blue;
        }
    </style>
</head>
<body>
<div id="app">
    <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>

1.6.3外边距内边距

<style>
    /*body总有一个默认的外边距*/
    body{
        margin:0;
        padding: 0;
        text-decoration: none;
    }
    /* border: 粗细，样式，颜色*/
    h2{
        font-size: 16px;
        background-color: #07ff95;
        line-height: 30px;
        color: white;
    }
    /*外边距的妙用：居中元素
    margin：0 auto:
	要求：块元素 ，且块元素有一定的宽度
    顺时针旋转
    margin：0
    margin：0 1px
    margin：0 1px 2px 3px
    */
    #app{
        width:300px ;
        border: 2px solid red;
        margin: 0 auto;
    }
    form{
        background: #07ff95;
    }
   input{
       border: 1px solid black;
   }
</style>

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

margin+border+padding+内容宽度

1.6.4圆角边框

4个角

<style>
    /*
    左上  右上 右下 左下 顺时针方向
    圆圈：圆角=半径！border-radius=width
    */
    div{
        width: 100px;
        height: 100px;
        border: 10px solid red;
        border-radius: 100px;
    }

1.6.5阴影

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

</div>
</body>
</html>

1.7浮动

1.7.1标准文档流

image-20210119140248728

块级元素：独占一行

h1~h6  p  div  列表。。。

行内元素：不独占一行

span a img strong ...

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

1.7.2display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    block 块元素
    inline 行内元素
    inline-block 是块元素，但是可以内联，在一行
    
    
    -->
    <style>
        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>div标签</div>
<span>span标签</span>
</body>
</html>

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

 

1.7.3float

  1. 左右浮动 float

div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px solid black;
}
.layer01{
    border: 1px #F00 dashed;
    display: inline-block;
    float: left;
}
.layer02{
    border: 1px #00F dashed;
    display: inline-block;
    float: left;
}
.layer03{
    border: 1px #060 dashed;
    display: inline-block;
    float: right;
}
.layer04{
    border: 1px #666 dashed;
    display: inline-block;
    float: right;
}

1.7.4父级边框塌陷的问题

clear

/*
clear：right：右侧不允许有浮动元素
clear：left：左侧不允许有浮动元素
clear：both：两侧不允许有浮动元素
clear：none
*/

解决方案：

  1. 增加父级元素的高度

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

  1. 增加一个空的div，清楚浮动

<div class="clear"></div>

.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

  1. overflow

在父级元素中增加一个overflow：hidden

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

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

小结：

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

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

  2. 设置父元素的高度

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

  3. overflow

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

  4. 在父类添加伪类

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

1.7.5对比

  • display

    方向不可以控制

  • float

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

1.8 定位

1.8.1相对定位

<!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 black;
            padding: 0;
        }
        #first{
            background-color: #07ff95;
            border: 1px dashed red;
            position:relative;/*相对定位：上下左右*/
            top: -20px;
            left: 20px;
        }
        #second{
            background-color: #ffc5f2;
            border: 1px dashed yellowgreen;
        }
        #third {
            background-color: #006600;
            border: 1px dashed lavender;
            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>

相对定位：position: relative;

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

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

 

1.8.2绝对定位

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

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

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

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

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

}
#first{
    background-color: #07ff95;
    border: 1px dashed red;
    position: relative;
}
#second{
    background-color: #ffc5f2;
    border: 1px dashed yellowgreen;
    position: absolute;
    right: 30px;
    top: -10px;
}

1.8.3固定定位

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>

1.8.3z-index

图层

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 123px;
            padding: 0px;
            margin: 0px;
            overflow: hidden;
            font-size: 12px;
            line-height: 25px;
            border: 1px solid black;
        }
        ul,li{
            padding: 0px;
            margin: 0px;
            list-style: none;
        }
        /*父级元素相对定位*/
        div ul{
            position: relative;
        }
        .tipText,.tipBg{
            position: absolute;
            width: 123px;
            top: 157px;
            height: 25px;
        }
        .tipText{
            color: white;
            z-index: 1;/*层级关系*/
        }
        .tipBg{
            background: black;
            opacity: 0.5;/*背景透明度*/
        }
    </style>
</head>
<body>
<div>
    <ul>
        <li><img src="imges/a.jpg" alt=""></li>
        <li class="tipText">海贼王路飞</li>
        <li class="tipBg"></li>
        <li>时间：2099-01-01</li>
        <li>地点：日本</li>
    </ul>
</div>
</body>
</html>

1.9动画

 

posted @ 2021-01-23 21:34  酷酷的西瓜皮  阅读(169)  评论(0)    收藏  举报