前端内容之CSS

一、打开css的三种方式

第一种：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三种打开方式</title>
    <!--<link rel="stylesheet" href="mycss.css">-->
</head>
<body>
<p>
  <b>下午好大宝贝儿</b>
</p>
</body>
</html>

第二种：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三种打开方式</title>
    <style>
        p {
            color: aquamarine;
        }
    </style>
</head>
<body>
<p>
  <b>下午好大宝贝儿</b>
</p>
</body>
</html>

第三种（不推荐使用）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三种打开方式</title>
</head>
<body>
<p style="color: bisque">
  <b>下午好大宝贝儿</b>
</p>
</body>
</html>

二、基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
    <style>
        /*标签选择器：标签名*/
        p {
            color: crimson;
        }
        /*类选择器：点+类名*/
        .c1 {
            color: deeppink;
        }
        /*id选择器：#+id值*/
        #d1 {
            color: dodgerblue;
        }
        /*通用/全局选择器*/
        * {
            color: greenyellow;
           }
    </style>
</head>
<body>
<div id="d1">你以为有钱人很快乐吗?
    <p class="c1">不不不，他们的快乐你根本想象不到</p>
</div>
<div>千万不要自己感动自己。大部分人看似的努力，不过是愚蠢导致的</div>
<p id="d2">别人骂你你要听，别人夸你你别信</p>
<span class="c1">别灰心， 人生就是这样起起落落落落落落落落落落落的</span>
<span>只有正真努力过的人才知道，天赋有多重要</span>
</body>
</html>

三、组合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*后代选择器*/
        div span {
            color: greenyellow;
        }
        /*儿子选择器*/
        div>span {
            color: aqua;
        }
        /*毗邻选择器：紧挨着的下面的一个*/
        div+span {
            color: deeppink;
        }
        /*弟弟选择器:同级别的下面所有的标签*/
        div~span {
            color:saddlebrown;
        }
    </style>
</head>
<body>
<span>div上面的第一个span</span>
<span>div上面的第二个span</span>
<div>
    <span>div里面的第一个span</span>
    <p>div里面的第一个p
        <span>p里面的第一个span</span>
        <span>p里面的第二个span</span>
    </p>
    <span>div里面的最后一个span</span>
</div>
<span>div下面的第一个span</span>
<span>div下面的第二个span</span>
<span>div下面的第三个span</span>
</body>
</html>

四、属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        1.具有某个属性名
        2.具有某个属性名及属性值
        3.具有某个属性名及属性值的某个标签
        */
        /*找到只有hobby这个属性名的所有标签*/
        [hobby] {
            background-color:red;
            color:white;
        }
        /*找到hobby这个属性是“secret”的所有标签*/
        [hobby="secret"] {
            background-color: deeppink;
            color:greenyellow;
        /*找到input 具有属性名是hobby并且值是secret的input标签*/
        input[hobby="secret"]{
            background-color: aquamarine;
        }
    </style>
</head>
<body>
user<input type="text" name="user" hobby="secret">
xxx<input type="text" >
<span hobby="secret">长得丑就是一种病，不然为什么整型医院叫医院</span>
</body>
</html>

五、分组嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            color: aqua;
        }
        div {
            color: greenyellow;
        }
        span {
            color: saddlebrown;
        }
        /*分组*/
        div,span,p {
            color: darkslateblue;
        }
        /*嵌套，多个不用的选择器，可以组合使用*/
        #d1,.c1,span {
            color: deeppink;
        }
    </style>
</head>
<body>
<p id="d1">p1</p>
<p id="d2">p2</p>
<div >div1</div>
<div class="c1">div2</div>
<span>span</span>
</body>
</html>

六、伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*连接态*/
        a:link {
            color:deeppink;
        }
        /*鼠标悬浮态*/
        a:hover {
            color: orangered;
        }
        /*鼠标点击态*/
        a:active {
            color: red;
        }
        /*访问过后的状态*/
        a:visited {
            color: dodgerblue;
        }
        /*input框被点击的状态，称之为获取焦点*/
        input:focus {
            background-color: greenyellow;
        }
        input:hover {
            background-color: deeppink;
        }
    </style>
