发布日期: 2021-10-25

CSS

1.CSS

1.1快速入门

style

基础入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    规范，<style>可以编写css的代码,每一个声明最好以分号结尾
        语法：
            选择器{
                声明1;
                声明2;
                声明3;
            }
-->
    <style>
        h1{
            color: red;
        }



    </style>

</head>
<body>
<h1>我是标题</h1>
</body>
</html>

建议分离

css优势:

内容和表现分离
网页结构表现统一，可以实现复用
样式十分的丰富
建议使用独立于html的css文件
利于seo，容易被搜索引擎收录！

1.2 css的三种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--内部样式-->
    <style>
        h1{
            color: aqua;
        }
        
    </style>
    <!-- 外部样式 -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级：就近原则    -->
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: red">我是标题</h1>
</body>
</html>

/* 外部样式*/

h1{
    color:green;
}

拓展：外部样式两种写法

链接式
html:

<link rel="stylesheet" href="css/style.css">

导入式:
css2.1特有的

```html




## 2.选择器

作用：选择页面上的某一个或某一类元素



### 2.1基本选择器

1. 标签选择器：选择一类标签    标签名{}

 ```html
  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
  
  
      <style>
          /*标签选择器，会选择页面上所有这个标签的元素*/
          h1{
              color: #20d071;
          }
          p{
              font-size: 80px;
          }
  
  
      </style>
  
  
  
  </head>
  <body>
  
  <h1>hello</h1>
  <h1>hello</h1>
  
  <p> word</p>
  </body>
  </html>

类选择器 class：选择所有class属性一致的标签跨标签 .类名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* 类选择器的格式  .class的名称{}
        好处，可以多个标签归类，是同一个class,可以复用

        */
        .l{
            color: #226949;
        }

        .w{
        color: #21312a;
        }

    </style>

</head>
<body>

<h1 class="l">标题1</h1>
<h1 class="w">标题2</h1>
<h1 class="j">标题3</h1>


</body>
</html>

id选择器：全局唯一！#id名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        id选择器 :id必须保证全局唯一
        id名称{}
        不遵循就近原则，固定的
        id选择器 > class选择器 > 标签选择器
        */
        #l{
        color: rgba(163,54,53,0.44);

        }
        .style1{
            color: rgba(120,163,118,0.44);
        }

    </style>



</head>
<body>
<h1 id="l">标题1</h1>
<h1 id="w">标题2</h1>
<h1 id="j">标题3</h1>
<h1 class="style1">标题4</h1>
<h1 class="style1">标题5</h1>
</body>
</html>

优先级：id>class>标签

2.2层次选择器

1.后代选择器：在某个元素的后面

/*  后代选择器 */
body p{
    background: aqua;
}

2.子选择器:,一代

/*子选择器*/
body>p{
    background: aqua;
}

3.相邻选择器同辈(对下不对上 )

/*相邻选择器 只有一个，相邻（向下）*/
.active + p{
    background: aqua;
}

4.通用选择器

/*通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/
.active~p{
    background: #20d071;
}

2.2结构伪类选择器

伪类：条件

/*ul的第一个子元素*/
ul li:first-child{
    background: #20d071;
}
/*ul的最后一个元素*/
ul li:last-child{
    background: aqua;
}

/*  选中p1:定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！
*/
p:nth-child(2){
    background: #20d071;
}
/*选中父元素，下的p元素的第二个类型*/
p:nth-of-type(2){
    background: aqua;
}

2.4属性选择器(常用)

id+class结合~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: aqua;
            text-align: center;
            color: #20d071;
            text-decoration: none;
            margin-right: 20px;
            font: bold 20px/50px Arial;
        }
        /*属性名，属性名 = 属性值(正则)
        = 绝对等于
        *= 包含这个元素
        ^= 以这个开头
        $= 以这个结尾
        */
        /*存在id属性的元素a[]{}*/
        /*a[id]{*/
        /*    background: aquamarine;*/
        /*}*/
        /*id = first的元素*/
        /*a[id = first]{*/
        /*    background: aquamarine;*/
        /*}*/
        /* class中有links的元素*/
        /*a[class *= "links"]{*/
        /*    background: yellow;*/
        /*}*/
        /*选中href中以http开头的元素*/
        /*a[href^=http]{*/
        /*    background: yellow;*/
        /*}*/

        a[href $= pdf]{
            background: yellow;
        }

    </style>
</head>
<body>
<p class="demo">
    <a href="https://www.baidu.com/">1</a>
    <a href="https://www.bilibili.com/" class="links item first" id="first">2</a>
    <a href="images/123.html" class="links item ">3</a>
    <a href="images/123.png" class="links item" >4</a>
    <a href="images/123.jopg" class="links item" >5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="abc.pdf" class="links item">8</a>
    <a href="abc.doc" class="links item">9</a>
    <a href="abcd.doc" class="links item last">10</a>

    
</p>


</body>
</html>

= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾

CSS,JS,JQuery,vue

3.美化网页元素

3.1为什么要美化网页

1.有效的传递页面信息

2.美化网页，页面漂亮，吸引用户

