CSS从基础到深入的一些理解 | 青训营笔记

---

theme: channing-cyan

highlight: atelier-dune-light

这是我参与「第四届青训营 」笔记创作活动的第2天

基础

CSS是什么？

CSS(层叠样式表)英文全称为Cascading Style Sheets，不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化

CSS的功能？

主要是用来修饰网页、使网页具有美观性和实用性，提升用户的体验感。能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力

修饰网页

• 用来定义页面元素的样式
• 设置字体颜色
• 调整位置和大小
• 添加动画效果

  网页排版

使用css能够对页面进行盒型的排版，可以自定义风格。

CSS的语法?

• 选择器指向您需要设置样式的 HTML 元素。

• 声明块包含一条或多条用分号分隔的声明。

• 每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。

• 多条 CSS 声明用分号分隔，声明块用花括号括起来。 css 选择器{ 属性:属性值; 属性:属性值; } //举例： h2 { color: block; text-align: center; }

  CSS的使用

再页面中如果要使用CSS，有三种方法。

外链式

通过一个link标签引入css文件

html <link rel="stylesheet" type="text/css" herf="/CSS文件路径">

嵌入式

html <style> p { color:red; border:blue 1px solid; } </style>

内联式

内部使用style属性

```html

行内样式

```

CSS选择器

CSS 选择器用于“查找”(或定位选取)要设置样式的 HTML 元素。

简单选择器

通过属性、id、class来选取元素

标签

css //所有p元素都适用 p { text-align: center; color: red; }

id选择器

id命名不能以数字开头。举例： id="junjinId" ```css //通过id特定的html元素适用

junjinId{

color: red; } ```

类选择器

类选择器选择有特定 class 属性的 HTML 元素。 举例：class="myClass" css .myClass{ color:black; }

通配选择器

css //适用于所有HTML元素 *{ color:balck; }

组合选择器

伪类选择器

伪类选择器对字母大小写不敏感，且可以和类选择器结合使用。

语法： css selector:pseudo-class { property: value; } 举例： ```css a标签： /* 未访问的链接 */ a:link { color: #000000; }

/* 已访问的链接 */ a:visited { color: #FFFFFF; }

/* 鼠标悬停链接 */ a:hover { color: #FF00FF; }

/* 已选择的链接 */ a:active { color: #0000FF; } ```

其他选择器

还有不常用的伪元素选择器和属性选择器。

颜色、透明度、亮度等调节···

颜色

颜色通过RGB/HSL(色相/鲜艳度/亮度)/alpha(透明度)调节。

字体

css拥有font-family，可以进行各种字体。font-size可以调节字体大小····

检查

我们可以在浏览器通过右键检查来调试、观看css等，能够快捷的调整自己网页的css。

总结

青训营CSS基础的讲解对我有着巩固性、启发性、查漏补缺性的知识补充。让我拾起了久违的前端以及对前端产生更加浓厚的兴趣。