前端基础 CSS

css

　　当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

css语法

　　每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

css注释

　　/*注释*/

css几种引入方式

　　行内样式（内联式）：行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h3{color:green;}    #　　嵌入式
    </style>
</head>
<body>
<p style="color:red;">哈喽</p>   # 行内式
<h3>小圆圈</h3>
</body>
</html>

　　内部样式（嵌入式）：嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：

　　外部样式：外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。

语法结构：

　　选择器{属性：'属性值'；}

css选择器

　　基本选择器： id选择器标签选择器类选择器通用选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器:标签名*/
        /*p {*/
        /*    color: red;*/
        /*}*/
        /*类选择器:点+类名*/
        /*.c1 {*/
        /*    color: yellow;*/
        /*}*/
    /*    id选择器:#+id值*/
    /*    #d1 {*/
    /*        color: green;*/
    /*    }*/
    /*   通用/全局选择器 */
    /*    * {*/
    /*        color: blue;*/
    /*    }*/
    </style>
</head>
<body>
<div id="d1">老板好 我是23号技师 很高兴为您服务~  换一个!
<p  class="c1">天下唯我独尊~</p>
</div>
<div>老板好 我是23号技师 很高兴为您服务~  换一个!</div>

<p id="d2">天下唯我独尊~</p>
<span>尊 尊 尊 尊你妹尊</span>
<span  class="c1">尊 尊 尊 尊你妹尊</span>
</body>
</html>

组合选择器

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

        /*[hobby="jdb"] {*/
        /*    background-color: pink;*/
        /*}*/
        /*找input 具有属性名是hobby并且值是jdb的input标签*/
        input[hobby="jdb"] {
            background-color: greenyellow;
        }
    </style>
</head>
<body>
<input type="text" name="username" hobby="jdb">
<input type="text">
<span hobby="jdb">span</span>
</body>
</html>

分组与嵌套

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

伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*连接态*/
        a:link {
            color: pink;
        }
        /*鼠标悬浮态*/
        a:hover {
            color: red;
        }
        /*鼠标点击态*/
        a:active {
            color: purple;
        }
        /*访问过后的状态*/
        a:visited {
            color: dimgrey;
        }
    /*    input框被点击的状态 称之为获取焦点*/
        input:focus {
            background-color: orange;
        }
        input:hover {
            background-color: red;
        }

    </style>
</head>
<body>
<a href="https://www.chouti.com">click me!</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: gold;*/
        /*}*/

        p:before {               #在文本的前面添加$和改变颜色
            content: '$';
            color: gold;
        }
        /*after在解决浮动的问题上 很有用*/
        p:after {　　　　　　　　#在文本的末尾添加？和改变颜色
            content: "?";
            color: red;
        }
    </style>
</head>
<body>
<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: red;
        }
        /*.c1 {*/
        /*    color: orange;*/
        /*}*/
        /*p {*/
        /*    color: greenyellow;*/
        /*}*/

    </style>
</head>
<body>
<p id="d1" class="c1" style="color: green">快要下课了,我想吃饭了!</p>
</body>
</html>

css属性相关：宽和高

　　width属性可以为元素设置宽度。

　　height属性可以为元素设置高度。

　　块级标签才能设置宽度，内联标签的宽度由内容来决定。

样式操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
            font-size: 24px;   /*字体大小*/
            font-weight: lighter;   /*字体变细， bold粗体*/
            /*color: red;*/
            /*color: #4e4e4e;*/
            /*color: rgb(128,128,128);*/   /*设置文字的颜色*/
            /*color: rgba(0,0,0,1.0);  最后一个参数只能调节颜色的透明度 不能调节文本，范围在0-1之间*/
        }
    </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;    /*缩进32Px*/
            /*text-align: center;*/    /*居中对齐*/
            /*text-align: left;*/
            /*text-align: right;*/
            /*text-align: justify;*/     /*两端对齐*/

            /*text-decoration: underline;*/   /*在文本的下方添加下划线*/
            /*text-decoration: overline;*/　　　/*在文本的上方添加下划线*/
            /*text-decoration: line-through;*/   /*在文本的中间添加下划线*/
        }
        a {
            text-decoration: none;   /*没有文本修饰，主要去除a标签自带的下划线*/
            color: orange;
        }
        a:hover {
            color: blue;
        }
    </style>
</head>
<body>
<p>属性规定元素中的文本的水平对齐方式。</p>
<s>属性规定元素中的文本的水平对齐方式。</s>
<a href="http://www.xiaohuar.com">属性规定元素中的文本的水平对齐方式。</a>
</body>
</html>

