CSS基本案例

香香不学习

已于 2023-04-10 09:08:42 修改

阅读量176

点赞数 1

文章标签： css

于 2023-04-06 20:48:16 首次发布

本文链接：https://blog.csdn.net/firenaimal/article/details/129998159

版权

1 、样式 style

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>Document</title>
    <style>
       /* p,h1{
        color: #000;
       }  */
    </style >
    <link rel="stylesheet" href="../2_css/01waibu.css" type="text/css">
</head>
<body>
    <p style="color: yellow;"> sdsd</p>
    <h1>dss</h1>
</body>
</html>

2、基本选择器

统配选择器、标签选择器、类选择器、id选择器（id名唯一）
{ } 、标签名{ } 、 .类名{ } 、 #id名{ }
类选择器之前用点，id选择器之前用*#**号

<!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>
        /* *统配选择器 控制页面所有范围 */
        *{
            margin: 0; padding:0;
        }
        /* 标签名{} 标签选择器 */
        h1{
            color:red;
        }
        /* .class名 类选择器 */
        .c1{
            color:pink
            ;
        }
        /* id名唯一  */
        #div1{
            color: aquamarine;
        }
    </style>
</head>
<body>
    <h1>sgefg</h1>
    <p>ffffa</p>
    <!-- div也是无语义的标签 是块标签 -->
    <div id="div1" class="c1 c2">dsadasd</div>
</body>
</html>

3、复合选择器

并集选择器、包含选择器（后代选择器）、属性选择器、伪类选择器

<!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>css复合选择器</title>
    <style>
        /* 并集选择器 */
        h1,p{
            color: blue;
        }
        /* 包含选择器 */
        div p{
            color:rebeccapurple;
        }
        /* 属性选择器 */
        input[name]{
            background-color: aqua;
        }
        input[name='age']{
            background-color: aquamarine;
        }
        /*伪类选择器*/
        ul li:first-child{
            color: red
            ;
        }
        ul li:last-child{
            background-color: aqua;
        }
        ul li:nth-child(3){
            background-color: bisque;
        }
    </style>
</head>
<body>
    <h1>ssdsd</h1>
    <p>dsdd</p>
    <div>
        <p>dasdsda</p>
        </div>
    <div>
        <input type="text" name="username">
        <input type="text" name="age">
        <input type="text">
    </div>
    <ul>
        <li>1</li>
        <li>2222222</li>
        <li>3333333333</li>
        <li>4444444444444</li>
    </ul>
</body>
</html>

运行截图在这里插入图片描述

4、块、行内、行内元素

块元素独占一行，可以控制宽高，宽度默认铺满屏幕，高度默认内容高度
行内元素，元素不独占一行，连续显示，不能指定宽度和高度，宽度和高度是内容本身
行内块元素，元素不独占一行，连续显示，能指定块宽度和高度

常见的块元素有:

常见的块元素有:

- <h1>~<h6>
- <p>
- <div>
- <ul>
- <ol>
- <li>

其中<div>标签是最典型的块元素。

行内元素

行内元素（内联元素）不独占一行，宽度和高度是内容本身的宽度和高度

常见行内元素有:

- <a>
- <strong> 加粗
- <b>加粗
- <em>倾斜
- <i>倾斜
- <del>删除
- <s>删除
- <ins>下划线
- <u>下划线
- <span>

其中<span>标签最典型的行内元素。

行内块元素

行内块元素主要有：

- <img />
- <input />
- <td>

综合实例

<!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>
        /*  1.块元素独占一行
            2.可以指定块的宽、高 
            3. 宽度默认铺满所在容器
            4.高度默认是内容高度
        */
        div{
            width: 100px;
            height: 100px;
            background: red;
        }
        /*  1.行内元素，元素不独占一行，连续显示
            2.不能指定宽度和高度
            3、宽度和高度是内容本身
         */
        span{
            width: 100px;
            height: 100px;
            background: blanchedalmond;
        } 
        /* 行内块元素 
             1.元素不独占一行，连续显示，
             2.能指定块宽度和高度 */
        input{
            width: 200px;
            height: 402px;
            background: pink;
            display:inline;
        }
    </style>
</head>
<body>
    <div>块元素</div>
    <span>行内元素</span><span>行内元素</span>
    姓名<input type="text"><input type="text">dasd
