CSS基本语法介绍

CSS基本语法

CSS（层叠样式表）用于为HTML文档添加样式，通过选择器选择HTML元素并应用样式规则。

1.选择器

选择器用于选择需要添加样式的HTML元素。常见的选择器包括：

-元素选择器：通过元素名称选择，例如p选择所有<p>标签。

-类选择器：通过类名选择，前面加.，例如.className。

-ID选择器：通过ID名称选择，前面加#，例如#idName。

-属性选择器：根据元素的属性选择，例如[type="text"]。

2.样式规则

CSS样式规则由选择器和声明块组成，声明块包含多个声明，每个声明由属性和值组成，格式如下：

selector{
property:value;
}

例如：

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

3.常用样式属性

-字体样式：font-family，font-size，font-weight，font-style。

-文本样式：color，line-height，text-align，text-decoration。

-背景样式：background-color，background-image，background-size，background-position。

-布局样式：margin，padding，border，width，height，display，position，flex。

4.盒模型

CSS盒模型定义了元素的布局和尺寸。盒模型包括以下几个部分：

-内容区域：元素的实际内容区域。

-内边距（padding）：内容与边框之间的空间。

-边框（border）：元素的边框。

-外边距（margin）：元素与其他元素之间的空间。

5.继承与优先级

-继承：某些样式会从父元素继承到子元素，如字体和颜色等。

-优先级：CSS选择器的优先级决定了样式的应用顺序。ID选择器的优先级高于类选择器，类选择器高于元素选择器。

6.媒体查询

媒体查询用于根据设备的不同特性应用不同的样式。例如，可以根据屏幕宽度设置不同的布局：

@media(max-width:600px){
body{
background-color:lightblue;
}
}

7.CSS布局模型

-Flexbox：用于一维布局，可以轻松创建响应式布局。

-Grid：用于二维布局，提供更强大的布局控制。

8.动画与过渡

CSS动画和过渡可以为网页元素添加动态效果。

-过渡：在属性变化时创建平滑的过渡效果。

-动画：可以创建更复杂的动画效果，使用@keyframes定义。

@keyframes example{
from{background-color:red;}
to{background-color:yellow;}
}
div{
animation:example 5s infinite;
}