css学习总结

一、CSS 根底

二、CSS 布局

起浮布局： float 特点 铲除起浮：clear 特点、overflow 特点 定位布局： position 特点：static、relative、absolute、fixed 定位元素的坐标：top、bottom、left、right zindex 特点 Flex 布局： flex 容器 flex 子项 flex 特点：flexdirection、flexwrap、justifycontent、alignitems、aligncontent Grid 布局： grid 容器 grid 子项 grid 特点：gridtemplatecolumns、gridtemplaterows、gridgap、gridautocolumns、gridautorows

三、CSS 预处理器

Sass： 变量、嵌套、混合、承继等 Less： 变量、嵌套、混合、承继等 Stylus： 变量、嵌套、混合、承继等

四、CSS 结构

Bootstrap： 呼应式布局 组件库 Foundation： 呼应式布局 组件库 Tailwind CSS： 功用类优先的 CSS 结构

五、CSS 东西

CSS 预处理器： Sass、Less、Stylus CSS 紧缩东西： CSS Minifier CSS 校验东西： W3C CSS 验证器

六、CSS 学习资源

书本： 《CSS 威望攻略》 《通晓 CSS》 在线教程： MDN Web Docs W3Schools 视频教程： B站、慕课网等

七、CSS 学习主张

按部就班： 从根底开端，逐渐学习高档常识。 多操练： 经过实践项目操练，稳固所学常识。 重视最新趋势： 不断学习新的 CSS 技术。 参加社区： 与其他开发者交流学习经历。

一、CSS简介

CSS，即层叠款式表（Cascading Style Sheets），是一种用于描绘HTML或XML文档款式的款式表言语。它答应开发者操控网页元素的布局、色彩、字体等款式，然后完成愈加漂亮和丰厚的网页视觉效果。

二、CSS学习根底

1. CSS语法根底

CSS的根本语法由选择器、特点和值组成。选择器用于指定要运用款式的HTML元素，特点则界说了元素的款式，而值则是特点的取值。

2. CSS选择器

CSS选择器用于指定要运用款式的元素。常见的CSS选择器包含元素选择器、类选择器、ID选择器、特点选择器等。

3. CSS特点

CSS特点用于界说元素的款式，如色彩、字体、边框、布景等。常见的CSS特点包含color、font-family、border、background等。

三、CSS布局技巧

1. 盒模型

盒模型是CSS布局的根底，它将每个元素视为一个盒子，包含内容(content)、内边距(padding)、边框(border)和边距(margin)。

2. 布局办法

CSS供给了多种布局办法，如起浮布局、定位布局、Flex布局和Grid布局等。其间，Flex布局和Grid布局是现代网页布局的常用办法。

3. 呼应式规划

呼应式规划是指网页在不同设备上都能坚持杰出的视觉效果。CSS媒体查询是完成呼应式规划的关键技术。

四、CSS进阶技巧

1. CSS预处理器

CSS预处理器如Sass、Less和Stylus等，能够增强CSS的编写才能，进步开发功率。

2. CSS模块化

CSS模块化是指将CSS代码拆分红多个模块，每个模块担任一部分款式，便于管理和保护。

3. CSS命名标准

CSS命名标准有助于进步代码的可读性和可保护性。常见的命名标准包含BEM（Block Element Modifier）、OOCSS（Object-Oriented CSS）等。

五、CSS调试与优化

1. CSS调试

CSS调试是处理款式问题的进程。常用的CSS调试办法包含浏览器的开发者东西、CSS验证器等。

2. CSS优化

CSS优化是指进步CSS代码的功能和可保护性。常见的CSS优化办法包含兼并选择器、紧缩CSS文件、运用CSS精灵图等。

六、CSS学习资源引荐

1. W3Schools

W3Schools供给了丰厚的CSS教程和参阅文档，合适初学者和进阶者。

2. MDN Web Docs

MDN Web Docs是Mozilla供给的前端开发文档，内容全面，合适深化学习。

3. CSS-Tricks

CSS-Tricks是一个专心于CSS和前端开发的博客，供给了很多的CSS技巧和事例。

CSS是前端开发中不可或缺的技术，把握CSS能够协助开发者创立漂亮、丰厚的网页。经过学习CSS根底、布局技巧、进阶技巧和调试优化，能够逐渐进步CSS技术。期望本文对您的CSS学习有所协助。