青训营今日学习任务: 深入css

CSS基础整理

CSS Selector

p1, h1 {} /*逗号选择多种类型的元素 并添加一组相同的样式*/ 

h1,
.special {
  color: blue;
} /* 每个逗号都另起一行 */

标签属性选择器 Attribute Selector

a[href="https://example.com"]{}

伪类与伪元素 Pseudo-classes and pseudo-elements

pseudo-classes

:first-child 由p.id 衍生来。eg. p:first-child 代表第一个p中的内容. 其他例子: :active :checked :first :first-child :hover :not() :nth-child() :nth-of-type()

注意区分first-child和first 选择的内容

pseudo-elements

eg. ::after etc. 俩个::

符号

article > p { }

顺序

The order matters! The latter wins. 最后的requirement win! 包括link css的顺序也matters！

Specificity wins. 目标更效的要求wins id>class>element each size of the element does not matter. you can use specificity calculator to calculate them if there is no conflict, the requirement will still applies.

The !important exception eg button{color:white !important } //会把其他的要求全甩脑袋后面

Inheritance

css flex

Flexbox allows for one-dimensional layout control of items within a container. It provides powerful alignment capabilities and responsive sizing behaviors.

To use flexbox, first define a flex container:

.container {
  display: flex; 
}

This enables flex behaviors for direct children.

Then properties like flex-direction, justify-content, align-items, and flex-wrap can be used to control layout:


.container {
  display: flex;
  flex-direction: row; 
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

flex-direction arranges items in a row or column. justify-content aligns items horizontally. align-items aligns items vertically. flex-wrap allows wrapping to a new line. Flexbox makes building one-dimensional layouts responsive and flexible with less effort. It offers an improvement over float-based layouts.

With just a few lines of CSS, robust layouts can be implemented for a variety of screen sizes.

CSS 小结复习 | 青训营