</body>
</html>

5、块、行内、行内元素转换

          /*将目标元素转为块元素 */
            display: block;
            /*将目标元素转为行内元素 */
            display: inline;
            /*将目标元素转为行内块元素 */
            display: inline-block;

<!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>
        /* css中，可以通过display属性来改变标签的显示模式 */
        span{
            width: 100px;
            height: 100px;
            background: red;
            /* 将目标元素转为块元素 */
            /* display: block; */
            /* 将目标元素转为行内元素 */
            /* display: inline; */
            display: inline-block;
        }
    </style>
</head>
<body>
    <span>元素显示模式转换</span>测试
</body>
</html>

6、字体属性

在这里插入图片描述
font基本语法格式

<!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>
        p{
            /* font-size: 14px;
            font-family: "微软雅黑";
            font-weight: 800px;
            font-style: italic; */
            font: italic 400 14px/21px "微软雅黑";
        }
        /* {font: font-style, font-width, font-size/line-height,font-family */
    </style>
</head>
<body>
    <p>张伟必须死</p>
</body>
</html>

7、文本属性（外观属性）

在这里插入图片描述

<!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>
        p{  
            /*字体颜色*/
            color:red;
            color:#2C2F32;
            color:rgb(255,0,30);
            /* 有透明度的 */
            color:rgba(0,0,0,0.3);
            
            /* 字体大小 */
            font-size:21px;
            /*行高*/
            line-height: 28px;
            /*水平对齐方式*/
            /* center 居中 left 靠左 right 靠右 */
            text-align: center;
            /*2em当前字体大小的2倍*/
            text-indent: 2em;
            /* none 无 underline下划线 overline上划线 line-through 删除线 */
            text-decoration: overline;
            /* 单词间距 */
            word-spacing: 5px;
            /* 字母间距 */
            letter-spacing: 15px;
            /* font-style: italic; */
            font:italic 400 34px/39px "楷体" ;

        }
    </style>
</head>
<!-- .p1是类 #p1是id -->
<body>
    <p>hello world 胖叔讲java！！！,一路相伴胖叔讲java！！！,
        一路相伴胖叔讲java！！！,一路相伴胖叔讲java！！！,一路
        相伴胖叔讲java！！！,一路相伴 胖叔讲java！！！,一路相
        伴胖叔讲java！！！,一路相伴胖叔讲java！！！,一路相伴胖
        叔讲java！！！,一路相伴胖叔讲java！！！,一路相伴胖叔讲
        java！！！,一路相伴 胖叔讲java！！！,一路相伴胖叔讲java
        ！！！,一路相伴胖叔讲java！！！,一路相伴胖叔讲java！！！,
        一路相伴胖叔讲java！！！,一路相伴
    </p>
    <p class="p1">
        张伟必须死
    </p>
</body>
</html>

8、背景属性

在这里插入图片描述

<!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>
        .bj{
            width: 800px;
            height: 2000px;
            text-align: center;
            background-color: aqua;
            /* 背景照片 */
            background-image:url(../imgs/1.png);
            color:yellow;
            font-size: 300px;
            /* 图片的平铺方式 */
            /* repeat| no-repeat| repeat-x|repeat-y */
            /* repeat 	 默认。背景图像将在垂直方向和水平方向重复。*/
            /*no-repeat  背景图像将仅显示一次。 */
            /*repeat-x   背景图像将在水平方向重复。*/
            /*repeat-y   背景图像将在垂直方向重复。*/
            background-repeat: no-repeat;
            /* 背景图片位置定位 */
            background-position: left 50px top 100px;
            /*图片的附着方式  */
            /* scroll 	默认值。背景图像会随着页面其余部分的滚动而移动。 */
            /* fixed    当页面的其余部分滚动时，背景图像不会移动。*/
            /* inherit  规定应该从父元素继承 background-attachment 属性的设置。 */
            background-attachment:fixed;
            /* 综合写法 */
            /* background: green url(../imgs/1.png) no-repeat  fixed left 300px top 200px; */
            /* background: 颜色  图片 图片的平铺方式 附着方式 背景图片位置定位 */

        }
    </style>
</head>
<body>
    <div class="bj">凹凸曼</div>
</body>
</html>

9、背景精灵技术

