CSS知识 | 青训营笔记

92 阅读2分钟

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

一、什么是css?

CSS(Cascading Style Sheets)层叠样式表,专注于页面的表现层。

二、css引入方式

内嵌式

把所有的css样式都写在<style></style>标签内,<style></style>放在head标签内

外链式

把所有的css样式均放在一个css单独的文件里(后缀名xx.css),在html里通过<link rel=”stylesheet” href=”css文件路径” />来引入外部的css。

三、选择器

通配符选择器 优先级 0.5

标签选择器 优先级 1

类选择器 优先级 10

id选择器 优先级 100

内联样式 优先级 1000

选择器权重:
内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器

四、元素

块级元素

  1. 在浏览器显示中占据一行,并且排斥与其他元素统一行的元素
  2. 可设置width、height、margin、padding

常见的块级元素:​divh1-h6formpliollidldtddaddresscaptiontabletbodytdtfootththeadtr

内联元素

  1. 不能独占一行,与其他行内元素从左往右依次排序
  2. 不能设置width、height、margin、padding
  3. 默认宽度为其内容宽度(盒子宽高由内容撑起)

常见的内联元素:aspanembrinputstrongiimg

可变元素

由上下文语境来决定是块元素还是内联元素

常见的可变元素:buttondeliframeinsmapobjectscript

五、盒子模型

标准盒模型

怪异盒模型

标准盒模型 VS 怪异盒模型

六、布局

  1. 利用css对网页内容的布局进行规划,将主次内容进行归纳区分
  2. 以最适合浏览的方式,将图片文字等内容遵循一定的原则,放置到页面不同的位量给用户良好的浏览阅读体验。

常见的布局:静态布局流式布局自适应布局响应式布局弹性布局

每天学一点点,天天在进步