背景图片示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*p {*/
        /*    color: white;*/
        /*    background-color: black;*/
        /*}*/
        div    {
            /*background-color: orange;*/   #如果没有文本，没有反应，除非设置高度和宽度
            height: 500px;
            width: 500px;
            /*background-image: url("111.png");  !*背景图片 默认是填充整个区域 如果大小不够 默认重复填充*!*/
            /*background-repeat: no-repeat;*/   # 不重复铺垫
            /*background-repeat: repeat-x;*/   # 只铺x轴部分
            /*background-repeat: repeat-y;*/
            /*background-position: center center;*/　　　# 将图片放如中间
            /*background-position: 10px 30px;  !*第一个参数调节的是左右  第二个参数调节的上下*!*/

            background: orange url("代码/111.png") no-repeat center center;
        }
    </style>
</head>
<body>
<!--<p>背景图片平铺排满整个网页</p>-->
<div>
</div>
</body>
</html>

边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框</title>
    <style>
        /*div {*/
　　　　 /* 　　!*border-style: solid;*!*/    # 制作边框样式。将文本放入边框的内部

        /*    !*border-color: red;*!*/   # 给边框添加颜色
        
        /*    !*border-width: 1px;*!*/   # 边框的厚度 

        /*    !*border: 3px solid black;*!*/   # 制作边框可以合并，后面的三个参数随意放
        /*    !*border:  solid 3px blue;*!*/
        /*    border:  dashed  green 3px;*/
        /*}*/
        p  {
            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>
<p>使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上</p>
</body>
</html>

画圆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            height: 400px;
            width: 200px;
            background: red;   # 背景红色
            border: 3px solid black;   # 3px边框黑色
            border-radius: 50%;     # 用这个属性能实现圆角边框的效果。将border-radius设置为长或高的一半即可得到一个圆形。
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

盒子模型

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            /*margin-top: 0;*/
            /*margin-right: 0;*/
            /*margin-bottom: 0;*/
            /*margin-left: 0;*/
            /*margin: 0;  !*上下左右全为0*!*/
            /*margin: 10px 20px;  !* 上下10px   左右20px*!*/
            /*margin: 10px 20px 30px;  !* 上   左右   下*!*/
            /*margin: 10px 20px 30px 40px;  !* 上 右  下 左 顺时针*!*/
            margin: 0;
        }
        .c1 {
            height: 400px;
            width: 400px;
            border: 3px solid black;
        }
        .c2 {
            background-color: green;
            height: 50px;
            width: 50px;
            border: 3px solid red;
            /*margin: auto 0;*/  / *居中且边距为0*/
        }
        p {
            border: 3px solid red;
            /*padding-top: 20px;*/
            /*!*padding-left: 10px;*!*/
            /*padding-bottom: 30px;*/
            /*padding-right: 50px;*/
            /*text-align: right;*/   /*文本右移*/

            padding: 10px;  /* padding 同样支持1 2 3 4个参数  效果同margin*/
        }
    </style>
</head>
<body>
<!--<div class="c1"></div>-->
<!--<div class="c2"></div>-->
<!--<p>我们换个p</p>-->
<!--<p>我们换个p</p>-->

<div class="c1">
    <div class="c2"></div>
</div>
</body>
</html>

浮动：用来做网页的布局（先搭建网页骨架，在调样式，再加js代码）

　　缺点：浮动的元素会脱离文档流，造成父标签塌陷

　　浮动的两个特点：

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

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

三种取值：left：向左浮动 right：向右浮动 none：默认值，不浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        #d1 {
            border: 3px solid black;
        }
        .c1 {
            height: 100px;
            width: 100px;
            background-color: red;
            float: left;      #  将背景颜色向左上浮，边框塌陷
        }
        .c2 {
            height: 100px;
            width: 100px;
            background-color: black;
            float: left;
        }
       .clearfix:after {
           content: '';     # 空
           display: block;  # 独占一行
           clear: both;  /* 左右两边都不能有浮动的元素*/
       }
    </style>
</head>
<body>
<div id="d1" class="clearfix">
    <div class="c1"></div>
    <div class="c2"></div>
</div>
</body>
</html>

通过浮动实现左右布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        .blog-left {
            float: left;
            width: 20%;
            height: 1000px;
            background-color: #4e4e4e;
        }
        .blog-right {
            float: right;
            width: 80%;
            height: 1000px;
            background-color: #eeeeee;
        }
    </style>
</head>
<body>
<div class="blog-left"></div>
<div class="blog-right">
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
</div>
</body>
</html>

overflow溢出

hidden: 内容会被修剪，并且其余内容是不可见的。

auto: 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            height: 50px;
            width: 50px;
            border: 3px solid red;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div>
    <p>默认值。内容不会被修剪，会呈现在元素框之外。会呈现在元素框之外。会呈现在元素框之外。会呈现在元素框之外。会呈现在元素框之外。</p>
</div>
</body>
</html>

