css基础笔记

最新推荐文章于 2024-07-16 17:18:30 发布

Z417031

最新推荐文章于 2024-07-16 17:18:30 发布

阅读量76

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/Z417031/article/details/127084536

版权

CSS:(Cascading style sheet) 层叠样式表

css基于html之上。

行内样式：

 <!-- 行内样式 -->
<h1 style="color: brown;">雨巷</h1>

内部样式：

写在head里或者head与body之间

基本选择器

优先级：id > 类 > 标签

<!-- 内部样式：最好写在head里或者head与body之间 -->
<style> 
    /* 标签选择器 */
    h1{
        color: crimson;
    }
    p{
        color: cyan;
    }
    div{
        color: darkblue;
    }
    /* 类选择器 可重复*/
    .one{
        color: darkgoldenrod;
    }
    .two{
        color: darkorange;
    }
    /* id选择器 （不可重复） */
    #one{
        color: deeppink;
    }
</style>

外部文件：

在这里插入图片描述

引入优先级：行内 > 内部 > 外部

字体：

/* 字体：font-family: "隶书";*/
/* 
字体粗细：font-weight: 600;
    1.100-900
    2.bolder  bold(加粗)
    3.lighter（细）
*/
/* 字体大小：font-size: 50px;*/
/* 字体风格：font-style: oblique;*/
/* 文字（整体写）：font:oblique 600 40px "楷体";（风格、粗细、大小、字体） */

文本：

/* 文字对齐方式：text-align */
/* a链接去下划线：text-decoration: none; */
/* 首行缩进: text-indent: 2em;(1em = 16px) */ 
/* 行高: line-height: 20px;*/

垂直居中：

设置行高LINE-HEIGHT: ;与父级元素高度一致。

背景：

背景色：

/* 背景色：background-color: blue; （4种方式）
1.英文单词：background-color: #8A2BE2;
2.十六进制：background-color: blue;
3.rgb三原色：background-color: rgb(0, 255, 221);
4.rgba透明度：background-color: rgba(0, 255, 221,0.1);
*/

背景图：

/* 背景（整体写） background：背景色 背景图 图片大小 是否重复 */
        /*  
        background-image 添加背景图片
            格式：
            background-image: url('图片路径');
        */
        /* background-image: url('../img/gongqijun01.png'); */
        /*  
        background-repeat 图片是否重复
            no-repeat 不重复
            repeat-x 横向重复
            repeat-y 纵向重复
        */
        /* background-repeat: repeat; */
        /*  
        更改背景图片大小
            1. background-size: 宽度(px) 高度(px);
            2. background-size: 百分比;
            3. background-size: cover;
            背景图⽚扩展并覆盖填充满整个所属元素区域，但超出的部分会被隐藏
            4. background-size: contain;
            图⽚不会变形，但所属元素宽⾼⽐例与背景图⽚宽⾼⽐例不同时，会出现背景留⽩

        */
        /* background-size: 300px 200px; */
        /* background-size: 50% 50%; */
        /* background-size: contain; */

宽高：

<style>
div{
    background-color: aqua;
    width: 300px;/*  */
    height: 200px; /*  */    
}
</style>

行内元素与块级元素互换：

<style>
div{
    background-color: aqua;
    width: 300px;
    height: 200px; 
    display:inline-block ;
    /* inline-block让一个元素拥有行内元素和块级元素的特点:
        1. 可以更改宽度和高度（块级元素特点）
        2. 不换行（行内元素特点）
    */
    /*inline 强制转换为行内元素*/
    /*block强制转换为块级元素 */
    
}
/* 行内元素不能调整文字对齐方式 */
/*行内元素无法设置宽高*/
span{
    width:300px;
    height:200px;
    display:;
}
    /*  
        px 像素单位（和分辨率有关）
        em 默认字体大小16px，1em = 16px
    */
</style>

列表样式：

<style>
    li{
        /* 去掉列表的小圆点 */
        list-style: none;
    }
</style>

边框：

<style>
    div{
        background-color: aqua;
        width: 300px;
        height: 200px;
        /* 分开设置边框类型*/
        /* 上边框 */
        /* border-top-style: solid; */
        /* 下边框 */
        /* border-bottom-style: dashed; */
        /* 左边框 */
        /* border-left-style: dotted; */
        /* 右边框 */
        /* border-right-style: double; */
        /* 整体设置边框类型 ：border-style: ;*/

        /*
        solid 实线边框
        dashed 虚线边框 
        dotted 小圆点边框 
        double 双线边框
        */
        /* 分开设置边框宽度 */
        /* border-top-width: 4px; */

        /* 分开设置边框颜色 */
        /* border-top-color: greenyellow;  */
        
        /* 整体设置边框类型、宽度、颜色 */
        border: 5px solid yellow;/*(宽度、类型、颜色)*/
        /* 圆角边框*/
        border-radius: 10px;
        
    }
