CSS学习笔记（基础部分）

一、CSS 简介：

　　CSS 指层叠样式表 (Cascading Style Sheets)，用来设置HTML的格式。

　　语法：选择器 {属性:值;属性:值}

　　注释：//注释内容 /*注释内容*/

二、CSS的引入方式：行内嵌、嵌入式、链接式、导入式

　　1.行内嵌：

<body>
    <p style="color: red">hello world</p>
</body>

　　2.嵌入式：

        <!DOCTYPE html>
        <html>
        <head>
            <style>
                p {
                    color: green;
                }
            </style>
        </head>
        <body>
            <p>hello world</p>
        </body>
        </html>

　　3.链接式：

        <!DOCTYPE html>
        <html>
        <head>
            <link rel="stylesheet" type="text/css" href="mystyle.css">
        </head>
        <body>
            <p>hello world</p>
        </body>
        </html>

　　css文件

        p {
            color: red;
        }

　　4.导入式：

        <!DOCTYPE html>
        <html>
        <head>
            <style>
                @import "mystyle.css";
            </style>
        </head>
        <body>
            <p>hello world</p>
        </body>
        </html>

样式优先级：
　　（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

三、选择器

1.基本选择器
　　1.1通用选择器

        <!DOCTYPE html>
        <html>
        <head>
            <style>
                * {
                    color: red;
                }
            </style>
        </head>
        <body>
            <h>hello</p>
            <p>world</p>
        </body>
        </html>

1.2标签选择器

        <!DOCTYPE html>
        <html>
        <head>
            <style>
                p {
                    color: red;
                }
            </style>
        </head>
        <body>
            <h1>hello</h1>
            <p>world</p>
        </body>
        </html>

1.3 ID选择器

        <!DOCTYPE html>
        <html>
        <head>
            <style>
                #name {
                    color: red;
                }
            </style>
        </head>
        <body>
            <p>hello</p>
            <p id="name">诸葛孔明</p>
        </body>
        </html>

1.4class选择器

        <!DOCTYPE html>
        <html>
        <head>
            <style>
                .name {
                    color: red;
                }
            </style>
        </head>
        <body>
            <p class="name">诸葛孔明</p>
            <p class="name">诸葛子瑜</p>
            <p class="name">诸葛公休</p>
        </body>
        </html>

2.组合选择

　　2.1后代选择器

        <!DOCTYPE html>
        <html>
        <head>
            <style type="text/css">
                #food p{
                    color: green;
                }
                #food div{
                    font-size: 20px; 
                }
            </style>
        </head>
        <body>
            <div id="food">
                <div class="fruits">
                    <p>苹果</p>
                    <p>香蕉</p>
                </div>
                <div class="dessert">
                    <p>蛋糕</p>
                    <p>巧克力</p>
                </div>
            </div>
        </body>
        </html>

　　2.2子代选择器

        <!DOCTYPE html>
        <html>
        <head>
            <style type="text/css">
                #food>p{
                    color: green;
                }
                #food>div{
                    font-size: 20px; 
                }
            </style>
        </head>
        <body>
            <div id="food">
                <div class="fruits">
                    <p>苹果</p>
                    <p>香蕉</p>
                </div>
                <div class="dessert">
                    <p>蛋糕</p>
                    <p>巧克力</p>
                </div>
            </div>
        </body>
        </html>

　　2.3变形选择器

        <!DOCTYPE html>
        <html>
        <head>
            <style type="text/css">
                #fav, .fruits{
                    color: red;
                }
            </style>
        </head>
        <body>
            <p id="fav">Favourite</p>
            <div id="food">
                <div class="fruits">
                    <p>苹果</p>
                    <p>香蕉</p>
                </div>
                <div class="dessert">
                    <p>蛋糕</p>
                    <p>巧克力</p>
                </div>
            </div>
        </body>
        </html>

　　2.4毗邻选择器

　　　　紧接在另一元素后的元素，且二者有相同父元素。

        <!DOCTYPE html>
        <html>
        <head>
            <style type="text/css">
                div+p{
                    color: red;
                }
            </style>
        </head>
        <body>
            <p>p 1</p>
            <div>
                <p>div1</p>
            </div>
            <p>p 2</p>
            <p>p 3</p>
        </body>
        </html>

　　3.属性选择器

[attribute]            [target]    选择所有带有target属性元素    
[attribute=value]    [target=-blank]    选择所有使用target="-blank"的元素    
[attribute~=value]    [title~=flower]    选择标题属性包含单词"flower"的所有元素    
[attribute|=language]    [lang|=en]    选择一个lang属性的起始值="EN"的所有元素    
[attribute^=value]    a[src^="https"]    选择每一个src属性的值以"https"开头的元素    
[attribute$=value]    a[src$=".pdf"]    选择每一个src属性的值以".pdf"结尾的元素    
[attribute*=value]    a[src*="runoob"]    选择每一个src属性的值包含子字符串"runoob"的元素

