青训营CSS学习笔记

CSS（层叠样式表）是一种用于描述网页样式和外观的标记语言。通过CSS，可以控制网页的布局、字体、颜色、背景等各种样式。CSS与HTML结合使用，共同构建出美观、可读性强的网页。

1. CSS基本语法

CSS的语法由选择器和声明块组成。选择器用于选择要修改样式的HTML元素，声明块则包含了一系列的属性和值，用于定义这些元素的样式。

• 示例代码：

h1 { 
    color: red;
    font-size: 24px;
}

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

2. CSS选择器

CSS选择器用于选择需要修改样式的HTML元素。常见的选择器有标签选择器、类选择器和ID选择器。

• 标签选择器：通过HTML标签名选择对应的元素。

h1 { 
    color: red; 
}

• 类选择器：通过元素的class属性选择对应的元素。

.highlight {
    font-weight: bold;
}

• ID选择器：通过元素的id属性选择对应的元素。

#logo { 
    width: 100px;
    height: 100px;
}

3. CSS样式属性

CSS提供了丰富的样式属性，用于修改元素的外观和布局。常见的样式属性有color、font-size、background等。

• 示例代码：

h1 { 
    color: red; 
    font-size: 24px;
    background-color: yellow;
}

4. CSS盒模型

CSS盒模型用于描述元素的布局方式，包括元素的宽度、高度、内边距和边框大小。盒模型由内容区域、内边距、边框和外边距组成。

• 示例代码：

.box {
    width: 200px; 
    height: 100px; 
    padding: 10px;
    border: 1px solid black;
    margin: 20px;
}

5. CSS布局

CSS布局用于控制元素的位置和排列方式。常见的布局技术有流动布局（float）、弹性布局（flexbox）和网格布局（grid）等。

• 示例代码：

.container { 
    display: flex;
    justify-content: center; 
    align-items: center; 
} 

.column {
    flex: 1;
}

学习小结：

CSS是前端开发中必不可少的技术，通过CSS可以为网页添加丰富的样式和布局效果。在学习CSS时，应关注以下几个方面：

• 学习CSS选择器的使用，了解如何通过选择器选择需要修改样式的HTML元素。
• 熟悉常用的样式属性，包括文本样式、背景样式和盒模型等。
• 掌握CSS布局技术，如流动布局、弹性布局和网格布局，以实现不同的页面布局需求。
• 学习CSS的优先级规则和继承机制，确保样式的正确应用和覆盖。

通过不断练习和实践，掌握CSS的基本知识和技巧，能够轻松地创建出美观、可读性强的网页。