跟着狂神学CSS

层叠

就是一层一层，上面的会覆盖下面的，比如标题文字color覆盖底层background

是学了以后怎么像狂神说的，"疯狂的去练"

狂神说，想写一个什么什么的程序，你要今天想，明天去做，这才是对的，光想是一辈子都做不出来的

CSS最重要的(也最难的)是选择器 主要用来美化网页 比如文字，阴影，超链接，列表

菜鸟教程 - 学的不仅是技术，更是梦想！ 菜鸟教程

前端和后端最大的区别就是css

规范

选择器 {

声明1;

声明2；

}

比如 h1 {

color: red

}

html文件与css关联方式如下

<link rel="stylesheet" HREF="css/style.css"/>

行内样式也行

<h1 style="color: red"> 我是标题</h1> 偷懒情况，不建议

外部、内部、行内样式，就近原则，最靠近"我是标题"的那个代码生效

选择器:

1 标签选择器

.h1 {

}

<h1> </h1>

2 类选择器

.tang {

color: red;

}

<h1 class="tang">标题1 </h>

<h1 class="tang"> 标题2</h>

类选择器可以复用

3 id选择器

id不能用数字开头

#tang {

color: red;

}

<h1 id="tang"> 标题1 </h>

id不能复用，全局唯一，上面代码如果再加

<h1 id="tang"> 标题2 </h> 会编译报错

选择器优先级: id>类>标签

狂神说 博客园 去广告 display = none

窝草 博客园还可以自己改？？？ 玩一玩博客园

好的 下一目标，做一个自动去广告的插件

层次选择器

后代选择器(后面的所有)

body p{

background: red}

子选择器 body>p {

background: red

}

相邻兄弟选择器(向下选(同级)一个)

.active +p {

background: red

}

<p class="active"> p1 </p> 

