CSS基础｜青训营在页面中使用css 选择器标签 id 类属性选择器伪类：状态性伪类结构性伪类状态性伪类：

在页面中使用css

 外链
 <link rel="stylesheet" href="xxx">
 
 嵌入
 <style>
     h1{}
     .class{}
     #id{}
 </style>
 
 内联
 <h1 style="xxx"></h1>

选择器

标签

类

属性选择器

 [disabled]{}
 input[type="password"]{}
 
 a[href^="#"]{}//以#开头就会被匹配上
 a[href$=".jpg"]//以.jpg结尾就会被匹配上

伪类：

状态性伪类

结构性伪类

状态性伪类：

 a:link{}//默认状态
 a:visited{}//访问过
 a:hover{}//鼠标移动到上方时
 a:active{}//点击时
 :focus{}//选中时

结构性伪类

 li:first-child{}//父级第一个孩子
 li:last-child{}//最后一个孩子

组合

名称	语法	说明	示例
直接组合	AB	满足A同时满足B	input.error
后代组合	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

示例：

 <article><h1>拉森火山国家公园</h1><p>拉森火山国家公园是位于...</p><section>
     <h2>气候</h2>
     <p>因为拉森火山国家公园...</p>
     <p>
         高于这个高度，气候非常寒冷...
     </p>
     </section>
 </article>
 <style>
     article p{color: black;}
     article > p{color:blue;}
     h2 + p{color:red;}
 </style>

选择器组

 p,h1{}

颜色

RGB

三种颜色，数值从0-255

HSL

色相（Hue）：色彩的基本属性，如红色、黄色等；取值范围是0-360.

饱和度（Saturation）：色彩的鲜艳程度，越高越鲜艳；取值范围0-100%。

亮度（Lightness）：颜色的明亮度，越高越亮；取值范围是0-100%。

alpha透明度

0为透明，1为不透明。

字体font-family

 font-family:a,b,c;

字体后有不同的属性值，目的是为了适应不同设备。注意最好加上一个通用的字体，这样所有的浏览器都可以使用该字体。

英文字体最好写在中文字体前面。

使用Web Fonts

 @font-face{
     font-family:"xxx";
     src:url(http://xxx) format('woff2');
 }

外部字体。

字重font-weight

 font-weight;100;最小
 font-weight:900;最大

表示字体的粗细

行高line-height

空格white-space

 white-space：normal；去掉所有空格
 white-space：nowrap；强制不换行
 white-space：pre；保留所有空格
 white-space：pre-wrap；保留空格，显示不下会自动换行
 white-space：pre-line；合并空格，自动换行

空格与换行相关。

选择器的特异度（Specificity）

用于解决不同选择器指向相同目标时的样式优先顺序的问题。

示例：

 <button class="btn">普通按钮</button>
 <button class="btn primary">主要按钮</button>
 <style>
 .btn {
 display: inline-block; 
 padding: .36em .8em;
 margin-right: .5em;
 Line-height: 1.5;
 text-align: center;
 cursor: pointer;
 border-radius:3em;
 border: none;
 background: #e6e6e6; 
 color: #333; 
 }
 .btn.primary {
 color: #fff;
 background: #218de6;
 }
 </style>

可以实现复用。

继承

某些属性会自动继承其父元素的计算值，除非显示指定一个值。

例子：

 <p>This is a <em>test</em> of <strong>inherit</strong></p>
 
 <style>
 body{
     font-size: 20px;
 }
 p{
     color: blue;
 }
 em {
     color: red;
 }
 </style>

有些属性可以继承，但有些属性比如宽度这种不可以继承。

显式继承

如果想让那些不可以继承的属性继承，我们可以使用显示继承。

示例：

 * {
     box-sizing: inherit;
 }
 html{
     box-sizing: border-box;
 }
 .some-widget{
     box-sizing: content-box;
 }

通过利用inherit关键字，开启显式继承，然后再去指定被继承的父类。

初始值

CSS中，每个属性都有一个初始值。

可以使用initial关键字显式重置为初始值。

CSS计算

盒子模型

width

取值为长度、百分数、auto。

auto由浏览器根据其它属性确定。

百分数相对于容器的content box宽度。

height

取值为长度、百分数、auto。

auto取值由内容计算而来。

百分数相对于容器的content box高度。

容器有指定的高度时，百分数才生效。

padding

指定元素四个方向的内边距。

border

三种属性：

border-width
border-style
border-color

四个方向：

boder-top
border-right
border-bottom
border-left

margin

指定元素四个方向的外边距。

使用margin:auto水平居中。

margin collapse：在元素垂直排列的时候，他们之间的间距不会相加，而只会选择两者中的最大边距作为间距。

overflow

来解决content内容超出border时的排版问题。

三个值：

visible
hidden
scroll

块级 VS 行级

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

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

display属性

block 块级盒子

inline 行级盒子

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

none 排版时完全被忽略

Flex Box

display:flex 使元素生成一个块级的Grid容器。
一种新的排版上下文
它可以控制子级盒子的：
- 摆放的流向（←→↑↓）
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行

示例：

 <div class="container">
     <div class="a">A</div>
     <div class="b">B</div>
     <div class="c">C</div>
 </div>
 <style>
 .container {
     display: flex;
     border: 2px solid #966;
 }
 .a, .b, .c {
     text-align: center;
     padding: 1em 
 }
 .a {
 background: #fcc;
 }
 </style>

主轴与侧轴

主轴的对齐：

justify-content:

flex-start
flex-end
center
space-between
space-around
space-evenly

侧轴的对齐：

align-items:

flex-start
flex-end
center
stretch
baseline

Flexibility

可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
flex-grow 有剩余空间时的伸展能力
flex-shrink 容器空间不足时收缩的能力
flex-basis 没有伸展或收缩时的基础长度

示例：

 <style>
 .a, .b, .c {
     text-align: center;
     width:100px;
     height: 1em;
 }
 .a {
     background: #fcc;
     flex-grow: 2;
 }
 .b {
     background: blue;
     flex-grow: 1;
 }
 .c{
     background: green;
 }
 </style>

Grid布局

与flex不同，grid布局是二维的布局。

display: grid使元素生成一个块级的Grid容器
使用grid-template相关属性将容器划分为网格
设置每一个子项占哪些行/列

划分网格

grid-template-columns: x,x,x;
grid-template-rows: x,x,x;

grid line 网格线

两种划分方式：

 //第一种
 grid-row-start: 1;
 grid-column-start: 1;
 grid-row-end: 3;
 grid-column-end: 3;
 
 //第二种
 grid-area: 1/1/3/3;

float浮动

position属性
static	默认值，非定位元素
relative	相对自身原本位置偏移，不脱离文档流
absolute	绝对定位，相对非static祖先元素定位
fixed	相对于视口绝对定位

如何学习CSS

充分利用MDN和W3C CSS 规范
保持好奇心，善用浏览器的开发者工具
持续学习，CSS新特性还在不断出现

CSS基础｜ 青训营