css入门

最新推荐文章于 2023-07-09 17:08:30 发布

lanbaoer55

最新推荐文章于 2023-07-09 17:08:30 发布

阅读量616

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/u011578422/article/details/121540942

版权

CSS三种表示方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式的第一种书写方式（行内样式表）</title>
</head>
<body>
    <center>

        <p style="font-size: 24px;color:black;font-weight: bolder;"> 静夜思</p>
        <p>李白</p>
    <p style="font-size:16px;color:green;font-style:italic">床前明月光，疑是地上霜。</p>
    <p style="font-size: 16px;color:green;font-style: italic;">举头望明月，低头思故乡。</p>
    </center>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式的第二种书写方式（内部样式表）</title>
    <style>
        /* 在html中id属性的值必须唯一，id值不能够重复 */
        /* 在html文件中class属性的值可以重复 */
  #title{
      font-size: 24px;
      color: black;
      font-weight: bold;

}
.c1{
    font-size: 18px;
    color: green;
    font-style: italic; /*斜体*/
}



    </style>
  
</head>
<body>

    <center>

        <p id="title"> 静夜思</p>
        <p>李白</p>
    <p class="c1">床前明月光，疑是地上霜。</p>
    <p class="c1">举头望明月，低头思故乡。</p>
    </center>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式的第3种书写方式（外部样式表）</title>
   <link rel="stylesheet" type="text/css" href="./1.css">
</head>
<body>

    <center>

        <p id="title"> 静夜思</p>
        <p>李白</p>
    <p class="c1">床前明月光，疑是地上霜。</p>
    <p class="c1">举头望明月，低头思故乡。</p>
    </center>
</body>
</html>

背景样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页样式</title>
    <style type="text/css">
        body{
            /* background-color:red; */
            /* background-image: url(./img/Snipaste_2021-11-25_14-48-26.png); */
            /* background-repeat: repeat-x; */
            height: 600px;
            /* 线性渐变
            第一个参数：控制渐变的方向（top left right bottom） 
            第二个参数：渐变的起使颜色
            第三个参数：渐变的结束颜色
            
            */
            background:-webkit-linear-gradient(left,red,pink);/*渐变*/
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    
</body>
</html>

列表样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        ul{
            list-style-type: none;/* 去项目符号 */

        }
    </style>
</head>
<body>
    <ul>
        <li style="list-style-image: url(./img/Snipaste_2021-11-25_14-48-26.png);">公子</li> 
        <li style="list-style-image: url(./img/Snipaste_2021-11-25_14-48-46.png);">钟离</li>
        <li style="list-style-image: url(./img/Snipaste_2021-11-25_14-49-15.png);">可莉</li>
    </ul>
</body>
</html>

伪类样式综合演练

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类样式综合演练</title>
    <style>
        a:hover{
            color:blue;
            font-style:italic;
        }
    </style>
</head>
<body>
    
    <table>
        <tr>
           <td><img src="./img/Snipaste_2021-11-25_14-49-15.png"></td> 
           <td><img src="./img/Snipaste_2021-11-25_14-48-26.png"></td> 
           <td><img src="./img/Snipaste_2021-11-25_14-48-46.png"></td> 

        </tr>
        <tr style="text-align: center;">
           <td><a href="https://www.bilibili.com/v/game/?spm_id_from=333.1007.0.0">java编程</a></td> 
           <td><a href="https://www.bilibili.com/v/game/?spm_id_from=333.1007.0.0">胡桃子</a></td> 
           <td><a href="https://www.bilibili.com/v/game/?spm_id_from=333.1007.0.0">公子</a></td> 

        </tr>


    </table>
    


</body>
</html>

文本样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本样式</title>
</head>
<body>
   <table wideth="400px" height="80px" border="1px" cellspacing="0px">
       <tr style="text-align: center;font-weight: bolder;">
           <td>学员姓名</td>
           <td>学习科目</td>
           <td>学习周期</td>
           <td>难易程度</td>
       </tr>
       <tr style="text-align: left; font-family: '华文行楷';">
           <td style="text-decoration: underline;">丁鹏</td>
           <td>html5+css3</td>
           <td>7天</td>
           <td>简单</td>
       </tr>
       <tr style="text-align: right;text-decoration: line-through;">
           <td >东方人发</td>
           <td>得分</td>
           <td>的非人非</td>
           <td>热热</td>
       </tr>
   </table>
   <!-- 控制文本的阴影效果
        x:指明阴影相对于文本的水平距离
        y:指明阴影相对于文本的垂直距离
        z:指定阴影的模糊程度 ，值越大越模糊
        color：指定的阴影的颜色

-->
   <span style="font-size: 28px;text-shadow: 50px 60px 2px red ;">中国</span>
</body>
</html>

字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体样式</title>
</head>
<body>
    <center>
    <p style="font-size: 28px;font-weight: bolder;"> 静夜思</p>
    <p style="color: red;font-family:'华为行楷';font-size: 20px;">李白</p>
    <p style="font-style: italic;">床前明月光，<span style="font-style: 18px;
        font-weight: bolder;">疑</span>是地上霜。</p>
    <p>举头<span style="color: blue;">望</span>明月，低头思故乡。</p>
    </center>
</body>
</html>

盒子模型

margin border和最外层距离：外边距
border 边框设置线颜色样式
padding border和内容之间的距离：内边距
content
边框的样式三个方面:

边框颜色（border-方向-color)
粗细（border-方向-width)
3.特征（border-方向-style)

