菜单 搜索
首页 前端知识 Diary22-全网最全的CSS3.0讲解

Diary22-全网最全的CSS3.0讲解

2024-04-20 16:04:00 前端知识 前端哥 34 359 我要收藏

CSS学习

1.认识CSS

1.1什么是CSS

CSS：Cascading Style Sheet——层叠级联样式表

CSS：表现（美化网页）

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

1.2CSS发展史

  • CSS1.0：只包含字体颜色

  • CSS2.0：DIV（块）+CSS，提出了HTML与CSS结构分离的思想，网页变得简单

  • CSS2.1：加入了浮动和定位

  • CSS3.0：加入了圆角边框，阴影，动画...

1.3快速入门

  • 规范：<style>可以编写CSS的代码，每一个声明，最好使用分号结尾

  • 语法：

    选择器{

    声明1；

    声明2；

    声明3；

    }

1.4CSS的优势

  • 内容和表现分离

  • 网页结构表现统一，可以实现复用

  • 样式丰富

  • 建议使用独立于HTML的CSS文件

1.5CSS三种导入方式

  • 内部样式

  • 外部样式

  • 行内样式

<!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">sxc</h1>
​
</body>
</html>
/*外部样式*/
 h1{
     color:yellow;
 }

2.选择器

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

2.1基本选择器(重点)

2.1.1 标签选择器

标签选择器，会选择到页面上所有这个标签的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
​
    <style>
        /*标签选择器，会选择到页面上所有这个标签的元素*/
      h1{
        color:red;
      }
      p{
        font-size:80px;
      }  
    </style>
​
​
</head>
<body>
​
<h1>sxc</h1>
<h1>sxc</h1>
<p>中国围棋第一人</p>
​
</body>
</html>

结果如下：

2.1.2 类选择器

类选择器的格式 .class的名称{} 优点：可以多个标签归类，同一个class可以复用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
​
    <style>
        /*  类选择器的格式  .class的名称{}
          优点：可以多个标签归类，同一个class可以复用
        */
        .hanhan{
            color:red;
        }
        .sunshen{
            color:yellow;
        }
        .sxc{
            color:green;
        }
    </style>
​
<body>
​
<h1 class="sxc">围棋第一人</h1>
<h1 class="sunshen">围棋第一人</h1>
<h1 class="hanhan">围棋第一人</h1>
​
</body>
</html>

结果如下图所示：

2.1.3 id选择器

id选择器:id必须全局唯一！ 语法：#id名称{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
​
    <style>
        /*  id选择器:id必须全局唯一！
            #id名称{}
        */
        #sunshen{
            color:red;
        }
    </style>
​
</head>
<body>
​
<h1 id="sunshen">sxc</h1>
​
</body>
</html>
2.1.4三种选择器的优先级

id选择器>类选择器>标签选择器

2.2层次选择器

2.2.1后代选择器

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

/*后代迭代器*/
       body p{
            background: green;
            }
2.2.2子选择器

子选择器：一代

 /*子选择器*/
        body>p{
            background: red;
        }
2.2.3相邻兄弟选择器

相邻兄弟选择器：只有一个，相邻（向下）

/*相邻兄弟选择器*/
        .active+p{
            background: yellow;
        }
2.2.4通用选择器

通用选择器:当前选中元素的向下所有兄弟元素

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

2.3结构伪类选择器

/*ul的第一个元素*/
    ul li:first-child{
        background: red;
    }
​
    /*ul的最后一个元素*/
    ul li:last-child{
        background: green;
    }
​
/*选中p1：定位到父元素，选择当前的第一个元素
    选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效，按顺序选择
     */
    p:nth-child(1){
        background: yellow;
    }
​
    /*选中父元素下的p元素的第一个*/
    p:nth-of-type(1){
        background: red;
    }

2.4属性选择器(常用+重点)

语法：属性名=属性值（正则）

  • =：绝对等于

  • *=：包含这个元素

  • ^=：以这个开头

  • $=：以这个结尾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
​
<style>
    .demo a{
        float: left;
        display: block;
        height: 50px;
        width: 50px;
        border-radius: 10px;
        background: #2700ff;
        text-align: center;
        color: gainsboro;
        text-decoration: none;
        margin-right: 5px;
        font: bold 20px/50px Arial;
    }
​
    /*a[id]{
        background: yellow;
    }*/
​
    /*a[id=first]{
        background: yellow;
    }*/
​
    /*a[class*=links]{
        background: yellow;
    }*/
​
    /*a[href^=http]{
        background: yellow;
    }*/
​
    a[href$=pdf]{
        background: yellow;
    }
​
</style>
​
​
​
​
<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>

结果如下：

3.美化网页元素

3.1为什么要美化网页

  • 有效的传递页面信息

  • 美化网页，页面漂亮，才能吸引用户

  • 凸显页面的主题

  • 提高用户的体验

3.2字体样式

  • font-family:字体

  • font-size:字体大小

  • font-weight：字体粗细

  • color:字体颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
​
<!--
font-family:字体
font-size:字体大小
font-weight：字体粗细
color:字体颜色
-->
​
  <style>
    body h1{
        font-family:楷体;
        color:red;
    }
    h1{
      font-size: 50px;
    }
    .p1{
        font-weight: bold;
    }
  </style>
