【前端三要素】CSS快速入门

Genius-Sue

已于 2022-09-03 22:32:56 修改

阅读量1.9k

点赞数

分类专栏： # 前端三要素文章标签： css javascript 前端

于 2022-09-03 22:26:59 首次发布

本文链接：https://blog.csdn.net/Daears/article/details/126683523

版权

前端三要素专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML+CSS+JavaScript

结构+表现+交互

1. 什么是CSS

如何学习

CSS是什么
CSS怎么用（快速入门）
CSS选择器（重点+难点）
美化网页（文字，阴影，超链接，列表，渐变）
盒子模型
浮动
定位
网页动画（特效效果）

1.1、什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS：表现（美化网页）

字体，颜色，边距，高度，背景图片，，网页定位，网页浮动

1.2、发展史

CSS1.0

CSS2.0 DIV( 块) + CSS，HTML与CSS结构分离思想，网页变得简单，SEO

CSS2.1 浮动和定位

CSS3.0 圆角边框，阴影，动画…浏览器兼容性问题

1.3、快速入门

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.4 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>
<!--优先级：就近原则-->
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: red">我是标题</h1>

</body>
</html>

/*外部样式*/
h1{
    color: blue;
}

拓展：外部样式两种写法

链接式：

html

<!--链接式-->
<link rel="stylesheet" href="css/style.css">

导入式：

@import是CSS2.1特有的

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

区别：link属于html标签，而@import是css提供的一种方式，link标签不仅可以引入css，还可以做其他事，而@import只能引入css；@import只有在IE5以上才支持；而link标签不存在兼容性问题。

2. 选择器

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

2.1、基本选择器

标签选择器：选择一类标签标签{}

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

<h1>学Java</h1>
<h1>学Java</h1>
<p>听狂神说</p>

</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*类选择器的格式 .class的名称{}
    好处，可以多个标签归类，是同一个class，可以复用
    */
    .aaa{
      color: #23bece;
    }
    .bbb{
      color: red;
    }
  </style>
</head>
<body>


<h1 class="aaa">aaa</h1>
<h1 class="bbb">bbb</h1>
<h1 class="aaa">ccc</h1>

<p class="aaa"></p>


</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*    id选择器
              #id名称{}
              不遵循就近原则
              id选择器>class选择器>标签选择器
        */
        #susuus{
            color: #143fea;
        }
        .qqq{
         color:#23bece;
        }
        h1{
            color: blueviolet;
        }
    </style>
</head>
<body>

<h1 id="susuus" class="qqq">标题一</h1>
<h1 class="qqq">标题二</h1>
<h1 class="qqq">标题三</h1>
<h1>标题四</h1>
<h1>标题五</h1>

</body>
</html>

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

2.2、层次选择器

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

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

子选择器:一代，儿子

 /*  子选择器*/
     body>p{
       background: #143fea;
     }

相邻兄弟选择器：同辈

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

通用选择器

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

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

<style>
  /*p{*/
  /*  background: #23bece;*/
  /*}*/
/*  后代选择器*/
/*  body p{*/
/*    background: red;*/
/*  }*/
/*  子选择器*/
/*  body>p{*/
/*    background: #143fea;*/
/*  }*/
/*  兄弟选择器*/
/*  .active+p{*/
/*    background: red;*/
/*  }*/
/*  通用选择器*/
  .active~p{
    background: #143fea;
  }
</style>
<body>

<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
  <li>
    <p>p4</p>
  </li>
  <li>
    <p>p4</p>
  </li>
  <li>
    <p>p4</p>
  </li>
</ul>

</body>
</html>

2.3、结构伪类选择器

伪类：条件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
  <style>
    /*ul的一个子元素*/
    ul li:first-child{
      background: cadetblue;
    }
    /*ul的最后子元素*/
    ul li:last-child{
      background: #143fea;
    }
    /*选中p1:定位到父元素，选择当前的第一个元素
    选中当前p元素的父级元素，选中父级元素的第一个
    */
    p:nth-child(1){
      background: red;
    }

    /*
        选中当前p元素的父级元素，选中父级元素的同标签的第二个
    */
    p:nth-of-type(2){
      background: yellow;
    }
  </style>
<body>

<p>p0</p>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
  <li>li1</li>
  <li>li2</li>
  <li>li3</li>
</ul>

</body>
</html>

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: #23bece;
      text-align: center;
      color: gainsboro;
      text-decoration: none;
      margin-right: 5px ;
      font:bold 20px/50px Arial;
    }
    /*属性名，属性名=属性值（正则）
    =绝对等于
    *=包含这个元素
    ^=以这个开头
    $=以这个结尾
    */
    /*选中存在id属性的元素 a[]{} */
    a[id]{
      background: yellow;
    }
    /*id=first*/
    a[id=first]{
      background: green;
    }
    /*class中有links的元素*/
    a[class*="links"]{
      background: yellow;
    }
    /*选中href中以http开头的元素*/
    a[href^=http]{
      background: red;
    }
    a[href$=pdf]{
      background: red;
    }
  </style>
</head>
<body>

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

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

=

*=

^=

$=

3. 美化网页

