Youtube课程CSS zero to Hero笔记

course link

• CSS Tutorial - Zero to Hero (Complete Course)

CSS

• cascading style sheet
• 添加方法：一般用link加到html的head里面
  • 测试方法，可以直接把background设置成别的颜色运行一下试试

Selectors & Properties

selector是什么

• 目的：把css的文件和多个html组合起来
• 有很多种类
  • element:直接使用html里面的tag，会改变这个tag的所有要素（body,p）
  • class:自己设定class的名字，使用html element的时候加上这个class。（.aclass）
  • id: 前面加上#，给element设置id，然后只改变这个id的内容(#sometext)

重要概念specificity

• 目的：在css里面，对同样东西不同style设定的时候，override的优先级
  • 比如同样的文字，一个设定成红色一个设定成蓝色
• 优先级
  • in-line style > id > class > element
  • in-line是直接在element里面写style="color: aliceblue"
• id和class的使用区别：
  • class会用很多次
  • id应该只为了一个东西存在

pseudoselectors

不仅可以加到element上面，也可以加到id或者class

• hover

  • 添加鼠标移动到上面时候的样式（但是不能覆盖id和inline style）
    • 可以用在所有种类的元素上面
  • 类似的用法可以处理a

    a:link    {color:green;}
    a:visited {color:green;}
    a:hover   {color:red;}
    a:active  {color:yellow;} 点击的时候

• first-child/last-child/nth-child(n)

  • 比如一个ul里面有很多li的时候，只让第一个/最后一个/第n个改变
• only-child：如果有child的元素，里面只有一个元素 li:only-child

Advance Selector

虽然这里的例子写的都是element的selector，但是实际上也可以和id以及class组合

• h2 + a找到所有h2下面的a tag并且改变
  • 这个方法可以和上面的pseudo一起用
• textarea ~ button找到和这个area 一个perent的button
  • 必须是在一个parent里面的，如果是加号的话只要位置挨着就行
• ul > li对于在ul里面的每一个 直接的li都会改变。比如如果在ul里面又加一个ol，那ol里面的li就不会变了
• ul li 对于在ul里面的 所有li

Attribute Selector

element[attr=value]

• attr可以设置成class，src，等等element里面的任何attribute
• src设置的时候也可以不用绝对值用pattern ^&*~加在等号前面
• CSS selector的列表参考

什么是properties

• 修改选中的element的内容的属性
• 必须有冒号和分号

总体思路

• 可以现在html里面给所有需要的内容加上class或者id，然后再统一写

Coloring & Formatting

• 文字的颜色：color
• 背景的颜色：background

用image做background

• 可以直接用url引用图片(在线的或者本地的都可以)
• background-image或者直接用background都可以实现，不加后面的比较灵活

一些常用的背景设置选项

• 当图片不够大的时候，他会自动repeat来填满这个地方
• 加图片可以不从html里面加，而直接设置一个div，然后从css里面加背景
• background-repeat:no-repeat 会只显示一张图，其他的这块区域都会空着
• background-size:50px 100px; 前面的是高度，后面的是宽度
• background-size:cover;:会去掉图片的一部分，让他可以完整的比例正确的显示在应该在的区域
• background-size:contain;

透明度

• 用在渐变上面比较方便
• 颜色：用rgba（0~1）之间

渐变

• radial:
  • background: radial-gradient(red, blue);
  • 会从中间蔓延到周围
  • 也可以设置各个颜色的百分比，或者设置设置形状
• linear:
  • background: linear-gradient(to right, red, blue);
  • 前面要先设置方向:上下左右，左上等等，或者直接使用角度
  • 然后后面可以加上喜欢的颜色，带不带透明度的都可以

unit的不同种类

• 绝对unit：比如英尺，厘米之类的
  • 不管在什么硬件上面，都会显示这个尺寸
• 相对unit
  • 百分比：比如width: 70%;是指占这个parent的百分之70，如果缩放现在的屏幕的话，里面的东西的大小也会跟着改变
  • em:和标准的字体比的倍数，比如2em就会变成大小的两倍
  • vw：占这个view宽度的百分比，view会比body大一点。比如width:70vw
    • vh是高度的百分比
• 比较特殊的px
  • 虽然他是一个概念上的绝对值，但是也会根据不同硬件而改变
  • 比如如果一个400px的东西显示在一个分辨率很高的电视上，可能实际页面的一个px占电视的三四个px
  • 其他类似的单位pc > pt > px

建议在高度上选择绝对的单位，但是在宽度上选择相对的单位

• 因为高度可以往下拉，但是宽度和硬件的长度关系非常大
• chrome的inspect可以直接改变画面的尺寸

Font & Text Multipulation

• font和text的区别
  • font定义了字体，大小，加粗等等
• text
  • 定义了一些什么字体都能用的东西

text具体

• text-decoration
  • 可以加一些线，比如下面加横线，删除线，上面加线，什么线都没有之类的
• text-transform
  • 全部大写，小写
• text-align
  • 把文本对齐，比如居中，向左，向右等等
  • justify努力让所有的文字分布均匀，让每一行一边长

Font具体

• font-size em，px等等
• font-weight变细加粗属性，一般是从100～800。400可能是比较普通的
• font-style，普通，斜体，更斜(oblique)等等

font family

• 就是设置字体，选择不同的关键词设置就可以了
  • sans-serif,看起来比较容易 -> 没有衬托线，只留下字体的主干，类似于苹果自带字体那种感觉
    • serif体就是类似于宋体那种感觉
  • font-family: "Times New Roman", serif;先找第一种能不能用，不能用的话就换成第二种
  • 一般可以多准备几种，防止因为浏览器等等的原因这个字体崩溃
