CSS常用汇总

小张同学该努力了

已于 2022-09-19 14:24:17 修改

阅读量2.7k

点赞数 6

分类专栏： web开发文章标签：前端 css

于 2022-05-04 21:59:55 首次发布

本文链接：https://blog.csdn.net/qq_43716830/article/details/124532485

版权

web开发专栏收录该内容

10 篇文章 1 订阅

订阅专栏

标签选择器

    <style>
        /*标签选择器：写上标签名*/
        p {
            color: red;
            /*将p标签内容改成红色*/
            font-size: 25px;
        }
    </style>

类选择器

语法
.类名{
属性1：属性值1；
…
}
一个类可以有多个类名，类名之间要用空格隔开

 <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>
            .red {
                color: red;
            }
            .font{
                font-size: 20px;
            }
        </style>
    </head>
    
    <body>
            <br>
            <h4>我承诺</h4>
            <ul>
                <li class="red font">年满18岁,单身</li>
                <li>抱着严肃的态度</li>
                <li>真诚的寻找另一半</li>
            </ul>
        </form>
    </body>

id选择器

   <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>
            #pink{  /*#号声明id*/
                color: pink;
            }
        </style>
    </head>
    
    <body>
        <div id="pink">zyj</div>
    </body>

通配符选择器

语法：
*{
属性1：属性值
…
}
所有的标签都被选中

字体相关属性

在这里插入图片描述

先选用第一个字体，没有的话再去选择第二个……

在这里插入图片描述

            #font{
                font-family: 'Microsoft YaHei',Arial, Helvetica, sans-serif;
                font-size: 20px;
                font-weight: 700;/*700不用加单位*/
                font-style: italic; /*italic是斜体 ，normal是正常*/
                /*复合属性：简写方式*/
                /* font:font-style font-weight font-size/line-height font-family */
                font: italic 700 16px 'Microsoft yahei';
            }

文本对齐

对齐文本：text-align
在这里插入图片描述

文本装饰

在这里插入图片描述
去掉超链接的下划线

            a{
                text-decoration: none;
            }

文本缩进

在这里插入图片描述
line-height属性用于设置行间的距离（行高）。可以控制文字与行之间的距离。

p{
 line-height:26px;
}

内部样式表

在这里插入图片描述

外部样式表

css文件中只管写样式，不用加style

        <link rel="stylesheet" href="style.css"> /*直接把style.css引入*/

Emmet语法

在这里插入图片描述

后代选择器

在这里插入图片描述

 <style>
       ol li{
           color: pink;
       }/*只选中包含在ol里的li标签的内容*/
    </style>

<body>
    <div id="font">我是zyj</div>
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

子选择器

在这里插入图片描述

       .nav>a{
           color:red
       }/*选择class为nav下的a标签*/

并集选择器

在这里插入图片描述

伪类选择器

链伪类选择器
在这里插入图片描述

块元素

常见的块元素有

~

、
、

、
、
、
等

把块元素转化为行元素加display:inline;

行内元素

在这里插入图片描述
为了控制行元素的宽度和高度，需要加：display:block;把行元素转化为块元素

行内块元素

在这里插入图片描述

元素类型的转换

在这里插入图片描述

snipaste

在这里插入图片描述
练习：简易小米侧边栏

<!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{
            display: block;
            width: 230px;
            height: 40px;
            background-color: gray;
            font-size: 14px;
            color: white;
            text-decoration: none;
            text-indent: 2em;
            line-height: 40px;/*文字行高等于盒子行高，就能垂直居中*/
        }
        button{
            color: white;
        }
        a:hover{
            background-color:#ff6700 ;
        }
    </style>
</head>

<body>
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>
</body>

</html>

背景图片

background-image：url(图片的路径);

background-repeat: 设置图片的展示格式
1.repeat 平铺
2.no-repeat 不平铺
3.repeat-x 沿x方向平铺
4.repeat-y 沿y方向平铺

background-position属性改变图片在背景中的位置
background:x y;
在这里插入图片描述
background-attachment属性设置背景图片是否固定或者随着页面的其余部分滚动
默认值是scroll，修改f为ixed可以使图像固定

在这里插入图片描述

背景色半透明
background：rgba（r，g，b，透明度）; 透明度取值在0~1之间

CSS三大特性

层叠性
在这里插入图片描述
继承性

优先级

复合选择器权重会叠加

盒子模型

在这里插入图片描述

        div{
            width: 300px;
            height: 200px;

            /*border-width 边框的粗细 一般情况下都用px*/
            border-width: 5px;
            /*border-style 边框的样式 solid实线边框 dashed是虚线边框 dotted是点线边框*/
            border-style: solid;

            border-color: pink;
            
            /*上边框、下边框、左边框、右边框的情况*/
            border-top: 10px dashed purple;
            border-bottom: 10px solid red;
            border-left: 10px,solid yellow;
            border-right: 10px solid blue;

            /*合并相邻的边框*/
            border-collapse: collapse;

            /*上右下左的内边距*/
            padding: 5px,5px,5px,5px;
            /*margin属性用于设置外边框，即控制盒子和盒子之间的距离，用法与padding一致，复合属性为margin*/
        }

在这里插入图片描述

在这里插入图片描述
list-style:none;去掉li前面的小圆点

圆角边框

border-radius: xxpx;

四组值：border-radius:1px 1px 13px 2px;
三组值border-radius:10px 5px 1px ;
二组值border-radius:10px 1px ;
一组值border-radius:10px ;

盒子阴影

在这里插入图片描述

文字阴影

在这里插入图片描述

浮动

在这里插入图片描述

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘

 <style>
       .left{
           float:left;/*浮动到左边*/
           width: 200px;
           height: 200px;
           background-color: pink;
       }
       .right{
           float: right;/*浮动到右边*/
           width: 200px;
           height: 200px;
           background-color: red;
       }
    </style>

在这里插入图片描述

PS切图

在这里插入图片描述

定位

在这里插入图片描述

在这里插入图片描述

轮播图的左侧按钮的样式实现

        .prev{
            position: absolute;
            /*如果有left，也有right，执行left，原则上先上后下，先左后右*/
            left: 0;
            top: 50%;
            margin-top: -15px;
            /*加了绝对定位的盒子可以直接设置高度和宽度*/
            width: 20px;
            height: 30px;
            background-color: rgba(0,0,0,.3);
            color: white;
            text-align: center;
            line-height: 30px;
            text-decoration: none;
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
        }

在这里插入图片描述

元素的显示与隐藏

在这里插入图片描述

精灵图

在这里插入图片描述

字体图标

在这里插入图片描述

CSS三角

三角做法
在这里插入图片描述

.box2{
            width: 0;
            height: 0;
            border: 100px solid transparent;
            border-top-color: black;
            margin-top: 100px;
        }

鼠标样式

在这里插入图片描述

用户界面样式

在这里插入图片描述

在这里插入图片描述

white-space:nowrap;如果一行显示不开，也强制要一行内显示

在这里插入图片描述

小张同学该努力了

关注

6
点赞
踩
46

收藏

觉得还不错? 一键收藏
1
评论
CSS常用汇总

标签选择器 <style> /*标签选择器：写上标签名*/ p { color: red; /*将p标签内容改成红色*/ font-size: 25px; } </style>类选择器语法.类名{属性1：属性值1；…}一个类可以有多个类名，类名之间要用空格隔开 <head> <meta charse
复制链接

扫一扫