前端开发 - CSS - 上

CSS:
    1.css的引入方式
    2.基础选择器
    3.高级选择器
    4.选择器的优先级
    5.伪类选择器
    6.字体样式
    7.文本样式
    8.背景
    9.盒模型border
    10.margin
    11.padding

1.css的引入方式

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>css的引入方式</title>

    <!--内链式-->
    <style type="text/css">
        h2{
            font-size: 30px;
            color: red;
        }
    </style>

    <style type="text/css">
        /* 外链式：导入式  实际用的少
            使用import是 先加载html 在加载css
            import 是css2.1特有的，对于不兼容css2.1的浏览器是无效的eg:IE5以下
        */
        @import url('./css/index.css');

    </style>

    <!--外链式：链接式
        使用link是html css同时加载的！！
        link 是XHTML
    -->
    <link rel="stylesheet" type="text/css" href="./css/index.css">

</head>
<body>

    <div>
        <!--内嵌式
            优先级：内嵌式 > 内链式；  一般不写内嵌式，以后不好维护！
        -->
        <h1 style="font-size: 10px;color: yellow">我是h1路飞学城</h1>
        <h2>我是h2路飞学城</h2>
    </div>

</body>
</html>


2.基础选择器

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>

    <style type="text/css">
        /*通配符选择器*/
        *{
            padding: 0;
            margin: 0;
            color: #868686;
        }
        /*id选择器*/   /* 父内容一般不设 高度 子内容填充*/
        #container{
            width: 968px;
            background-color: antiquewhite;
            margin: 0 auto;   /*内容居中显示*/
        }
        /* 标签选择器*/
        h1{
            color: rgba(158,232,149,0.73)
        }
        /*类选择器*/
        .content{
            width: 968px;
            background-color: red;
        }
        img{
            width: 968px;
        }
        /*子代选择器*/
        ul>li{
            color: aqua;
        }
        /*后代选择器*/
        ul a{
            color: green;
        }
    </style>

</head>
<body>
    <!-- 上中下 布局 -->
    <div id="container">
        <div class="header">
            <h1>路飞学城</h1>
        </div>

        <div class="content">
            <h3>我是内容</h3>
            <img src="./images/homesmall1.png" alt="图片1">
        </div>

        <div class="header">
            <ul>
                <li>1 <a href="javascript:">哈哈</a></li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
    </div>
</body>
</html>


3.高级选择器

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>高级选择器</title>

    <style type="text/css">
        /*群组选择器*/
        .title,.content,.footer{
            width: 968px;
            /*height: 300px;*/
            margin: 0 auto;
            background-color: beige;
            border: 1px solid red;
        }
        /*交集选择器*/
        p.p1{
            color: green;
        }
        p#title1{
            font-size: 30px;
            color: red;
        }
        /* 毗邻标签 紧跟着h3标题的标签*/
        h3+p{
            color: aqua;
        }
        /*兄弟选择器*/
        h3~p{
            color: rgba(120,46,232,0.73)
        }
        /*属性选择器
          找到所有class=baidu的选择器
        */
        [class='baidu']{
            color: green;
        }
        /*找到所有class开头是btn 的选择器*/
        [class^='btn']{
            font-size: 20px;
            color: yellow;
        }
        /*找到以...结尾的选择器*/
       [class$='ault']{
            font-size: 40px;
            color: red;
        }

    </style>

</head>
<body>
    <div class="title">
        <p class="p1" id="title1">我是一个段落</p>
    </div>

    <div class="content">
        <h3>我是三级标题</h3>
        <a href="javascript:">百度一下</a>
        <p>我是另一个段落</p>
        <h3>我是三级标题</h3>
        <p>我是另一个段落</p>
        <h3>我是三级标题</h3>
        <p>我是另一个段落</p>
        <p>我是另一个段落</p>
        <p>我是另一个段落</p>
    </div>

    <div class="footer">
        <a href="https://www.baidu.com" class="baidu">百度</a>
        <a href="https://www.baidu.com" class="btn-default">百度一下</a>
        <a href="https://www.baidu.com" class="baidu">百度</a>
        <a href="https://www.baidu.com" class="btn-index">百度二下</a>

    </div>

    <!--
        总结：
            基础选择器：
                1.标签选择器    div
                2.类选择器     .div1
                3.id选择器     #box
                4.通配符选择器  *
            高级选择器：
                1.群组选择器  中间用,
                    .title,.content,.footer{}
                2.交集选择器  选择器之间不能有空格，第一个标签必须是标签选择器，第二个标签可以是id或者类选择器
                    p.p1{}   p#title1{}
                3.后代选择器  选择器之间用 空格
                    ul a{}
                4.子代选择器  选择器之间用 >
                    ul>li{}
                5.毗邻选择器  选择器之间用 +  紧跟着h3标题的标签
                    h3+p{}
                6.兄弟选择器  选择器之间用~
                    h3~p{}
                7.属性选择器
                     [class='baidu']{}
                     [class^='btn']{}
                     [class$='ault']{}
            css样式优先级：
                行内样式 > 内部样式表 > 外部样式表
                ID选择器 > 类选择器 > 标签选择器
    -->