3.凸显页面的主题

4.提高用户的体验

span标签：重点要突出的字，使用span套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #span111{
      font-size: 50px;
    }
  </style>
</head>
<body>
欢迎  <span id="span111">学习</span>
</body>
</html>

3.2字体样式

<!--  font-family:字体
      font-size:字体大小
      font-weight:字体粗细
      color:字体颜色
-->


  <style>
    body{
      font-family:"Arial Black",楷体;
      color: aqua;
    }
    h1{
      font-size: 50px;
    }
    p:nth-of-type(1){
      font-weight: bold;
    }


  </style>

3.3文本样式

1.颜色 color rgb rgba

2.文本对齐的方式 text-align = center

3.首行缩进 text-indent:2em

4.行高 line-height: 单行文字上下居中！line_height = height

5.装饰 text-decoration

6.文本图片水平对齐: vertical-align:middle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--
    颜色:
        单词
        RGB 0~F
        RGBA A:0~1

        text-align:排版,居中
        text-indent:段落首行缩进
        height: 300px;
            line-height: 300px;
        行高，和块的高度一致 ，就可以上下居中
-->

    <style>
        h1{
            color: #20d071;
            color: rgba(120,163,118,0.44);
            text-align: center;
        }
        #p1{
            text-indent: 2em;
            }
        .p3{
            background: aqua;
            height: 300px;
            line-height: 300px;
        }
        /*下划线*/
        .l1{
            text-decoration: underline;
        }
        /*中划线*/
        .l2{
            text-decoration: line-through;
        }
        /*上划线*/
        .l3{
            text-decoration: overline;
        }
        /*超链接去下划线
        */
        a{
            text-decoration: none;
        }
        /*<!--    水平对齐~参照物-->*/

                img,span {
                    vertical-align: middle;
                }

    </style>
</head>
<body>
<p>
    <img src="images/f58d3fa5b888b14c5e98e5f1933f19d2.jpg" alt="女孩" width="300px" height="200px">
    <span>123321</span>
</p>
<a href="">asdasdsadadadad</a>
<h1>白居易</h1>
<p id="p1">白居易（772年－846年），字乐天，号香山居士，又号醉吟先生，祖籍山西太原 [1-2]  ，到其曾祖父时迁居下邽，生于河南新郑。 [3]  是唐代伟大的现实主义诗人，唐代三大诗人之一。白居易与元稹共同倡导新乐府运动，世称“元白”，与刘禹锡并称“刘白”。 [4]
</p>
<p class="p3">
    白居易的诗歌题材广泛，形式多样，语言平易通俗，有“诗魔”和“诗王”之称。官至翰林学士、左赞善大夫。公元846年，白居易在洛阳逝世，葬于香山。有《白氏长庆集》传世，代表诗作有《长恨歌》《卖炭翁》《琵琶行》等。
</p>

<p class="l1">123321</p>
<p class="l2">123321</p>
<p class="l3">123321</p>

</body>
</html>

3.4阴影

/*text-shadow:阴影颜色,水平偏移，垂直偏移，阴影半径*/
#price{
    text-shadow: red 0px 10px 10px;
}

3.5超链接伪类

正常情况下.a:hover

/*默认的颜色*/
a{
    text-decoration: none;
    color: #21312a;
}
/*鼠标悬浮的状态(只需要记住hover)*/
a:hover{
    color: yellow;
}
/*鼠标按住未释放的状态*/
a:active{
    color: #20d071;
}

3.5列表

/* ul li*/
/*
list-style:
none:去掉圆点
circle:空心圆
decimal:数字
square：正方形
*/
ul{
    background: beige;
}
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

3.7背景

背景颜色

背景图片

<style>
    div{
        width: 1000px;
        height:800px;
        border:1px saddlebrown solid;
        background-image: url("images/f58d3fa5b888b14c5e98e5f1933f19d2.jpg");
        /*默认是全部平铺*/
    }
    .div1{
        background-repeat: repeat-x;
    }
    .div2{
        background-repeat: repeat-y;
    }
    .div3{
        background-repeat: no-repeat;
    }
</style>

3.8渐变

background-image: linear-gradient(13deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

4.盒子模型

4.1什么盒子模型

margin：外边距

padding:内边距

border：边框

4.2边框

1.边框的粗细

2.边框的样式

3.边框的颜色

/*body有一个外边距margin:0，我们需要将其外边距变为0，还有其他标签也有外边距*/
body{
    margin: 0;
}
/*border：粗细，样式，颜色*/
#box{
    width: 180px;
    border: 1px solid black;
}
h1{
    margin: 0;
    background: #20d071;
    color: #FFCC70;
}
div:nth-of-type(1) input{
    border: 1px solid red;
}
div:nth-of-type(2) input{
    border: 1px dashed aqua;
}

4.3外边距和内边距

