CSS

1、什么是CSS

如果学习：

1.CSS是什么

2.CSS怎么用（快速入门）

3.CSS选择器（重点+难点）

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

5.盒子模型

6.浮动

7.定位

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

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>

建议使用外部引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  规范，<style> 可以编写css代码
  语法：
      选择器 {
          声明1；
          声明2；
          声明3；
      }

-->
  <link rel="stylesheet" href="css/style.css">
</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>

拓展：外部样式两种写法

链接式：

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

导入式：

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

2、选择器

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

2.1、基本选择器

标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /* 标签选择器，会选择到页面上所有的这个标签的元素*/
    h1{
      color: #aa0c0c;
      background: #3da8bc;
      border-radius: 24px;
    }
    p{
      font-size: 80px;
    }
  </style>
</head>
<body>
<h1>学java</h1>
<h1>学java</h1>
<p>夜欢</p>

</body>
</html>

2.类选择器 class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器的格式 .class的名称{}
        好处，可以多个标签归类，是同一个class
        */
        .yehuan{
            color: #3da8bc;
        }
        .jiongda{
            color: red;
        }
    </style>
</head>
<body>
<h1 class="yehuan">标题1</h1>
<h1 class="jiongda">标题2</h1>
<h1>标题3</h1>
</body>
</html>

3.id选择器：全局唯一！ #id{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器的格式 .class的名称{}
        好处，可以多个标签归类，是同一个class
        */
        #yehuan{
            color: #3da8bc;
        }
        .jiongda{
            color: red;
        }
    </style>
</head>
<body>
<h1 id="yehuan">标题1</h1>
<h1 class="jiongda">标题2</h1>
<h1>标题3</h1>
</body>
</html>

优先级：id>class>标签

2.2、层次选择器

1.后代选择器：在某个元素后面祖爷爷爷爷爸爸你

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

2.子选择器一代

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

3.相邻兄弟选择器

/* 相邻兄弟选择器：只有一个,相邻（向下） */
        .yehuan + p{
            background: yellow;
        }

4.通用选择器

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

2.3、结构伪类选择器

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

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

2.4、属性选择器（常用）

id + class 结合··

属性名，属性名 = 属性值（正则）
= 绝对等于
*= 包含这个元素
^= 以这个开头
$= 以这个结尾

/* 属性名，属性名 = 属性值（正则）
        = 绝对等于
        *= 包含这个元素
        ^= 以这个开头
        $= 以这个结尾       
        */
        /* 存在id属性的元素    a[]{} */
        a[id]{
            background: red;
        }
        /* id = first 的元素*/
        a[id=first]{
            background: green;
        }
        /* class 中有links的元素 */
        a[class*=links]{
            background: gold;
        }
        /* 选中href中以http开头的元素 */
        a[href^=http]{
            background: red;
        }
        a[href$=jpg]{
            background: wheat;
        }

3、美化网页元素

3.1、为什么要美化网页

1、有效的传递页面信息

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

3、凸显页面的主题

4、提高用户体验

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #title1{
            font-size: 50px;
        }
    </style> 
</head>
<body>
    欢迎学习<span id="title1">Java</span> 
</body>
</html>

3.2、字体样式

 <style>
        /* 
        font-family:字体
        font-size：字体大小
        font-weight:字体粗细
        color:字体颜色
        */
        body{
            font-family: "Arial Black", 楷体;

        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bold;
        }
    </style>

3.3、文本样式

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

