css学习笔记, 什么是CSS

前端开发 2024-12-19 4

学习 CSS 是 web 开发的重要一步，它答应你操控网页的布局和款式。下面是一些 CSS 学习笔记，期望对你有所协助：

1. 根底语法

挑选器：挑选器用于指定哪些 HTML 元素会被选中。特点：特点用于设置 HTML 元素的款式。值：值用于指定特点的详细值。

2. 挑选器类型

元素挑选器：挑选一切该类型的元素，例如 `h1`。类挑选器：挑选一切带有指定类名的元素，例如 `.myclass`。 ID挑选器：挑选带有指定 ID 的元素，例如 `myid`。子孙挑选器：挑选一切指定元素的子孙元素，例如 `ul li`。兄弟挑选器：挑选一切指定元素的兄弟元素，例如 `h1 p`。

3. 常用特点

字体特点：`fontsize`、`fontfamily`、`fontweight` 等。文本特点：`textalign`、`textdecoration`、`textindent` 等。布景特点：`backgroundcolor`、`backgroundimage`、`backgroundrepeat` 等。边框特点：`borderwidth`、`borderstyle`、`bordercolor` 等。尺度特点：`width`、`height`、`margin`、`padding` 等。

4. 盒模型

内容：元素显现的内容。内边距：内容与边框之间的空间。边框：环绕内容的边框。外边距：元素与周围元素之间的空间。

5. 布局

起浮：经过 `float` 特点使元素起浮。定位：经过 `position` 特点定位元素。 Flexbox：一种更现代的布局方法，经过 `display: flex` 特点完成。 Grid：另一种现代布局方法，经过 `display: grid` 特点完成。

6. 呼应式规划

媒体查询：经过 `@media` 规矩依据不同的屏幕尺度运用不同的款式。百分比：运用百分比而不是固定像从来设置尺度。弹性图片：运用 `maxwidth: 100%` 和 `height: auto` 使图片自适应容器巨细。

7. CSS 预处理器

Sass：一种盛行的 CSS 预处理器，支撑变量、嵌套、混合等。 Less：另一种盛行的 CSS 预处理器，与 Sass 相似。

8. CSS 结构

Bootstrap：一个盛行的前端结构，供给了一套预界说的 CSS 类和组件。 Foundation：另一个盛行的前端结构，供给了一套呼应式规划东西。

9. 浏览器兼容性

前缀：为了保证在不同浏览器上的兼容性，某些特点或许需求增加浏览器前缀。 CSS Reset：为了保证在不同浏览器上的款式一致性，能够在 CSS 中运用 CSS Reset。