Bootstrap

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

CSS常用语法总结

引用方式

注释方法：/* …… */

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

  1. 内部样式

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

    <style>
        p {
            color: rgb(156, 163, 53);
            font-size: 30px;
        }
    </style>
    <p>这是一个段落</p>
  1. 行内样式/内联样式 inline

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

<p style="color:green;">
  1. 外部样式

把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>

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
jvm-46-jvm Thread Dump 线程的信息获取+可视分析化工具 FastThread
BUAA独立路径数计算
PWA 缓存
Mac安装 VirtualBox虚拟机
nginx架构学习
超定方程 最小二乘解 奇异值分解（SVD）
5分钟商学院-个人篇-逻辑思维
图片溢出div，超出div解决办法
Jupyter notebook插件安装及常用插件
SpringBoot创建一个初始化项目
;