前端 CSS初次总结 | 青训营笔记

龙宁
104 阅读3分钟

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

4ec4099c3b3f865aff247ef98d54c357.png

CSS初识

我的笔记是建立在已经学过粗略学过一边CSS的基础上总结的

CSS的初步理解

CSS即Cascading Style Sheets（层叠样式表）,用来定义页面元素的样式

简单理解，CSS就是通过选择器得到某个标签或某些标签的控制权，对它们的属性进行修改，从而改变字体的样式，元素的排版达到美化页面的作用

在这其中每个元素又或是标签是被看作盒子的，即CSS的盒模型，调整好盒子的内容，内边距，边框，外边距，即可让各个元素看起来顺眼

CSS还有排版模型，正常布局流，弹性，浮动，定位各司其职。顶部的导航栏一直在顶部，尽管滚动页面。一些提示会随着页面滚动而动但是不会超出页面底部。这都和排版有关

CSS的一些重点

在HTML里面应用CSS

内联样式表

直接在HTML元素的style属性中写CSS。这种方式不建议使用

image.png

内部样式表

在<head>标签里用<style>标签，然后开始在style标签里写CSS。这种方式建议是随便写用来测试的时候使用 image.png

外部样式表

在后缀为.css的文件中直接写CSS，然后在<html>文件中<head>标签内用<link>引入外部CSS资源

<link rel="stylesheet" href="styles.css">

这是最推荐用的方式，因为这才达到了将html和样式分开的目的

选择器

CSS中，选择器用来指定网页上我们想要样式化的HTML元素

  • 元素选择器

p { }

  • id选择器

#box { }

  • 类选择器

.doors { }

  • 标签属性选择器

元素有某个属性img[alt] 或者某个值 img[src="image.png"] { }

  • 伪类选择器

样式化元素的一些状态 a:hover { }

  • 伪元素选择器

样式化一个元素的某个部分而不是元素自己 p::first-line { }

  • 后代选择器

ul li

  • 子代选择器

ul > li

  • 相邻兄弟选择器

p + div

  • 通用兄弟选择器

p ~ div

盒模型

在CSS中所有元素都可以看作被一个盒子包裹。

盒子分为块级盒子和内联盒子

块级盒子：
1.盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
2.每个盒子都会换行
3.width和height属性可以发挥作用 4.内边距，外边距和边框会将其他元素从当前盒子周围”推开“

内联盒子：与块级盒子相对

另外CSS可以通过display属性改变元素在页面中的盒子类型，但是改不了本质

盒模型的各个部分

内容，外边距，内边距，边框

box-model.png

引用参考

mdn developer.mozilla.org/zh-CN/docs/…

对于CSS名词的定义是对mdn中解释的一个理解版

avatar
文章
阅读
粉丝