方向：top bottom left right border-color:四个边框所有的颜色
border-width：四个边框粗细
border-style:四个边框的特征

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型的边框样式</title>
    <style type="text/css"> 
    .box1{
        width: 400px;
        height: 250px;
        /* 控制border的粗细 */
        border-top-width: 10px;
        border-bottom-width:10px;
        border-top-width: 5px;
        border-bottom-width:5px;
        /* 给四个边框的颜色 */
        border-top-color:red;
        border-left-color: aqua;
        border-bottom-color: black;
        border-right-color: pink;
        /* 边框的样式 */
        border-top-style: dashed;
        border-bottom-style: solid;
        border-left-style: solid;
        border-right-style: solid;
         /* 设置圆角的弧度 */
        border-radius: 30px;
    }
    </style>
</head>
<body>
    <div class="box1"> </div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型的边框2</title>
    <style type="text/css">
    #box1{
        width:400px;
        height:250px;
        /* 直接通过border样式可以设置盒子的特征  粗细    颜色
        
        */
        border:solid 10px red;
    }
</style>
</head>
<body>
    <div id="box1"></div>
</body>
</html>

**边界样式（margin）
边界线无色透明，不能控制颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子边界</title>
    <style type="text/css">
        .c1{
            width: 100px;
            height: 100px;
            background:red;
            margin-bottom:20px;

        }
        .c2{
            width: 100px;
            height: 100px;
            background:yellow;
            margin-bottom: 30px;
            
        }
        .c3{
            width: 100px;
            height: 100px;
            background:blue;
           
            
        }

    </style>
</head>
<body>
    <div class="c1">第一个盒子</div>
    <div class="c2">第二个盒子</div>
    <div class="c3">第三个个盒子</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通过盒子模型中的边界可以将某一个盒子居中</title>
    <style type="text/css">
        #box{
            width: 400px;
            height: 250px;
            background: pink;
            margin-left: auto;
            margin-right: auto;
            

        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

内边距
盒子的边框与盒子内容之间的边距，内边距同边界一样，是无色透明看不见的

