前端之CSS

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
    
    
    link href="test1.css" rel="stylesheet">
    
    style>
        @import "test2.css"; /* 这样会出现短暂的无渲染的html框架，然后再出现css渲染 */
    style>
    
    style>
        p{
            color: rebeccapurple;
            font-size: 40px;
        }
        a{
            text-decoration: none;
        }
    style>
head>
body>
    
    div style="color: red;background-color: green;height: 100px">hello hgzerowzhdiv>
    a href="https://cdn.jsdelivr.net/gh/hgzerowzh/blog_website/data/image/wechat_code_money.png" target="_blank">资助一下a>
    p>shitp>
body>
html>

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
    style>
        *{
            color: red;
        }
        div{          /* 这是一个标签选择器 */
            color: yellow;
        }
        #little_p{    /* 这是一个id选择器 */
            background-color: blue;
        }
        .the_p{       /* 这里表示一个类选择器 */
            color: aqua;
        }
        div.cuihua{   /* 这种选择器表示一个名叫cuihua的div标签(找一个标签) */
            color: greenyellow;
        }
        #little_p, div.cuihua{  /* 这里表示一个多重选择器, 表示并列的关系 */
            color: rebeccapurple;
        }
        .div1 .div2{           /* 这是一个层级选择器 ，div1下面的div2标签 */
            color: darkred;
        }
        .div1>.div2{           /* 这是一个子代选择器，只找div1的子代元素标签 */
            color: #000;
        }
        .div1 + div{           /* 毗邻选择器，找div1相邻的(要紧挨着它)下一个div标签 */
            color: greenyellow;
        }
    style>
head>
body>
    div>hello divdiv>
    p id="little_p">pppp>
    p class="the_p">ppp>
    p>pp>
    a href="">a>
    div class="cuihua">翠花div>
    div class="before_div1">
        before div1
    div>
    div class="div1">
        div class="div2">
            a href="">aa>
            p>ppp>
            div>div3div>
        div>
    div>
    div class="after_div1">
        after div1
    div>
body>
html>

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
    style>
        [alex]{
            color: red;
        }
        [alex=‘dsb‘]{  /* 这是一个自定义的属性选择器 */
            color: greenyellow;
        }
        p[alex=‘dsb‘]{  /* 这个属性选择器只选择alex等于dsb的p标签 */
            color: blue;
        }
        [alex~="LI"]{  /* 匹配所有alex属性具有多个空格分隔的值，其中一个值等于LI的元素 */
            color: pink;
        }
         [alex^="LI"]{  /* 匹配alex属性中以LI开头的元素(只要以LI开头就ok，不管是LIab还是LIbc都匹配) */
            color: pink;
        }
         [alex$="LI"]{  /* 匹配alex属性中以LI结尾的元素 */
            color: pink;
        }
         [alex*="LI"]{  /* 匹配alex属性中包含LI的元素(只要属性值中包含LI就ok) */
            color: pink;
        }
    style>
head>
body>
    div alex="sb">alex_sbdiv>
    div alex="dsb">alex_dsbdiv>
    p alex="dsb">这是一个p标签p>
    div alex="sb LI">alexdiv>
body>
html>

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
    style>
        a:link{   /* 什么操作都不做时显示什么颜色 */
            color: red;
        }
        a:visited{  /* 这个伪类表示访问过这个a标签后显示什么颜色 */
            color: blue;
        }
        a:hover{    /* 这里表示鼠标悬浮在这个a标签上方时显示什么颜色 */
            color: green;
        }
        a:active {  /* 点击这个a标签时显示什么颜色 */
            color: yellow;
        }
        .box:hover .top{
            background-color: red;
        }
        .add:after{  /* 这个伪类会自动的将content中的内容添加到标签内容的后面 */
            content: ‘  welcome to here!‘;
            color: dodgerblue;
        }
        .add:before{  /* 这个伪类会自动的将content中的内容添加到标签内容的前面 */
            content: ‘Yeah ~ ‘;
            color: red;
        }
    style>
