CSS快速入门

最新推荐文章于 2024-02-17 15:00:00 发布

原创最新推荐文章于 2024-02-17 15:00:00 发布 · 281 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #前端

前端专栏收录该内容

3 篇文章

订阅专栏

1、CSS的三种导入方式

行内样式、内部样式、外部样式
优先级：就近原则

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

<!--内部样式-->
    <style>
        h1{
            color: green;
        }
    </style>

<!--外部样式-->
    <link rel="stylesheet" href="css/style.css">
    
</head>
<body>

<!--行内样式-->
<h1 style="color: red">我是标题</h1>

</body>
</html>

拓展：外部样式两种方法

链接式：html

<!--外部样式-->
<link rel="stylesheet" href="css/style.css">

导入式：@import是CSS2.1特有的

<!--导入式-->
<style>
    @import url("css/style.css");
</style>

2、选择器

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

2.1 基本选择器

标签选择器
类选择器 class
id选择器
优先级：id > class > 标签选择器

2.2 层次选择器

后代选择器：在某个元素的后面祖爷爷爷爷爸爸儿子
```
/*后代选择器*/
body p{
  background: red;
}
```

子选择器：一代儿子

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

相邻/兄弟选择器：同辈

/*兄弟选择器*/
.active + p{
  background: #866575;
}

通用选择器

/*通用选择器*/
.active ~ p{
  background: aqua;
}

2.3 结构伪类选择器

伪类：条件

/*ul的第一个元素*/
ul li:first-child{
  background: #4444cd;
}

/*ul的最后一个元素*/
ul li:last-child{
  background: #e15d2d;
}

/*选择p1：定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！-顺序
*/
p:nth-child(1){
  background: #cdf615;
}

/*选中父元素下的p元素的第二个-类型*/
p:nth-of-type(2){
  background: antiquewhite;
}

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: #4444cd;
      text-align: center;
      color: gray;
      /*去除下划线*/
      text-decoration: none;
      margin-right: 10px;
      line-height: 50px;
    }

    /*属性选择器
      =  绝对等于
      *= 包含这个的元素
      ^= 以这个为开头的元素
      $= 以这个为结尾的元素
    */
    a[id]{
      background: yellow;
    }

    /*id=first的元素*/
    a[id=first]{
      background: antiquewhite;
    }

    /*选中class中有links的元素*/
    a[class*=links]{
      background: aqua;
    }

    /*选中href中以http开头的元素*/
    a[href^=http]{
      background: red;
    }

    /*选中href中以pdf结尾的元素*/
    a[href$=pdf]{
      background: aquamarine;
    }

  </style>

</head>
<body>

    <p class="demo">
      <a href="http://www.baidu.com" class="links item first" id="first">1</a>
      <a href="http://bolg.kuangstudy.com" class="links item active" target="_blank" title="test">2</a>
      <a href="123.html" class="links item">3</a>
      <a href="123.jpg" class="links item">4</a>
      <a href="123.png" 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>

3、美化网页元素

3.1 字体样式

    <!--
    font-family：字体
    font-size：字体大小
    font-weight：字体粗细
    color：字体颜色
    -->
    <style>
      body{
        font-family: 楷体;
        color: #ff9d7f;
      }
      h1{
        font-size: 50px;
      }
      .p1{
        font-weight: bold;
      }
    </style>

3.2 文本样式

颜色 color rgb rgba
文本对齐方式 text-align： center;
首行缩进 text-indent：2em;
行高 line-height：单行文字上下居中
装饰(下划线) text-decoration：
文本图片水平对齐 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: 100px;
  line-height: 100px;
  -->
  <style>
    h1{
      color: rgba(0,255,255,0.9);
      text-align: center;
    }
    p{
      text-indent: 2em;
    }
    .p2{
      background: antiquewhite;
      height: 100px;
      line-height: 100px;
    }

    /*下划线*/
    .l1{
      text-decoration: underline;
    }
    /*中划线*/
    .l2{
      text-decoration: line-through;
    }
    /*上划线*/
    .l3{
      text-decoration: overline;
    }
    /*超链接去下划线*/
    a{
      text-decoration: none;
    }
  </style>

