基础

三种CSS的添加方式

内部样式表

<style>
     h1 {
         color: red;
        }
 </style>

内联样式

<h1 style="color:red">CSS内联样式</h1>

css选择器

https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors

关于颜色以及取值

参考

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

关于字体

https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals

https://cssfontstack.com

https://fonts.google.com

盒子模型

多个盒子的连接方式

外边框塌陷

外边框重叠

margin写法

p{
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 10px;
    margin-right: 10px;
}
----------------------------------------------
p{
    margin: 5px 10px 5px 10px; /* 顺时针填写 上 右 下 左*/
}

当上边距和下边距 一样  , 左边距和右边距一样 可以简写为
p{
    margin: 5px 10px;
}

当所有边距都一样
p{
    margin: 5px;
}

demo

HTML

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="./css/01.css">
        <title>CSS学习</title>
        
    </head>

    <body>
        <div class="container">
            <div class="box1">
                <h1>Hello World</h1>
                <h1>CSS</h1>
                <h1 style="color:black">CSS内联样式</h1>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Adipisci voluptatibus illum quibusdam ipsam sit esse facilis culpa neque voluptatem! Vero, maiores exercitationem! Maxime nemo voluptatum cumque, quidem labore optio expedita blanditiis impedit in totam ipsa architecto sapiente fugit possimus. Ab voluptas itaque nesciunt ratione hic ipsa tenetur quae fugiat, inventore dicta illo sit cupiditate nobis harum consectetur odit officia quibusdam ipsum qui distinctio debitis. Illo est recusandae molestias repellat quis? Totam dicta quibusdam sapiente neque quae molestias, consequuntur ea quod asperiores magnam voluptatum soluta accusantium dolorum perferendis deserunt omnis obcaecati quam, itaque veritatis! Facere obcaecati aperiam quasi officia, ea neque ut alias a velit perspiciatis eaque saepe qui quas similique in, earum iste, est beatae! Magni, earum architecto neque, vitae eaque expedita autem sapiente voluptatum eius maiores eveniet ipsum beatae? Soluta dolorem tenetur cum! Iusto voluptatem molestias alias debitis, quod sed officiis? Nobis itaque cupiditate commodi inventore possimus eaque corrupti vero assumenda, rem, ad quas nesciunt mollitia id perspiciatis ab natus doloribus! Saepe magnam dolore eius officia ab atque perspiciatis, quo temporibus repellendus animi fugit, ipsum voluptatem impedit debitis molestias omnis soluta. Quo qui nemo ea assumenda harum quae eos quis, sint et maiores voluptas accusantium, unde enim minus rerum!</p>
            </div>
            <div class="box2">
                <h1>Hello World</h1>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Adipisci voluptatibus illum quibusdam ipsam sit esse facilis culpa neque voluptatem! Vero, maiores exercitationem! Maxime nemo voluptatum cumque, quidem labore optio expedita blanditiis impedit in totam ipsa architecto sapiente fugit possimus. Ab voluptas itaque nesciunt ratione hic ipsa tenetur quae fugiat, inventore dicta illo sit cupiditate nobis harum consectetur odit officia quibusdam ipsum qui distinctio debitis. Illo est recusandae molestias repellat quis? Totam dicta quibusdam sapiente neque quae molestias, consequuntur ea quod asperiores magnam voluptatum soluta accusantium dolorum perferendis deserunt omnis obcaecati quam, itaque veritatis! Facere obcaecati aperiam quasi officia, ea neque ut alias a velit perspiciatis eaque saepe qui quas similique in, earum iste, est beatae! Magni, earum architecto neque, vitae eaque expedita autem sapiente voluptatum eius maiores eveniet ipsum beatae? Soluta dolorem tenetur cum! Iusto voluptatem molestias alias debitis, quod sed officiis? Nobis itaque cupiditate commodi inventore possimus eaque corrupti vero assumenda, rem, ad quas nesciunt mollitia id perspiciatis ab natus doloribus! Saepe magnam dolore eius officia ab atque perspiciatis, quo temporibus repellendus animi fugit, ipsum voluptatem impedit debitis molestias omnis soluta. Quo qui nemo ea assumenda harum quae eos quis, sint et maiores voluptas accusantium, unde enim minus rerum!</p>
                <button>这是个按钮</button>
            </div>
            <div class="list1">
            <ul>
                <li><a href="#">list1</a></li>
                <li><a href="##">list2</a></li>
                <li><a href="###">list3</a></li>
                <li><a href="####">list4</a></li>
                <li><a href="#####">list5</a></li>
                <li><a href="######">list6</a></li>
            </div>
            </ul>

            <div class="block">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, ipsum, facilis libero tempora illum modi corporis repellat perferendis doloremque a cumque deleniti debitis assumenda mollitia iure omnis possimus officiis esse quae cupiditate. Nulla eius iure et obcaecati commodi enim, repellat ratione magni ipsa consequuntur inventore eligendi illo, illum tempora unde!</p>
            </div>
            <div class="block">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, ipsum, facilis libero tempora illum modi corporis repellat perferendis doloremque a cumque deleniti debitis assumenda mollitia iure omnis possimus officiis esse quae cupiditate. Nulla eius iure et obcaecati commodi enim, repellat ratione magni ipsa consequuntur inventore eligendi illo, illum tempora unde!</p>
            </div>
            <div class="block">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, ipsum, facilis libero tempora illum modi corporis repellat perferendis doloremque a cumque deleniti debitis assumenda mollitia iure omnis possimus officiis esse quae cupiditate. Nulla eius iure et obcaecati commodi enim, repellat ratione magni ipsa consequuntur inventore eligendi illo, illum tempora unde!</p>
            </div>
            <div class="clearfix"></div>
            <div id="main-block">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga velit dicta aut praesentium tempora, laboriosam ut tempore vitae ratione blanditiis eveniet impedit eum corrupti, quisquam animi! Sunt sint expedita harum perferendis, at nobis ipsam. Cupiditate eveniet tempore optio et soluta alias, nostrum at, nam maxime, vero illum sit voluptatibus esse provident harum corrupti accusamus dolor aliquid quidem libero aliquam unde dignissimos repudiandae? Velit quasi est, porro fugiat ducimus dignissimos saepe mollitia doloribus ullam, quibusdam ut quis natus suscipit, impedit consequatur!</p>
            </div>
            <div class="clearfix"></div>
            <div id="sidebar">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga velit dicta aut praesentium tempora, laboriosam ut tempore vitae ratione blanditiis eveniet impedit eum corrupti, quisquam animi! Sunt sint expedita harum perferendis, at nobis ipsam. Cupiditate eveniet tempore optio et soluta alias, nostrum at, nam maxime, vero illum sit voluptatibus esse provident harum corrupti accusamus dolor aliquid quidem libero aliquam unde dignissimos repudiandae? Velit quasi est, porro fugiat ducimus dignissimos saepe mollitia doloribus ullam, quibusdam ut quis natus suscipit, impedit consequatur!</p>
            </div>
            <div class="clearfix"></div>
        </div>
        <div style="margin-top: 1000px;"></div>
    </body>
