标签：入门 Title text 元素 background 狂神 border 选择器 css

1、css的3种导入方式

优先级：就近原则

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

    <!-- 内部样式 -->
    <style>
     h1{
           color: crimson;//红色
       }
    </style>
    
    <!--外部样式-->
<link rel="stylesheet" href="css/style.css">
    
<body>
<!--优先级：就近原则-->

<!-- 行内样式，在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: aqua">标题</h1> //蓝色

</body>
</html>

拓展：外部样式的两种方法
- 链接式 ——html
```

<link rel="stylesheet" href="css/style.css">
```
- 导入式——@improt是css2.1特有的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--导入式-->
<style>
    @import url("css/style.css");
</style>
</body>
</html>

2、选择器

2.1基本选择器

1、标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    /* 标签选择器，会选择到页面上所有的这个标签元素
    格式：标签{
		 }
    */
    h1{
        /*字体颜色红色*/
        color: crimson;
        
        /*背景颜色为蓝色*/
        background: aqua;

        /*边框类型为圆弧型，圆弧大小为20px*/
        border-radius: 20px;
    }
    
    p{
        /*设置字体大小为50px*/
        font-size: 50px;
    }
</style>

<body>
<h1>海摆</h1>
<h1>海摆</h1>
<p>直接开摆</p>
</body>
</html>

2、类选择器

细节：style标签应该放在head标签内

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         /* 类选择器的格式：
        .class的名称{}
        
        好处：可以多个标签归类,是同一个class,可以复用
        */
        .haier{
            color: aqua;
        }
        .haier2{
            color: blueviolet;
        }
    </style>

</head>


<body>
<h1 class="haier">标题1</h1>
<h1 class="haier2">标题2</h1>
<h1 class="haier3">标题3</h1>
</body>
</html>

3、id选择器

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

2.2层次选择器

/*后代选择器*/
<style>
    body p{
        background: crimson;
    }
</style>

/*子选择器 一代*/
<style>
body>p{
    background: blue;
}
</style>

/*相邻兄弟选择器：只有一个，相邻（向下）*/
<style>
.active+p{
background: red
}
</style>

<body>
	<p class="active">p1<p>
	<p>p2</p>
</body>

<style>
/*通用兄弟选择器，当前选中元素的向下的所有兄弟(p)元素*/
	.active~p{
	background:red;
}
</style>
<body>
	<p class="active">p1<p>
	<p>p2</p>
	<p>p3</p>
</body>

2.3结构伪类选择器

伪类：

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

    <style>
        /* ul的第一个子元素--li1*/
        ul li:first-child{
        background:aqua;
        }

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

        /* 选择p1:定位到父元素,选择当前的第一个元素（p1）
        选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效
        如果是h或者q都不会生效
        */
        p:nth-child(1){
            background: #e22d0f;
        }
        /* 选中父元素下的，第二个p元素 */
        p:nth-child(2){
            background: #12fc39;
        }
    </style>
</head>
<body>

    <p>p1</p>
    <p>p2</p>
    <p>p3</p>

    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
</body>
</html>

2.4属性选择器（常用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
           display: block;  /*显示块元素*/
            height: 50px;
            width: 50px;
            float: left;    /*浮动向左靠*/
            border-radius: 10px; /*边框圆角 为10px*/
            background: blue;
            text-align: center; /*居中对齐*/
            color: #e22d0f;
            text-decoration: none;/* 去掉下划线 */
            margin-right: 5px; /* 每个边框5px距离 */
            font: bold 20px/50px Arial;/* 字体设置 */
        }
        /*a[id]{*/
        /*    background: aqua;*/
        /*}*/

        /*id为first的元素*/
        /*a[id=first]{*/
        /*    background: aqua;*/
        /*}*/


        /*class中有links item的元素*/
        /*a[ class ="links item"]{*/
        /*    background: aqua;*/
        /*}*/

        /*class含有所有links的元素*/
        /*a[class*="links"]{*/
        /*    background: aqua;*/
        /*}*/
        
        
        /*选择含有http开头的元素*/
        a[href^="http"]{
            background: aqua;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="http:/qqq" class="links item first">2</a>
    <a href="/www" class="links item">3</a>
    <a href="/eee" class="links item">4</a>
    <a href="/rrr" >5</a>
    <a href="/ttt">6</a>
    <a href="/yyy">7</a>
</p>
</body>
</html>

3.美化网页元素

3.1为什么要美化网页

1.有效的传递页面信息

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

3.凸显页面的主题

4.提高用户的体验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            font-family: 楷体;/*字体设置*/
            color: #e22d0f;
        }
        .p1{
            font-weight: bold;/*字体相对粗细*/
        }
    </style>
</head>
<body>
<p>
一个人的处境是苦是乐常是主观的。
</p>

