css样式

最新推荐文章于 2023-08-05 00:00:00 发布
一天睡25小时
最新推荐文章于 2023-08-05 00:00:00 发布
阅读量55
点赞数
文章标签： css 前端 css3
本文链接：https://blog.csdn.net/qq_63448336/article/details/131728956
版权
该文详细介绍了CSS中的文本样式，如字体大小、颜色、对齐、行高、缩进及文本修饰，同时也涵盖了盒模型的知识，包括元素的宽度、高度、内边距、外边距以及边框，以及背景颜色和图片的设置。文章通过实例展示了如何使用这些属性来控制HTML文档的布局和视觉呈现。
摘要由CSDN通过智能技术生成
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css样式</title>
    <style>
        /* font-size  改变字体大小 */
        /* color      改变字体颜色 */
        .a{
            width: 900px;
            font-size: 30px;
            color: pink;
            /* text-align  对齐方式 
                1. center  居中
                2. left    左对齐 默认样式
                3. right   右对齐
                4.  justify  两端对齐  
                    如果让最后一行也实现两端对齐需要加一行代码 text-align-last: justify;

                用于：实现水平居中
            */
            text-align: justify;
            text-align-last: justify;
            /* line-height:  行高

                用于：实现垂直居中  （行高 = 盒子高）

            */
            /* line-height: 100px; */
            
            /* text-indent  首行缩进 
            缩进2个字符时，值等于字体大小*2
            */
            text-indent: 60px;

            /* list-style  li默认样式
                none  去掉li的默认样式
            */
        }
        .p{
            /* height: 100px; */
            /* line-height: 100px; */
            /* font-size: 50px; */
            background-color: yellowgreen;

            
            
        }
        /* text-decoration: none;
            用于清除a标签的默认下划线

            显示：a:hover{
                    text-decoration: underline;
                }
        */
        a{
            text-decoration: none;
        }
        a:hover{
            /* 定义文本下的一条线 */
            /* text-decoration: underline; */
            /* 定义文本上的一条线 */
            /* text-decoration: overline; */
            line-height: 80px;
            /* 定义穿过文本的一条线（删除线 -- s 或 del 标签同样效果） */
            text-decoration: line-through;

        }
        .English{
            /* 定义每个单词以大写字母开头 */
            /* text-transform: capitalize; */
            /* 全部字母都大写 */
            /* text-transform: uppercase; */
            /* 全部字母都小写 */
            /* text-transform: lowercase; */
        }

    </style>
</head>
<body>
    <div class="a">
        <p class="p">
        双方通过深入坦诚沟通，达成一些共识，最重要的一条就是重回巴厘岛议程，朝着校准中美关系这艘巨轮的航向迈出重要一步。下步的关键就是拿出实际行动，争取两国关系重回正确轨道。美方需要反思导致中美关系陷入严重困难的症结所在，需要把两国元首巴厘岛会晤共识真正转化为具体行动，更需要把拜登总统多次作出的一系列承诺切实落到实处。

            <br>
        </p>
        <p>王毅表示，双方要从具体事情做起，坚决阻止“灰犀牛”，妥善处理“黑天鹅”，彻底搬掉“拦路虎”，为中美关系的稳定积累条件、排除干扰。美方应采取理性务实态度，同中方相向而行，推进中美关系指导原则磋商，拓展外交安全沟通渠道，提升沟通实效，畅通人文交往。</p>

        <p class="English">
            　　On the first morning of the Spring Festival, I put on my new clothes when I got up. My father had already cooked breakfast for me. After I finished breakfast, I turned on the TV to watch and eat. Time passed quickly. In the afternoon, dad bought 15 fireworks outside and bought a lot of firecrackers and a number of different kinds of cannons. Dad was able to put it at night.
        </p>

        <a href="https://www.baidu.com">百度</a>
        
    </div>
    
</body>
</html>




