CSS标签

伪类选择器

<style>
        /*未访问时候显示的*/
        a:link {
            color: #FF0000;
        }

        /* 鼠标移动到链接上 */
        a:hover {
          color: #FF00FF
        }

        /* 选定的链接 */
        a:active {
          color: #0000FF
        }

        /* 已访问的链接 */
        a:visited {
          color: #00FF00
        }

        input:focus {
            outline: none;
            background-color: #eee;
        }
    	 a {
             /*主要用于给a标签去掉自带的下划线  需要掌握*/
            text-decoration: none;  
        }
    </style>

伪元素选择器

<style>
	p:first-letter {
            font-size: 48px;
            color: orange;
        }
    p:before {  /*在文本开头 同css添加内容*/
                content: '你说的对';
                color: blue;
            }
    p:after {
                content: '雨露均沾';
                color: orange;
            }
    ps:before和after通常都是用来清除浮动带来的影响:父标签塌陷的问题

</style>

选择器的优先级

<!--
	id选择器、类选择器、标签选择器、行内式
-->
<style>
    /*
    1、选择器相同，书写顺序不相同：
    	就近原则：谁离标签近就听谁的
    2、选择器不同：
    	行内>id选择器>类选择器>标签选择器
    	精确度越高越有效
    */
	.c1{
            color: blue;
        }
        #d1{
            color: red;
        }
        p{
            color: blueviolet;
        }
</style>
<body>
<p id="d1" class="c1" style="color: chartreuse">关关雎鸠在河之洲，</p>
<!--<p>窈窕淑女君子好逑.</p>-->
</body>

CSS相关属性

<style>
    p{
        /*background-color:背景颜色*/
        background-color: red;
        height: 200px;
        width: 400px;
    }
    span{
        background-color: chartreuse;
        height: 200px;
        width: 100px;
    }
    /*行内标签无法设置长宽 就算你写了 也不会生效*/
</style>

字体属性

p{
            /*第一个生效了用第一个，第一个不生效用后面的*/
            font-family: "Adobe 宋体 Std L","微软雅黑 Light",serif;
            /*字体大小*/
            font-size: 20px;
            /*inherit继承父元素的粗细值*!*/
            font-weight: inherit;
    		/*!*直接写颜色英文*!*/
            color: red;
            /*!*颜色编号*!*/
            color: #ee762e;  
            /*!*三基色 数字  范围0-255*!*/
            color: rgb(128,23,45);   
            /*!*第四个参数是颜色的透明度 范围是0-1*!*/
            color: rgba(23, 128, 91, 0.9); 
            /*字体透明度*/
            opacity:0.1
        }

font-weight用来设置字体的字重（粗细）。
	值					描述
    normal				默认值，标准粗细
    bold				粗体
    bolder				更粗
    lighter				更细
    100~900				设置具体粗细，400等同于normal，而700等同于bold
    inherit				继承父元素字体的粗细值

文字属性

<style>
    p{
        /*居中*/
        text-align: center;
        /*左对齐*/
        text-align: left;
        /*右对齐*/
        text-align: right;
        /*两端对齐*/
        text-align: justify;
        /*给文字加入下划线*/
        text-decoration: underline;
        /*给文字加入上划线*/
        text-decoration: overline;
        /*给文字加入删除线*/
        text-decoration: line-through;
        /*没有任何装饰*/
        text-decoration: none;
        /*缩进X个px*/
        text-indent: 32px;
        }
    /*在html中 有很多标签渲染出来的样式效果是一样的*/
</style>

背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            height: 200px;
            background-color: red;
            
        }
        #d2{
            height: 200px;
            background-color: chartreuse;
        }
        #d3{
            height: 200px;
            background-color: blueviolet;
        }
        #d4{
            height: 100px;
            background-color: red;
            /*固定图片*/
            background-attachment: fixed;
            background-image: url("preview.jpg");
        }
        #d5{
            height: 200px;
            background-color: brown;
        }
        #d6{
            height: 200px;
            background-color: aqua;
        }
        #d7{
            height: 200px;
            background-color: darksalmon;
        }
    </style>
</head>
<body>
<div id="d1">关关雎鸠，在河之洲</div>
<div id="d2">窈窕淑女，君子好逑</div>
<div id="d3">参差荇菜，左右流之</div>
<div id="d4">窈窕淑女，寤寐求之</div>
<div id="d5">求之不得，寤寐思服</div>
<div id="d6">优哉游哉，辗转反侧</div>
<div id="d7">参差荇菜，左右流之</div>
</body>
</html>

边框