<p class="p1">
有人安于某种生活，有人不能。因此能安于自已目前处境的不妨就如此生活下去，不能的只好努力另找出路。
    你无法断言哪里才是成功的，也无法肯定当自已到达了某一点之后，会不会快乐。
</p>

<p>
    有些人永远不会感到满足，他的快乐只建立在不断地追求与争取的过程之中，因此，
    他的目标不断地向远处推移。这种人的快乐可能少，但成就可能大。
</p>


</body>
</html>

3.2字体样式

颜色–>color
文本对齐方式–>text-align：center
首行缩进–>text-indent：2em
行高–>line-height：300px；
下划线–>text-decoration：underline
文字参照图片向中对齐：
img,span{
vertical-align: middle;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    颜色：
        color
        RGB 0~F
        RGBA A：0~1
-->
    <style>
       h1{
          color: rgba(0,255,255,0.8);
           text-align: center; /*居中*/
       }
       .p1{
           text-indent: 2em;
           line-height: 300px;/*行高*/
       }
       .l1{
           text-decoration: underline;/*下划线*/
       }
        .l2{
            text-decoration: line-through;/*中划线*/
        }
        .l3{
            text-decoration: overline;/*上划线*/
        }
    </style>
</head>
<body>


  <h1> 一个人的处境是苦是乐常是主观的</h1>

<p class="l1">2123145</p>
  <p class="l2">2123145</p>
  <p class="l3">2123145</p>
  <p class="h1">
    有人安于某种生活，有人不能。因此能安于自已目前处境的不妨就如此生活下去，不能的只好努力另找出路。
    你无法断言哪里才是成功的，也无法肯定当自已到达了某一点之后，会不会快乐。
</p>

<p class="p1">
    有些人永远不会感到满足，他的快乐只建立在不断地追求与争取的过程之中，因此，
    他的目标不断地向远处推移。这种人的快乐可能少，但成就可能大。
</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img,span{
            vertical-align: middle;
        }
    </style>
</head>
<body>
<p>
    <img src="image/1.png" alt="">
    <span>12334534</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: #000000;
        }
        
        /*鼠标悬浮状态 黄色且字体为50px*/
        a:hover{
            color: orange;
            font-size: 50px;
        }
        
           /*鼠标按住不放状态*/
        a:active{
            color: aqua;
        }
        
        /*点击之后的状态*/
        a:visited{
            color: red;
        }
        
        
        /*阴影颜色*/
        #prive{
            text-shadow: #e22d0f 10px 10px 10px;
        }

    </style>

</head>
<body>
<a href="#">
    <img src="image/2.png" alt="">

</a>
<p>
    <a href="#">码出高效：java开发手册</a>
</p>
<p>
    <a href="#">作者：孤尽老师</a>
</p>
<p id="prive">
    ￥99
</p>

</body>
</html>

3.4列样式练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link rel="stylesheet" href="style.css" type="text/css">

</head>
<body>
<div id="nav">
<h2 class="title">全部商品分类</h2>

<ul>
    <li>
        <a href="#">图书</a>
        <a href="#">音像</a>
        <a href="#">数字商品</a>
    </li>
    <li>
        <a href="#">家用电器</a>
        <a href="#">手机</a>
        <a href="#">数码</a>
    </li>
    <li>
        <a href="#">电脑</a>
        <a href="#">办公</a>
    </li>
    <li>
        <a href="#">家居</a>
        <a href="#">家装</a>
        <a href="#">厨具</a>
    </li>
    <li>
        <a href="#">服饰鞋帽</a>
        <a href="#">个性化妆</a>
    </li>
    <li>
        <a href="#">礼品箱包</a>
        <a href="#">钟表</a>
        <a href="#">珠宝</a>
    </li>
    <li>
        <a href="#">食品饮料</a>
        <a href="#">保健食品</a>
    </li>
    <li>
        <a href="#">彩票</a>
        <a href="#">旅行</a>
        <a href="#">充值</a>
        <a href="#">票务</a>
    </li>
</ul>
</div>
</body>
</html>

#nav{
    width: 300px;
    background: #c5e02a;
}

.title{
    font-size: 18px;/*字体大小*/
    font-weight: bold;/*字体加粗*/
    text-indent: 1em;/*首行缩进*/
}
/*list-style:
    none--去掉原点
    circle--空心圆
    decimal--数字
    square--正方形
*/
ul li{
    height: 30px;
   list-style: none; /*去掉原点*/
    text-indent: 1em;/*首行缩进*/
}
a{
    text-decoration: none;/*  去下划线  */
    font-size: 14px;/* 字体大小   */

}
a:hover{
    color: orange;/*悬浮显示字体颜色*/
    text-decoration: underline;
}

