CSS 基本语法 & 选择器的各种用法 & 常用属性

<head>
    <style>
        /* 内部样式 */
        div {
            /* CSS 注释 */
            color:red;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div>hello word</div>
</body>

1.2 外部样式

<head>
    <!-- 外部样式 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>hello word</div>
</body>

style.css 文件

div {
    color: green;
    font-size: 70px;
}

1.3 内联样式

<body>
    <div>hello word</div>
    <!-- 内联样式  -->
    <div style="color:blue; font-size: 60px">你好</div>
</body>

三种方式的优先级：

🍃1.内部样式和外部样式，谁写在后面，就显示谁的效果，符合层叠样式的规则。

🍃2.默认情况下：内联样式的优先级大于内部样式和外部样式。

样式空格规范：

冒号后面带空格。
选择器和 { 之间也有空格。

2.选择器

2.1 基础选择器

标签选择器
类选择器
id 选择器
通配符选择器

2.1.1 标签选择器

<head>
    <style>
        /* 标签选择器 */
        div {
            color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div>hello</div>
    <div>world</div>
    <div>nihao</div>
</body>

2.1.2 类选择器

<head>
    <style>
        /* 类选择器 */
        .one {
            color: green;
        }
        .two {
            font-size: 70px;
        }
    </style>
</head>
<body>
    <!-- 一个类选择器可以被多个标签来引用，一个标签也可以引用多个类选择器 -->
    <div class="one">hello</div>
    <div>world</div>
    <div class="one two">nihao</div>
</body>

2.1.3 id选择器

<head>
    <style>
        /* id选择器 */
        #world {
            color:rgb(225, 0, 255);
            font-size: 70px;
        }
    </style>
</head>
<body>
    <div>hello</div>
    <div id="world">world</div>
    <div>nihao</div>
</body>

2.1.4 通配符选择器

    <style>
        /* 通配符选择器 */
        * {
            color: red;
        }
    </style>

基础选择器的优先级：

id 选择器 > 类选择器 > 标签选择器

基础选择器总结

	作用	特点
标签选择器	能选出所有相同标签	不能差异化选择
类选择器	能选出一个或多个标签	根据需求选择, 最灵活, 最常用.
id 选择器	能选出一个标签	同一个 id 在一个 HTML 中只能出现一次
通配符选择器	选择所有标签	特殊情况下使用

2.2 复合选择器

2.2.1 后代选择器

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

元素 1 和元素 2 要使用空格分割
元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1

<head>
    <style>
        /* 后代选择器，每个部分，都可以是任意的基础选择器 */
        ul li {
            color: red;
        }

        .one li {
            color: green;
        }

        #two-ol {
            color: blue;
        }

        ol .two {
            color: orange;
        }

        /* 后代选择器，还可以选孙子 */
        ul a {
            color: blueviolet;
        }
    </style>
</head>
<body>
    <ol class="one">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>

    <ol id="two-ol">
        <li class="two">张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>

    <ul>
        <li><a href="#">张三</a></li>
        <li>李四</li>
        <li>王五</li>
    </ol>
</body>

🍃1.后代选择器，元素2不一定是儿子，还可以是孙子

🍃2.后代选择器可以是任意基础选择器的组合. (包括类选择器, id 选择器)

2.2.2 子选择器

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

使用大于号分割
只选儿子 , 不选孙子元素

<head>
    <style>
        /* 子选择器  对孙子不生效*/
        ol>a {
            color: green;
        }
    </style>
</head>
<body>
    <ol>
        <li><a href="#">张三</a></li>
        <li>李四</li>
        <li>王五</li>
    </ol>
</body>

2.2.3 并集选择器

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

<head>
    <style>
        /* 并集选择器 */
        ol li,ul li {
            color:red
        }
    </style>
</head>
<body>
    <ul>
        <li>张三</li>
    </ul>

    <ol>
        <li><a href="#">张三</a></li>
        <li>李四</li>
    </ol>
</body>

2.2.4 伪类选择器

此处只演示 hover、active

<head>
    <style>
        /* 伪类选择器 - 鼠标悬停的效果 */
        div:hover {
            color: green;
        }
        /* 伪类选择器 - 鼠标按下的效果 */
        div:active {
            color:blue
        }
    </style>
</head>
<body>
    <div>
        hello world
    </div>
</body>

复合选择器总结

选择器	作用	注意事项
后代选择器	选择后代元素	可以是孙子元素
子选择器	选择子元素	只能选儿子, 不能选孙子
并集选择器	选择相同样式的元素	更好的做到代码重用
伪类选择器	选择不同状态的链接	重点掌握 hover、active

3. 常见元素属性

3.1 字体属性

<head>
    <style>
        div {
            /* 字体大小 */
            font-size: 100px;

            /* 字体颜色 */
            color: red;

            /* 字体粗细 */
            font-weight: lighter; 
            font-weight: normal;
            font-weight: bold;
            font-weight: bolder;

            /* 字体属性 */
            font-family: 宋体;
        }
    </style>
</head>
<body>
    <div>
        hello world
    </div>
</body>

3.1.1 文字样式

    <style>
        /* 取消倾斜 */
        div {
            font-style: normal;
        }
        /* 设置倾斜 */
        div {
            font-style: italic;
        }
    </style>

3.2 文本属性

3.2.1 设置文本颜色

<head>
    <style>
        div {
            color: red;
            color: #00ff00;
            color: rgb(0, 0, 255);
        }
    </style>
</head>
<body>
    <div>
        hello world
    </div>
</body>

color 属性值的三种写法：

预定义的颜色值 (单词)
[ 最常用 ] 十六进制形式
RGB 方式

认识 RGB：

我们使用 R (red), G (green), B (blue) 的方式表示颜色 ( 色光三原色 ). 三种颜色按照不同的比例搭配 , 就能混合出各种五彩斑斓的效果.

计算机中针对 R, G, B 三个分量 , 分别使用一个字节表示 (8 个比特位 , 表示的范围是 0-255, 十六进制表示为 00-FF).

数值越大 , 表示该分量的颜色就越浓 . 255, 255, 255 就表示白色 ; 0, 0, 0 就表示黑色

3.2.2 文本对齐

    <style>
        div {
            /* 居中对齐、左对齐、右对齐 */
            text-align: center;
            text-align: left;
            text-align: right;
        }
    </style>

3.2.3 文本装饰

    <style>
        div {
            text-decoration: underline;
            text-decoration: none;
            text-decoration: overline;
            text-decoration: line-through;
        }
    </style>

四个取值的效果：

underline 下划线 . [ 常用 ]
none 啥都没有 . 可以给 a 标签去掉下划线
overline 上划线 . [ 不常用 ]
line-through 删除线 [ 不常用 ]

3.2.4 文本缩进

text-indent: [值];

单位可以使用 px 或者 em，一个文字大小就是 1em。

    <style>
        div {
            /* 首行缩进两个字 */
           text-indent: 2em;
        }
    </style>

3.2.5 行高

line-height: [值];
行高 = 文字高度 + 行间距

也可以是两行文字的顶线之间的距离、中线之间的距离、基线之间的距离或者底线之间距离。

    <style>
        div {
           line-height: 50px;
           /* 行高也可以取 normal 等值.这个取决于浏览器的实现. chrome 上 normal 为 21 px */
           line-height: normal;
        }
    </style>

4. 背景属性

    <style>
        div {
            /* 背景颜色 可设置的值和文本颜色差不多*/
            background-color: grey;

            /* 背景图片 */
            background-image: url(image/female.png);

            /* 背景平铺 */
            background-repeat: no-repeat;

            /* 背景位置 */
            background-position: center top;

            /* 背景尺寸 */
            background-size: contain;
        }
    </style>

🍃1.背景颜色：可设置的值和文本颜色差不多，默认情况下是 transparent（透明）的

🍃2.背景图片：比 image 更方便控制位置，url 里可以放相对路径、绝对路径，网络路径

🍃3.背景平铺：重要的四个取值，repeat（平铺），no-repeat（不平铺），repeat-x（水平平铺），repeat-y（垂直平铺）。默认情况下是 repeat。

🍃4.背景位置 - 参数有三种风格:

方位名词: (top, left, right, bottom)
精确单位: 坐标或者百分比(以左上角为原点)
混合单位: 同时包含方位名词和精确单位

🍃5.背景尺寸：可以填具体数值，例如：50px，还可以是使用 cover（把背景图像扩展至足够大，以使背景图像完全覆盖背景区域）和 contain（把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域. ）

5.圆角矩形

通过 border-radius 使边框带圆角效果.

基本用法：border-radius: length;

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: grey;
            border: 2px solid green;
            /* 圆角矩形 */
            border-radius: 10px;
            /* 将 border-radius 的值设为正方形边长的一半就可以变为圆形 */
        }
    </style>