3.1、为什么要美化网页

有效传递页面信息
美化网页、页面漂亮吸引用户
凸显页面的主题
提高用户的体验

span标签：把重点要显示的字，使用span套起来

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

3.2、字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
  font-family    字体
  font-size      字体大小
  font-weight    字体的粗细
  color          字体的颜色
  -->
  <style>
    body{
      font-family: 楷体;
      color: #23bece;
    }
    h1{
      font-size: 50px;
    }
    .p1{
      font-weight: bold;
    }
  </style>
</head>
<body>
<h1>故事介绍</h1>
<p class="p1">打哈稍等哈速度赶上发哦假发杰斯放假啊覅豆腐爱德华SV奥德赛V领哈酒</p>
<p>ida搭顺风懒得弄发简历hjc</p>

</body>
</html>

3.3、文本样式

颜色 color rgb rgba
文本对齐方式 text-align: center;
首行缩进 text-indent: 2em;
行高 line-height: 300px;
装饰 text-decoration: ;
文本图片水平对齐 vertical-align: middle;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* 颜色：
           单词
            RGB
            RGBA
        text-align：排版
        text-indent：段落首行缩进
        height: 300px;
        line-height: 300px;
        行高和块的高度一致就可以居中
        */
        h1{
            color: rgb(0,255,255);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: #143fea;
            height: 300px;
            line-height: 300px;
        }
        /*下划线*/
        .q1{
            text-decoration: underline;
        }
        /*中划线*/
        .q2{
            text-decoration: line-through;
        }
        /*上划线*/
        .q3{
            text-decoration: overline;
        }
        /*水平对其·参照物 a，b*/
   
        img,span{
            vertical-align: middle;
        }
    </style>
</head>
<body>

<p class="q1">12321</p>
<p class="q2">12321</p>
<p class="q3">12321</p>


<h1>故事介绍</h1>
<p class="p1">打哈稍等哈速度赶上发哦假发杰斯放假啊覅豆腐爱德华SV奥德赛V领哈酒</p>
<p class="p3">ida搭顺风懒得弄发简历hjc</p>

<p>
    <img src="images/1.png" alt="">
    <span>11111111111111123</span>
</p>


</body>
</html>

3.4、阴影

    #price{
      text-shadow: 10px 10px 1px #3cc7f5;
    }

3.5、超链接伪类

正常情况下a，a:hover

    /*默认的颜色*/
    a{
      text-decoration: none;
      color: black;
    }
    /*鼠标悬浮状态*/
    a:hover{
      color: gold;
      font-size: 50px;
    }

    /*鼠标按住未释放的状态*/
    a:active{
      color: green;
    }

3.6、列表

/*ul li*/
/*
list-style
none:去掉圆点
circle：空心圆
decimal：数字
square：正方形
*/
/*ul{*/
/*    background: gray;*/
/*}*/

ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;

}

3.7、背景

背景颜色
背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      width: 1000px;
      height: 700px;
      border: 1px solid red;
      background-image:url("images/a.png") ;
    /*默认是全部平铺的 repeat*/
    }
    .div1{
      background-repeat:repeat-x ;
    }
    .div2{
      background-repeat:repeat-y ;
    }
    .div3{
      background-repeat:no-repeat ;
    }
  </style>
</head>
<body>

<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>

</body>
</html>

3.8、渐变

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

4. 盒子模型

4.1、什么是盒子

在这里插入图片描述

margin：外边距

padding：内边距

border：边框

4.2、边框

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*body有一个默认的外边距margin:0*/
    /*body{*/
    /*  margin: 0px;*/
    /*  padding: 0px;*/
    /*  text-decoration: none;*/
    /*}*/
    #box{
      width: 300px;
      border: 1px solid red;
    }

    h2{
      margin: 0px;
      font-size: 16px;
      background: green;
      line-height: 30px;
      text-align: center;
      color: white;
    }
    form{
      background:green;
    }
    div:nth-of-type(1)>input{
      border: 3px solid black;
    }
  </style>
</head>
<body>

<div id="box">

  <h2>会员登录</h2>
  <form action="#">
    <div>
      <span>姓名：</span>
      <input type="text">
    </div>
    <div>
      <span>密码：</span>
      <input type="password">
    </div>
    <div>
      <span>邮箱：</span>
      <input type="email">
    </div>
  </form>



</div>


</body>
</html>

4.3、内外边距

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    /*body有一个默认的外边距margin:0*/
    /*body{*/
    /*  margin: 0px;*/
    /*  padding: 0px;*/
    /*  text-decoration: none;*/
    /*}*/
    #box{
      width: 300px;
      border: 1px solid red;
      padding:0 0 0 0 ;
      margin: auto;
    }

    h2{
      margin: 0px;
      font-size: 16px;
      background: green;
      line-height: 30px;
      text-align: center;
      color: white;
    }
    form{
      background:green;
    }
    div:nth-of-type(1)>input{
      border: 3px solid black;
      margin: auto;
    }
  </style>
</head>
<body>