</style>
        <body >
            <div >
                div标签
            </div>
        </body>

高级选择器：

并集选择器：

/* 并集选择器（逗号隔开） */
/* div,.p2,#em2,span{
color: tomato;
background-color: turquoise;
} */

交集选择器：

/* 交集选择器 (不隔开)*/
/* p.p2{
color: tomato;
background-color: turquoise;    
}
em#em2{
color: tomato;
background-color: turquoise;
} */

后代选择器：

/* 后代选择器 单空格隔开 */
/* .one #3{
background-color: turquoise; 
} */

子元素选择器：

/* 子元素选择器（大于号隔开） */
/* #2>#3{
color: tomato; 
} */

属性选择器：

/* 属性选择器  标签名[属性名]{} */
input[type="text"]{
    background-color: turquoise; 
}

input[name]{
    background-color: chartreuse; 
}

伪类：给选择器添加一些状态

<style> 
	a:hover{
        background-color: gainsboro;
        color: blue;
        /* 当光标移动到a链接时把光标变成小手 */
        cursor: pointer;
    }
    a:link{
        /* 未访问的链接 */
        color: gray;
    }
    a:visited{
        /* 已访问的链接 */
        color: red;
    }
    a:active{
        /* 选中的时候 */
        color: yellow;
    }
</style>
<body>
    <a href="https://www.baidu.com">点击跳转</a>
</body>

表单传递数据：接名(name)得值(value)

盒子模型：

/* div{
background-color: aqua;
width: 300px;
height: 200px;
超出部分处理
overflow: hidden;（ hidden：隐藏;visible：显示;scroll：滚动条;）

overflow: scroll;   
} */
/*内边距：panding*/
/*外边距：margin*/

溢出内容：

/*  
overflow 溢出内容的处理方式
1. hidden 超出内容隐藏
2. visible 超出内容显示出来
3. scroll 超出内容显示滚动条
*/

边距：

内边距：padding

.div_big{
    width: 100%;
    height: 400px;
    background-color: pink;
    /* padding 设置元素内边距 */
    /* padding-top: 20px;
    padding-left: 50px; */
    /*  
    四个值：上 右 下 左
    两个值：1.上下  2.左右
    一个值：上下左右四个方向
    */
    padding: 100px;
    /* 不让盒子撑开 */
    box-sizing: border-box;
}

外边距：margin

#div_one{
    width: 70%;
    height: 300px;
    background-color: aqua;
    /* margin-bottom: 50px; */
    /*  
    外边距：
    两个值：上下  左右
    四个值：上右下左
    一个值：四个方向外边距设置一样的距离
    */
    /* margin: 20px 50px; */
    /* margin: 10px 20px 30px 40px; */
    /* margin: 50px; */
    /*  
    元素居中：auto自适应
    */
    margin:20px auto;
    /*  
    margin折叠(垂直方向):
    1.元素自身折叠：当元素不设置内外边距以及边框和内容时
    2.相邻的两个元素:取最大值
    3.父子元素：父元素和子元素一起移动(解决方法：给父类元素设置内边距)
    */
    }

动画：

    h2{
        /* 动画样式名 */
        animation-name: bounce;
        /* 动画执行时间 */
        animation-duration: 3s;
        /* 动画延迟时间 */
        animation-delay: 1s;
        /* 动画执行次数 */
        animation-iteration-count: 2;
    }

浮动：

左浮动float:left ;

右浮动float:right;

清除浮动 clear: both;

定位:

    #one{
        width: 30%;
        height: 50%;
        background-color: pink;
        /* 
        relative相对定位：基于元素自身的位置来挪动
        absolute绝对定位：基于第一个非静态定位的父类元素
        fixed固定定位：基于浏览器窗口挪动
        */
        position: relative;
        /* 偏移量：上top 下bottom 左left 右right*/
        top: 200px;
        left: 50px;
    }

元素的显示与隐藏：

display:none;隐藏

display:block;显示

css开关：

        <style>
            .switch{
                width: 300px;
                height: 100px;
                /* 去掉默认样式 */
                -webkit-appearance: none;
                background-color: red;
                border-radius: 50px;
                /* 去掉边框 */
                outline: none;
                position: relative;
                text-align: center;
                line-height: 100px;
            }
            .switch:checked{
                background-color: blue;
            }
            .switch::before{
                content: "关";
                width: 100px;
                height: 100px;
                background-color: gray;
                position: absolute;
                left: 0px;
                transition: 0.3s linear all;
                border-radius: 50%;
            }
            .switch:checked::before{
                content: "开";
                background-color: gray;
                position: absolute;
                left: 200px;
                transition: 0.3s linear all;
            }
        </style>
        <body>
            <input type="checkbox" class="switch">
        </body>