CSS速成

原视频地址：https://www.bilibili.com/video/BV1bW411R7hg

什么是CSS

三种方式添加CSS

id是独一无二的，可以将多个tag赋予同一个class名字

三种选择器方式

CSS颜色

CSS字体

sans-serif 有无衬线
monospace 等宽字体
Arial,Helvetica 两种字体，优先选择前面的
"Times new roman"用括号表示这是一个字体

body{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.5em;
}
.box1{
    background-color: beige;
    color:orchid;
}
.box1 h1{
    font-family: 'Times New Roman', Times, serif;
    font-weight: 800;
    font-style: italic;
    text-decoration: underline;
    text-transform: uppercase;
    letter-spacing: 1em;
    word-spacing: 2em;
}
.container{
    width:80%;
    margin:auto;
}

盒子模型

padding：内边距
margin：外边距

外边距重叠（合并）：
当两个盒子在一起时，只会取两个margin中最大的作为外边距，所以外边距只会有一份，不会有两份。

margin指定方式：
①顺时针方向指定，上右下左，使用空格隔开。
②上下一样，左右一样。
③左右边距一致，上下边距不一致：第一个是上边距，最后一个是下边距，中间的是左右边距。

使用内边距时把margin改成padding即可。

<div class="lists">
            <ul>
                <li>List 1</li>
                <li>List 2</li>
                <li>List 3</li>
                <li>List 4</li>
                <li>List 5</li>
            </ul>
        </div>

输入li*5点Enter键就可以生成5个li标签

相对路径

“./”：代表目前所在的目录。

“…/”：代表上一层目录。

以"/"开头：代表根目录。

给list加图片

.list li{
    list-style-image: url('../image/check.jpg');
    list-style:square//方形
}

标题居中

text-align: center;

button按钮

button{
    background-color: palegreen;
    padding:10px 20px;
    margin:5px 10px;
}
button:hover{//移动到button上
    background-color: purple;
}
button:active{//点击button
    background-color: rosybrown;
}

hover选择器：选择鼠标指针浮动在其上的元素，并设置其样式。

超链接

<ul>
                <li><a href="#">List 1</a></li>
                <li><a href ="#">List 2</a></li>
                <li><a href="#">List 3</a></li>
                <li><a href="#">List 4</a></li>
                <li><a href="#">List 5</a></li>
</ul>

改变超链接的样式：

a{
    text-decoration: none;
    color:royalblue;
}
a:hover{
    color:forestgreen;
}
a:visited{
    color:red;
}

浮动

<div class="block">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium ab officia, est laborum id eligendi fugiat voluptatum ut inventore nobis quas odio. Pariatur tempora reprehenderit rerum alias eum accusamus suscipit.</p>
        </div>
        <div class="block">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium ab officia, est laborum id eligendi fugiat voluptatum ut inventore nobis quas odio. Pariatur tempora reprehenderit rerum alias eum accusamus suscipit.</p>
        </div>
        <div class="block">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium ab officia, est laborum id eligendi fugiat voluptatum ut inventore nobis quas odio. Pariatur tempora reprehenderit rerum alias eum accusamus suscipit.</p>
        </div>

.block{
    float: left;
    width:33.3%;
    border: 1px solid #ccc;
    box-sizing: border-box;//代表有边框
}

        <div id="main-block">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat voluptas atque obcaecati doloremque assumenda, enim sapiente nobis iure culpa eius exercitationem error aliquid magni consequatur. Ex laudantium quis quos veniam.</p>
        </div>
        <div id="sidebar">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat voluptas atque obcaecati doloremque assumenda, enim sapiente nobis iure culpa eius exercitationem error aliquid magni consequatur. Ex laudantium quis quos veniam.</p>
        </div>

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

浮动使用完需要清除

<div class="clearfix"></div>

.clearfix {
    clear: both;
}

列表选择器

.list2 li:nth-child(even){
    color:gray;
}
.list2 li:first-child{
    background-color: rgb(255, 255, 100);
}
.list2 li:nth-child(3){
    color:blueviolet;
}

position in CSS

absolute在没有上下文relative时，是参考当前视窗做偏移的。
relative是参考原位置做偏移。

position:absolute;
top:30px;
left:30px;

<div class="position-box">
     <h1>Heading1</h1>
     <h2>Heading2</h2>
</div>

.position-box {
    width: 500px;
    height: 500px;
    border: 1px solid black;
    position: relative;
}
.position-box h1{
    position: absolute;
    top:50px;
}
.position-box h2{
    position: absolute;
    left:30px;
}

固定position：
按钮固定在右下角

<button id="fixed">Button</button>

#fixed {
    position: fixed;
    right: 0px;
    bottom: 0px;
}