3.5背景图片及渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 500px;
            height: 380px;
            border: 1px solid red;/*边框大小1px,边框属性为实线，红色*/
            background-image: url("image/tx.jpg");
        /*默认是全部平铺的*/
        }
        .div1{
            background-repeat: repeat-x;
        }
        .div2{
            background-repeat: repeat-y;
        }

        .div3{
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

渐变：网址：https://www.grablent.com

4、盒子模型

4.1什么是盒子模型

margin：外边距
padding：内边距
border：边框

4.2边框

border：粗细样式颜色

边框的粗细：1px
边框的样式：虚线，实线

边框的颜色：color

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*body总有一个默认的外边框
        margin：0
        */
        h2,ul,li,a,body{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 300px;
            border: 1px solid red;
        }
        form{
            background: #f6c81e;
        }
        div:nth-of-type(1) input{
            border: 3px solid black;
        }
    </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>

4.3内外边距

margin-left/right/top/bottom->表示四边

margin：0 0 0 0/*分班表示上、右、下、左;从上开始顺时针*/

margin：0 auto/*auto表示左右自动   --居中*/

margin:4px/*上，右，下，左都为4px*/

margin:10px 20px 30px/*上为10px 左右为20 px  下为30px*/

4.4圆角边框

圆角： border-radius

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  左上 右上 右下 左下 顺时针方向     -->
    <!--    圆圈：圆角=半径！ -->
    <style>

        div{
            width: 100px;
            height: 100px;
            border: 5px solid red;
            border-radius: 100px;/*圆角设置*/
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

半圆

div{
    width: 100px;
    height: 50px;
   background: red;
    border-radius: 50px 50px 0 0;
}

头像闪闪发光

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            border-radius: 50px;
            box-shadow: 10px 10px 100px #fafa19;
        }
    </style>
</head>

<body>

<img src="image/tx.jpg" alt="">
    
</body>
</html>

5、浮动

5.1标准文档流

块级元素：独占一行 h1~h6、p、div、列表...

行内元素：不独占一行span、aing、strong

5.2display

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

       }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;

        }
    </style>

</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>

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

5.3float

float：left/right 左右浮动

clear：清除浮动 both——两侧不允许

5.4display与float对比

1.display方向不可以控制

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

5.5overflow及父级边框塌陷问题

解决坍塌问题的方案

方案一：增加父级元素的高度
方案二：增加一个空的div，清除浮动

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

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

overflow:hidden/*隐藏*/
overflow：scoll/*滚动*/

方案四：父类添加一个伪类：after

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

小结

浮动元素增加空div——》简单；但代码应尽量避免空div
设置父元素的高度——》简单;元素假设没有了固定的高度，就会超出
overflow——》简单，下拉的一些场景避免使用
父类添加一个伪类：after——》写法稍微复杂，但是没有副作用，推荐使用

6、定位

6.1相对定位

position:relative

#fist{
            border: 1px dashed #37219c;
            position: relative;/*相对定位上下左右*/
            top:-20px;
            left: 20px;/*相对左边，向右移20px*/
        }

<!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 #185fd7;
            padding: 0;

        }
        #fist{
            border: 1px dashed #37219c;
            position: relative;/*相对定位上下左右*/
            top:-20px;
            left: 20px;/*相对左边，向右移20px*/
        }
        #second{
            border: 1px dashed #718b5f;
        }
        #third{
            border: 1px dashed #9a7d4b;
        }

    </style>
</head>
<body>
<div id="father">
    <div id="fist">第一个盒子</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>
        body{
            width: 300px;
            height: 300px;
            border: 2px solid #e74747;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;/*去除边框*/
            display: block;/*浮动且块元素*/
            background: #ffa1f2;
            line-height: 100px;/*行高设置为100px*/
            text-align: center;/*文字居中*/
            color: aliceblue;
        }
        .a2,.a4{

            position: relative;
            left: 200px;
            top: -100px;
        }

       .a5{
           position: relative;
           left: 100px;
           top:-300px
       }

       a:hover{
           background: #9683e2;
       }

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

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

6.2绝对定位

absolute

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

没有父类元素前提下，相对于浏览器定位
假设父类存在定位，则相对于父类元素进行偏移
在父类范围内移动

<!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: #e22d0f;
            position: absolute;
            right: 0;/*右边*/
            bottom: 0;/*下边*/
        }
       div:nth-of-type(2){  /*固定定位*/
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;/*右边*/
            bottom: 0;/*下边*/
        }
    </style>
</head>
<body>

<div>div1</div>
<div>div2</div>

</body>
</html>

总结

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

6.3z-index

图层
z-index：默认是0，最高无限~999

标签：入门,Title,text,元素,background,狂神,border,选择器,css
From： https://www.cnblogs.com/DuPengBG/p/16843999.html

前端基础7天快速入门——狂神说css笔记