<!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>
        .setting{
            width:400px;
            height: 500px;
            background: url(../imgs/2.png) no-repeat left 100px top 0;
        }
    </style>
</head>
<body>
    <div class="setting"></div>
</body>
</html>

10、表格属性

text-align：设置文本的水平对齐。
vertical-align：设置文本的垂直对齐。
border-spacing：边框间距
border-collapse：合并边框
- collapse：合并边框
- separate：不合并边框

<!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>
        /*  text-align：设置文本的水平对齐。 
            vertical-align：设置文本的垂直对齐。 
            border-spacing：边框间距 
            border-collapse：合并边框
            collapse：合并边框 
             separate：不合并边框
 */
        table{
            width: 500px;
            text-align: center;
            /* 设置文本的垂直对齐 */
            vertical-align: middle;
        }
        table,tr,td,th{
            border: 1px solid black;
            /* 边框厚度 */
            border-spacing: 0;
            /* 合并表框线 */
            border-collapse: collapse;
            border-left: none;
            border-right: none;
            /* 去除列表样式 */
            /* list-style: none; */
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <td>性别</td>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>男</td>
        </tr>
        <tr>
            <td>2</td>
            <td>丽丝</td>
            <td>女</td>
        </tr>
    </table>
</body>
</html>

11、其他属性

list-style:none 去除列表项
transform: 属性值
- scale缩放（一般）
- translate 位移（重点）
- rotate 旋转（重点）
- skew 倾斜（了解）

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            /* 去除列表项目 */
            list-style: none;
        }
        h2{
            /* transform: translate(200px,50px); */
            transform:rotate(5deg);
        }
    </style>
</head>
<body>
    <ul>
        <li>手机</li>
        <li>手机</li>
        <li>手机</li>
        <li>手机</li>
    </ul>
    <h2>标题</h2>
</body>
</html>

12、盒子模型

在这里插入图片描述

<!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>
        *{margin: 0; padding: 0;}
        .adv1{
            width: 100px;
            height: 100px;
            background-color: aqua;
            /* 设置内边距 */
            padding-top: 10px;
            padding-left: 40px;
            padding-bottom: 30px;
            padding-right: 40px;
            /* 可以忽略内边框带来的影响包含边框 */
            box-sizing: border-box;
            /* 上下左右都是20px */
            padding: 20px;
            /* 上下20px 左右40px */
            padding: 20px 40px;
            /* 上10px 下20px 左右30px */
            padding: 10px 30px 20px;
            /* 上 右 下 左 */
            padding:10px 20px 30px 40px;
            /* 边框 */
            border-top: 1px solid green;
            border-left: 2px dashed pink;
            border-bottom: 1px solid green;
            border-right: 4px dashed palegoldenrod;
            border: 2px solid blue;
            /* 边框圆角 */
            border-radius:50px;
            /* 外边框 */
            margin-top: 10px;
            margin-left: 20px;
            margin-bottom: 30px;
            margin-right: 40px;
            margin: 40px;
            margin:20px 40px;
            margin: 10px 20px 40px;
            margin: 10px 20px 30px 40px ;
        }
    </style>
</head>
<body>
    <div class="adv1">www</div>
</body>
</html>

13、盒子模型居中

<!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>
        *{
            margin: 0; padding: 0;
        }
        #app{
            width: 800px;
            height: 400px;
            background-color: antiquewhite;
             /* 解决div坍塌问题，调试外边距或内边距或定位不起作用，都可以用这个解决。但这个属性一定写在父容器中 */
            overflow: hidden;
        }
        .adv{
            width: 100px;
            height: 100px;
            /* 水平居中 */
            margin: 50px auto;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="adv">ss </div>
    </div>
</body>
</html>

14、浮动

在这里插入图片描述

<!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>
        #app{
            width: 800px;
            height: 300px;
            background-color: aquamarine;
        }
        .adv{
            width: 100px;
            height: 100px;
            background-color: blue;
            margin: 10px;
            /* float: left; */
            float: right;
            /* 左浮动时，与父容器的外边距只能设置外边距，有浮动时，只能设置与父容器的右边距 */
            margin-right: 20px;

        }
    </style>
</head>
<body>
    <div id="app">
         <div class="adv"></div>
         <div class="adv"></div>
         <div class="adv"></div>
    </div>
