css

一、CSS简介

作用：html是骨架，css是衣服
分类：
1、内联样式
    <p style="color: azure">你好，世界！</p>
2、内部样式
    <style>
        p {
            color: azure;
        }
    </style>
3、外部样式
    <link rel="stylesheet" href="index.css">

二、选择器

1、基本选择器
    a、标签选择器
    作用：应用于相同标签的样式布局
    p {
        color: blue;
    }
    b、ID选择器
    注意：id的值是唯一的，在html的标签中设置id
    #d0 {
        color: red;
    }
    c、类选择器
    注意：class值不唯一的，可以重复,在html的标签中设置class属性
    .t1 {
        color: chartreuse;
        font-size: 40px;
    }
    d、通用选择器
    作用：应用于全局样式设置
    * {
        color: darkgreen;
    }
2、组合选择器
    注意：组合选择器作用的是后面的选择器
    a、后代选择器
    注意：div选择器和p是嵌套关系
    div p {
        color: chocolate;
    }
    b、儿子选择器
    注意：是嵌套关系
    #d1>p {
        color: chartreuse;
    }
    c、毗邻选择器
    注意：并列关系
    div+p {
        color: blueviolet;
    }
    d、弟弟选择器
    注意：并列关系
    #d1~p {
        color: coral;
    }
3、属性选择器
    注意：这里的属性可以自定义，属性可以重复
    [title] {
        color: red;
        font-size: 40px;
    }

    [title="tree"] {
        color: blue;
        font-size: 50px;
    }
　　/*title以什么开头*/
　　[title^="hao"]{
    　　color: red;
　　}

　　/*title以什么结尾*/
　　[title$="de"]{
   　　color: aqua;
　　}

　　/*title包含什么*/
　　[title*=ao]{
    　　color: chocolate;
　　}

　　/*title值是独立的元素*/
　　[title~="de"]{
    　　color: chartreuse;
　　}
4、伪类选择器
/*link链接(没点过)*/
a:link {
   color: black;
}
/* link链接已点击*/
a:visited{
   color: darkred;
}
/*悬浮*/
a:hover{
   color: aqua;
}
/*鼠标点击*/
a:active{
   color: blue;
}
/*鼠标悬浮*/
.c1:hover{
    color: chartreuse;
}
.c1:active{
    color: darkgreen;
}
5、伪元素选择器
/*伪元素原则器     */
/*首字母*/
#p1:first-letter {
    color: darkred;
    font-size: 30px;
}
/*前面*/
#p2:before{
    content: "*";
    color: crimson;
}
/*后面*/
#p3:after{
    content: "[1]";
    color: crimson;
}

6、分组和嵌套
分组
p,
h1 {
    color: darkolivegreen;
    font-size: 50px;
}
嵌套涉及到组合选择器的后代选择器和儿子选择器

三、选择器的优先级

1、内联样式的优先级最高
2、相同选择器以靠近标签的为准
3、选择器的权重值
内联样式1000 id选择器100 类选择器 10 标签选择器 1
注意：权重值相加，永不进位

四、属性

1、字体属性
#p1 {
      font-family: "Microsoft Himalaya", "微软雅黑";
      font-size: 30px;
      font-weight: bolder;
      color: chartreuse;
    }
2、文字属性
文字布局
text-align: left;
文字装饰
a {
    text-decoration: none;
}
首行缩进
text-indent: 24px;
3、背景属性
.d1 {
    height: 600px;
    width: 600px;
    /*背景颜色*/
    background-color: aqua;
    /*背景图片*/
    background-image: url("ss.png");
    /*背景图片是否重复 */
    background-repeat: no-repeat;
    /*背景图片的位置*/
    background-position: center;
}
本人不推荐使用
background: url("ss.png") no-repeat 50% 50%;
4、边框
.d3 {
    width: 600px;
    height: 600px;
    border-width: 10px;
    border-style: solid;
    border-color: crimson;
}
推荐： border: 5px solid #bdb89c;
5、display属性
/*li块级->行内*/
li {
    display: inline;
}

/*块级->行内 ，不占空间*/
.d1 {
    height: 300px;
    width: 300px;
    background-color: blueviolet;
    display: inline;
}
/*行内->块级*/
.s1{
    display: block;
}
6、CSS盒子模型
padding和margin如果有四个值，上、右、下、左
三个值：上、（左右）、下
两个值：上下、左右
div {
    width: 200px;
    height: 200px;
    background-color: blueviolet;
    border: 20px solid red;
    padding: 10px;
    margin: 30px;
}
7、float
div.d1 {
    width: 20%;
    height: 200px;
    background-color: blueviolet;
    float: left;
}
.d2{
    width: 80%;
    height: 200px;
    background-color: gold;
    float: left;
}

8、clear
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }
        /*设置float，浮动*/
        /*设置div为 float*/
        .c1 {
            width: 200px;
            height: 200px;
            /*background-color: aqua;*/
            border: 5px solid red;
            float: left;
        }
        #d1 {
            border: 3px solid black;
        }
        /*利用伪元素选择器和display属性，把""变成块级标签*/
        #d1:after {

            content: "";
            clear: left;
            display: block;
        }
    </style>
</head>
<body>
<div id="d1">
    <div class="c1"></div>
    <div class="c1"></div>
</div>
<div>hello, world</div>
</body>
</html>

9、overfloat 溢出
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .c1{
            height: 200px;
            width: 200px;
            border: 2px solid red;
            overflow: auto;
            
        }
    </style>
</head>
<body>
<div class="c1">君不见黄河之水天上来，奔流到海不复回。君不见高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。烹羊宰牛且为乐，会须一饮三百杯。
岑夫子，丹丘生，将进酒，杯莫停。与君歌一曲，请君为我侧耳听。钟鼓馔玉不足贵，但愿长醉不复醒。古来圣贤皆寂寞，惟有饮者留其名。 陈王昔时宴平乐，斗酒十千恣欢谑。主人何为言少钱，径须沽取对君酌。
五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。
</div>
</body>
</html>

设置圆
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .c2{
            height: 400px;
            width: 400px;
            border: 2px solid rebeccapurple;
            border-radius: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div class="c2"><img src="b.png" alt="图片" title="老婆"></div>
</body>
</html>

10、position
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*relative相对位置*/
        /*absolute绝对位置*/
        /*fixed固定位置*/
        * {
            margin: 0px;
            padding: 0px;
        }
        .c1,
        .c2,
        .c3,
        .c5{
            width: 150px;
            height: 150px;
        }
        .c1{
            background-color: rebeccapurple;
        }
        .c2 {
            background-color: red;
            position: relative;
            left: 300px;
            top: 800px;
        }
        .c3{
            background-color: aqua;
            position: relative;
            left: 200px;
        }
        .c4{
            background-color: red;
            position: fixed;
            right: 20px;
            bottom: 10px;
            width: 50px;
            height: 20px;
        }
        .c5{
            background-color: black;
            position: absolute;
            left: 150px;
            top: 800px;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3">
    <div class="c5"></div>
</div>
<div class="c4"></div>
</body>
</html>

补充

1、伪元素属性
/*input输入框获取焦点时样式*/
input:focus {
  outline: none;
  background-color: #eee;
}
2、清除float的副作用
.clearfix:after{
    content: "";
    display: block;
    clear: both;
}
3、background-attachment: fixed; 固定图片
4、知识点
a、块级标签可以设置高和宽，行内模块不能设置
b、float后，变成块级模块，自动脱离文件流