CSS基础 ｜ 青训营笔记

CSS基础

属性选择器

 <p><a href="#top">回到顶部</a></p>
 <p><a href="a.jpg">查看图片</a></p>
 ​
 <style>
   a[href^="#"] {
     color: #f54767;
     background: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
     padding-left: 1.1em;
   }
  
   a[href$=".jpg"] {
     color: deepskyblue;
     background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
     padding-left: 1.2em;
   }
 </style>

1. [属性名]选择含有指定属性的元素
2. [属性名=属性值]选中含有制定属性和属性值的元素
3. [属性名^=x]表示选择以x开头的元素，[属性名$=x]表示选择以x结尾的元素
4. 补充：[属性名*=x]表示选择包含属性值为x的所有属性元素

伪类选择器(Pseudo-classes)

CSS伪类是用来添加一些选择器的特殊效果，语法类似为：

selector:pseudo-class {property:value}

CSS类也可以使用伪类：

selector.class:pseudo-class {property:value}

以下为所有伪类/元素

选择器	示例	示例说明
:checked	input:checked	选择所有选中的表单元素
:disabled	input:disabled	选择所有禁用的表单元素
:empty	p:empty	选择所有没有子元素的p元素
:enabled	input:enabled	选择所有启用的表单元素
:first-of-type	p:first-of-type	选择的每个 p 元素是其父元素的第一个 p 元素
:in-range	input:in-range	选择元素指定范围内的值
:invalid	input:invalid	选择所有无效的元素
:last-child	p:last-child	选择所有p元素的最后一个子元素
:last-of-type	p:last-of-type	选择每个p元素是其母元素的最后一个p元素
:not(selector)	:not(p)	选择所有p以外的元素
:nth-child(n)	p:nth-child(2)	选择所有 p 元素的父元素的第二个子元素
:nth-last-child(n)	p:nth-last-child(2)	选择所有p元素倒数的第二个子元素
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择所有p元素倒数的第二个为p的子元素
:nth-of-type(n)	p:nth-of-type(2)	选择所有p元素第二个为p的子元素
:only-of-type	p:only-of-type	选择所有仅有一个子元素为p的元素
:only-child	p:only-child	选择所有仅有一个子元素的p元素
:optional	input:optional	选择没有"required"的元素属性
:out-of-range	input:out-of-range	选择指定范围以外的值的元素属性
:read-only	input:read-only	选择只读属性的元素属性
:read-write	input:read-write	选择没有只读属性的元素属性
:required	input:required	选择有"required"属性指定的元素属性
:root	root	选择文档的根元素
:target	#news:target	选择当前活动#news元素(点击URL包含锚的名字)
:valid	input:valid	选择所有有效值的属性
:link	a:link	选择所有未访问链接
:visited	a:visited	选择所有访问过的链接
:active	a:active	选择正在活动链接
:hover	a:hover	把鼠标放在链接上的状态
:focus	input:focus	选择元素输入后具有焦点
:first-letter	p:first-letter	选择每个<p> 元素的第一个字母
:first-line	p:first-line	选择每个<p> 元素的第一行
:first-child	p:first-child	选择器匹配属于任意元素的第一个子元素的 <p> 元素
:before	p:before	在每个<p>元素之前插入内容
:after	p:after	在每个<p>元素之后插入内容
:lang(language)	p:lang(it)	为<p>元素的lang属性选择一个开始值

组合选择器(Combinators)

名称	语法	说明	示例
直接组合	AB	满足A且满足B	Input:focus
后代组合器	A B	选中B，如果他是A的子孙	nav a
直接子代组合器	A > B	选中B，如果它是A的子元素	section > p
一般兄弟组合器	A ~ B	选中B，如果它在A之后且与A同级	h2 ~ p
紧邻兄弟选择器	A + B	选中B，且选择在紧接A之后的元素，且有相同的父元素	H2 + p

颜色

1. RGB
2. HSL

字体

通用字体族：Serif衬线体、San-Serif无衬线体、Cursive手写体、Fantasy、Monospace等宽字体

使用 Web Fonts:

 <style>
   @font-face {
     font-family: "XXX";
     src: url(https://www.AAA.com/xxx.woff2) format('woff2');
   }
   
   h1 {
     font-family: XXX, Cursive;
   }
 </style>

字体大小

• 关键词： small medium large
• 长度： px em
• 百分数：相对于父元素字体大小

行高：line-height

文本对齐：text-align ，value有left center right justify

字符间距：letter-spacing

字间距：word-spacing

首行缩进：text-indent

文本修饰：text-decoration，可能取值如下：

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

深入CSS（上）

选择器的特异度

布局

• 常规流

  • 行级
  • 块级
  • 表格布局
  • FlexBox
  • Grid布局

• 浮动

• 绝对定位

行级 vs 块级

Block Level Box	Inline Level Box
不和其他盒子并列摆放	和其他行级盒子一起放在一行或拆开成多行
适用所有的盒模型属性	盒模型中的width、height不适用

块级元素	行级元素
生成块级盒子	- 生成行级盒子 - 内容分散在多个行盒中
display:block	Display:inline
body、article、div、main、section、h1-6、p、ul、li等	span、em、strong、cite、code等

display属性：

block 块级盒子

inline 行级盒子

Inline-block 本身是行级，可以放在行盒中；可以设置宽高；做为一个整体不会被拆成多行

none 排版是完全被忽略

名词注解：

IFC（Inline Formatting Context）行级排版上下文

BFC（Block Formatting Context）块级排版上下文

Flex Box

flex-direction:控制排版流向

row从左到右

row-reverse从右到左

column从上到下

column-reverse从下到上

与流向平行的称为主轴，与主轴垂直的称为侧轴

align-items默认为stretch

position 属性

position:relative

相对于自己原本位置布局。不脱离原文档流

position:absolute

相对于最近的不是position:static的祖先定位。不会对流内元素产生影响。

position:fixed

相对于当前视图窗口定位

总结

学习CSS需要掌握选择器、属性、盒模型、网格和弹性盒布局等知识。还需要通过不断练习和实践，并使用浏览器的开发者工具进行调试和调整，才能更好的掌握CSS的使用。