​
</head>
<body>
​
<h1>2-16勇夺第一</h1>
​
<p class="p1">
  棋手战鹰，职业二段
</p>
​
<p>
  在中国女子职业围棋甲级联赛上取得了2-16的骄人战绩，率队成功降级，是当今中国围棋第一美女主播
</p>
​
<p>
    She achieved an impressive record of 2-16 in the Chinese Women’s Professional Go League, leading her team to a successful relegation. She is currently known as the top female Go anchor in China.
</p>
​
</body>
</html>

结果如下图所示：

3.3文本样式

3.3.1颜色

RGB：0-F RGBA A：0~1

3.3.2文本的对齐方式

text-align: center;居中

3.3.3首行缩进

text-indent: 2em;首行缩进两个字符

3.3.4行高

height line-height 行高与块的高度一致，就可以上下居中

3.3.5装饰

text-decoration:underline下划线

3.3.6文本图片水平对齐

img,span{ vertical-align: middle; }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
​
<!--
1.颜色：
RGB：0-F
RGBA  A：0~1
​
2.文本对齐方式：
text-align: center;居中
​
3.首行缩进:
text-indent: 2em;首行缩进两个字符
​
4.height
line-height
行高与块的高度一致，就可以上下居中
-->
​
  <style>
    h1{
      color:rgba(0,255,255,0.8);
      text-align: center;
    }
    .p1{
      text-indent: 2em;
    }
    .p2{
      text-indent: 2em;
    }
    .p3{
      text-indent: 2em;
      background: cornsilk;
      height: 30px;
      line-height: 30px;
    }
    img,span{
      vertical-align: middle;
    }
  </style>
​
</head>
<body>
​
<h1>2-16勇夺第一</h1>
​
<p class="p1">
  棋手战鹰，职业二段
</p>
​
<p class="p2">
  在中国女子职业围棋甲级联赛上取得了2-16的骄人战绩，率队成功降级，是当今中国围棋第一美女主播
</p>
​
<p class="p3">
  She achieved an impressive record of 2-16 in the Chinese Women’s Professional Go League, leading her team to a successful relegation. She is currently known as the top female Go anchor in China.
</p>
​
<p>
  <img src="images/3.jpg" alt="">
  战鹰美照
</p>
​
</body>
</html>

结果如下图所示

3.4超链接伪装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
​
  <style>
    /*默认的颜色*/
    a{
      text-decoration: none;
      color: black;
    }
    /*鼠标悬浮的颜色*/
    a:hover{
      color:orange;
    }
    /*鼠标按住未释放的状态*/
    a:active{
      color: aqua;
    }
  </style>
​
​
</head>
<body>
​
<a href="#">
  <img src="images/3.jpg" alt="">
</a>
<p>
  <a href="#">骑手战鹰</a>
</p>
<p>
  <a href="">职业二段</a>
</p>
<p>
  2-16勇夺第一
</p>
​
</body>
</html>

结果如下图所示：

3.5文本阴影

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

3.6列表

#nav{
    width: 300px;
    background: bisque;
}
​
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent:1em;
    line-height: 35px;
    background: red;
}
​
ul{
    background: bisque;
}
​
ul li{
    height: 30px;
    list-style: none;
    text-indent:1em;
}
​
a{
    text-decoration: none;
    font-size: 14px;
    color: #000;
}
​
a:hover{
    color: orange;
    text-decoration: underline;
}

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/3.jpg");
    }
    .div1{
      background-repeat: repeat-x;
    }
    .div1{
      background-repeat: repeat-y;
    }
    .div1{
      background-repeat: no-repeat;
    }
  </style>
​
​
</head>
<body>
​
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
​
​
</body>
</html>

3.8渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{
      background-color: #FFFFFF;
      background-image: linear-gradient(115deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%)
    }
  </style>
</head>
<body>
​
</body>
</html>

结果如下图所示：

4.盒子模型

4.1什么是盒子模型

4.2边框

  • 边框的粗细

  • 边框的样式

  • 边框的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
​
  <style>
    body{
      margin: 0;
      padding: 0;
      text-decoration: none;
    }
    /*border:粗细；样式；颜色*/
    #box{
      width: 300px;
      border: 1px solid red;
    }
​
    h2{
      font-size: 16px;
      background-color:aqua;
      line-height: 30px;
    }
​
    form{
      background: aqua;
    }
​
    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="text">
    </div>
    <div>
      <span>邮箱：</span>
      <input type="text">
    </div>
  </form>
</div>
​
</body>
</html>

4.3内外边距

margin+border+padding+内容宽度

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

h2{
      font-size: 16px;
      background-color:aqua;
      line-height: 30px;
      margin: 0 2px 3px 5px;
    }
​

4.4圆角边框

下面给出一个最简单的圆角边框的案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
​
  <style>
    div{
      width: 100px;
      height: 100px;
      border: 5px solid red;
      border-radius:30px ;
    }
  </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: 5px solid red;
      box-shadow:10px 10px 100px yellow;
    }
  </style>