<div id="box">

  <h2>会员登录</h2>
  <form action="#">
    <div>
      <span>姓名：</span>
      <input type="text">
    </div>
    <div>
      <span>密码：</span>
      <input type="password">
    </div>
    <div>
      <span>邮箱：</span>
      <input type="email">
    </div>
  </form>
</div>
</body>
</html>

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

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

margin+border+padding+内容宽度

4.4、圆角边框

4个角

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

    /*左上 右上 右下 左下*/
    /*圆角：圆角 = 半径*/
    div{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      border-radius: 100px;
    }
  </style>
</head>
<body>

<div></div>

</body>
</html>

4.5、盒子阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      border-radius: 100px;
      box-shadow: 10px 10px 0 red;
    }
  </style>
</head>
<body>

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

5. 浮动

5.1、标准文档流

块级元素：独占一行

h1~h6 p div 列表

行内元素：不独占一行

span a img strong…

行内元素可以被包含在块级元素中，反之则不能

5.2、display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    <!--
      block
      inline 行内元素
      inline-block 是块元素，但是可以内联，在一行
    -->
    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>
</head>
<body>

<div>div块元素</div>

<span>span行内元素</span>

</body>
</html>

5.3、float

左右浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    <!--
      block
      inline 行内元素
      inline-block 是块元素，但是可以内联，在一行
    -->
    div{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      display: inline-block;
    }
    span{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      display: inline-block;
      float: right;
    }

  </style>
</head>
<body>

<div>div块元素</div>

<span>span行内元素</span>

</body>
</html>

5.4、父级边框塌陷的问题

clear

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

解决方案：

增加父级元素的高度

#father{
          border: 1px solid red;
          height: 500px;
      }

增加空的div，清除浮动

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

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

overflow

在父级元素中，增加一个overflow：hidden

在父类添加一个伪类：after

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

小结：

浮动元素后面增加空div

简单，代码中尽量避免空div
设置父元素高度

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

简单，下拉的场景尽量避免使用
在父类添加一个伪类:after（推荐）

写法稍微复杂一点，但是没有副作用

5.5、对比

display
- 方向不可以控制
float
- 浮动起来会脱离标准文档流，所以要解决父级边框塌陷的问题

6. 定位

6.1、相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--相对定位
    相对于自己原来的位置进行偏移
    -->
  <style>
    div{
      margin: 10px;
      padding: 5px;
      font-size: 12px;
      line-height: 25px;
      border: 1px solid red;
    }
    #father{

    }
    #one{
        position: relative;/*相对定位：上下左右*/
        top: -20px;
    }
    #two{
        position: relative;/*相对定位：上下左右*/
        bottom: 20px;
    }
    #three{

    }

  </style>
</head>
<body>
  <div id="father">
    <div id="one">第一个盒子</div>
    <div id="two">第二个盒子</div>
    <div id="three">第三个盒子</div>
  </div>
</body>
</html>

相对定位：position: relative;

相对于原来的位置进行指定的偏移，相对定位任然在标准文档流中

top:10px
bottom:10px
left:-10px
right:-10px

6.2、绝对定位

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      margin: 10px;
      padding: 5px;
      font-size: 12px;
      line-height: 25px;
      border: 1px solid red;
    }
    #father{
        position: relative;
    }
    #one{

    }
    #two{
        position: absolute;
        right: 30px;
        bottom: -100px;
    }
    #three{

    }

  </style>
</head>
<body>
  <div id="father">
    <div id="one">第一个盒子</div>
    <div id="two">第二个盒子</div>
    <div id="three">第三个盒子</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: #3cc7f5;
          position: absolute;
          right: 0;
          bottom: 0;
      }
      div:nth-of-type(2){/*fixed，固定定位*/
          width: 100px;
          height: 100px;
          background-color: yellow;
          position: fixed;
          right: 0;
          bottom: 0;
      }
  </style>
</head>
<body>
    <div id="one">第一个盒子</div>
    <div id="two">第二个盒子</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/5058.png" alt="">
        <li class="tipText">学习微服务，找狂神</li>
        <li class="tipBg"></li>
        <li>时间：2099-01-01</li>
        <li>福建</li>
    </ul>
  </div>

</body>
</html>

opacity: 0.5;/背景透明度/

#content{
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid red;
    width: 350px;
}
ul,li {
    margin: 0;
    padding: 0;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 350px;
    top: 216px;
    height: 25px;
}
.tipBg{
    background-color: black;
    opacity: 0.5;/*背景透明度*/
    /*filter: Alpha(opacity=50);*/
}
.tipText{
    z-index: 2;
    color: white;
}

Genius-Sue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【前端三要素】CSS快速入门

结构+表现+交互如何学习Cascading Style Sheet 层叠级联样式表CSS：表现（美化网页）字体，颜色，边距，高度，背景图片，，网页定位，网页浮动CSS1.0CSS2.0 DIV( 块) + CSS，HTML与CSS结构分离思想，网页变得简单，SEOCSS2.1 浮动和定位CSS3.0 圆角边框，阴影，动画…浏览器兼容性问题style基本入门CSS优势：拓展：外部样式两种写法链接式：html导入式：@import是CSS2.1特有的区别：link属于html标签，而@i
复制链接

扫一扫