首页  > 前端开发 > css笔记

css笔记

前端开发 2025-01-08 4

CSS（层叠款式表）是一种用于描绘HTML或XML（包含如SVG、MathML等）文档款式的款式表言语。CSS描绘了如何将结构化文档（如HTML文档或XML运用）呈现为网页、桌面运用程序或其他类型的用户界面。

CSS根底

1. 挑选器：挑选器用于指定CSS款式规矩运用于哪些HTML元素。常见的挑选器有元素挑选器、类挑选器、ID挑选器等。2. 特点：CSS特点用于界说元素的款式，如色彩、字体、巨细、边距等。3. 值：CSS特点能够承受的值，如`red`、`12px`、`1em`等。

CSS规矩

CSS规矩由挑选器和一组特点值对组成。例如：

```cssh1 { color: red; fontsize: 24px;}```

CSS挑选器

1. 元素挑选器：挑选一切指定类型的元素，如`h1`挑选一切``元素。2. 类挑选器：挑选一切具有指定类名的元素，如`.myclass`挑选一切`class=myclass`的元素。3. ID挑选器：挑选具有指定ID的元素，如`myid`挑选`id=myid`的元素。4. 子孙挑选器：挑选指定元素的子孙元素，如`h1 em`挑选一切``元素，它们是``元素的子孙。5. 子挑选器：挑选指定元素的直接子元素，如`h1 > em`挑选一切``元素，它们是``元素的直接子元素。6. 相邻兄弟挑选器：挑选紧接在另一个元素后的元素，如`h1 p`挑选一切紧接在``元素后的``元素。7. 通用兄弟挑选器：挑选指定元素之后的一切兄弟元素，如`h1 ~ p`挑选一切在``元素之后的``元素。

CSS特点

1. 字体特点：如`fontfamily`、`fontsize`、`fontweight`等。2. 文本特点：如`color`、`textalign`、`textdecoration`等。3. 布景特点：如`backgroundcolor`、`backgroundimage`、`backgroundrepeat`等。4. 边框特点：如`border`、`borderwidth`、`borderstyle`、`bordercolor`等。5. 尺度特点：如`width`、`height`、`maxwidth`、`maxheight`等。6. 边距特点：如`margin`、`margintop`、`marginright`、`marginbottom`、`marginleft`等。7. 填充特点：如`padding`、`paddingtop`、`paddingright`、`paddingbottom`、`paddingleft`等。8. 定位特点：如`position`、`top`、`right`、`bottom`、`left`、`zindex`等。

CSS布局

1. 起浮布局：运用`float`特点将元素起浮到左边或右侧，完成多列布局。2. 定位布局：运用`position`特点将元素定位在页面上的特定方位。3. Flexbox布局：一种灵敏的布局办法，能够轻松完成多列布局、呼应式规划等。4. Grid布局：一种强壮的布局办法，能够创立杂乱的二维布局。

CSS呼应式规划

呼应式规划是一种网页规划技能，能够使网页在不同尺度的设备上都能杰出显现。CSS中的媒体查询（Media Queries）能够用于完成呼应式规划。

CSS预处理器

CSS预处理器是一种脚本言语，能够扩展CSS的功用，如变量、嵌套、混合（Mixins）、函数等。常见的CSS预处理器有Sass、Less、Stylus等。

CSS结构

CSS结构是一组预先编写的CSS款式，能够用于快速构建网页。常见的CSS结构有Bootstrap、Foundation、Bulma等。

CSS动画

CSS动画能够运用`@keyframes`规矩和`animation`特点来完成。CSS动画能够用于创立动态效果，如过渡、旋转、缩放等。

CSS兼容性

不同浏览器对CSS的支撑程度或许有所不同。为了保证网页在不同浏览器上都能杰出显现，需求测验CSS的兼容性，并运用CSS Hack或CSS前缀等技能来处理兼容性问题。

CSS功能优化

CSS功能优化能够进步网页的加载速度和烘托功能。常见的优化办法包含削减CSS文件巨细、运用CSS压缩东西、兼并CSS文件、运用CSS精灵技能等。

CSS东西和资源

1. CSS编辑器：如Sublime Text、Visual Studio Code、Atom等。2. CSS浏览器插件：如Firebug、Chrome DevTools等。3. CSS参考手册：如MDN Web Docs、W3Schools等。4. CSS代码库：如GitHub、CodePen等。

CSS学习资源

1. 在线教程：如W3Schools、Codecademy、freeCodeCamp等。2. 书本：如《CSS揭秘》、《通晓CSS》等。3. 视频课程：如Udemy、Coursera、Khan Academy等。

期望这些笔记能协助你更好地学习和运用CSS！

CSS笔记：从根底到进阶的实用技巧

一、CSS简介与根底语法

1.1 CSS是什么？

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

1.2 CSS根底语法

CSS的根本语法由挑选器和声明组成。挑选器用于指定要运用款式的HTML元素，声明则包含具体的款式特点和值。

```css

/ 挑选器 /

element {

/ 声明 /

property: value;

例如，以下CSS代码将使一切``元素的字体色彩变为赤色：

```css

color: red;

二、CSS挑选器

2.1 根本挑选器

- 元素挑选器：依据HTML元素类型挑选元素，如`p`、`div`等。

- 类挑选器：依据元素的类特点挑选元素，如`.class-name`。

- ID挑选器：依据元素的ID特点挑选元素，如`id-name`。

2.2 特点挑选器

特点挑选器能够依据元素的特点值挑选元素，如`[attribute]`、`[attribute=value]`等。

2.3 伪类挑选器

伪类挑选器用于挑选具有特定状况的元素，如`:hover`、`:active`等。

三、CSS款式特点

3.1 文本款式

- 字体：`font-family`、`font-size`、`font-weight`等。

- 文本色彩：`color`。

- 文本对齐：`text-align`、`text-indent`等。

3.2 块级款式

- 宽度：`width`。

- 高度：`height`。

- 边距：`margin`。

- 内边距：`padding`。

3.3 布景款式

- 布景色彩：`background-color`。

- 布景图片：`background-image`。

- 布景方位：`background-position`。

- 布景重复：`background-repeat`。

四、CSS布局技巧

4.1 起浮布局

起浮布局是一种常用的网页布局办法，经过设置元素的`float`特点完成。

4.2 定位布局

定位布局使用CSS的`position`特点完成，包含静态定位、相对定位、肯定定位、固定定位和粘性定位。

4.3 Flex布局

Flex布局是一种呼应式布局办法，经过设置容器的`display`特点为`flex`完成。

五、CSS进阶技巧

5.1 CSS预处理器

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

5.2 CSS模块化

CSS模块化是一种将CSS代码拆分红多个模块，便于管理和保护的办法。

5.3 CSS动画

CSS动画能够经过`@keyframes`规矩完成，为网页元素增加丰厚的动态效果。

CSS是网页规划中不可或缺的一部分，把握CSS根底和进阶技巧关于成为一名优异的网页规划师至关重要。本文从CSS简介、根底语法、挑选器、款式特点、布局技巧和进阶技巧等方面进行了具体解说，期望对您的学习有所协助。


相关

Copyright © 2016-2028零基础教程 Rights Reserved. XML地图