</body>
</html>

15、清除浮动

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        #app{
            background-color: beige;
            /*  具有清除浮动的功能，此overflow：hidden可以消除好多影响*/
            /* overflow: hidden; */
        }
        .adv{
            width: 100px;
            height: 100px;
            background-color: blue;
            float: left;
        }
    </style>
</head>
<body>
    <div id="app">
        aquamarine
        <div class="adv"></div>
        <div class="adv"></div>
        <div class="adv"></div>
        <!-- 清除浮动带来对的影响 -->
        <div style="clear:both"></div>
    </div>
</body>
</html>

16、相对定位

在这里插入图片描述

<!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>
        *{
            margin: 0;padding: 0;
        }
        #app{
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 100px;
            /* 相对定位：默认距离原来位置进行定位 */
            /*
             static 自动定位
             relative 相对定位
             absolute 绝对定位
             fixed 固定定位 
            */
            position: relative;
            /* 写了定位属性才可以写偏移量 */
            top: 50px;
            left: 50px;
        }
    </style>
</head>
<body>
    <div id="app"></div>
</body>
</html>

17、子绝父相

<!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>
        *{
            margin: 0;padding: 0;
        }
        #app{
            width: 800px;
            height: 300px;
            background: red;
            /* 相对定位 */
            position: relative;
            margin-left: 100px;
        }
        #app .adv{
            /* 相对于父容器有定位属性的容器进行定位 */
            position: absolute;
            top: 20px;
            left:20px;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="adv"></div>
    </div>
</body>
</html>

18、固定定位

<!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>
        .adv{
            width: 100px;
            height: 100px;
            background-color:red;
            /* 固定定位，相对浏览器窗口定位 */
            position: fixed;
            bottom: 10px;
            right: 20px;
        }
    </style>
</head>
<body>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div class="adv">广告</div>
</body>
</body>
</html>

19、垂直居中

<!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>
      *{
        margin: 0;padding: 0;
      }  
      #app{
        width: 800px;
        height: 400px;
        background-color: blue;
        position: relative;
      }
      .adv{
        width: 100px;
        height: 100px;
        /* 水平居中 */
        margin: 0 auto;
        background-color: red;
        position: absolute;
        top: 50%;
        left: 50%;
        /* 第一种 */
        /* transform: translate(-50px,-50px); */
        /* 第二种 */
        margin-top: -50px;
        margin-left: -50px;
      }
    </style>
</head>
<body>
    <div id="app">
        <div class="adv"></div>
    </div>
</body>
</html>

20、布局案例

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .fl{
            float: left;
        }
        .fr{
            float: right;
        }
        /* 顶栏设计 */
        #site-topbar{
            background-color: pink;
            height: 100px;
            
        }
        #site-header{
            height: 400px;
            background-color: #fff;
        }
        .container{
            height: 400px;
            margin: 20px auto;
            background-color: pink;
            /* 消除浮动 */
            overflow: hidden;
        }
        .left{
            width: 50px;
            height: 100%;
            background-color: blue;
        }
        .right{
            width: 50px;
            height: 100%;
            background-color: blue;
        }
        #site-footer{
            height: 50px;
            background-color: pink;
            margin-top: 50px;
        }
        .left01{
            width: 50px;
            height: 100%;
            background-color:green;
        }

    </style>
</head>
<body>
     <div id="site-topbar"> </div>
     <div id="site-header"> 
        <div class="container">
            <div class="left fl"></div>
            <div class="right fr"></div>
            <div class="left01 fl"></div>
            <div class="left01 fr"></div>
        </div>
     </div>
     </div>
     <div id="site-footer"></div>
</body>
</html>

运行结果
在这里插入图片描述

香香不学习

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS基本案例

style 的使用方法2、基本选择器统配选择器、标签选择器、类选择器、id选择器（id名唯一）{ } 、标签名{ } 、 .类名{ } 、 #id名{ }类选择器之前用点，id选择器之前用*#**号3、复合选择器并集选择器、包含选择器（后代选择器）、属性选择器、伪类选择器运行截图常见的块元素有:行内元素行内块元素综合实例5、块、行内、行内元素转换6、字体属性font基本语法格式7、文本属性（外观属性）8、背景属性9、背景精灵
复制链接

扫一扫