</html>

CSS

body{
    background-color: #f4f4f4;
    color: #555555;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: bold;
    line-height: 2em;
}
.box1{
    background-color: f4f4f4;
    color: #555555;

    border: 5px blue solid;
    border-top: 8px burlywood double;
    border-right: 10px red solid;
    border-bottom: 15px green dotted;

    border-bottom-width: 8px;
    border-bottom-style:double;
    margin-top: 100px;
}

.box1 h1{
    font-family: 'Times New Roman', Times, serif;
    font-size: 25px;
    font-weight: 800;
    font-style: italic;
    text-decoration: underline;

    letter-spacing: 1em; /* 字间距 */
    word-spacing: 2em; /* 词间距 */
}
.box2{
    border: 5px dashed #ccc;
    border-radius: 36px;
    padding: 20px 10px 20px;
    margin: 30px 0px;
}

.container{
    width: 50%;
    margin: auto;
}




button{
    background-color: burlywood;
    border-radius: 10px;
}

button:hover{
    background-color: rebeccapurple;
}

button:active{
    background-color:blue;
}



.list1{
    background-color: #ccc;
    list-style-image: url(https://cdn.jsdelivr.net/gh/fanygOfficial/cdn@img/img/202204072326768.png);
}

a {
    text-decoration: none;
    color: #555555;
}
a:hover {
    color: aqua;

}

a:visited {
    color: red;
}


.clearfix {
    clear: both;
}

.block {
    float: left;
    width: 33.3%;
    border: 1px #ccc solid;
    box-sizing: border-box;
    padding: 20px;
}

#main-block {
    float: left;
    width: 70%;
    border: 1px solid #ccc;
    box-sizing: border-box;
    padding: 20px;
}


#sidebar {
    float: left;
    width: 30%;
    border: 1px solid #ccc;
    box-sizing: border-box;
    padding: 20px;
}

资源参考

书籍推荐

<< Head First HTML与CSS >>

<< JavaScript高级程序设计 >>

<< Head First JavaScript程序设计>>

<< CSS权威指南 >>

https://developer.mozilla.org/zh-CN/docs/Learn/HTML

https://zh.learnlayout.com/

https://www.w3school.com.cn/

CSS 速成笔记1

基础

三种CSS的添加方式

内部样式表

内联样式

css选择器

更多的资料参考

关于颜色以及取值

关于字体

盒子模型

margin写法

demo

资源参考

书籍推荐