</body>
</html>


4.选择器的优先级

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>优先级</title>

    <style type="text/css">
        #div1{
            background-color: yellow;
        }
        .box{
            background-color: green;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        
    </style>
</head>
<body>
    <!-- 选择器的优先级 id > 类 > 标签-->
    <div id="div1" class="box">哈哈</div>


</body>
</html>


5.伪类选择器

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>

    <style type="text/css">
        /*超链接未被访问时的状态*/
        a:link{
            background-color: yellow;
        }
        /*鼠标单击时超链接的状态*/
        a:visited{
            color: green;
        }
        /*鼠标悬停时超链接的状态*/
        a:hover{
            font-size: 30px;
            color: aqua;
        }
        /*鼠标点击不松手超链接的状态*/
        a:active{
            color: blue;
        }
        /*获取焦点时的样式*/
        input:focus{
            background-color: red;
        }
        /*
        总结：
            爱恨情仇原则：love / hate
        */

        /*伪元素选择器*/
        p:first-letter{
            font-size: 30px;
        }
        p:before{
            content: '哈哈';
            color: red;
        }
        p:after{
            content: "$$";
            color: green;
        }

    </style>

</head>
<body>
    <ul>
        <li><a href="#">百度一下</a></li>
        <li><a href="#">hao123</a></li>
        <li><a href="#">博客</a></li>
    </ul>

    <form action="">
        <input type="text" name="">
    </form>

    <p>来呀，你好啊！</p>
</body>
</html>


6.字体样式

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>字体样式</title>

    <!--内链式 -->
    <style type="text/css">
        p{
            /*设置字体大小*/
            font-size: 30px;

            /*推荐设置斜体的时候使用oblique*/
            /*font-style: italic;*/
            font-style: oblique;

            /*设置字体的粗细*/
            font-weight: bolder;

            /*设置字体的类型*/
            font-family:"微软雅黑";

            /*设置字体的颜色*/
            color: red;
        }
    </style>

</head>
<body>
    <!--
        默认字体大小是 16px = 1em
                      0.75em = 12px
    -->
    <p>这里是个p!!</p>

</body>
</html>


7.文本样式

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>

    <style type="text/css">
        .box1{
            width: 500px;
            height: 200px;
            background-color: red;

            color: rgba(85,26,139,0.73);

            /*上下删除线 overline line-through */
            text-decoration: underline;

            /*设置鼠标的形状*/
            cursor: pointer;

            /*设置首行缩进*/
            text-indent: 20px;

            font-size: 20px;

            /*left right center justify 两端对齐只针对英文  */
            text-align:justify;

            /*设置阴影 左右 上下 0-1 color */
            text-shadow:0px 0px 1px #fff;

            /*行高
                规律： 当行高=盒子的高度时，文本会垂直居中
            */
            line-height: 200px;
            text-align: center;

        }

    </style>

</head>
<body>

    <div class="box1">
        my name is alice
    </div>

    <a href="">天空飘个五个字</a>

</body>
</html>


8.背景

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>背景</title>

    <style type="text/css">
        #img{
            width: 990px;
            height: 980px;

            /*设置背景颜色*/
            /*background-color: yellowgreen;*/

            /*background-image: url("./images/homesmall1.png");*/

            /*!* repeat-x repeat-y no-repeat *!*/
            /*background-repeat: no-repeat;*/

            /*background-position: 10px 20px;*/

            /*简写*/
            /*background:url("./images/homesmall1.png") no-repeat 20px 30px yellowgreen;*/

            background: red;
            padding-top:10px;
            border: 5px solid blue;

        }
    </style>