</head>
<body>
<a href="http://www.4399.com">
    <b>明老师.avi</b>
</a>
这是一个输入框：<input type="text">
</body>
</html>

七、伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:first-letter {
            font-size: 48px;
            color: deeppink;
        }

        p:before {
            content: "%";
            color:gold;
        }
        /*after在解决浮动的问题上，很有用*/
        p:after {
            content: "@";
            color: red;
        }

    </style>
</head>
<body>
<p>春眠不觉晓</p>
<p>春眠不觉晓</p>
<p>春眠不觉晓</p>
<p>春眠不觉晓</p>
<p>春眠不觉晓</p>
</body>
</html>

八、选择器优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="mycss.css">
    <style>
        /*
            1.选择器相同的情况下：就近原则
            2、选择器不同的情况下：
               行内 > id选择器 > 类选择器 > 标签选选择器
        */
        #d1 {
            color: gold;
        }
        .c1 {
            color: deeppink;
        }
        p {
            color: saddlebrown;
        }
    </style>
</head>
<body>
<p id="d1" class="c1">长的丑活得久，长得帅老的快</p>
</body>
</html>

九、样式操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       div {
           height: 50px;
           width: 100px;
       }
       /*给行内标签设置长款没有任何影响*/
       span {
           height: 50px;
           width: 100px;
       }
    </style>
</head>
<body>
<div>div</div>
<span>span</span>
</body>
</html>

十、字体属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            font-family: 华文楷体 ;
            font-size: 24px;
            font-weight: bolder;
            /*color: red;*/
            /*color: #4e4e4e;*/
            /*color: rgb(128,128,128);*/
            /*color: rgba(128,128,128,0.6); 最后一个参数只能调节颜色的透明度 不能调节文本*/
        }
    </style>
</head>
<body>
<p>爱上大安市领导看了教师大发挥连接是否还考虑萨芬</p>
</body>
</html>

十一、文字属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            font-size: 16px;
            text-indent: 32px;
            /*居中*/
            text-align: center;
            /*左对齐*/
            text-align: right;
            /*右对齐*/
            text-align: left;
            /*两端对齐*/
            text-align: justify;

            /*添加下划线*/
            text-decoration: underline;
            /*添加上划线*/
            text-decoration: overline;
            /*横线穿过文字*/
            text-decoration: line-through;
        }
        a {
            text-decoration: none;
            color: orangered;
        }
        a:hover{
            color: blue;
        }
    </style>
</head>
<body>
<p>有因必有果，你的报应就是我</p>
<p>有因必有果，你的报应就是我</p>
<a href="https:\www.baidu.com">百度</a>
</body>
</html>

十二、背景属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            background-color: orangered;
            height: 500px;
            width: 500px;
            background-image: url("233.png"); /* 背景图片默认是填充整个区域 如果大不够 默认重复填充*/
            background-repeat: no-repeat;
            background-repeat: repeat-x;
            background-repeat: repeat-y;
            background-position: center center;
            background-position: 10px 30px; /*第一个参数调节的是左右 第二个参数调节的是上下*/

            /*同样也可以简写*/
            background: orangered url("233.png") no-repeat center center;
        }
    </style>
</head>
<body>
<div>

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

十二、背景图片实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            height: 400px;
            background-color: red;
        }
        .c2 {
            height: 400px;
            background-color: green;
        }
        .c3 {
            height: 500px;
            background: url("233.png");
            background-attachment: fixed; /*固定*/
        }
        .c4 {
            height: 400px;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
</body>
</html>

十三、边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            border-color: red;
            border-style: solid;
            border-width: 3px;
            border: 3px solid black;
            border-left: 3px solid red;
            border-bottom: 5px dotted green;
            border-top: 1px dashed orchid;
            border-right: 10px solid dimgrey;
        }

    </style>