圆头像实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原型头像</title>
    <style>
        body {
            margin: 0;
            background-color: darkgray;
        }
        div {
            height: 120px;
            width: 120px;
            border-radius: 50%;
            border: 5px solid white;
            overflow: hidden;
        }
        img {
            /*max-width: 100%;*/
            width: 100%;
        }
    </style>
</head>
<body>
<div>
    <img src="111.png" alt="">
</div>
</body>
</html>

复制代码

定位

static: 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。

relative:相对定位，相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。

absolute: 绝对定位，设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。

fixed:固定定位，对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。

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

        /*.c2 {*/
        /*    height: 200px;*/
        /*    width: 200px;*/
        /*    background-color: red;*/
        /*    !*top: 50px;*!*/
        /*    !*left: 50px;*!*/
        /*    !*position: absolute;  !*绝对定位*!*!*/
        /*}*/
        .c1 {
            border: 3px solid red;
            height: 100px;
            width: 100px;
            position: fixed;  /*固定定位*/
            right: 20px;
            bottom: 50px;
        }
    </style>
</head>
<body>
<!--<div class="c1">-->
<!--    <div class="c2"></div>-->
<!--</div>-->
<div class="c1">
    回到顶部
</div>
<div style="height: 1000px;background-color: green"></div>
<div style="height: 1000px;background-color: black"></div>
<div style="height: 1000px;background-color: blue"></div>

</body>
</html>

验证是否脱离文档流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
    </style>
</head>
<body>
<!--<div style="background-color: red;height: 50px;width: 50px;position: relative;left: 50px;"></div>-->
<!--<div style="background-color: blue;height: 50px;width: 50px"></div>-->


<!--<div style="background-color: red;height: 50px;width: 50px;position: relative"></div>-->
<!--<div style="background-color: blue;height: 50px;width: 50px;position: absolute;left: 50px"></div>-->
<!--<div style="background-color: orchid;height: 50px;width: 50px"></div>-->


<div style="background-color: red;height: 50px;width: 50px;"></div>
<div style="background-color: blue;height: 50px;width: 50px;position: fixed;right: 20px;bottom: 50px;border: 5px solid red"></div>
<div style="background-color: orchid;height: 50px;width: 50px"></div>
</body>
</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>

透明度比较（opacity）

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

去除ul标签丑陋部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul {
            list-style-type: none;   #将a标签中下面的下划线去掉
            padding: 0;
        }
    </style>
</head>
<body>
<ul>
    <li><a href="">哈哈1</a></li>
    <li><a href="">哈哈2</a></li>
    <li><a href="">哈哈3</a></li>
</ul>
</body>
</html>

display属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 {
            /*display: none;  !*标签不显示 并且也不再占用位置*!*/
            /*visibility: hidden;   !* 标签不显示 但是位置还在*!*/
        }
        span {
            display: inline-block;  /* 既有块儿级标签能设置长宽的特点 又有行内标签 都在一行的特点*/
            /*height: 400px;*/
            /*width: 400px;*/
            background-color: red;
            border: solid 3px black;
        }
        .c1 {
            height: 50px;
            width: 50px;
            background-color: red;

            display: inline;
        }
        .c2 {
            height: 50px;
            width: 50px;
            background-color: green;
            display: inline;
        }
    </style>
</head>
<body>
<!--<p id="d1">123</p>-->
<!--<p>123</p>-->
<span>span1</span>
<span>span2</span>
<!--<div class="c1">div1</div>-->
<!--<div class="c2">div2</div>-->
</body>
</html>

1.如何调节样式
       两个快递盒之间的距离(标签与标签之间的距离) 称之为外边距(margin)
       纸盒的厚度(边框)    称之为边框(border)
       内部的物品到盒子的距离(内部文本与边框的距离) 称之为内边距(padding)
       物品本身的大小(文本大小)   称之为内容(content)

       浮动的元素是脱离正常文档流的也就意味着没有独占一行一说
       也不再占用原来的位置

       浮动的元素会造成父标签塌陷

       clear 清除浮动带来的负面影响(父标签塌陷)

   定位：
       所有的标签默认都是静态的无法直接调节位置
       你需要先将其设置成可定位状态
       1.相对定位
           相对于标签自身原来的位置
       2.绝对定位
           相对于已经定位过的父标签
           但只给你一个父标签的长宽让你做定位
       3.固定定位
           相对于浏览器窗口固定在某个位置

   浏览器会优先展示文本内容

   脱离文档流
       脱离文档流
           1.浮动的元素都是脱离文档流的
           2.绝对定位是脱离文档流的
           3.固定定位也是脱离文档流的
       不脱离文档流
           1.相对定位不脱离文档流

   模态框

   opacity   即可以调节颜色透明度也可以调文本透明度

posted @ 2019-09-04 16:50 大爷灰阅读(201) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

大爷灰

前端基础 CSS

公告