这是我参与「第四届青训营 」笔记创作活动的第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选择器 > 类选择器 > 标签选择器 > 通配符选择器
四、元素
块级元素
- 在浏览器显示中占据一行,并且排斥与其他元素统一行的元素
- 可设置width、height、margin、padding
常见的块级元素:div、h1-h6、form、p、li、ol、li、dl、dt、dd、address、caption、table、tbody、td、tfoot、th、thead、tr
内联元素
- 不能独占一行,与其他行内元素从左往右依次排序
- 不能设置width、height、margin、padding
- 默认宽度为其内容宽度(盒子宽高由内容撑起)
常见的内联元素:a、span、em、br、input、strong、i、img
可变元素
由上下文语境来决定是块元素还是内联元素
常见的可变元素:button、del、iframe、ins、map、object、script
五、盒子模型
标准盒模型
怪异盒模型
标准盒模型 VS 怪异盒模型
六、布局
- 利用css对网页内容的布局进行规划,将主次内容进行
归纳和区分 - 以最适合浏览的方式,将
图片、文字等内容遵循一定的原则,放置到页面不同的位量给用户良好的浏览阅读体验。
常见的布局:静态布局、流式布局、自适应布局、响应式布局、弹性布局
每天学一点点,天天在进步