head>
body>
    a href="http://hgzerowzh.com">Pray の 小破站a>
    div class="box">
        div class="top">div>
        div class="bottom">div>
    div>
    div class="add">hello hgzerowzhdiv>
body>
html>

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
    style>
        .div1{
            color: rebeccapurple;
        }
        div{
            color: yellow;
        }
        #id1{
            color: lightblue;
        }
    style>
head>
body>
    div class="div1" id="id1">优先级div>
 
    
        
        
        
        
        
        
        
body>
html>

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
    style>
        p{   /* 字体属性 */
            font-size: 20px;
            font-family:"Microsoft YaHei UI";
            font-weight:lighter;
            /*设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗*/
            font-style: italic;
            /*设置字体是否倾斜，如：font-style:‘normal‘; 设置不倾斜，font-style:‘italic‘;设置文字倾斜*/
        }
        .back{ 
            width: 800px;
            height: 800px;
            background-image: url(img.jpg);   /*  默认是重复填充 */
            background-repeat:no-repeat;
            background-position: 0 250px;     /* 第一个参数是控制x轴的距离，第二个参数控制y轴的距离 */
            background-attachment: fixed;     /*  设置背景图片是固定还是随着页面滚动条滚动 */
            /*  background: #000 url("img.jpg") no-repeat 0 250px fixed;    */
        }
        span{
            display: inline-block;  /* 将内联标签变成块级标签,只有块级标签才能设置长和宽 */
            width: 18px;
            height: 20px;
            background-image: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13");
            background-position: 0 -100px;
        }
    style>
head>
body>
    p>welcome to this place!p>
    
    div style="color: blue;">pppdiv>
    div style="color: #7165ff;">pppdiv>
    div style="color: rgb(255,0,0);">pppdiv>       
    div style="color: rgba(255,0,0,0.5);">pppdiv>  
    div class="back">hellodiv>
    span>span>
body>
html>

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
    style>
        .div1{
            height: 100px;
            background-color:red;
            text-align: center; /* 使文本水平方向居中 */
            line-height: 100px; /* 设置行高(一行的高度) */
 
            text-indent: 150px; /* 设置首行缩进 */
 
            letter-spacing: 10px; /* 设置各个文字之间的间距 */
            word-spacing: 10px; /* 英文单词与单词之间的间距 */
            text-transform: capitalize; /* 设置各个单词的首字母大写(一般设置标题的时候用) */
        }
        .div2{
            width: 200px;
            height: 200px;
            border-color: blue;
            border-style: solid;
            border-width: 5px;  /* 设置边框的厚度 */
            border: 2px solid red;  /* 也可以直接写三个值 */ 
        }
    style>
head>
body>
    div class="div1">文本属性div>
    div class="div2">边框属性div>
body>
html>

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
    style>
        ol,ul{
            /*list-style: lower-latin; !* 以abc...开头 *!*/
            list-style: none; /* 去掉开头的效果 */
        }
        div,p,a{
            height: 100px;   /* 只有块级标签才可以设置长和宽的属性 */
            width: 100px;
        }
        div{
            background-color: yellow;
        }
        p{
            background-color: #7165ff;
            display: inline;  /* 这里将p这个块级标签设置成行内标签 */
        }
        a{
            background-color: red;
            /*display: block;  !* 这里将a这个行内标签设置成块级标签 *!*/
            /*display: none; !* 隐藏这个标签 *!*/
            display: inline-block; /* 设置成行内块，可以设置长和宽，也可以在一行内进行横向堆叠 */
        }
    style>
head>
body>
    ol>
        li>111li>
        li>222li>
        li>333li>
    ol>
    ul>
        li>111li>
        li>222li>
        li>333li>
    ul>
    div> div div div div div divdiv>
    p>ppppppppp>
    span>span span span span span span span>
    a href="#">clicka>