• 找到字体的方式
  • google font。可以在上面自定义（最好只选自己需要的），然后直接用代码加到需要的css里面
  • google font都给设定好了，只需要把需要的字体加进去就行了
  • font-family: "Merriweather", serif;google自带的代码就会帮忙设定备用的字体，这样如果连不上网的话，就会自动载入第二种字体。需要保证第二种字体所有电脑上都能载入

基础Layout

Box model

• 每个element都在一个box里面
• content -> padding -> border -> margin
  • padding:不会移动content，internel
  • border：主要是分界线的作用，可以style
  • margin：移动，externel

border

border: 5px solid red;

• 三个属性，大小，style和颜色，style包括实现
  • soild,dotted,dashed,double是几种常用的种类，包括实线，点线，虚线和
• 可以根据border和content的距离看出来有没有padding

padding margin

• padding和margin的语法
  • 如果只给一个参数，会在各个方向加上padding padding: 3cm;
  • 可以加上一个参数表示在哪个方向padding padding-right: 40px;
  • padding: 100px 40px 5px 0; 上，右，下，左
  • margin: 80px 40px;，第一个参数是上下，第二个是左右
• margin
  • 给边缘外面加上空间

float & display type

• inline：就像在图片旁边环绕的效果一样 -> span。不会单起一个部分
• float:
  • float: right;可以把现在的东西移动到一个位置，然后其他的内容自动往上顶
  • 相当于把图片扔到文字的群里面
• display
  • display: none;可以直接把这个元素从画面上隐藏掉，也不会占用相应的空间
  • display: inline-block;：
    • 组合两种方法，虽然不会创建一个新的line，但是还是给留了一个可操作的block空间

Flexbox

可以自动完成一些排版的问题。

• container：一个parent的element，一般都用div
• item：children

创建container

• display:flex;

direction & wrap

• container的属性
• 可以改变flex分布元素的方式，行还是列，也可以reverse顺序
  • flex-direction: row;
  • flex-wrap: wrap;可以让他自动换行，不会挤在一行

content alignment

• justify-content: flex-end;
  • 可以让他往左，往右或者居中
  • space-around/around可以让他均匀的分布
• align-items: center;可以让他在container里面居中（和上面的方向不一样）
  • 具体是哪个方向取决于flex-direction
  • strech拉长
  • baseline虽然大家大小不一样，但是所有都根据一个baseline为基准

item

flex item order

<div class="container-item" style="order: 5;">A</div>
可以直接给每个item里面设定需要出现的order，index从1开始不从0开始

grow, shrink, basis

• flex-basis: 100px;指定他们的宽度
• flex-grow: 数字设定这个元素占据的地方占所有的地方的多少，默认的是0
• flex-shrink：页面缩放的时候和其他的相比的比例。数字越大缩放的越快。如果设定成0的话就不会缩放
• 上面的三个属性，可以直接用一个命令flex: 1 1 100px grow，shrink，basis一条命令直接实现

item alignment

• 可以在css里面用text-align: center;来设定具体的alignment，然后在html里面设置单独的
• align-self:flex-start;可以在html里面单独设置。但是不能用baseline和strech里面的，因为他们需要的是整体的布局

Grid

也是一种layout的方式

• 和flex的区别
  • grid手动设定的东西更多，可以customized很多layout
  • flex比较关心width上面的布局，grid width和height两方面都很关注
• 创建grid：只需要把display设置成grid了

template rows/columns

• grid-template-columns: 10px 50px 10px;
• grid-template-rows: 50px 250px;
• 设定行和列的个数，以及每个格子的大小，比如在这里设置了三列，大小分别是10，50，19。又设置了两行，分别是50和250
• 可以直接设置成auto，这样他就会自动帮忙排版了

justify & alignment

• justify-content: center;
  • 不用space between，而是用evenly
• align-content: center;

row/column gaps

• column-gap: 150px; 和row-gap: 100px;，可以控制各个格子之间的距离
• 可以简写成grid-gap: col row

row/column lines

• grid最好用的地方
• grid-column: 1 / 3;
  • 把现在这个项目占的地方从第一列到第三列(占1和2)，其他的项目顺延
• grid-row: 1 / 3;
• 也可以直接用距离表示：span 2占2格子的地方

grid area：直接用一行表示上面的东西

• grid-area: 2 / 1 / span 2/ span 3
  • 顺序是 row start -> column start -> row end -> column end

Animations & Transtitions

transtition

• 属性
  • transition: 300ms linear; 类似于ppt的渐变颜色等等
• transform:
  • translate(50px, 30px) 往右移动50，往下移动30
  • scale(倍数)缩放
  • rotate(30deg)旋转
  • skew(30deg)绕X轴，Y轴等等等转动
  • matrix(xscale,deg,deg,yscale,transX,transY)可以总结上面的所有的

animation

• 一个动画至少有两个keyframe

• 创建关键帧关键词from to或者百分比

  @keyframes red-to-black {
    0% {
      background: chocolate;
      transform: translate(0px, 0px);
    }
  
    50% {
      background: yellow;
      transform: translate(10px, 10px);
    }
  
    100% {
      background: black;
      transform: translate(20px, 20px);
    }
  }

• 增加动画

  • 在需要增加动画的区域里加上animation-name的属性
  • 然后再给动画加上时间animation-duration: 10s;
  • animation-timing-function:linear控制渐变
  • animation-delay: -2s;可以是负值，这样的话刷新的时候就是动画运行2s的时候
  • animation-iteration-count: 2;重复动画
  • animation-direction: reverse;改变动画播放的顺序
• 也可以把上面的内容都写在一个animation里面

Challenge!!