526互联

CSS3

发布时间 2023-06-22 09:52:31作者: 小钰大猪崽

CSS的简单介绍

如何学习

1、css是什么

2、css怎么用（快速入门）

3、css选择器（重点+难点）

4、美化网页（文字、阴影、超链接、列表、渐变）

5、盒子模型

6、浮动

7、定位

8、网页动画（特效效果）

什么是CSS和CSS的发展史

什么是CSS

Cascading Style Sheet层叠级联样式表

CSS：表现（美化网页）

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

发展史

1.0·

2.0 DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO（搜索引擎优化）

2.1 浮动、定位

3.0 圆角，阴影，动画…浏览器兼容性~

CSS的快速入门及优势
第一个css程序

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

    <!--  规范，style标签，css样式代码可以写在这里,每一个声明最好使用分号结尾
      语法：
        选择器{
            声明1;
            声明2;
            声明3;
            h1{
                color: red;
            }
        }
      -->
<!--  第一种写css代码的方式  -->
<!--    <style>-->
<!--        h1{-->
<!--            color: red;-->
<!--        }-->
<!--    </style>-->
<!--  第二种导入css样式文件  -->
    <link rel="stylesheet" href="./css/style.css">

</head>
<body>


<h1>我是标题</h1>

</body>
</html>

三种CSS导入方式

  • 行内标签式
  • 文件内部式
  • 文件外部式
    • 链接式
    • 导入式

行内标签式

<h1 style="color: red">我是标题</h1>

文件内部式

<head>
	h1{
    	color: red;
	}
</head>

文件外部式

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

<style>
    @import url("css/style.css");
</style>

如果导入方式重复，还存在样式冗余那么就以就近原则进行渲染

选择器（重要）

基础选择器

  • 标签选择器
  • class类选择器
  • id选择器

标签

标签名{}

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

    <style>
        /*标签选择器，会选择到页面上所有的这个标签元素*/
        h1{
            color: green;
            background: #6ab80b;
            border-radius: 24px;
        }
        p{
            font-size: 80px;
        }
    </style>

</head>
<body>

<h1>学java</h1>
<h1>学java</h1>

<p></p>

</body>
</html>

类选择器

.类名{}

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

    <style>
        /*类选择器的格式 .class的名称{}
        好处，可以多个标签归类，是同一个class，可以复用
        */
        .zhang{
            color: #d90cd9;
        }
        .li{
            color: #6ab80b;
        }
    </style>

</head>
<body>

<h1 class="zhang">标题1</h1>
<h1 class="li">标题2</h1>
<h1 class="zhang">标题3</h1>

<p class="zhang">p标签</p>

</body>
</html>

id选择器

/#id名{}

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

    <style>
        /*id选择器： id必须保证全局唯一
        #id名称{}
        优先级：
        不遵循就近原则，固定的
        id选择器>class选择器>标签选择器
        */
        .style1{
            color: #6ab80b;
        }
        #zhang{
            color: #d90cd9;
        }
        h1{
            color: #675231;
        }

    </style>

</head>
<body>

<h1 class="style1" id="zhang">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>

</body>
</html>

优先级：id>class>标签

层次选择器

  • 后代选择器
  • 子选择器
  • 相邻兄弟选择器
  • 通用选择器

后代选择器

上层 下层的所有

 body p{
            background: red;
        }

子选择器

上层 下层单个

 body>p{
            background: #1f4794;
        }

相邻兄弟选择器

一个选择器 + 另一个选择器，只有一个向下衍生

.active + p{
            background: #8fd4fc;
        }

通用选择器

一个选择器 ~ 另一个选择器，当前选中元素向下的所有兄弟元素

.active~p{
            background: #675231;
        }

伪类选择器

/*ul的第一个子元素*/
ul li：first-child{
    background:#02ff00;
}
/*ul的最后一个子元素*/
ul li：last-child{
    background:#ff4832;
}
/* 选中p1：定位到父级元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！，顺序
*/
p:nth-child(2){
    background:#2700ff;
}
/*选中父元素，下的p元素的第二个，类型*/
p:nth-of-type(1){
    background:yellow;
}
p:hover{
      background: red;
    }

<body>

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