边框属性 
● border-width
● border-style
● border-color

<style>
    p{
        border-width: 5px;
        border-style: dashed;
        border-color: darksalmon;
        border-left-width: 10px;
        border-left-style: solid;
        border-left-color: blueviolet;

        border-top-width: 5px;
        border-top-style: dashed;
        border-top-color: green;

        border-right-width: 5px;
        border-right-style: dashed;
        border-right-color: orange;

        border-bottom-width: 5px;
        border-bottom-style: dashed;
        border-bottom-color: brown;

        width: 400px;
        height: 400px;
        border: 5px solid red;
        background: red;
        border-radius: 25%;
        border-top-left-radius: 100px;
        border-top-right-radius: 100px;
        border-bottom-left-radius: 100px;
        border-bottom-right-radius: 100px;
    }
</style>

display属性(重要)

<style>
    #d1{
        height: 200px;
        background-color: red;
        text-align: center;
        /*隐形隐藏*/
        display: none;
        /*将块儿级元素变为行内元素*/
        display: inline-block;
        /*可见隐藏*/
        visibility: hidden;
    }
    #d2{
        height: 200px;
        background-color: chartreuse;
        text-align: center;
        display: inline-block;

    }
</style>

<body>
    <div id="d1">关关雎鸠，在河之洲</div>
    <div id="d2">窈窕淑女，君子好逑</div>
</body>

CSS盒子模型

"""
盒子模型
	就以快递盒为例
		快递盒与快递盒之间的距离(标签与标签之间的距离 margin外边距)
		盒子的厚度(标签的边框 border)
		盒子里面的物体到盒子的距离(内容到边框的距离  padding内边距)
		物体的大小(内容 content)
	
	
	如果你想要调整标签与标签之间的距离 你就可以调整margin
	
	浏览器会自带8px的margin，一般情况下我们在写页面的时候，上来就会先将body的margin去除
	
"""
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            margin: 0;  /*上下左右全是0
            /*margin: 10px 20px;  !* 第一个上下 第二个左右*!*/
            /*margin: 10px 20px 30px;  !*第一个上  第二个左右  第三个下*!*/
            /*margin: 10px 20px 30px 40px;  !*上 右 下 左*!*/
        }
        /*p {*/
        /*    margin-left: 0;*/
        /*    margin-top: 0;*/
        /*    margin-right: 0;*/
        /*    margin-bottom: 0;*/
        /*}*/

        #d1 {
            margin-bottom: 50px;
        }


        #d2 {
            margin-top: 20px;  /*不叠加 只取大的*/
        }

        #dd {
            margin: 0 auto;  /*只能做到标签的水平居中*/
        }
        p {
            border: 3px solid red;
            /*padding-left: 10px;*/
            /*padding-top: 20px;*/
            /*padding-right: 20px;*/
            /*padding-bottom: 50px;*/

            /*padding: 10px;*/
            /*padding: 10px 20px;*/
            /*padding: 10px 20px 30px;*/
            /*padding: 10px 20px 30px 40px;*/  /*规律和margin一模一样*/
        }
    </style>
</head>
<body>
<!--    <p style="border: 1px solid red;" id="d1">ppp</p>-->
<!--    <p style="border: 1px solid orange;" id="d2">ppp</p>-->
<!--<div style="border: 3px solid red;height: 400px;width: 400px">-->
<!--    <div id='dd' style="border: 1px solid orange;height: 50px;width: 50px;background-color: blue;"></div>-->
<!--</div>-->

<p>ppp</p>

</body>
</html>

浮动

"""浮动的元素 没有块儿级一说 本身多大浮起来之后就只能占多大"""
只要是设计到页面的布局一般都是用浮动来提前规划好
<style>
    body {
        margin: 0;
    }
    #d1 {
        height: 200px;
        width: 200px;
        background-color: red;
        float: left;  /*浮动  浮到空中往左飘*/
    }
    #d2 {
        height: 200px;
        width: 200px;
        background-color: greenyellow;
        float: right;   /*浮动 浮到空中往右飘*/
    }
</style>

浮动带来的问题以及解决办法

# 父标签塌陷问题，如何解决的
谁塌陷就给谁加一下代码
 .clearfix:after {
            content: "";
            display: block;
            clear: both;
        }
posted on   Way*yy  阅读(3)  评论(0)  编辑  收藏  举报
相关博文：
· html标签
· JavaScript
· CSS文字 字体和其他设置属性 浮动
· CSS层叠样式表
· 前端——CSS
阅读排行：
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY



点击右上角即可分享
微信分享提示