CSS学习笔记

css学习笔记

在html引入css的三种方式

嵌入
p1{
background-color: #00500F;
font-size: 2em;
text-align: center;
}
内联
 
 Hello World！ 内联

css选择器

* {
 box-sizing: inherit;
}
标签选择器
p {
 margin: 1em 0;
}
id选择器 （#+id）
#example {
 font-size: 2em;
 line-height: 1.6;
 color: red;
 }
类选择器 （.+ class)
.error {
 color: orange;
 }
属性选择器
/* 选中所有的禁用的输入框 */
input[disabled] {
background: #ddd;
color: #999;
cursor: not-allowed;
}

伪选择器

 a:link {
 color: black;
 }/* 未访问过的链接 */
 a:visited {
 color: gray;
 }/* 已访问过的链接 */
 a:hover {
 color: orange;
 }/* 鼠标移到链接上的样式 */
 a:active {
 color: red;
 }/* 鼠标在连接上按下时的样式 */
 :focus {
 outline: 2px solid red;
 } /* 获得焦点时的样式 */

选择器的组合

直接组合E,F，用,隔开
p,.warning { 
 background-color: #00800F;
 } #p标签和warning类组合
后代组合 E F 用空格隔开
div p {
 color: coral;
}  # 选择div的后代p元素
亲子组合 E>F 用>隔开
div>p {
 color: coral;
} # 选择div的子代p元素
毗邻选择器E+F 用+隔开
div+p {
 color: coral;
} #选择匹配所有紧随div元素之后的同级元素p
同级选择器E~F
div~p {
 color: coral;
} #选择匹配所有div元素之后的同级元素p

伪类选择器

:first-child
:only-child
:last-child
:nth-child(A)
:nth-last-child(A)
:first-of-type
:nth-of-type(An+B)
:only-of-type
:last-of-type
:empty
:not(X) #反选

选择器的优先规则

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

参考：css选择器笔记 http://www.ruanyifeng.com/blog/2009/03/css_selectors.html

css选择器参考手册 http://www.w3school.com.cn/cssref/css_selectors.asp

css选择器优先级：https://www.cnblogs.com/zxjwlh/p/6213239.html

样式的覆盖规则

• 根据引入方式确定优先级：优先级由高到低依次为：“内联属性”——>“嵌入”——>“外链”

• 在同一级别后写的属性覆盖先写的：即就是在文件上代码行号更高的优先级更高

• 加有“！important”的样式，优先级最高：即无论哪一种情况，只要在样式上加了important,那么该样式的优先级最高。

• 层叠顺序

  • 当两个元素为正常流时，默认情况下后一个元素比前一个元素层级高，并且允许后面的元素透上来。

  • 如果两个元素是块级元素，文字比背景层级高（因此不管是否设置背景文字始终会透上来）。

  • 如果是行内或行内块，背景比文字层级高（因此只要设置背景，后一个元素将透不上来）。

• 层叠优先级

  • 开发者样式>读者样式>浏览器样式（除非使用!important标记）

  • id选择符>（伪）类选择符>元素选择符

  • 权重相同时取后面定义的样式

参考：CSS层叠顺序https://www.cnblogs.com/pssp/p/5948356.html

层叠优先级https://blog.csdn.net/cookcircle/article/details/82750050

css字体

1. css五种通用字体

• serif字体

• Sans-serif字体

• Monospace字体

• Cursive字体

• Fantasy字体

2. px，em，rems的区别

• px:绝对像素单位

• em:1em等于当前设计元素的父元素上设置的字体大小。相对像素单位

• rem:1rem等于HTML中的根元素的字体大小

边距叠加

1. 触发原因：两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠

2. 解决方法

   1. 浮动元素 使用inline-block

   2. 创建块级元素的上下文（BFC）

CSS布局

position属性的取值

absolute:生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
fixed:生成绝对定位的元素，相对于浏览器窗口进行定位。
relative:生成相对定位的元素，相对于其正常位置进行定位。
static:默认值。没有定位，元素出现在正常的流中
inherit:从父元素继承 position 属性的值

自适应宽度分栏实现形式https://wenku.baidu.com/view/7328508fd0d233d4b14e69c6.html

圣杯布局，双飞翼布局的实现https://blog.csdn.net/wangchengiii/article/details/77926868

网格布局学习网站

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout