CSS常用语法总结【精华篇】

最新推荐文章于 2024-06-13 08:55:17 发布

Zincy星辰

最新推荐文章于 2024-06-13 08:55:17 发布

阅读量3.1k

点赞数 7

分类专栏：前端技术指北文章标签： CSS css3 css html 前端

本文链接：https://blog.csdn.net/qq_52057693/article/details/124133892

版权

前端技术指北专栏收录该内容

16 篇文章 1 订阅

订阅专栏

CSS常用语法总结

引用方式

注释方法：/* …… */

CSS中不区分大小写，变量命名使用 - 来分割

内部样式

通过 style 标签，把CSS代码嵌入到HTML内部，使用选择器{ }

    <style>
        p {
            color: rgb(156, 163, 53);
            font-size: 30px;
        }
    </style>
    <p>这是一个段落</p>

行内样式/内联样式 inline

直接把样式以 style 属性的方式，写到元素内部

<p style="color:green;">

外部样式

把CSS单独放到一个文件里 xxx.css，在HTML中使用 link 标签，把 css 文件引入进来

<head>
	<link rel="stylesheet" href="xxx.css">
</head>

清除浏览器默认设置

* {
    marign: 0;
    padding: 0;
    box-sizing: border-box;
}

选择器

1. 基础选择器

优先级问题：针对性越强的选择器优先级越高。

1.1 标签选择器

把一类标签全部选择

    <style>
        p {
            color: rgb(156, 163, 53);
            font-size: 30px;
        }
    </style>
    <p>这是一个段落</p>

1.2 类选择器（.）

既可以选中一类元素，也可以进行差异化设置

    <style>
        /* 前面加上点，表示是一个类选择器 */
        .red {
            color: red;
        }
        .size {
            font-size: 30px;
        }
    </style>

    <!-- 在标签上通过 class 属性来引入类名 -->
    <p class="red size">这是一个段落</p>

1.3 id选择器（#）

和 html 的 id 属性是相关联的

    <style>
        /* 前面加上 # ，表示是一个id选择器 */
        #one {
            color: red;
        }
    </style>

    <!-- 在标签上通过 id 属性来引入 -->
    <div id="one">这是一个div</div>

1.4 通配符选择器（*）

* 直接把所有内容都选中，不需要被 html 调用

一般用来清除浏览器默认样式

* {
}

2. 复合选择器

2.1 后代选择器

选择一个元素里面的子元素或孙子元素

元素1 元素2 {样式声明}

    <style>
        ol.one li {
            color: red;
        }
    </style>

    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul>
    <ol class="one">
        <li>ddd</li>
        <li>eee</li>
        <li>fff</li>
    </ol>

2.2 子选择器

只选择子标签，不选择孙子标签

元素1>元素2 {样式声明}

2.3 并集选择器

同时针对多个元素，设置相同的样式

元素1, 元素2 {样式声明}

2.4 伪类选择器

选中元素的各种状态

:hover 悬停
:active 按下
:link 未访问
:visited 已访问

    <style>
        /* 访问之前的情况 */
        a:link {
            color: black;
        }

        /* 访问过的情况 */
        a:visited {
            color: green;
        }

        /* 鼠标悬停 */
        a:hover {
            color: red;
        }

        /* 鼠标按下，尚未放开的情况 */
        a:active {
            color: gray;
        }
    </style>
    
    <a href="#">这是一个链接</a>

常用属性

文字

类型 font-family: 'xxx';

        .one {
            font-family: '微软雅黑';
        }

大小 font-size

px像素大小、small、medium、large、x-large…

粗细 font-weight

数字100-900、normal、bold、bolder、lighter…

样式 font-style

        .one {
            font-style: normal;		/* normal正常 */
            font-style: italic;		/* italic倾斜 */
        }

颜色 color

英文：red、green …
rgb：rgb(255, 0, 0) …
十六进制：#ff0000 …

对齐 text-align

    .one {
        text-align: center;		/* center居中对齐 */
        text-align: left;		/* left左对齐 */
        text-align: right;		/* right右对齐 */
    }

装饰 text-decoration

    .one {
        text-decoration: none;			/* 无装饰 */
        text-decoration: overline;		/* 上划线 */
        text-decoration: underline;		/* 下划线 */
        text-decoration: line-through;	/* 删除线 */
    }

缩进 text-indent

