web蓝桥杯备考（css基础语法）

2025-03-01 131 阅读3分钟

基础语法

1、基本结构

css由选择器和生命块组成：

选项器{
属性：值；
属性：值；
}

选择器： 用于选择需要样式化的HTML元素
生命块： 包含一个或多个生明，每个声明由属性和值组成，用冒号分隔，以分号结束

示例：

p{
color:red;
font-size:16px;
}

2、css常用属性

文本属性

color：文本颜色。
font-size：字体大小。
font-family：字体类型。
text-align：文本对齐方式。
text-decoration：文本装饰（如下划线）。
line-height：行高。

背景属性

background-color：背景颜色。
background-image：背景图片。
background-repeat：背景图片是否重复。
background-position：背景图片位置。

盒模型属性

width：元素宽度。
height：元素高度。
margin：外边距。
padding：内边距。
border：边框。
box-sizing：盒模型计算方式（content-box或border-box）。

Flexbox布局

display: flex：启用Flex布局。
flex-direction：主轴方向（如row、column）。
justify-content：主轴对齐方式。
align-items：交叉轴对齐方式。
flex-wrap：是否换行。

Grid布局

display: grid：启用Grid布局。
grid-template-columns：定义列。
grid-template-rows：定义行。
gap：网格间距。

动画与过渡

transition：定义过渡效果。
animation：定义动画。
@keyframes：定义动画关键帧。

CSS选择器

元素选择器

根据HTML标签名称来选择元素

p {
  color: blue;
}

类选择器

根据元素的class属性选择元素，以.开头

.text-center {
  text-align: center;
}

ID选择器根据元素的id属性选择元素，以#开头

#header {
  background-color: yellow;
}

通配符选择器

选择所有元素，用* 表示

* {
  margin: 0;
  padding: 0;
}

属性选择器

根据元素的属性选择元素

input[type="text"] {
  border: 1px solid #ccc;
}

伪类选择器

根据元素的状态选择元素，以:开头

a:hover {
  color: red;
}

伪元素选择器

选择元素的特定部分，以::开头

p::first-line {
  font-weight: bold;
}

组合选择器

后代选择器：选择某个元素的后代元素。
```
div p {
  color: green;
}
```
子元素选择器：选择某个元素的直接子元素。
```
div > p {
  color: green;
}
```
相邻兄弟选择器：选择某个元素的下一个兄弟元素。
```
h1 + p {
  color: blue;
}
```
通用兄弟选择器：选择某个元素的所有兄弟元素。
```
h1 ~ p {
  color: blue;
}
```

注意： CSS样式的优先级由选择器的权重决定，权重从高到低依次为：

!important：最高优先级。
内联样式（style属性）。
ID选择器。
类选择器、属性选择器、伪类选择器。
元素选择器、伪元素选择器。
通配符选择器。

引入方式

行内样式：通过元素的 style 属性直接定义（不推荐大规模使用）。

<p style="color: red;">Hello World</p>

内部样式表：在 <style> 标签内编写，适用于单页面。

<style>
  p {
    color: red;
  }
</style>

外部样式表：通过 <link> 引入 .css 文件，便于复用和管理。

<link rel="stylesheet" href="styles.css">

css注释

注释格式为 /* 注释内容 */，不支持单行注释。
属性值需小写，多个声明用分号分隔，建议每个声明独占一行。

/* 这是一个注释 */
p {
  color: red;
}

css单位

绝对单位：px（像素）、pt（点）
相对单位：em（相对于父元素字体大小）、rem（相对于根元素字体大小）、%（百分比）、vm（视口宽度）、vh（视口高度）