padding-left: ;
padding-right: ;
padding-top: ;
padding-bottom: 下内边距
padding: 上右下左
案例演示：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .bigBox{
            width:600px;
            height: 300px;
            border: solid 5px red;
            padding-left:20px ;
            padding-top: 40px;
        }
        
        .smallBox{
            width: 200px;
            height: 200px;
            background: blue;
            border-radius: 20px;
            

    </style>
</head>
<body>
    <div class="bigBox">
        <div class="smallBox"></div>
    </div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型的内边距1</title>
    <style type="text/css">
        #box{
            width: 400px;
            height: 200px;
            border: solid 5px red;
            padding-top: 20px;
            padding-left: 30px;
        }


    </style>
</head>
<body>
    <div id="box">我是盒子的内容部分</div>
</body>
</html>

玩转盒子
1、渐变
2、阴影效果
3、旋转一个盒子
4、总结

浮动
1.浮动介绍
浮动作用：div h1 h2 等属于块级标签，块级标签会独占一行。
如果想要让多个块级标签在一行显示，可以使用浮动属性来控制他们
2、浮动在css中用float来表示，常用的值有left、right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>块级标签的特点</title>
    <style type="text/css">
        .c1{
            width: 100px;
            height: 100px;
            background: red;
        }
        .c2{
            width: 100px;
            height: 100px;
            background: blue;
        }



    </style>
</head>
<body>
    <!-- div是块级元素，会独占一行 -->
    <div class="c1"></div>
    <div class="c2"></div>
    <!-- a标签属于行级标签，航迹标签不会单独占据一行 -->
    <a href="#">百度</a>
    <a href="#">新浪</a>

    <h1>中国</h1>
    <h2>中国</h2>
</body>
</html>

2.案例演示
居中对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动案例演示</title>
</head>
<body>
    <!-- 居中的前提是必须为某一个盒子指定宽度 -->
    <center>
    <div class="bigBox1" style="width:360px; height: 100px;margin-bottom: 10px;">
        <div style="width: 100px;height: 100px;background: green;float:left;margin-right: 20px;"></div>
        <div style="width: 100px;height: 100px;background: blue ;float:left;margin-right: 20px;"></div>
        <div style="width: 100px;height: 100px;background: pink ;float:left;margin-right: 20px;"></div>
    </div>
    <div class="bigBox2" style="width:360px; height: 100px;margin-bottom: 10px;">
        <div style="width: 100px;height: 100px;background: orange ;float:left;margin-right: 20px;"></div>
        <div style="width: 100px;height: 100px;background: gray;float:left;margin-right: 20px;"></div>
        <div style="width: 100px;height: 100px;background: black;float:left;margin-right: 20px;"></div>
    </div>
</center>
</body>
</html>

在这里插入图片描述

3.总结

由于div是块级标签，块级标签很霸道会独占一行，如果想让多个块级标签在一行显示，此时就需要用到浮动属性。

相对定位
相对定位案例演示
什么是相对定位
相对定位：相对自身原来的位置进行便宜，可以使用的价值有top、left、right、right、bottom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>相对定位案例演示</title>
    <style type="text/css">
        .smallBox1{
            width: 100px;
            height: 100px;
            background: red;
            float: left;
            margin-right: 10px;
        }
        .smallBox2{
            width: 100px;
            height: 100px;
            background: blue;
            float: left;
            margin-right: 10px;
            /* 使用相对定位进行偏移 */
            position: relative;
            left: 30px;
            top: 20px;
        }
        .smallBox3{
            width: 100px;
            height: 100px;
            background: green;
            float: left;
        }
        .bigBox{
            width: 360px;
            height: 180px;
            border:dashed 5px gray;
            padding-left: 20px;
            padding-top: 20px;
        }

    </style>
</head>
<body>
    <center>
    <div class="bigBox">
        <div class="smallBox1"></div>
        <div class="smallBox2"></div>
        <div class="smallBox3"></div>



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

1、相对定位中相对指的是相对自身而言。当position的属性值为relative时，指的是相对定位。
2、相对定位中，原来的位置始终被保留着。

绝对定位
什么是绝对定位