　　4.伪类

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link{    /* 没有访问过的连接 */
            color: red;
        }
        a:visited{ /* 已经访问过的颜色 */
            color: green;
        }
        a:hover{ /* 鼠标放上的颜色 */
            color: yellow;
        }
        a:active{ /* 鼠标点击时的颜色 */
            color: blue;
        }
        p:after{ /* 位于元素之后的格式 */
            content: ' world';
        }
        p:before{ /* 位于元素之前的格式 */
            content: "你好 世界";
            color: green;
        }
    </style>
</head>
<body>

<a href="https://www.baidu.com">百度一下</a>
<p>hello</p>
</body>
</html>

四、属性

　　1.背景属性

        <!DOCTYPE html>
        <html>
        <head>
            <title>Title</title>
            <style type="text/css">
                div {
                    height: 1000px;
                    background-color: gray;
                    background-image: url("mayun.jpg");
                    background-repeat: no-repeat;
                    background-size: 200px, 300px;
                    background-position:center;
                    /* background-attachment:fixed; */
                    //可以简写为下面的格式
                    //background: url("mayun.jpg") gray no-repeat center;
                }
            </style>
        </head>
        <body>
            <div></div>
        </body>
        </html>

　　2.颜色属性

        <!DOCTYPE html>
        <html>
        <head>
            <title>Title</title>
            <style type="text/css">
                h1 {
                     color:     #87CEEB;
                    /* color: red; */
                    /* color: rgb(255,255,0); */
                    /* color:rgba(255,0,0,0.2); */
                    opacity: 0.5  /* 透明度 */
                }
            </style>
        </head>
        <body>
            <h1>hello world</h1>
        </body>
        </html>

　　3.字体属性

        <!DOCTYPE html>
        <html>
        <head>
            <title>Title</title>
            <style type="text/css">
                h1 {
                     font-family:"Times New Roman", Times, serif;
                     font-size: 30px;
                     font-style: italic;
                     font-weight:lighter;
                }
            </style>
        </head>
        <body>
            <h1>hello world</h1>
        </body>
        </html>

　　font-weight的属性值
　　　　normal 默认值。定义标准的字符。
　　　　bold 定义粗体字符。
　　　　bolder 定义更粗的字符。
　　　　lighter 定义更细的字符。
　　　　100-900 定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。

　　4.文本属性

        <!DOCTYPE html>
        <html>
        <head>
            <title>Title</title>
            <style type="text/css">
                p {
                    color: green;                      /* 字体颜色 */
                    direction: ltr;                  /* 字体方向 rtl */
                    letter-spacing: 5px;             /* 字母间隔 */
                    word-spacing:30px;                /* 单词间隔 */
                    line-height: 30px;                 /* 行距 */
                    text-align: center;              /* 位置：left|right|justify */
                    text-decoration:line-through;     /* 删除线：overline | underline */
                    text-transform:capitalize;      /* 大小写：uppercase|lowercase */    
                }
            </style>
        </head>
        <body>
            <p>life is short, <br>you need python.</p>
        </body>
        </html>

　　5.内外边距

　　外边距：

　　　　margin:10px 5px 15px 20px;
　　　　　　上边距是 10px
　　　　　　右边距是 5px
　　　　　　下边距是 15px
　　　　　　左边距是 20px
　　　　margin:10px 5px 15px;
　　　　　　上边距是 10px
　　　　　　右边距和左边距是 5px
　　　　　　下边距是 15px
　　　　margin:10px 5px;
　　　　　　上边距和下边距是 10px
　　　　　　右边距和左边距是 5px
　　　　margin:10px;
　　　　　　所有四个边距都是 10px

　　　　margin-bottom 设置元素的下外边距
　　　　margin-left 设置元素的左外边距
　　　　margin-right 设置元素的右外边距
　　　　margin-top 设置元素的上外边距

　　内边距：

　　　　padding 与margin相同

　　6.边框

        <!DOCTYPE html>
        <html>
        <head>
            <title>Title</title>
            <style type="text/css">
                div {
                    height: 200px;
                    width: 200px;
                    /* border:red solid 5px; */
                    border-bottom:red solid 5px;
                    border-top: green dotted 5px;
                    border-left: blue dashed 5px;
                    border-right: gray  double 5px;
                    border-radius:20%;
                }
            </style>
        </head>
        <body>
            <div>
            </div>
            
        </body>
        </html>

　　7.宽高设置：　

        height    设置元素的高度。
        line-height    设置行高。
        max-height    设置元素的最大高度。
        min-height    设置元素的最小高度。
        width    设置元素的宽度。
        max-width    设置元素的最大宽度。
        min-width    设置元素的最小宽度。

　　8.display:

        none    此元素不会被显示。
        block    此元素将显示为块级元素，此元素前后会带有换行符。
        inline    默认。此元素会被显示为内联元素，元素前后没有换行符。
        inline-block    行内块元素。（CSS2.1 新增的值）

五、元素位置：