</head>
<body>
<div>哪有什么选择恐惧症，还不是因为穷；哪有什么优柔寡断，还不是因为怂。</div>
</body>
</html>

十四、盒子模型

margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding: 用于控制内容与边框之间的距离；
border(边框): 围绕在内边距和内容外的边框。
content(内容): 盒子的内容，显示文本和图像。

　　如图样式：

margin外边距：

.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
} /*顺时针顺序*/

推荐简写：

.margin-test {
  margin: 5px 10px 15px 20px;
}

padding内填充：

.padding-test {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}

同样推荐简写：

.padding-test {
  padding: 5px 10px 15px 20px;
} /*顺序也是顺时针*/

补充padding的常用简写方法：

提供一个，用于四边
提供两个，第一个用于上下，第二个用于左右
提供三个，第一个用于上，第二个用于左右，第三个用于下
提供四个，将按照上-下-左-右的顺序作用于四边

十五、float

在css中，任何元素都可以浮动。

浮动元素会生成一个块级框，而不论它本身是何种元素

关于浮动的两个特点：

　　1. 浮动的框可以向左或者向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止

　　2.由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样

三种取值：

left：向左浮动

right：向右浮动

none：默认值，不浮动

clear：

clear属性规定元素的那一侧不允许其他浮动元素

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

注意：clear属性只会对自身起作用，而不会影响其他元素

清除浮动

清除浮动的副作用（父标签塌陷问题）

主要有三种方式：

1.固定高度

2.伪元素清除法

3.overflow：hidden

伪元素清除法（使用较多）：

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

十六、overflow溢出属性

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

　　　　overflow (水平和垂直均设置)

　　　　overflow (设置水平方向)

　　　　overflow (设置垂直方向)

圆形头像实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            height: 200px;
            width: 200px;
            border: 3px solid white;
            border-radius: 50%;
            overflow: hidden;
        }
        img {
            width: 100%;
        }
    </style>
</head>
<body>
<div>
    <img src="233.png" alt="">
</div>
</body>
</html>

十七、定位(position)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        .c1 {
            height: 50px;
            width: 50px;
            background-color: greenyellow;
            top: 100px;
            left: 100px;
            /*position: static; !*默认是静态的 不能动外置*!*/
            position: relative;  /*相对定位*/
        }
        .c2 {
            height: 200px;
            width: 200px;
            background-color: red;
            top: 50px;
            left: 50px;
            position: absolute; /*绝对定位*/
        }
    </style>
</head>
<body>
<div class="c1">
    <div class="c2"></div>
</div>
</body>
</html>

十八、区分是否脱离文档流

脱离文档流

　　1.浮动的元素都是脱离文档流的

　　2.绝对定位是脱离文档流的

　　3.固定定位也是脱离文档流的

不脱离文档流

　　1.相对定位不脱离文档流

十九、z-index

设置对象的层叠顺序。

z-index 值表示谁压着谁，数值大的压盖住数值小的，
只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。

模态框实例

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

        .cover {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(128,128,128,0.45);
            z-index: 999;
        }

        .modal {
            height: 200px;
            width: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            z-index: 1000;
            margin-top: -100px;
            margin-left: -200px;
        }

    </style>
</head>
<body>
<div>我是最底层的</div>
<div class="cover"></div>
<div class="modal">
    <p><label for="d1">username:<input type="text" id="d1"></label></p>
    <p><label for="d2">password:<input type="text" id="d2"></label></p>
    <input type="submit">
</div>
</body>
</html>

二十、透明度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            background-color: rgba(128,128,128,0.9);
        }
        .c2 {
            opacity: 0.5;
            background-color: rgb(128,128,128);
        }
    </style>
</head>
<body>
<p class="c1">111</p>
<p class="c2">222</p>
</body>
</html>