当position的属性值为abso时，表示的是绝对定位
绝对定位：使用了聚堆定位的元素以它最近的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位。
绝对定位案例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位案例演示</title>
    <style type="text/css">
        .bigBox{
            width: 320px;
            height: 320px;
            border: solid 2px red;
            position:relative;  /*现在大盒子有定位属性了 */
        }
        .smallBox{
            width: 100px;
            height: 100px;
            background: pink;
        }
        .smallBox:hover{
            
            background: blue;
        }
    </style>
</head>
<body>
    <center>
    <div class="bigBox">
        <div class="smallBox" style="position: absolute;left:10px;top:10px;">a1 </div>
        <div class="smallBox" style="position: absolute;right:10px;top:10px;">a2</div>
        <div class="smallBox" style="position: absolute;left:110px;top:110px;">a3</div>
        <div class="smallBox" style="position: absolute;left:10px;bottom:10px;">a4</div>
        <div class="smallBox" style="position: absolute;right:10px;bottom:10px;">a5</div>

       

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

z-index
1、可以设置两个盒子堆叠的先后关系
2、拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
3、元素可拥有负的z-index属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>z-index案例演示</title>
    <style type="text/css">
        .box1{
            width: 100px;
            height: 100px;
            background: red;
            float: left;
            position: relative;
            z-index: 4;
        }
        .box2{
            width: 100px;
            height: 100px;
            background: blue;
            float: left;
            position: relative;
            left:-30px;
            top:30px;
            z-index: 5;
        }
        .box3{
            width: 100px;
            height: 100px;
            background: green;
            float: left;
            position: relative;
            left: -60px;
            top: 60px;
            z-index: 6;
        }
        /* z-index：可以控制标签元素之间的堆叠顺序，属性值越大，堆叠的级别越高
        z-index属性市场上主流的浏览器软件都支持，但IE浏览器不支持 */
    </style>
</head>
<body>
    <div class="box1">盒子1</div>
    <div class="box2">盒子2</div>
    <div class="box3">盒子3</div>
</body>
</html>

在这里插入图片描述表单项目实战

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./css/1.css">
</head>
<body>
    <form action="">
        <table width="600px" height="200px" border="1px">
            <tr>
                <td colspan="4" class="c1"> VIP会员注册信息</td>
            </tr>
            <tr>
                <td>姓名</td>
                <td><input type="text" name="username"></td>
                <td>注册时间</td>
                <td><input type="date" name="time"></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="password" name="password"></td>
                <td>确认密码</td>
                <td><input type="password" name="checkPassword"></td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="gender">男
                    <input type="radio" name="gender">女
                </td>
                <td>年龄</td>
                <td><input type="text" name="age"></td>
            </tr>
            <tr>
                <td>职业</td>
                <td>
                    <select>
                        <option value="">java开发工程师</option>
                        <option value="">web前端开发工程师</option>
                        <option value="">数据库开发工程师</option>
                    </select>
                </td>
                <td colspan="2" rowspan="4" class="c2"><img src="#"></td>
            </tr>
            <tr>
                <td>Email</td>
                <td><input type="email" name="email"></td>
            </tr>
            <tr>
                <td>爱好</td>
                <td>
                    <input type="checkbox" name="music">音乐
                    <input type="checkbox" name="pe">体育
                    <input type="checkbox" name="chinese">文学
                    <input type="checkbox" name="games">游戏
                </td>
                <td colspan="2"></td>
                
            </tr>
            <tr>
                <td>头像</td>
                <td><input type="file"></td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td colspan="2"><input type="submit" value="提交"></td>
                <td colspan="2"><input type="reset" value="重置"></td>

                
            </tr>
        </table>
    </form>
</body>
</html>

.c1{
    font-size: 24px;
    font-style: bolder;
    text-align: center;
}

.c2{
    text-align: center;
}

在这里插入图片描述

lanbaoer55

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css入门

CSS三种表示方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti
复制链接

扫一扫