正常文档流：
　　将元素（标签）在进行排版布局的时候按从左到右，从上到下的顺序进行排版
脱离文档流：
　　将元素（标签）从文档流中取出进行覆盖，其他元素会按文档流中不存在该元素重新进行布局
　　非完全脱离：float（浮动）
　　完全脱离：position（定位）中的absolute,fixed

　　1.float
　　　　float 使元素向左或向右移动，其周围的元素也会重新排列属性值：left | right
　　　　clear 指定不允许元素周围有浮动元素。属性值：left | right | both

　　2.position

　　　　2.1static：默认值

　　　　2.2relative：相对其正常位置

        <!DOCTYPE html>
        <html>
        <head>
            <title></title>
            <style type="text/css">
                #p2{
                    position: relative;
                    left: 20px;
                }
            </style>
        </head>
        <body>
            <p id="p1">hello world</p>
            <p id="p2">hello world</p>
        </body>
        </html>

　　　　2.3 fixed:位置相对于浏览器窗口是固定位置

        <!DOCTYPE html>
        <html>
        <head>
            <title></title>
            <style type="text/css">
                a{
                    position: fixed;
                    right: 100px;
                    bottom: 100px;
                
                }
            </style>
        </head>
        <body>
            <div id="top" style="height: 50px;background-color: green"></div>
            <div id="content" style="height: 1000px; background-color: gray">
                
            </div>
            <a href="#top">返回顶部</a>
        </body>
        </html>

　　　　　　2.4 absolute:

　　　　　　　　如果其父级的position设置为非static，则按照父级的位置进行移动，如果没有就继续向上找，如果都没有就按html的位置进行移动.
　　　　　　　　在下面的例子中，如果div1没有设置position的属性，那么div2就会按照HTML的相对位置进行定位，如果设置了div1的relative，那么div2才会按照div1的位置进行定位。

　　　　　　　<!DOCTYPE html>
            <html>
            <head>
                <style type="text/css">
            /*         #div1{
                        position: relative;
                    } */
                    #div2{
                        position: absolute;
                        top: 100px;

                    }
                </style>
            </head>
            <body>
                <div style=" 300px;height: 200px;background-color: gray"></div>
                <div id="div1" style=" 300px;height: 200px;background-color: green">
                    <div id="div2" style=" 300px;height: 100px;background-color: red"></div>
                </div>
            </body>
            </html>

　　　　　　2.5 sticky

        <!DOCTYPE html>
        <html>
        <head>
            <title></title>
            <style type="text/css">
                #div2{
                    position: -webkit-sticky;
                    position: sticky;
                    top: 0;
                }
            </style>
        </head>
        <body>
            <div id="div1" style="height: 200px;background-color: gray"></div>
            <div id="div2" style="height: 100px;background-color: green"></div>
            <div id="div3" style="height: 800px;background-color: gray"></div>
        </body>
        </html>

六、导航栏

<!DOCTYPE html>
<html>
<head>
    <title>我的主页</title>
    <style type="text/css">
        /* 全局设置，取消外边框 */
        * {
            margin: 0;
            padding: 0;
        }
        /* 顶部的高度 和背景颜色*/
        .head{
            height: 44px;
            background-color: #2459a2;
        }
        .head-content {
            position: relative;
            margin: auto;
            width: 1024px;
            height: 44px;
            line-height: 44px;
            background-color: #2459a2;
            /* background-color: red; */
        }

        .menu {
            margin-left: 50px;
        }


        .menu ul li, .login a{
            list-style-type: none;
            display: inline-block;
            float: left;
            padding: 0 15px;    

        }

        .head-content a{
            text-decoration: none;    
            color: white;
        }

        .active{
            background-color: #006400;
        }

        .menu li:hover:not(.active),.login a:hover{
                background-color: gray;
        }

        .login {
            /* background-color: blue; */
            float: right;
            margin-right: 50px;
        }
    </style>
</head>
<body>
    <div class="head">
        <div class="head-content">
            <div class="menu">
                <ul>
                    <li class="active" ><a href="#home">主页</a></li>
                    <li><a href="#news">新闻</a></li>
                    <li><a href="#blog">博客</a></li>
                    <li><a href="#bbs">论坛</a></li>
                    <li><a href="#contact">联系</a></li>
                    <li><a href="#about">关于</a></li>    
                </ul>                                    
            </div>
            <div class="login">
                <a href="#login">注册</a>
                <a href="#register">登录</a>    
            </div>
        </div>
    </div>
</body>
</html>

导航栏

七、下拉菜单

相关阅读:
如何用纯 CSS 创作一个跳动的字母 i
如何用纯 CSS 创作一个变色旋转动画
 如何用纯 CSS 创作气泡填色的按钮特效
 如何用纯 CSS 创作一个跳 8 字型舞的 loader
如何用纯 CSS 创作一只徘徊的果冻怪兽
 如何用纯 CSS 创作一个单元素抛盒子的 loader
如何用纯 CSS 创作单元素点阵 loader
如何用纯 CSS 创作一个摇摇晃晃的 loader
[Monkey King]
473. 核电站问题
原文地址：https://www.cnblogs.com/gaoyuanzhi/p/9289717.html