6.元素的显示模式

在 CSS 中 , HTML 的标签的显示模式有很多 . 这里只介绍 "块级元素" 和 "行内元素"。

1.常见的块级元素： h1 - h6、 p、 div、 ul、 ol、li.......

特点：

独占一行
高度, 宽度, 内外边距, 行高都可以控制

宽度默认是父级元素宽度的 100% ( 和父元素一样宽 )

是一个容器 ( 盒子 ), 里面可以放行内和块级元素 .

注意：

文字类的元素内不能使用块级元素

p 标签主要用于存放文字 , 内部不能放块级元素 , 尤其是 div

2.常见的行内元素： a、 strong、 b、 em、 i、 del、 s、 ins、 u、 span

特点:

不独占一行, 一行可以显示多个

设置高度 , 宽度 , 行高无效

左右外边距有效( 上下无效 ). 内边距有效 .

默认宽度就是本身的内容

行内元素只能容纳文本和其他行内元素, 不能放块级元素

6.1 行内元素和块级元素的两个主要区别

🍃1.块级元素独占一行 , 行内元素不独占一行

🍃2.块级元素，高度、宽度、内外边距、行高，都是可以控制的，行内元素，设置高度、宽度、行高，都是无效的，设置内边距有效，设置外边距，左右外边距有效，上下外边距无效。

