理解CSS与HTML | 青训营笔记

71 阅读2分钟

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

理解前端

大致分为服务端和前端,前端主要由三个部分构成,HTML,CSS和JavaScript下面主要介绍,这三个部分是什么,用来干什么。

HTML

HTML(HyperText Markup Language)超文本编辑语言,不仅仅能够表达文字还能够表达图片,音视频格式。HTML部分决定了网页的结构。

HTML语义化

HTML中的元素、属性以及属性值都拥有了某些特定的含义这样做的好处在于能够增加代码的可读性,可维护性,搜索引擎便于优化。

CSS

CSS(Cascading Style Sheets)主要用于定义页面元素的样式,比如设置字体的大小和颜色,设置元素位置的大小,添加动画效果等。

在页面中使用CSS

在页面中使用CSS主要有如下三种方式:

  1. 外链
  2. 嵌入
  3. 内联

image.png

css是如何工作的

image.png

选择器Selector

选择器种类

找出页面中的元素,以便于给他们设置样式,有多种方式可以选择元素:

  1. 按照标签名、类名或者ID
  2. 按照属性
  3. 按照DOM树中的位置 主要选择器有以下几种:
  4. 通配符选择器
  5. 标签选择器
  6. id选择器
  7. 类选择器
  8. 属性选择器
  9. 伪类:不基于标签和属性定位元素

选择器组合

image.png

选择器优先级排序

  1. !important 在属性后面写上这样的样式,会覆盖掉页面上任何位置定义的元素样式
  2. 行内样式,在style属性里面写的样式
  3. id选择器
  4. class选择器
  5. 标签选择器
  6. 通配符选择器

复杂选择器优先级,后代选择器优先级多种情况

  1. id个数多的优先级高
  2. id和class个数相等,看元素个数,个数越多的优先级越高
  3. 优先级相同时,后面的样式会覆盖前面的样式,不分先后顺序,只看选择器类型和个数