img,span{
    vertical-align:middle;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--
    颜色：
        单词
        RGB
        RGBA

    text-align：排版 ，居中
    text-indent: 2em; 段落首行缩进
    行高和块的高度一致，就可以上下居中
    -->
    <style>
        h1{
            color:rgba(0, 255, 255,0.5);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: red;
            height: 300px;
            line-height: 300px;
        }
        /* 下划线 */
        .l1{
            text-decoration: underline;
        }
        /* 中划线 */
        .l2{
            text-decoration: line-through;
        }
        /* 上划线 */
        .l3{
            text-decoration: overline;
        }
        /* a标签去掉下划线 */
        .a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <a href="#">123</a>
    <p class="l1">123123</p>
    <p class="l2">123123</p>
    <p class="l3">123123</p>

    <h1>故事介绍</h1>
    <p class="p1">
        《魁拔》是2008年北京青青树动漫科技有限公司以系列动画电影的第一部
    </p>
    <p class="p2">
        TV版完整保留了电影的世界观、人物设定、故事内容和情节主线，但重制了片头曲。
    </p>
    <p class="p3">this is yahuan</p>
</body>
</html>

3.4、阴影

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

3.5、超链接伪类

正常情况下，a，a:hover

/* 默认的颜色 */
       a{
           text-decoration: none; 
           color: #000000;
       }
       /* 鼠标悬浮的状态 （只需要记住 :hover）*/
       a:hover{
           color: orange;
       }

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、背景

背景颜色

背景图片

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

3.8、渐变

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

渐变网站：

https://www.grabient.com/

4.盒子模型

4.1、什么是盒子模型

margin：外边距

padding：内边距

border：边框

4.2、边框

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

<style>
        /* h1,ul,li,a,body{
            margin: 0;
            padding: 0;
            text-decoration: none;
        } */
        body{
            /* body总有一个默认的外边距 */
            margin: 0;
        }

        #box{
            /* border : 粗细、样式、颜色 */
            width: 300px;
            border: 1px solid red;
        }

        h2{
            font-size: 16px;
            background-color: #3cbda6;
            line-height: 30px;
            color: white;
        }

        form{
            background: skyblue;
        }
        /* solid 实线 dashed 虚线 */
        div:nth-of-type(1) input{
            border: 3px solid black;
        }

        div:nth-of-type(2) input{
            border: 3px dashed blue;
        }
    </style>

4.3、内外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 外边距的妙用：居中元素 -->
     <!-- margin: 0 auto; -->
    <style>
        #box{
            width: 300px;
            border: 1px solid red;
            margin: 0 auto;
        }

        /* 
        顺时针旋转
        margin:0
        margin:0 1px
        margin: 0 1px 2px 3px 
        */
        h2{
            margin: 0;
        }
        div:nth-of-type(1){
            /* 和 margin 一样*/
            padding: 0;
        }
    </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>

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

margin + border +padding + 内容的宽度

4.4、圆角边框

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

4.5、盒子阴影

<!-- 要求：块元素，块元素有固定的宽度 -->
  <style>
      div{
          width: 100px;
          height: 100px;
          border: 10px solid red;
          box-shadow: 10px 10px 100px yellow;
      }
  </style>

5.浮动

5.1、文档流

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

5.2、display

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

5.3、float

加了浮动之后的元素 , 会具有很多特性 , 需要我们掌握的 .

浮动元素会脱离标准流 ( 脱标 )
浮动的元素会一行内显示并且元素顶部对齐
浮动的元素会具有行内块元素的特性 .

	<style>
        div {
            float: left;
            width: 150px;
            height: 200px;
            background-color: #d87093;
        }
    </style>

5.4、父级边框塌陷的问题

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

解决方案：

增加父元素的高度
增加一个空的div标签，清除浮动

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

overflow

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

在父类添加一个伪类：after

#after: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">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }

        #father{
            padding: 0;
            border: 1px solid #666;
        }
        #first{
            background-color: #0bc957;
            border: 1px dashed red;
            position: relative;/*相对定位*/
            top: -20px;
        }
        #second{
            background-color: rgb(21, 239, 235);
            border: 1px dashed green;
        }
        #third{
            background-color: rgb(21, 24, 23);
            border: 1px dashed yellow;
        }
    </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: 10px;
right: 10px;
bottom: 10px;

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 1px solid red;
        } 
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            background-color: pink;
            line-height: 100px;
            text-align: center;
            color: white;
            display: block;
        }
        a:hover{
            background-color: skyblue;
        }
        .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">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }

        #father{
            padding: 0;
            border: 1px solid #666;
            position: relative;
        }
        #first{
            background-color: #0bc957;
            border: 1px dashed red;
            position: absolute;
            top: -20px;
            left: 10px;
            right: 10px;
            bottom: 10px;
        }
        #second{
            background-color: rgb(21, 239, 235);
            border: 1px dashed green;
        }
        #third{
            background-color: rgb(21, 24, 23);
            border: 1px dashed yellow;
        }
    </style>
</head>

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

</body>

</html>

6.3、固定定位 fixed

position: fixed;

固定在浏览器上，不会随着浏览器的滑动而变化

6.4、z-index

z-index：默认是0，最高无限~999

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <div id="content">
        <ul>
            <li><img src="./images/01.jpg" alt=""></li>
            <li class="tipText">学习JAVA语言</li>
            <li class="tipBg"></li>
            <li>时间：2099-01-01</li>
            <li>地点：月球</li>
        </ul>
    </div>
</body>

</html>

css

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

7.动画

posted @ 2025-02-28 18:53 昼冷夜欢阅读(14) 评论(0) 收藏举报

刷新页面返回顶部

昼冷夜欢

CSS