6.2 改变显示模式

使用 display 属性可以使 div 变成行内元素，也可以使 a，sapn 等元素变成块级元素。

display: block 改成块级元素 [常用]
display: inline 改成行内元素 [很少用]
display: inline-block 改成行内块元素（又能设置行高，又不独占一行）

display 还可以让元素隐藏(不显示)： display：none

    <style>
        span {
            width: 80px;
            height: 90px;
            display: block;
        }
    </style>
    <span>
        哇哈哈
    </span>
    <span>
        helloworld
    </span>

7.盒模型

HTML 中元素的最基本的排列规则：

1.每个 HTML 元素，，都是一个 "矩形" 的盒子。

2.每个这样的盒子，都由这几个部分构成：

7.1 边框

基础属性

粗细 : border-width
样式: border-style, 默认没边框 . solid 实线边框 dashed 虚线边框 dotted 点线边框
颜色: border-color

div {
    width: 500px;
    height: 250px;
    border-width: 10px;
    border-style: solid;
    border-color: green; 
}


div {
    /* 支持简写 */
    border: 1px solid red;
}

还可以改四个方向的任意边框：

border-top/bottom/left/rig

边框会撑大盒子

可以通过设置 box-sizing: border-box，使边框不再撑大盒子，默认情况是 content-box.

 box-sizing: border-box;

7.2 内边距

通过 padding 属性设置内容和边框之间的距离 .

可以给四个方向都加上边距：

padding-top
padding-bottom
padding-left
padding-right

div {
    height: 200px;
    width: 300px;
    padding-top: 5px;
    padding-left: 10px; 
    
    /* 先设置上下，，再设置左右 */
    padding: 20px,40px;
    /* 顺时针设置，上、右、下、左 */
    padding: 20px,40px,20px,40px;
    /* 设置四个方向相同的px */
    padding: 20px;
}

7.3 外边距

控制盒子和盒子之间的距离 . 外边距和内边距类似，也是可以四个方向分别设置；也是可以写作，1个数字，2个数字，4个数字...规则和 padding 完全一致。

