CSS初学|青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第2天，学习css样式，下面是我个人的一些认知与总结，主要讲解各类选择器

1.CSS是什么

Cascading Style Sheets(层叠样式表)

用于定义页面元素的样式

• 设置字体和颜色
• 设置位置和大小
• 添加动画效果

2.如何在页面中使用CSS

CSS有三种引入方式：外链式，内联式，嵌入式。
2.1.<!--外链-->
<link rel = "stylesheet" href="/assets/style.css">
2.2<!--嵌入-->
<style> li { margin : 0; list-style : none;} </style>
2.3<!--内联-->
<p style=" margin: 1 em 0">Example Content</p>

3.CSS是如何工作的

4.选择器

1. 通配选择器
2. 标签选择器
3. ID选择器
4. 类选择器
5. 属性选择器
6. 伪类选择器 下面是一些伪类选择器的组合方式：

5.CSS中属性的继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值
*{ box: inherit; }
html { box-sizing: border-box; }
.some-widget { box-sizing:content-box; }

6.布局是什么

• 确定内容的大小和位置的算法
• 依据元素、容器、兄弟节点和内容等信息来计算

布局相关技术

页面内会有多个容器，用CSS来控制对应容器的内容来实现页面的布局。 布局常用的相关技术有三种，常规流、浮动、绝对定位。