通用选择器((向下选(同级)所有)

.active ~p {

background: red

}

<p class="active"> p1 </p> 

结构伪类选择器:

ul li first-child {

   background: red

},

ul li last-child {

   background: red

}

p: nth-child(1) { // 按顺序

   background: red

}

p: nth-of-type(1) {//按类型

   background: red

}

<p>p1</p>

<ul>

<li> li1</li>

<li> li2</li>

<li> li3</li>

</ul>

带冒号:的都是伪类选择器

border-radius: 24px 圆角

border-radius有4个px，分别代表左上 右上 右下 左下， 顺时针方向

box-shadow是阴影

box-shadow: 10px 10px 100px yellow

margin: 0 auto是自动居中，需要与text-align:center一起使用

网页另存为，就能把所有对应的图片和html下载下来

可以搜索 源码之家，搜索登录，下载代码

前端要多复制别人的代码，因为自己没有美工经验，"前端都是抄来抄去的"

也可以搜索 后台管理系统 模板之家

门户网站 模板之家

还可能学习 Layui

不要重复造轮子

vue-element-admin 是个啥

bootstrap过时了，element-ui比较流行

ice.work 类似于element-ui有很多组件

属性选择器:

=xx 完全匹配

*=xx 包含xx

^=xx 以xx开头

$=xx 以xx结尾

例如:

a[id]  {

background: yellow

}表示存在id属性的元素，background都要变成yellow

a[id=first]  id为first的，background都要变成yellow

a[class*=link] class名包含link的

a[href^=http] href以http开头的，background都要变成yellow

字体篇章：

font-family  选择字体，比如微软雅黑(默认的)，可以同时设置英文，中文两种字体: "Arial Black", 楷体

font-weight:字的粗细，可以使bolder，也可以填0~900

还有是否是斜体 oblique

放在一起的写法就是

<style>

p{

font: oblique bold 20px/50px "楷体";

}

</style>

其中 50px是line-height,那么20px是啥？哦 20px是字体的大小

排版

text-align: center, right, left 居中

text-indent: 2em缩进 // 1em你可以理解为当前元素字体的大小，缩进2em就是缩进两个字

p{

height: 300PX

line-height: 300PX

}

height是整个块的高度，而line-height是一行的高度，所以要上下居中的话，就得height和line-height一样都是300px

text-decoration: underline, line-through,overline 下划线，中划线，上划线

文本和图片水平对齐:  vertical-align: middle，

伪类:

a:hover{//鼠标悬浮的颜色, 只需要记住这个

   color: orange,

font-size:50px //悬浮后字体变成50px

}

a:active {//鼠标摁住未释放的颜色

  color: green;

}

a:visited {//点击以后的颜色

color:red;

}

text-shadow: red 10px 10px 10px

颜色 水平偏移 垂直偏移(可为负) 阴影半径

列表:

list-style:none 去掉列表前面的原点

circle 空心圆

decimal 有序列表 1.2.3

square 实心正方形

背景图像:

背景颜色

background-color:red

背景图片 

background-image: url("image/tx.jpg") //默认是全部平铺的 即为repeat

xxx

xxx

 background-repeat: repeat-x

xxx

 background-repeat: repeat-y

y

y

y

 background-repeat: no-repeat

x

在类选择器里面, background可以这样合起来用

.title {

background: red url("../image/d.gif") 200px 10px no-repeat //背景颜色 图片地址 图片位置x轴y轴 平铺方式

}

或者

ul li{

background-image: url("/image/r.gif");

background-repeat: no-repeat;

background-position: 150px 2px;

}

渐变:

linear-gradient

radial-gradient

可以去网站Grabient 找渐变方案copy

改css代码，最好在审查元素的style里面改

盒子模型:

margin 外边距

padding 内边距

border 边框

边框

1 边框的粗细，样式(实线solid还是虚线dashed)，颜色 

border: 3px dashed black;

body,h1或者h2，都默认有8个margin,需要如下初始化

body,h1,ul,li{

margin: 0;

padding:0;

text-decoration: none;

}

选择器可以多个使用，比如下面的就是结合了nth-of-type和后代选择器

div: nth-of-type(1) input

margin-left :0, padding-left:0 或者 padding: 0 0 0 0 /上右下左

margin: 0 auto; 默认居中， 其中0是外边距，auto感觉是自适应巨宗

margin: 0 1px 代表上下为0 左右为1

盒子计算方式: margin + border + padding +内容宽度

块级元素(独占一行)

h1~h8 p div

行内元素

span a img

display: 

block 块元素

inline-block 既是行内，也是块元素，仍然是一个正方形块，但是可以在同一行

inline 行内元素，类似于android的wrap-content

none 不显示

float : 

靠左浮动 left

right

不过浮动的时候，调整网页窗口大小时，图片文字会重新排列，造成布局很乱

这个时候需要用 clear:both来处理这些图片，那么这些图片会变成块元素，就不会乱浮动了

clear:right 右侧不允许浮动

float比display更常用，因为float可以向左，向右飘动，display就不能随便飘动了，但是float要解决父级边框塌陷

处理父亲级别边框塌陷(就是缩放窗口会乱七八糟)

方案1: 设置父类元素的宽度 800px

方案2: 加空div标签

<DIV CLASS "CLEAR"></DIV>

.CLEAR {

CLEAR:BOTH

}

方案3:

父级元素增加overflow: hidden

overflow: scroll 滚动条模式, hidden 超过的部分隐藏

方案4:

父类添加一个伪类: 只要记住这个就行了, 经常考

#father {

}

#father: after {

   content: '';

display: block;

clear:both;

}

其实和方案1 有点像，但是这样更常用，更优雅，

下面这个图就是父级边框塌陷，边框是最上面的矩形，但是图片都到父级边框下面去了，实际上html代码中，图片是在边框(div)里面的，所以需要解决这种问题，

相对定位

background-color: 背景颜色，比如某个div内的背景颜色

position: relative; //相对于自己原来的位置进行偏移 上下左右， 原来的位置仍然会保留

top: -20px  //就是距离上边减去20

left: -20px //就是距离左边减去20

绝对定位

position: absolute

1. 父元素没有定位，就相对于浏览器定位

<div id="father">

 <div id="child"> </div>

</div>

2.  假设父级元素存在定位，则是相对于父级元素进行偏移

3. 在父级元素范围内移动   就是px不能是负值-10px 而且原来的位置不保留，就是狂神里面的第二个元素，没有保留

固定定位

position: fixed;

right:0px;

bottom:0px;

z-index 层级:

z-index: 0 是最低级, 最高级是无限

opacity: 0.5 背景透明度

.tipBg {

background: #000;

opacity: 0.5; 

}

动画

keyframe 可以去菜鸟教程学习

transition: width 2s 这句话的意思是，宽度改变从开始到结束，要两秒时间

好像用javascript做动画比较多?

很多东西，去找资源，不要重复造轮子，，找资源是最快的 -- 这句话很重要，狂神找资源是真的NB！！

Less语言 

是使用编程语言的方式来生成css文件

 

canvas动画

MAP | Kaspersky Cyberthreat real-time map 卡巴斯基全球监控地图

可以用ProcessOn画流程图、思维导图: ProcessOn - 免费在线作图，思维导图，流程图，实时协作