<!--    外边距的作用：居中元素-->
    <style>
        /*body有一个外边距margin:0，我们需要将其外边距变为0，还有其他标签也有外边距*/
        body{
            margin: 0;
        }
        /*border：粗细，样式，颜色*/
        /*margin ：顺时针
        */
        #box{
            width: 180px;
            border: 1px solid black;
            margin: 0 auto;
            padding: 0 0 0 0;
        }

        h1 {
            margin: 0;
            background: #20d071;
            color: #FFCC70;

        }
        input{
            border: 1px solid black;
        }
        div:nth-of-type(1){
            padding: 10px 0px;
        }

    </style>

盒子模型的计算方式:

margin+ border+ padding+内容宽度

4.4圆角边框

4个角

<!--    左上 右上 右下 左下-->
    <style>
        body{
            width: 300px;
            height: 300px;
            border: 2px solid red;
            border-radius: 150px;
        }
    </style>

4.5阴影

<style>
    body{
        width: 1000px;
    }
    div{
        width: 300px;
        height: 300px;
        margin: 0 auto;
    }
    img{
        width: 300px;
        height: 300px;
        border: 2px solid red;
        border-radius: 150px;
        box-shadow: 10px 10px 100px yellow;
    }
</style>

5.浮动

5.1display

<!--    block 块元素
        inline 行内元素
        inline-block 保持块元素，但是可以内联，在一行
        none
-->
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: block;
        }

    </style>

1.这个也是实现行内元素排列的方式，但是我们很多情况下使用float

5.2float

1.左右浮动 float

float:right
float:left;

5.3父级边框塌陷的问题

clear:left; 左侧不允许有浮动元素
clear:right;右侧侧不允许有浮动元素
clear:both; 两侧侧不允许有浮动元素
clear: none;

解决方案：

1.增加父级元素的高度

简单，元素假设有了固定的高度，就会被限制

2.增加一个空的div标签，清除浮动

简单，代码中尽量避免空div

<div class = "clear"></div>

.clear{
    clear:both;
    margin:0;
    padding:0;
}

3.overflow

简单，下拉的一些场景避免使用

在父级元素中增加overflow:hidden;

4.父类添加一个伪类：after

6.定位

6.1相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            padding: 30px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 20px;
        }
        #father{
            border: 1px solid black;
        }
        #first{
            background: rgba(36,48,35,0.44);
            border: 1px dashed red;
            position: relative;
            top: -20px;
            left:20px;
        }
        #second{
            background: #e18f8f;
            border: 1px dashed red;

        }
        #third{
            background: #a493c4;
            border: 1px dashed red;
            position: relative;
            buttom:-20px;
            right: 10px;
        }


    </style>
</head>
<body>
<div id="father" >
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>



</div>
</body>
</html>

相对定位：position:relative；

相对于原来的位置，进行指定的偏移，相对定位的话，他仍然在标准文档流中,原来的位置会被保留.

top:;
left:;
right:;
buttom:;

6.2绝对定位

定位：基于xxx定位，上下左右~

1.没有父级元素定位的前提下，相对于浏览器定位

2.假设父级元素存在定位，我们通常相对于父级元素进行偏移~

3.在父级元素范围内移动

相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，他不在标准文档流中，原来的位置不会被保留

6.3 固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1){/*绝对定位:相对于浏览器*/
            width: 100px;
            height: 100px;
            background: #dba39d;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2){/* fixed 固定定位 */
            width: 50px;
            height: 50px;
            background: #20d071;
            position: fixed;
            right: 0;
            bottom: 0;
        }



    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

6.4 z-index

图层~

z-index:默认是0.最高无限

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
    <ul>
        <li>
            <img src="images/f58d3fa5b888b14c5e98e5f1933f19d2.jpg" alt="图片">
        </li>
        <li class="tipText">提示语句</li>
        <li class="tipBg">        </li>
        <li>2021年10月25日20:29:03</li>
        <li>地点:南京</li>
    </ul>


</div>

</body>
</html>

opacity: 0.4; 设置背景透明度

#content{
    width: 400px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px #000 solid;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*父级元素相对定位*/
ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 400px;
    height: 25px;
    top: 256px;
}
.tipBg{
    background: beige;
    /*opacity: 0.4;*/
    /*!*opacity 设置背景透明度*!*/

}
.tipText{
    color: white;
    /*z-index: 999;
      设置层级
    */
}

7.动画

8.总结

半页

https://eternallyevery.github.io/2021/10/25/6-css/

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源半页 !

学习笔记

08-注解与反射

注解与反射

2021-10-25 java学习笔记

java学习笔记

5-HTML

HTML

2021-10-25 学习笔记

学习笔记

6-CSS

CSS

1.CSS

1.1快速入门

1.2 css的三种导入方式

2.2层次选择器

2.2结构伪类选择器

2.4属性选择器(常用)

3.美化网页元素

3.1为什么要美化网页

3.2字体样式

3.3文本样式

3.4阴影

3.5列表

3.7背景

3.8渐变

4.盒子模型

4.1什么盒子模型

4.2边框

4.3外边距和内边距

4.4圆角边框

4.5阴影

5.浮动

5.1display

5.2float

5.3父级边框塌陷的问题

6.定位

6.1相对定位

6.2绝对定位

6.3 固定定位

6.4 z-index

7.动画

8.总结

你的赏识是我前进的动力