</head>
<body>

<a href="">123</a>

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

<h1>故事介绍编辑</h1>

<p class="p1">这个世界名为元泱境界，脉（本质为振动）是构成万物的基础。每隔333年，会有一个神秘而强大的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。</p>

<p class="p2">
  在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p>

</body>
</html>

3.3 超链接伪类

正常情况下，a，a：hover

/*默认的颜色*/
a{
    text-decoration: none;
    color: #000000;
}
/*鼠标悬浮的颜色*/
a:hover{
    color: orange;
    font-size: 20px;
}
/*text-shadow：阴影颜色，水平偏移，垂直偏移，阴影半径*/
#price{
    text-shadow: #00FFFF 10px 10px 2px ;
}

3.4 列表

#nav{
    width: 300px;
    background: gray;
}

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: red url("../image/d.png") 200px -10px no-repeat;
}
/*ul li
 list-style:
    none 去掉原点
    circle 空心圆
    decimal 数字
*/

ul li{
    height: 30px;
    list-style: none;
    background-image:url("../image/f.png");
    background-repeat:no-repeat;
    background-position: 200px;
}

a{
    text-decoration: none;
    font-size: 14px;
    color: #000;
}
a:hover{
    color: orange;
}

3.5 背景

div{
    border: 1px red solid;
    width: 1000px;
    height: 700px;
    background-image: url("image/img.png");
    /*默认是全部平铺的 repeat*/
}
.div1{
    background-repeat: no-repeat;
}
.div2{
    background-repeat: repeat-x;
}
.div3{
    background-repeat: repeat-y;
}

3.6 渐变

/* https://www.grabient.com */
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

4、盒子模型

4.1 什么是盒子？

在这里插入图片描述

margin：外边距

padding：内边距

border：边框

4.2 边框

边框的粗细
边框的样式
边框的颜色

<style>

body{
    /*body总有一个默认的外边距*/
    margin: 0;
}
#box{
    width: 300px;
    border: 1px solid red;
}
h2{
    font-size: 18px;
    color: #e15d2d;
    background: aliceblue;
    line-height: 30px;
}
form{
    background: #f5efc6;
}
div:nth-of-type(1) > input{
    border: 1px solid #FFCC70;
}
div:nth-of-type(2) > input{
    border: 1px solid #FFCC70;
}
div:nth-of-type(3) > input{
    border: 1px solid #FFCC70;
}

</style>

4.3 内外边距

margin/padding: 0;
/*所有都为0*/
margin/padding: 0 1px;
/*上下和左右*/
margin/padding: 0 1px 2px 3px;
/*上右下左顺时针旋转*/

盒子的计算方式：这个元素到底有多大？

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qy8kIZai-1662269072299)(C:\Users\24215\AppData\Roaming\Typora\typora-user-images\image-20220812172614723.png)]

margin + border + padding + 内容宽度

4.4 圆角边框

<!--左上 右上 右下 左下-顺时针-->
<!--  圆圈：圆角 = 50%  -->
<style>
    div{
        width: 100px;
        height: 100px;
        border: 10px solid red;
        border-radius: 50%;
    }
</style>

4.5 盒子阴影

<!--  margin: 0 auto;居中
要求：块元素，块元素有固定的宽度
-->
<style>
    div{
        border-radius: 50%;
        margin: 0 auto;
        box-shadow: 10px 10px 100px green;
    }
    img{
        border-radius: 50%;
    }


</style>
</head>
<body>
    <div style="width: 100px;height: 100px">
        <img src="image/d.png" alt="">
    </div>
</body>

5、浮动

5.1 标准文档流：自上而下

块级元素：独占一行

h1~h6 p div 列表...

行内元素/内联元素：不独占一行

img span a strong...

5.2 display

display是一种实现行内元素排列的方式，但是我们很多情况都是用的float

<!--
  	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: inline-block;
    }
</style>

5.3 float

左右浮动 float