</body>

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <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;
        }
        /*属性名，属性名=属性值（可以使用正则表达式）
        =绝对等于
        *=包含这个元素
        ^=以这个开头
        $=以这个结尾
        */
        /*存在id属性的元素		a[]{}
            a[id]{
                background:yellow;
            }
        id=first的元素
            a[id=first]{
                background：#63ff23
            }
        class中有links的元素
            a[class/*="links"]{
                background:yellow;
            }
        选中href中以http开头的元素
            a[href^=http]{
                background:yellow;
            }
        */
        a[href$=jpg]{
            background:yellow;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="http://blog.kuangstudy.com" 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>

美化网页元素

字体样式

CSS作用：

1、有效的传递页面信息

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

3、凸显页面的主题

4、提高用户的体验

字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式学习</title>
  <!--
  font-family:字体
  font-size:字体大小
  font-weight:字体粗细
  color:实体颜色
   -->
  <style>
    #title1{
      font-size: 24px;
      color: #aa88ff;
    }
    .p2{
      font-family: "Arial Nova",楷体;
    }
    h1{
      font-size: 30px;
    }
    .p1{
        font-weight: 1000;
    }
    .p3{
        font:oblique bolder 24px 楷体;
    }
  </style>
</head>
<body>

<h1>简介<span id="title1">Fate</span></h1>

<p class="p1">
    《Fate/Zero》（フェイト/ゼロ）是游戏及动画作品《Fate/stay night》的前传小说。由日本作家虚渊玄著作，全4卷（文库版为6卷）。该作品亦改编成同名电视动画。Fate/Zero讲述的是第四次圣杯战争时的故事。
    早在2004年的时候，原著游戏外传《Fate/hollow ataraxia》制作时，就已同步制作的官方外传小说。
</p>
<p class="p2">
    “在眼花缭乱地踏进Fate的故事世界的时候，假如本书能够担当起领航人的职务，我作为著者将为此感到不胜幸福。”2011年1月虚渊玄在谈及创作灵感时说道。
</p>
<p class="p3">
    Forget about the days when it's been cloudy. But don't forget your hours in the sun.
    Forget about the times you have been defeated. But don't forget the victories you have won.
    Forget about the misfortunes you have encountered. But don't forget the times your luck has turned.
    Forget about the days when you have been lonely. But don't forget the friendly smiles you have seen.
    Forget about the plans that didn't seem to work out right. But don't forget to always have a dream.
    忘掉你失意的日子，但不要忘记黄金的时光。
    忘掉你的一次次失败，但不要忘记你夺取的胜利。
    忘掉你遭遇的不幸，但不要忘记你的时来运转。
    忘掉你的孤独日子，但不要忘记你得到的友善微笑。
    忘掉你没有得以顺利实施的计划，但不要放弃你的梦想。
</p>

</body>
</html>

文本样式

1、颜色：color：rgb，rgba

2、文本对齐的方式：text-align：center

3、首行缩进：text-indent：2em

4、行高（行间距）：line-height：

5、装饰 ：text-decoration：

6、文本图片水平对齐：vertical-align：middle

text-decoration:underline/*下划线*/
text-decoration:line-through/*中划线*/
text-decoration:overline/*上划线*/
text-decoration:none/*超链接去下划线*/
img,span{vetical-align:middle}/*图片和文本水平垂直对齐*/

文本，阴影和超链接伪类

伪类

<style>
	a{/*超链接有默认的颜色*/
		text-decoration:none;
		color:#000000;
	}
	a:hover{/*鼠标悬浮的状态*/
		color:orange;
	}
	a:active{/*鼠标按住未释放的状态*/
		color:green
	}
	a:visited{/*点击之后的状态*/
		color:red
	}
</style>

阴影

/*	第一个参数：表示水平偏移
	第二个参数：表示垂直偏移
	第三个参数：表示模糊半径
	第四个参数：表示颜色
*/
text-shadow:5px 5px 5px 颜色

列表ul li

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: #aa88ff;
    text-align: center;
}
/*
list-style:
none 去掉⚪点
circle 空心圆
decimal 数字
square 正方形

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

a{
    text-decoration: none;
    font-size: 14px;
    color: #aa88ff;
}

a:hover{
    color: #ff4832;
}

#zujian{
    width: 250px;
    background: #aeffc8;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>列表样式</title>
  <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="zujian">
  <h2 class="title">全部商品分类</h2>
  <ul>
    <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音响</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
    <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
    <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
    <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
    <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
    <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">中标</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
    <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
    <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>
  </ul>
</div>
</body>
</html>

背景

  1. 背景颜色：background
  2. 背景图片
background-image:url("");/*默认是全部平铺的*/
background-repeat:repeat-x/*水平平铺*/
background-repeat:repeat-y/*垂直平铺*/
background-repeat:no-repeat/*不平铺*/

综合应用

background:red url("图片相对路劲") 270px 10px no-repeat
background-position：/*定位：背景位置*/

渐变

网址：https://www.grablent.com==
径向渐变、圆形渐变

盒子模型