盒子


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒模型</title>
    <style>
        ul{
            /* list-style: none; */
            /* background-color: brown; */
        }
        li{
            width: 400px;
            height: 100px;
            background-color: pink;
        }
        .li1{
            /* 内边距 */
            /* padding: 10px; */
            /* padding-top: 20px;
            padding-bottom: 40px;
            padding-left: 50px;
            padding-right: 30px; */
            /* 简写 */
            /* 第一个值是 上下 第二个值是 左右 */
            /* padding: 10px 20px; */
            /* 上  左右 下 */
            /* padding: 10px 20px 30px; */
            /* 上 右 下 左 */
            padding: 10px 20px 30px 40px;
        }
        .li2{
            /* 外间距 */
            /* margin: 10px; */

            margin-top: 10px;
            margin-bottom: 20px;
            margin-left: 30px;
            margin-right: 40px;
            /* 简写 */
            /* 上下左右 */
            /* margin: 10px; */
            /* 上下 左右 */
            /* margin: 10px 20px; */
            /* 上 左右 下 */
            /* margin: 10px 20px 30px; */
            /* 上 右 下 左 */
            margin: 10px 20px 30px 40px;

            /* margin 塌陷问题 
                同级之间上下margin 取大值
                嵌套盒子，子盒子加margin-top不生效，需要给父盒子加padding或border
            */
        }
        .li3{
            /* width: 0;
            height: 0; */
            /* 宽度 样式 颜色 */

            /* 样式：
            solid 实线
            dashed  虚线
            
            */
            /* 颜色
            transparent： 透明色
            */
            /* 设置四边边框 */
            border: 10px dashed red;

            /* 单独设置下边框 */
            border-bottom: 10px solid red;
            /* 单独设置下边框颜色 */
            border-bottom-color: aqua;
            background-color: aqua;
            margin-bottom: 40px;
        }
        .li4{
            margin-top: 60px;
            /* 设置圆角 */
            width: 200px;
            height: 400px;
            /* 
                px固定值 设置小圆角
                50%      设置圆形
            */
            /* border-radius: 50%; */
            /* padding-top: 50px; */
            border: 1px solid #efefef;
        }
        .div1{
            width: 50px;
            height: 50px;
            background-color: green;
            margin-top: 50px;
        }
        
    </style>
</head>
<body>
    <ul>
        <li class="li1"></li>
        <li class="li2"></li>
        <li class="li3"></li>
        <li class="li4">
            <div class="div1">

            </div>
        </li>
    </ul>
</body>
</html>



背景颜色


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景</title>
    <style>
        .bgBox{
            /* width: 800px;
            height: 600px; */
            /* 定义背景颜色 */
            /* background-color: aquamarine; */
            /* 定义背景图片 */
            /* background-image: url(./img/a.jpg); */
            /* 定义背景图片平铺方式 */
            /* background-repeat: no-repeat; */
            /* 定义背景图片大小  css3新增属性 */
            /* background-size: 100% 100%; */

            background: pink url('./img/a.jpg') no-repeat;
            background-size: 100% 100%;
        }

        /* 
        行内元素  span a 
        行内块元素  img 表单元素（input、select、textarea）
        块级元素  div p h1-h6 ul li hr br 
        */
        /* .bgBox:hover .smallBox2{
            display: block;
        } */
        .smallBox{
            width: 300px;
            height: 200px;
            background-color: pink;
            /* display: 
                inline-block: 设置为行内块元素，宽高生效，不独占一行
                block: 设置为块级元素 ，宽高生效，独占一行
                inline： 设置为行内元素，宽高不生效
                
                none：隐藏
            */
            /* display: inline; */
        }
        .smallBox2{
            background-color: green;
            
        }
        .smallBox2:hover+.smallBox3{
            display: none;
        }
        .smallBox3{
            background-color: aquamarine;
            /* display: none; */
            /* visibility: hidden; */
        }
        .spanbox{
            width: 100px;
            height: 100px;
            background-color: yellow;
            display: block;
        }

    </style>
</head>
<body>
    <div class="bgBox">
        <div class="smallBox smallBox1"></div>
        <div class="smallBox smallBox2"></div>
        <div class="smallBox smallBox3"></div>
        <div class="smallBox"></div>
        <span class="spanbox"></span>
        <span class="spanbox"></span>
        <span class="spanbox"></span>
    </div>
</body>
</html>