CSS基础语法

CSS

CSS基础语法

选择器 {
    属性: 值;
    属性: 值;
}

CSS选择器

1. 元素选择器：直接使用HTML标签名选择元素。
2. 类选择器 ：使用 .加类名选择元素。

<div class="container">
    <p class="text">这是一个段落。</p>
</div>

.container {
    width: 100%;
    padding: 10px; /* padding属性用于设置元素内边距 */
}
.text {
    color: blue;
    font-size: 16px;
}

3. ID选择器 ：使用 #加ID名选择元素。
4. 属性选择器 ：使用方括号 []选择具有特定属性的元素。
5. 后代选择器：使用空格选择某个元素内部的所有指定元素。

<div class="container">
    <p>这是儿子</p>
    <p><span>这是孙子</span></p>
</div>

div p{
    color: red; /* 选择所有div元素内部的p元素，并将其字体颜色设置为红色 */
}

6. 并集选择器 ：使用逗号 ,选择多个元素，设置相同的样式。

p, .text, #header {
    color: purple; /* 将所有p元素、类名为text的元素和ID为header的元素的字体颜色设置为紫色 */
}

7. 伪元素选择器 ：使用 ::选择元素的特定
   部分，如 ::before表示元素的前面,::after表示元素的后面等。

<div class="box">盒子内容</div>