​
</head>
<body>
​
<div></div>
​
</body>
</html>

结果如下图所示：

5.浮动

5.1 display

<style>
    div{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    display: none;
    }
    span{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        display: inline-block;
        }
</style>

5.2 float

.layer01 {
border: 1px #F00 dashed;
display: inline-block;
float: right;
}

5.3父级边框塌陷问题

clear

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

解决方案：

  • 增加父级元素的高度

    #father {
border: 1px #000 solid;
height: 800px;
}

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

    <div class="clear"></div>
.clear{
clear: both;
margin: 0;
padding: 0;
}

  • overflow

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

  • 父类添加一个伪类：after(推荐)

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

6.定位

6.1相对定位

加入下面这语句——position: relative;

相对于原来的位置，进行指定的偏移

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

完整代码如下：

<!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;
        }
        #father{
            border: 1px solid red;
            padding: 0;
        }
        #first{
            background-color: aqua;
            border: 1px dashed green;
            position: relative;
            top: -10px;
            left: 10px;
        }
        #second{
            background-color: orange;
            border: 1px dashed yellow;
        }
        #third{
            background-color: cornflowerblue;
            border: 1px dashed blue;
            position: relative;
            bottom: -10px;
            right: 10px;
        }
    </style>
​
</head>
<body>
​
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
​
</body>
</html>

结果如下图所示：

6.2方块定位练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
​
  <style>
    #box{
      width: 300px;
      height: 300px;
      padding: 10px;
      border: 2px solid red;
    }
    a{
      width: 100px;
      height: 100px;
      text-decoration: none;
      background-color: hotpink;
      line-height:100px ;
      text-align: center;
      color: #FFFFFF;
      display: block;
    }
    a:hover{
      background: #6284FF;
    }
    .a2,.a4{
      position: relative;
      left: 200px;
      top: -100px;
    }
    .a5{
      position: relative;
      left: 100px;
      top: -300px;
    }
  </style>
​
</head>
<body>
​
<div id="box">
  <a class="a1" href="#">链接1</a>
  <a class="a2" href="#">链接2</a>
  <a class="a3" href="#">链接3</a>
  <a class="a4" href="#">链接4</a>
  <a class="a5" href="#">链接5</a>
</div>
​
</body>
</html>

结果如下图所示：

6.3绝对定位

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

  • 假设父级元素存在定位，通常会相对父级元素进行偏移

  • 在父级元素范围内移动

    <!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;
        }
        #father{
            border: 1px solid red;
        }
        #first{
            background-color: aqua;
            border: 1px dashed green;
        }
        #second{
            background-color: orange;
            border: 1px dashed yellow;
            position: absolute;
            right: 30px;
        }
        #third{
            background-color: cornflowerblue;
            border: 1px dashed blue;
        }
    </style>
​
</head>
<body>
​
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
​
</body>
</html>

    结果如下图所示：

6.4固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
​
    <style>
        body{
            height: 300px;
        }
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
​
​
</head>
<body>
​
<div>div1</div>
​
</body>
</html>

结果如下图所示：

无论浏览器页面如何滑动，其位置不变

6.5 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="images/3.jpg" alt=""></li>
    <li class="tipText">2-16勇夺第一</li>
    <li class="tipBG"></li>
    <li>战鹰战鹰几岁了，战鹰战鹰我三岁了</li>
  </ul>
</div>
​
</body>
</html>
#content{
    width: 800px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px #000 solid;
}
ul,li{
    padding: 0;
    margin: 0;
    list-style: none;
}
#content ul{
    position: relative;
}
.tipBG,.tipText{
    position: absolute;
    width: 800px;
    top: 367px;
    height: 25px;
}
.tipText{
    color: #FFFFFF;
    z-index: 999;
}
.tipBG{
    background: #000;
    opacity:0.5;
}

结果如下图所示：

7.CSS3.0总结

转载请注明出处或者链接地址：https://www.qianduange.cn//article/5394.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

用js生成小米商城

2024-04-27 21:04:59

网页汇率计算器vue代码

2024-04-26 13:04:44

vue3绘制内容自动无缝滚动表格

2024-04-25 16:04:07

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

vue里使用样式color: var(--Editor-text)，已经定义了--Editor-text，但是却显示变量--Editor-text未定义，为啥

2024-04-25 08:04:19

wangEditor设置初始文字颜色

2024-04-23 15:04:38

Golang 使用 Gin 框架接收 HTTP Post 请求体中的 JSON 数据

2024-04-23 22:04:53

Python读写Json文件

2024-04-23 22:04:19

【头歌】——数据分析与实践-python-网络爬虫-Scrapy爬虫基础-网页数据解析-requests 爬虫-JSON基础

2024-04-23 22:04:19

ObjectMapper转化对象常用方法(转LIst、Map，以及Type、JavaType、constructType的学习)

2024-04-23 22:04:02

大家推荐的文章
1

前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000
2

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
3

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
4

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
5

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
6

移动端css布局大全

2024-02-06 15:02:421000
7

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
8

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
9

vue实现可输入可下拉选择的组件

2024-04-05 09:04:35999
10

echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！