div {
    height: 50px;
    width: 50px;
    margin-top: 5px;
    margin-left: 10px; 
    
    /* 先设置上下，，再设置左右 */
    margin: 20px,40px;
    /* 顺时针设置，上、右、下、左 */
    margin: 20px,40px,20px,40px;
}

外边距要注意的细节：

块级元素水平居中

前提：

指定宽度 ( 如果不指定宽度 , 默认和父元素一致 )
把水平 margin 设为 auto

三种写法均可：

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

注意：

🍃1. 这个水平居中的方式和 text-align 不一样.

🍃2.margin: auto 是给块级元素用得到.

🍃3.text-align: center 是让行内元素或者行内块元素居中的.

🍃4.对于垂直居中, 不能使用 "上下 margin 为 auto " 的方式.

8. 弹性布局

未使用弹性布局时的效果：

<style>
    div {
        height: 150px;
        background-color: red;
    }
    span {
        background-color: green;
        width: 100px;
        height: 100px;
    }
</style>
<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

使用弹性布局后的效果：加上 display：flex

此时给 span 设置高度、宽度就都会生效，不再是行内元素了。

flex 布局基本概念

flex 是 flexible box 的缩写 . 意思为 " 弹性盒子 ".

任何一个 html 元素 , 都可以指定为 display:flex 完成弹性布局 .

flex 布局的本质是给父盒子添加 display:flex 属性 , 来控制子盒子的位置和排列方式 .

基本概念：

被设置为 display:flex 属性的元素 , 称为 flex container

它的所有子元素立刻称为了该容器的成员, 称为 flex item

flex item 可以纵向排列 , 也可以横向排列 , 称为 flex direction ( 主轴 )

常用属性

弹性布局常用的属性：

🍃1.display： flex 开启弹性布局

🍃2.justify-content 描述主轴上的排列方式（默认水平方向）

🍃3.align-items 描述侧轴上的排列方式（侧轴是和主轴垂直的方向）

注意：

当给一个元素设为 display: flex 此时子元素就不再遵守原来的 "块级元素"、"行内元素" 的规则了，变成了弹性元素，这些元素就会按照弹性布局的规则来排列，但是并不影响孙子元素。

🍁justify-content

属性取值：

值	描述
flex-start	默认值。项目位于容器的开头 - 默认就是靠左排列
flex-end	项目位于容器的结尾 - 默认就是靠右排列
center	项目位于容器中央 - 居中
sapce-between	项目在行与行之间留有间隔
space-around	项目在行之前、行之间、和行之后留有间隔

    <style>
        div {
            height: 150px;
            background-color: red;
            display: flex;
            
            justify-content: space-between;
            justify-content: space-around;
            justify-content: flex-end;
            justify-content: flex-start;
            justify-content: center;
        }
        span {
            background-color: green;
            width: 100px;
            height: 100px;
        }
    </style>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>

未指定 justify-content 时，默认按照从左到右的方向布局：

设置 justify-content: flex-end 时：

设置 jutify-content: center 时：

设置 justify-content: space-around 时：

设置 justify-content: space-between 时：

🍁align-items

属性取值：

值	描述
stretch	默认值，行拉伸以占据剩余空间
center	朝着弹性容器的中央对行打包
flex-start	朝着弹性容器的开头对行打包
flex-end	朝着弹性容器的结尾对行打包
space-between	行均匀分布在弹性容器中
sapce-around	行均匀分布在弹性容器中，两端各占一半

<style>
    div {
        height: 150px;
        background-color: red;
        display: flex;

        justify-content: space-between;
        align-items: stretch;
        /* align-items:: center; */
    }
    span {
        background-color: green;
        width: 100px;
        height: 100px;
    }
</style>
<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

align-items: stretch

这个是 align-content 的默认值 . 意思是如果子元素没有被显式指定高度 , 那么就会填充满父元素的

高度 .

align-items: center:

实现垂直居中.

 注意：align-items 只能针对单行元素来实现. 如果有多行元素, 就需要使用 item-contents