什么是盒子模型

  1. margin：外边距
  2. padding：内边距
  3. border：边框

边框

border：粗细 样式 颜色

  1. 边框的粗细
  2. 边框的样式
  3. 边框的颜色

外边距----妙用：居中

margin-left/right/top/bottom–>表示四边，可分别设置，也可以同时设置如下

margin:0 0 0 0/*分别表示上、右、下、左；从上开始顺时针*/
/*例1：居中*/
margin:0 auto /*auto表示左右自动*/
/*例2：*/
margin:4px/*表示上、右、下、左都为4px*/
/*例3*/
margin:10px 20px 30px/*表示上为10px，左右为20px，下为30px*/

盒子的计算方式：
margin+border+padding+内容的大小

总结：
body总有一个默认的外边距 margin:0
常见操作：初始化

margin:0;
padding:0;
text-decoration:none;

圆角边框----border-radius

border-radius有四个参数（顺时针），左上开始
圆圈：圆角=半径

浮动

块级元素：独占一行 h1~h6 、p、div、 列表…
行内元素：不独占一行 span、a、img、strong

display（重要）

  1. block：块元素
  2. inline：行内元素
  3. inline-block：是块元素，但是可以内联，在一行
  4. none：消失
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--block 块元素
        inline 行内元素
        inline-block 是块元素，但是可以内联 ，在一行
    -->
    <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>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ会员</title>
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="wrap">
    <!--头部-->
    <header class="nav-header">
        <div class="head-contain">
            <a href="" class="top-logo"><img src="img/logo.png" width="145" height="90" /></a>
            <nav class="top-nav">
                <ul>
                    <li><a href="">功能特权</a> </li>
                    <li><a href="">游戏特权</a> </li>
                    <li><a href="">生活特权</a> </li>
                    <li><a href="">会员特权</a> </li>
                    <li><a href="">成长体系</a> </li>
                    <li><a href="">年费专区</a> </li>
                    <li><a href="">超级会员</a> </li>
                </ul>
            </nav>
            <div class="top-right">
                <a href="">登录</a>
                <a href="">开通超级会员</a>
            </div>
        </div>
    </header>
</div>
</body>
</html>

*{
    padding:0;
    margin: 0;
}
a{
    text-decoration: none;
}
.nav-header{
    height: 90px;
    width: 100%;
    background: rgba(0,0,0,.6);
}
.head-contain{
    width: 1180px;
    height: 90px;
    margin: 0 auto;
    text-align: center;
}
.top-logo,.top-nav,.top-nav li,.top-right{
    height: 90px;
    display: inline-block;
    vertical-align: top;
}
.top-nav{
    margin: 0 48px;
}
.top-nav li{
    line-height: 90px;
    width: 90px;
}
.top-nav li a{
    display: block;
    text-align: center;
    font-size: 16px;
    color: #fff;
}
.top-nav li a:hover{
    color: blue;
}

.top-right a{
    display: inline-block;
    font-size: 16px;
    text-align: center;
    margin-top: 25px;
    border-radius: 35px;
}
.top-right a:first-of-type{
    width: 93px;
    height: 38px;
    line-height: 38px;
    color: #fad65c;
    border: 1px #fad65c solid;
}
.top-right a:first-of-type:hover{
    color: #986b0d;
    background: #fad65c;
}
.top-right a:last-of-type{
    width: 140px;
    height: 40px;
    font-weight: 700;
    line-height: 40px;
    background: #fad65c;
    color: #986b0d;
}
.top-right a:last-of-type:hover{
    background: #fddc6c;
}

float：left/right左右浮动

clear：both

overflow及父级边框塌陷问题

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

解决塌陷问题方案：
方案一：增加父级元素的高度；
方案二：增加一个空的div标签，清除浮动

display与float对比

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

定位

  • 相对定位
  • 绝对定位

相对定位

相对定位：positon：relstive；
相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会被保留

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

绝对定位-absolute

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

  1. 没有父级元素定位的前提下，相对于浏览器定位
  2. 假设父级元素存在定位，我们通常会相对于父级元素进行偏移
  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 #666;
            padding: 0;
            position: relative;
        }
        #first{
            background-color: #a13d30;
            border: 1px dashed #b27530;

        }
        #second{
            background-color: green;
            border: 1px dashed #0ece4f;
            position: absolute;
            right:30px;
            top:30px
        }
        #third{
            background-color: red;
            border: 1px dashed #ff1b87;
        }
    </style>
</head>
<body>
<div id = "father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

固定定位-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:red;
             position: absolute;
             right: 0;
             bottom: 0;
         }
        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>

总结