div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px #000 solid;
}
.layere1{
    border:1px #F00 dashed;
    display: inline-block;
    float: right;
}
.layere2{
    border: 1px #09F dashed;
    display: inline-block;
    float: right;
}
.layere3{
    border:1px #060 dashed;
    display: inline-block;
    float: right;
}
.layere4{
    border:1px #666 dashed;
    font-size:12px;
    line-height: 23px;
    display: inline-block;
    float: right;
}

5.4 父级边框塌陷问题

clear

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

解决方案：

增加父级元素的高度

简单，但是元素假设有了固定的高度，就会被限制
```
#father{
    border: 1px #000 solid;
    height: 800px;
}
```

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

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

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

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

overflow

简单，但下拉的一些场景中避免使用
```
在父级元素中增加一个overflow: hidden;
```

父类添加一个伪类：after

写法稍微复杂，但是没有副作用，推荐使用

#father:after{
    content: '';
    display: block;
    clear: both;
}

5.5 display和float对比

display

都可以让元素排在一列，但方向不可控制
float

都可以让元素排在一列，方向虽然可控，但浮动起来会脱离标准文档流，所以要解决父级边框塌陷的问题

6、定位

6.1 相对定位

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

<!-- 相对定位
相对于自己原来的位置进行偏移
-->
  <style>
    body{
      padding: 20px;
    }
    div{
      margin: 10px;
      padding: 5px;
      font-size: 12px;
      line-height: 25px;
    }
    #father{
      border: 1px #666 solid;
      padding: 0;
    }
    #first{
      background-color: #efc144;
      border: 1px #b64343 dashed;
      /*相对定位：上下左右*/
      position: relative;
      top: -20px;
    }
    #second{
      background-color: #16ffd6;
      border: 1px #14d562 dashed;
      position: relative;
      bottom: 10px;
    }
    #third{
      background-color: #0ca1ea;
      border: 1px #312bde dashed;
      position: relative;
      left: 30px;
    }

  </style>

</head>
<body>

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


</body>
</html>

相对定位：position: relative;
相对于原来的位置，进行指定偏移，但仍然在标准文档流中，原来的位置会被保留

top: -20px;
bottom: 10px;
left: 30px;
right: -10px;

6.2 绝对定位

定位：position: absolute;

基于xxx定位，上下左右

没有父级元素定位的前提下，相对于浏览器定位
假设父级元素存在定位，通常会相对于父级元素进行偏移
在父级元素范围内移动

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

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


  <style>
    body{
      padding: 20px;
    }
    div{
      margin: 10px;
      padding: 5px;
      font-size: 12px;
      line-height: 25px;
    }
    #father{
      border: 1px #666 solid;
      padding: 0;
      position: relative;
    }
    #first{
      background-color: #efc144;
      border: 1px #b64343 dashed;
    }
    #second{
      background-color: #16ffd6;
      border: 1px #14d562 dashed;
      position: absolute;
      right: 20px;
    }
    #third{
      background-color: #0ca1ea;
      border: 1px #312bde dashed;
    }

  </style>

</head>
<body>

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


</body>
</html>

6.3 固定定位 fixed

<!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-color: red;
      position: absolute;
      right: 0;
      bottom: 0;
    }
    /*fixed：固定定位*/
    div:nth-of-type(2){
      width: 50px;
      height: 50px;
      background: yellow;
      position: fixed;
      right: 0;
      bottom: 0;
    }
  </style>

</head>
<body>


<div>div1</div>
<div>div2</div>

</body>
</html>

6.4 z-index

z-index：利用图层的概念实现，默认是0，最高无限(999)

<!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="image/1.jpg" alt=""></li>
        <li class="tiptext">学习微服务</li>
        <li class="tipbg"></li>
        <li>时间：2099-1-1</li>
        <li>地点：月球一号基地</li>
    </ul>
</div>


</body>
</html>

opacity: 0.5; /背景透明度/

#content{
    width: 640px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid black;
}

ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}

#content ul{
    position: relative;
}

.tiptext,.tipbg{
    position: absolute;
    width: 640px;
    height: 25px;
    top: 375px;

}

.tipbg{
    background: #00FFFF;
    /*背景透明度*/
    opacity: 0.5;
}

.tiptext{
    z-index: 999;
}