单位使用em或px

em是一种相对单位，1em表示当前字体大小

行高 line-height

行高 = 文字自身高度 + 行间距

背景

背景颜色 background-color

    body {
        background-color: #fea;
   }

背景图片 background-image

    .one {
        background-image: url(xxx.jpg);
        height: 300px;
   }

背景平铺 background-repeat

.one {
    background-repeat: repeat;		/* 平铺 */
    background-repeat: no-repeat;	/* 不平铺 */
    background-repeat: repeat-x;	/* 水平平铺 */
    background-repeat: repeat-y;	/* 垂直平铺 */
}

背景位置 background-position

center、top、left、right、bottom

.one {
    background-position: center center;	/* 居中 */
    background-position: 100px 200px;	/* 左手坐标系距离 */
    background-position: 50% 50%;		/* 百分比 */
}

背景大小 background-size

.one {
    background-size: 500px 200px;	/* px大小 */
    background-size: contain;	/* 填充 */
    background-size: cover;	/* 扩展超出 */
}

圆角矩形

border-radius 内切圆半径

div {
    width: 200px;
    height: 100px;
    border: 2px solid green;
    border-radius: 10px;
}

也可以分别设置

border-radius: 10px 20px 30px 40px;		/* 顺时针设置 */
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

※盒模型📦

display: none 隐藏元素

display: block 块级元素默认div

display: inline 行内元素

display: inline-block行内块元素img

margin 外边距
border 盒子的边距
padding 内边距
content 内容

⚠注意 使用box-sizing: border-box 设置使 size 包含边框

* {
    box-sizing: border-box;
}

`border` 边框设置

    <style>
        div {
            width: 200px;
            height: 100px;
            border: 2px solid green;    /* 宽度 线条样式 颜色 */
            /* border-left/top/right/bottom */
            border-radius: 10px;
            }
    </style>
    <div>test</div>

线条样式：none、solid、dotted、dashed…

`padding` 内边距设置

div {
    height: 200px;
    width: 300px;
    padding: 5px 5px 5px 5px;	/* 顺时针设置，上右下左 */
    padding-top: 5px;
    padding-left: 10px; 
}

`margin` 外边距设置

        .two {
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 0 auto;
        }

弹性布局 `flex`

`display: flex;`

为父类元素设置这个属性，此时里面的父元素里面的元素都要遵守 弹性布局 规则。

    <style>
        div {
            width: 100%;
            height: 150px;
            background-color: red;
            display: flex;		/* 为父元素设置 flex */
        }
        div>span {
            width: 100px;
            height: 20px;
            background-color: green;
        }
    </style>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>

`justify-content`主轴排列方式

水平方向上的排列方式

        div {
            width: 100%;
            height: 150px;
            background-color: red;
            display: flex;
            justify-content: space-around;
        }

center、end、space-around、space-between

`align-items` 侧轴排列方式

竖直方向上排列方式

        div {
            width: 100%;
            height: 150px;
            background-color: red;
            display: flex;
            justify-content: space-around;
            align-items:center;
        }

center、end、space-around、space-between

圣杯🏆布局

<!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>
</head>

<body>
    <style>
        .header, .footer {
            width: 100%;
            height: 100px;
            background-color: green;
        }
        .body {
            width: 100%;
            height: 800px;
            background-color: blue;
            display: flex;
            justify-content: space-between;
        }
        .body .left {
            width: 200px;
            background-color: red;
        }
        .body .right {
            width: 300px;
            background-color: yellow;
        }
        .body .middle {
            width: calc(100% - 500px);
            background-color: gray;
        }
    </style>
    <div class="header">
        上方区域
    </div>
    <div class="body">
        <div class="left">左侧导航</div>
        <div class="middle">中间区域</div>
        <div class="right">右侧导航</div>
    </div>
    <div class="footer">
        下方区域
    </div>
</body>
</html>

Zincy星辰

关注

7
点赞
踩
46

收藏

觉得还不错? 一键收藏
1
评论
CSS常用语法总结【精华篇】

CSS常用语法总结引用方式注释方法：/* …… */CSS中不区分大小写，变量命名使用 - 来分割内部样式通过 style 标签，把CSS代码嵌入到HTML内部，使用选择器{ } <style> p { color: rgb(156, 163, 53); font-size: 30px; } </style> <p>这是一个段落</p&g
复制链接

扫一扫