.box::before {
    content: "前置内容 - "; /* 在类名为box的元素前添加文本内容 */
    color: gray; /* 设置前置内容的字体颜色为灰色 */
}
8. **子元素选择器**：使用`>`选择某个元素的直接子元素。
```css
div > p{
    color: green; /* 选择所有div元素的直接子元素p，并将其字体颜色设置为绿色 */
}

1. 伪类选择器 ：使用 :选择元素的特定状态，如 :hover表示鼠标悬停状态,:active表示元素被激活状态,:link表示未访问的链接,:visited表示已访问的链接等。

<button class="btn">点击我</button>

.btn:hover {
    background-color: yellow; /* 当鼠标悬停在类名为btn的按钮上时，背景颜色变为黄色 */
    font-weight: bold; /* 字体加粗 */
}

1. 结构伪类选择器 ：如 :first-child表示第一个子元素,:last-child表示最后一个子元素,:nth-child(n)表示第n个子元素等。

<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>

ul li:first-child {
    color: orange; /* 选择ul元素的第一个子元素li，并将其字体颜色设置为橙色 */
}
ul li:last-child {
    color: brown; /* 选择ul元素的最后一个子元素li，并将其字体颜色设置为棕色 */
}
ul li:nth-child(n+2) {
    color: pink; /* 选择ul元素的第2个及之后的子元素li，并将其字体颜色设置为粉色 */
}

CSS常用属性

1. 颜色属性 ：color(字体颜色)，background-color(背景颜色)。
2. 字体属性 ：font-size(字体大小)，font-family(字体类型)，font-weight(字体粗细)。
3. 文本属性 ：text-align(文本对齐方式)，text-decoration(文本装饰，如下划线(underline),删除线(line-through))，line-height(行高)。
4. 盒模型属性 ：width(宽度)，height(高度)，margin(外边距)，padding(内边距)，border(边框)。
5. 定位属性 ：position(定位方式)，top(上边距)，left(左边距)，right(右边距)，bottom(下边距)。
6. 显示属性 ：display(显示方式)，visibility(可见性)，overflow(溢出处理)。
7. 浮动属性 ：float(浮动方式)，clear(清除浮动)。
8. 弹性盒子属性 ：display: flex(启用弹性盒子布局)，justify-content(主轴对齐方式)，align-items(交叉轴对齐方式)。
9. 网格布局属性 ：display: grid(启用网格布局)，grid-template-columns(定义列)，grid-template-rows(定义行)。
10. 转换属性 ：transform(元素变换，如旋转、缩放)，transition(过渡效果)。
11. 行高属性 ：line-height(设置文本行间距)。

.p1{
    line-height: 1.5; /* 设置行高为字体大小的1.5倍 */
}
.p2{
    line-height: 30px; /* 设置行高为30像素 */
}

12. 文本阴影属性 ：text-shadow(为文本添加阴影效果)。
13. 盒子阴影属性 ：box-shadow(为元素添加阴影效果)。
14. 透明度属性 ：opacity(设置元素透明度)。
15. 光标属性 ：cursor(设置鼠标指针样式)。
16. 列表样式属性 ：list-style(设置列表项的样式，如圆点、数字等)。
17. 文本缩进 ：text-indent(设置文本的首行缩进)。

.p1{
    text-indent: 2em; /* 设置首行缩进为2个字符宽度 */
}
.p2{
    text-indent: 30px; /* 设置首行缩进为30像素 */
}

18. 文本对齐 ：text-align(设置文本的对齐方式，如左对齐(left)、右对齐(right)、居中(center))。

CSS特性

1. 继承性 ：某些CSS属性具有继承性，子元素会继承父元素的这些属性值，如 color、font-family等。
   但是当子元素有自己的样式定义时，会覆盖继承的样式。
2. 层叠性：当多个CSS规则作用于同一元素时，浏览器会根据规则的优先级和来源来决定最终应用哪个规则。

p {
    color: blue; /* 元素选择器，优先级较低 */
}
p{
    font-size: 16px;
}
/* 最后的效果是p元素的字体颜色为蓝色，字体大小为16px */

3. 优先级：CSS规则的优先级由选择器的类型和数量决定，ID选择器的优先级最高，其次是类选择器，最后是元素选择器。内联样式的优先级高于外部和内部样式表。

CSS盒模型

CSS盒模型是指每个HTML元素在页面上都被表示为一个矩形盒子，这个盒子由四个部分组成：内容(content)、内边距(padding)、边框(border)和外边距(margin)。

1. 内容(content)：盒子的实际内容区域，如文本、图像等。
2. 内边距(padding)：内容区域与边框之间的空间，用于增加内容与边框之间的距离。
3. 边框(border)：包围内容和内边距的线条，可以设置宽度、样式和颜色。

• 粗细(border-width): 2px, 5px等
• 样式（实线、虚线、点线等）(border-style): solid, dashed, dotted等
• 颜色(border-color): red等

4. 外边距(margin)：盒子与其他元素之间的空间，用于控制元素之间的距离。
5. 版心居中：就是将一个固定宽度的容器水平居中显示在页面上，通常通过设置左右外边距为自动实现。

.container {
    width: 800px;
    margin: 0 auto; /* 上下外边距为0，左右外边距自动 */
}

6. 元素溢出 ：当内容超过元素的指定宽度或高度时，可以使用 overflow属性来控制溢出内容的显示方式。

• visible：默认值，内容溢出时显示全部内容。
• hidden：内容溢出时隐藏超出部分。
• scroll：内容溢出时显示滚动条。
• auto: 内容溢出时根据需要显示滚动条。

.box {
    width: 200px;
    height: 100px;
    overflow: scroll; /* 显示滚动条 */
}

7. 圆角与阴影

• border-radius 属性用于设置元素的圆角效果。
• box-shadow 属性用于为元素添加阴影效果。

.box {
    width: 200px;
    height: 100px;
    border: 2px solid black;
    border-radius: 15px; /* 设置圆角半径为15像素 */
    box-shadow: 5px 5px 10px gray; /* 设置阴影效果,这三个数字分别表示水平偏移、垂直偏移和模糊半径 */
}

浮动

浮动概述

浮动是CSS中的一种布局方式，可以让元素脱离正常的文档流，向左或向右移动，从而实现文本环绕效果或多列布局。使用 float属性可以设置元素的浮动方向，常见的取值有 left(向左浮动)和 right(向右浮动)。

浮动示例

<body>
    <div class="container">
        <div class="box box1">盒子1</div>
        <div class="box box2">盒子2</div>
        <div class="box box3">盒子3</div>
    </div>
</body>

.container {
    width: 600px;
    border: 1px solid black;
}
.box {
    width: 180px;
    height: 100px;
    margin: 10px;
    padding: 10px;
    border: 1px solid blue;
    float: left; /* 向左浮动 */
}
.box2 {
    float: right; /* 向右浮动 */
}
.box3 {
    float: left; /* 向左浮动 */
}
/*最终的显示结果只有上面有一根边框线，其他方向都没有，因为浮动元素脱离了正常的文档流，父容器的高度没有被包含住。*/

清除浮动

1. 额外表前法

.clearfix {
    clear: both;
}

2. 单伪元素法

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

3. 双伪元素法(推荐)

.clearfix::before,
.clearfix::after {
    content: "";
    display: table;
}
.clearfix::after {
    clear: both;
}

flex布局

Flexbox（弹性盒子布局）是一种用于在容器内排列和对齐子元素的CSS布局模型。它提供了一种更加灵活和高效的方式来创建响应式布局，适用于各种屏幕尺寸和设备。

组成

1. 弹性容器 ：通过将容器的 display属性设置为 flex或 inline-flex来创建弹性容器。
2. 弹性盒子：弹性容器内的子元素称为弹性盒子。
3. 主轴和交叉轴：弹性容器有两个轴，主轴(main axis)和交叉轴(cross axis)。主轴是弹性盒子排列的方向，交叉轴是与主轴垂直的方向。默认情况下，主轴是水平方向，交叉轴是垂直方向。

常用属性

1. 创建flex容器：display: flex
2. 主轴对齐方式: justify-content(flex-start[从起点开始依次排列], flex-end[从终点开始依次排列], center[居中对齐], space-between[两端对齐，子元素之间的间距相等], space-around[每个子元素两侧的间距相等], space-evenly[每个子元素之间的间距相等])
3. 交叉轴对齐方式 :
   a. align-items(flex-start[从交叉轴起点对齐], flex-end[从交叉轴终点对齐], center[居中对齐], stretch[拉伸填满容器])
   b. align-self
4. 修改主轴方向: flex-direction(row[默认值，主轴为水平方向，子元素从左到右排列], row-reverse[主轴为水平方向，子元素从右到左排列], column[主轴为垂直方向，子元素从上到下排列], column-reverse[主轴为垂直方向，子元素从下到上排列])
5. 弹性伸缩比: flex(定义弹性盒子在主轴方向上的伸缩比例.相当于权重)

<div class="container">
    <div class="box" style="flex: 1;">盒子1</div>
    <div class="box" style="flex: 2;">盒子2</div>
    <div class="box" style="flex: 1;">盒子3</div>
</div>

.container {
    display: flex; /* 创建弹性容器 */
    width: 600px;
    height: 200px;
    border: 1px solid black;
}
.box {
    margin: 10px;
    padding: 10px;
    border: 1px solid blue;
}
/* 盒子2的宽度是盒子1和盒子3的两倍 */

6. 换行: flex-wrap(no-wrap[默认值，所有子元素在一行内排列，可能会溢出容器], wrap[子元素换行排列], wrap-reverse[子元素换行排列，换行方向与主轴相反])
7. 行对齐方式: align-content(flex-start[从交叉轴起点对齐], flex-end[从交叉轴终点对齐], center[居中对齐], space-between[两端对齐，行与行之间的间距相等], space-around[每行两侧的间距相等], stretch[拉伸填满容器])

其他属性

1. transition：用于设置元素的过渡效果，使属性变化更加平滑。
2. opacity：用于设置元素的透明度，取值范围为0（完全透明）到1（完全不透明）。
3. cursor ：用于设置鼠标指针在元素上的样式，如 pointer(手型指针)、default(默认指针)、text(文本指针)等。
4. z-index：用于设置元素的堆叠顺序，数值越大，元素越靠前显示。