CSS3

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快速入门

css的优势：

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

1.4CSS的三种导入方式

拓展：外部样式两种写法

链接式：html

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

导入式:是CSS2.1特有的

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

2.选择器

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

2.1基本选择器

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

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

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

</head>
<body>

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

</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*类选择器的格式 .class的名称{}*/
    .qinjiang{
         color : #3478ff;
    }
    .kuangshen{
         color: #a24fff;
    }
  </style>
</head>
<body>
<h1 class="qinjiang">标题1</h1>
<h1 class="kuangshen">标题2</h1>
<h1 class="qinjiang">标题3</h1>
<p class="qinjiang">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 选择器>标签选择器
    */
    #qinjiang{
        color: #ff008a;
    }
    .style1{
        color: #02ff00;
    }
    h1{
        color: #2d1dc1;
    }
  </style>

</head>
<body>

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

</body>
</html>

优先级：id>class>标签

2.2层次选择器

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

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

子选择器，一代

/*子选择器*/
body>p{
    background: #3cbda6;
}

相邻兄弟选择器同辈

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

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(2){
      background:blue;
}
/*选中父元素下的p元素的第二个类型*/
p:nth-of-type(1){
      background:yellow;
}

2.4属性选择器（常用）

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

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

</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.jgp" 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>

.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:yellow;
    }*/
    /*class中有links的元素*/
    /*a[class*="links"]{
       background:yellow
    }*/
    /*选中href中http开头的元素*/
    /*a[href^=http]{
      background:yellow
    }*/
    /*选中href中pdf结尾的元素*/
    a[href$=pdf]{
      background:yellow
    }

3.美化网页元素

3.1、为什么要美化网页

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title{
           font-size:50px;
        }
    </style>
</head>
<body>
欢迎学习  <span id="title1">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:red;
    }
    h1{
       font-size:50px;
    }
    .p1{
       font-weight:bold;
    }
  </style>
</head>
<body>
<h1>故事介绍</h1>
<p class="p1">
  第一段
</p>
<p>
  第二段
</p>
</body>
</html>

3.3、文本样式

颜色：color rgb rgba
文本对齐方式：text-align=center
首行缩进：text-indent：2em；
行高：line-height：单行文字上下居中 line-height=height
装饰：text-decoration
文本图片水平对齐：vertical-align：middle

/*颜色：
     单词
     RGB 0~F
     RGBA A：0~1（透明度）
  text-align：排版，居中
  text-indent: 2em 段落首行缩进
  height: 100px;
  line-height: 100px;
  行高和块的高度一致可以上下居中
*/
h1{
    color: #3478ff;
    text-align: center;
}
.p1{
    text-indent: 2em;
}
.p2{
    background: blue;
    height: 100px;
    line-height: 100px;
}
/*下划线*/
.l1{
    text-decoration:underline;
}
/*中划线*/
.l2{
    text-decoration:line-through;
}
/*上划线*/
.l3{
    text-decoration:overline;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--
水平对齐~参照物，a，b
-->
    <style>
        img,span{
            vertical-align: middle;
        }
    </style>
</head>
<body>
<p>
    <img src="image/1.jpg" alt="" width="128" height="72">
    <span>asdfghjkl</span>
</p>
</body>
</html>

3.4、文本阴影

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

3.5、超链接伪类

正常情况下，记住a：hover即可

/*默认的颜色*/
a{
    text-decoration: none;
    color:blue;
}
/*鼠标悬浮的状态*/
a:hover{
    color:orange;
    font-size: 30px;
}
/*鼠标按住未释放的状态*/
a:active{
    color:green;
}
/*鼠标点击后的颜色*/
a:visited{
    color:red;
}

3.6列表

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

3.7背景

背景颜色

背景图片

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

添加图片方式

渐变：记住https://www.grabient.com/在里面复制就行

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  一般都会在写css之前，先把这些标签的默认外边框，下划线等等，初始化*/
        /*h1，ul，li，a，body{
             margin：0
             padding：0
             text-decoration：none
        }*/
        /*border:粗细   样式   颜色*/
        #box{
            width:300px;
            border:1px solid red;
        }
        h2{
            font-size:16px;
            background-color: #18d36f;
        }
        form{
            background: #1dbfb5;
        }
        div:nth-of-type(1) input{
            border:3px solid black;
        }
        div:nth-of-type(2) input{
            border:3px dashed #682b95;
        }
        div:nth-of-type(3) input{
            border:3px solid #b4bd1d;
        }
    </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:0 auto;
margin:0 上下左右
margin:0 1px 上下 左右
margin:0 1px 2px 3px 上 下 左 右

内边距：padding

4.4圆角边框

4个角

<!--
左上 右上 右下 坐下 顺时针
-->
    <style>
        div{
            width:50px;
            height:50px;
            background-color:red;
            border-radius:50px 0 0 0;
        }
    </style>

4.5盒子阴影

<style>
    div{
        width:100px;
        height:100px;
        border:10px solid red;
        box-shadow: 10px 10px 1px yellow;
    }
</style>

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>
<!--
block块元素
inline 行内元素
inline-block：是块元素，但是可以内联，在一行
none：消失
-->
    <style>
        div{
            width:100px;
            height:100px;
            border:1px solid black;
            display: inline;
        }
        span{
            width:100px;
            height:100px;
            border:1px solid black;
            display:block;
        }
    </style>
</head>
<body>

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

</body>
</html>

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

5.3 float

5.4父级边框塌陷的问题

clear

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

解决方案：

增加父级元素的高度

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

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

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

overflow

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

父类添加十个伪类：affer

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

小结：

浮动元素后面增加空div

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

设置父元素的高度

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

overflow

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

父亲添加一个伪类：affer（推荐）

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

5.5对比

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

6、定位

6.1、相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--相对定位
相对于自己原来的位置进行偏移
-->
    <style>
        body{
            padding: 0;
        }
        div{
            margin:10px;
            padding:5px;
            font-size:12px;
            line-height:25px;
        }
        #father{
            border:1px solid #0cdf40;
            padding:0;
        }
        #first{
            background-color: #1dd6ca;
            border:1px dashed #3137a5;
            position: relative;/*相对定位，上下左右*/
            top:-20px;
            left:20px;
        }
        #second{
            background-color: #e81717;
            border:1px dashed #7a27b3;
        }
        #third{
            background-color: #da8810;
            border:1px dashed #ddec0a;
            position: relative;/*相对定位，上下左右*/
            bottom:-10px;
            right:20px;
        }
    </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;
left:20px;
bottom:-10px;
right:20px;

练习

<!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: #8bd88b;
            line-height:100px;
            text-align:center;
            color:white;
            display:block;
        }
        a:hover{
            background: deepskyblue;
        }
        .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.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;
        }
        #father{
            border:1px solid #0cdf40;
            padding:0;
            position:relative;
        }
        #first{
            background-color: #1dd6ca;
            border:1px dashed #3137a5;
        }
        #second{
            background-color: #e81717;
            border:1px dashed #7a27b3;
            position: absolute;/*绝对定位*/
            right:30px;
            top:-10px;
        }
        #third{
            background-color: #da8810;
            border:1px dashed #ddec0a;
        }
    </style>
</head>
<body>

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

</body>
</html>

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: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>

6.4、z-index

图层概念：立体，一层一层的

posted @ 2025-08-14 17:57 A那就算了吧阅读(10) 评论(0) 收藏举报

刷新页面返回顶部

ths-java