body>
html>

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
    style>
        body{
            margin: 0;     /* 将浏览器自动给body设置的margin边距取消掉 */
        }
        .div1{
            width: 200px;  /* 这里的长和宽不包含边框的宽度,也不包含padding的宽度 */
            height: 200px;
            background-color: blue;
            border: 20px solid yellow;
            padding: 40px; /* 设置内边距 */
            margin: 20px;  /* 设置外边距 */
            /*margin: 10px 20px 20px 10px; !* 这里的顺序为 上，右，下，左，(顺时针方向) *!*/
        }
        .div2{
            width: 200px;
            height: 200px;
            background-color: red;
            border: 20px solid green;
        }
 
        /*边界塌陷或边界重叠：*/
            /*1.兄弟div：上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值*/
            
            /*2.父子div：父级div中没有border，padding，inline content，子级div中的margin会一直向上找，*/
                /*直到找到某个标签包括border，padding，inline content中的一个，然后按此div进行margin*/
    style>
head>
body>
    div class="div1">hello div1div>
    div class="div2">hello div2div>
body>
html>

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
    style>
        .div1{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
            /*【注意】：当初float被设计的时候就是用来完成文本环绕的效果，所以文本不会被挡住，即float的特征，*/
            /*即float是一种不彻底的脱离文档流方式*/
        }
        .div2{
            width: 200px;
            height: 100px;
            background-color: blue;
            float: left;
            clear: left; /* 表示清除这个标签左边的浮动(这个标签的左边不能有浮动的对象，若有，则另起一行) */
            /* clear属性只会对自身起作用，而不会影响其他元素，如果一个元素的右侧有浮动的对象，而这个元素设置了不允许右边有浮动的对象 */
            /* 则这个元素会自动下移一格，达到本元素右边没有浮动对象的目的  */
        }
        .div3{
            width: 100px;
            height: 200px;
            background-color: green;
        }
        .div4{
            width: 100px;
            height: 300px;
            background-color: #7165ff;
        }
        .clearfix:after{
            content: ‘‘;
            display: block;
            clear: both;
        }
    style>
head>
body>
    
    
 
    
    
 
div class="div1">1div>
div class="div2">2div>
div class="div3 clearfix">3div>    
div style="clear: both;">div>    
div class="div4">4div>
body>
html>

DOCTYPE html>
html lang="en">
head>
    meta charset="UTF-8">
    title>Titletitle>
    style>
        .div1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .div2 {
            width: 200px;
            height: 100px;
            background-color: blue;
            position: relative;  /* 设置为relative的定位，相对于它原本的位置进行偏移，但是它原来的在文档流中占的位置依然还在 */
            left: 100px;
            top: 100px;
        }
        .div3{
            width: 100px;
            height: 200px;
            background-color: green;
            position: absolute;
            left: 100px;
            top: 100px;
            /* 设置为绝对定位的元素从文档流中完全删除，并相对于最近的已定位的祖先元素定位，如果元素没有已定位的祖先， */
            /*那么它的位置相对于最初的包含块(即body元素)*/
        }
        .div4{
            width: 100px;
            height: 300px;
            background-color: #7165ff;
        }
        .div5{
            width: 100px;
            height: 200px;
            position: absolute; /* 因为设置了绝对定位，所以这个标签已经脱离的文档流 */
            margin-top: 30px;   /* 这时的margin定位是相对于标签最开始的位置来定位的 */
            margin-left: 120px;
        }
         .returnTop{
            width: 50px;
            height: 50px;
            background-color: red;
            position: fixed;
             /*设置了fix定位的元素脱离了正常的文档流，以窗口为参考点定位*/
             /*当出现滚动条时，对象不会随着滚动，而其层叠通过z-index属性定义*/
             bottom: 20px;
             right: 5px;
        }
        .clearfix:after{
            content: ‘‘;
            display: block;
            clear: both;
        }
    style>
head>
body>
div class="div1">1div>
div class="div2">2div>
div class="div3 clearfix">3div>
div style="clear: both;">div>
div class="div4">4div>
div class="div5">5div>