</head>
<body>

    <div id="img">

    </div>


</body>
</html>


9.盒模型border

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>border</title>
    <style type="text/css">
        .wrap{
            width: 200px;
            height: 200px;
            background-color: #000000;

            /*
            border-top-width: 5px;
            border-bottom-width: 10px;
            border-left-width: 15px;
            border-right-width: 20px;

            border-top-color: red;
            border-bottom-color: yellowgreen;
            border-left-color: yellow;
            border-right-color: blue;


            border-top-style: solid;
            border-bottom-style: dashed;
            border-left-style: dotted;
            border-right-style: double;
            */

            /* 四个值 上 右 下 左 */
            /*
            border-style: dotted dashed double solid;
            border-width: 5px 10px 15px 20px;
            border-color: blue red yellow slateblue;
            */

            /* 三个值 上 左右 下*/
            /*
            border-style: dotted double solid;
            border-width: 5px 10px 20px;
            border-color: blue yellow slateblue;
            */

            /* 两个值 上下 左右 */
            /*
            border-style: dotted solid;
            border-width: 5px 20px;
            border-color: blue yellow;
            */

            /* 一个值 上下左右 */
            /*
            border-style: dotted;
            border-width: 20px;
            border-color: blue;
            */

            /*简写*/
            /*border: 10px solid yellow;*/

        }
    </style>


</head>
<body>
    <div class="wrap"></div>
</body>
</html>


10.margin

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>margin</title>
    <style type="text/css">
        .box1{
            width: 200px;
            height: 200px;
            background-color: #ff5776;

            /*
            margin-top: 20px;
            margin-left: 40px;
            margin-bottom: 20px;
            margin-right: 40px;
            */

            /* 上 右 下 左*/
            /*margin: 20px 30px 40px 50px;*/

            /* 上 左右 下*/
            /*margin: 20px 30px 40px;*/

            /* 上下 左右*/
            /*margin: 20px 40px;*/

            /*margin-bottom: 50px;*/

            /* margin: 0 auto;使盒子元素水平居中  */
            margin: 0 auto;

        }
        /*
        总结：
            垂直方向的特殊性；水平方向没有这种特性；
            当两个垂直外边距相遇时，会形成一个外边距，称为 外边距合并，已大的为基准！！
            注意：父子级盒子 嵌套 设置外边距 会形成外边距合并，影响页面布局，
                  解决办法：给父元素添加 border
            解释：
                所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之（以最大的为基准）。
                毗邻的定义为：
                    同级或者嵌套的盒元素，并且他们之间没有非空内容，padding或者border分割。
                解决办法：（子债父还）
                    1.父级或子元素使用浮动或者绝对定位absolute,浮动或绝对定位不参与margin的折叠。
                    2.父级overflow:hidden
                    3.父级设置padding(破坏非空白的折叠条件)
                    4.父级设置border
        */
        .box2{
            width: 200px;
            height: 200px;
            background-color: yellow;
            margin-top: 100px;
            border: 1px solid chartreuse;
            /*padding: 1px;*/
            /*overflow: hidden;*/
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: #868686;
            margin-top: 150px;
        }

        span{
            background-color: #ff5776;
        }
        .span1{
            margin-left: 40px;
        }
        .span2{
            margin-left:20px;
        }
        

    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2">
        <div class="child"></div>
    </div>

    <span class="span1">12345</span>
    <span class="span2">54321</span>

</body>
</html>


11.padding

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>padding</title>
    <style type="text/css">
        .box1{
            width: 100px;
            height: 200px;
            background-color: #ff5776;

            /*
            内边距：内容区域到边框的距离
                内边距会扩大元素所在的区域
            注意：
                为元素设置内边距 只能影响自己，不会影响其他的元素；
            */

            /*
            padding-left: 20px;
            padding-top: 30px;
            padding-right: 40px;
            padding-bottom: 40px;
            */

            /*
            padding: 10px 20px 30px 40px;
            padding: 10px 30px 50px;
            padding: 10px 20px;
            */
            padding: 10px;

        }
    </style>

</head>
<body>
    <div class="box1">
        12345
    </div>
</body>
</html>

前端开发 - CSS - 上

猜你喜欢