思潮课程 / 前端开发 / 正文

css运用,从入门到通晓

2024-12-31前端开发阅读 5

CSS（层叠款式表）是一种用于描绘HTML或XML（包括如SVG、MathML等运用）文档款式的款式表言语。CSS描绘了如何将结构化文档（如HTML文档或XML运用）呈现为网页、桌面运用程序等视觉媒体。它包括如字体、色彩、布景、边框、距离、布局等的规划。

CSS 根底

1. 挑选器：元素挑选器：直接挑选HTML元素。类挑选器：运用点号（.）挑选具有特定类的元素。 ID挑选器：运用井号（）挑选具有特定ID的元素。特点挑选器：挑选具有特定特点的元素。子孙挑选器：挑选某个元素的子孙元素。兄弟挑选器：挑选具有相同父元素的兄弟元素。

2. 款式规矩：由挑选器和声明组成。声明由特点和值组成。

3. 注释：运用 `/ 注释内容 /`。

CSS 语法

```css挑选器 { 特点1: 值1; 特点2: 值2; / ... /}```

CSS 特点

字体：`fontfamily`, `fontsize`, `fontweight`, `fontstyle` 等。色彩：`color`, `backgroundcolor` 等。文本：`textalign`, `textdecoration`, `textindent` 等。边框：`border`, `borderwidth`, `bordercolor`, `borderstyle` 等。填充：`padding`。边距：`margin`。布景：`backgroundimage`, `backgroundrepeat`, `backgroundposition` 等。布局：`display`, `float`, `position`, `zindex` 等。

CSS 文件

```html Hello, World!```

```css/ styles.css /.title { color: red; fontsize: 24px;}```

CSS 预处理器

CSS预处理器如Sass、Less等，能够扩展CSS的功用，如变量、嵌套、混合等。

CSS 结构

CSS结构如Bootstrap、Foundation等，供给了一套预设的CSS款式和组件，能够快速开发网页。

CSS 动画

CSS能够创立简略的动画作用，运用`@keyframes`规矩界说动画。

CSS Flexbox

Flexbox是一种用于布局的CSS3技能，能够轻松创立灵敏的布局。

CSS Grid