CSS叠层样式表 ------装修，画笔画出色彩斑斓的页面
1.<p style="color: ;">你好</p>
2.内嵌形式
<title>无标题<>
<style type="text/css">
p
[
color: #F00; 分号一定要写来结束
]
</style>
3.外链式/链接式 用的最多，数据分开便于维护
创建一个CSS文件
<link herf=" .css" type="text/css" rel="stylesheet"/> 标记处是固定写法
css文件内
p
[
color: #F00; 分号一定要写来结束
]
4.导入式 会造成延时，不用<style>
@imort(url(demo.css))
</style>
5.优先级问题
就近原则：离得最近优先级越高 还是CSS文件的写法更普遍
CSS选择器
CSS文件引入到HTML标签里
<link herf=" .css" type="text/css" rel="stylesheet"/>
<p>你好</p>
最常用三类选择器
标签选择器
p
{
color: #F00;
}
class 选择器
<p class="cl">你好</p>
.el
{
color: #F00;
}
id选择器
<p class="cl" id="d1">你好</p>
#d1
{
color: #F00;
}
标签选择器页面所有标签都是这种样式
class可以共用重复
<p class="cl" id="d1">你好</p>
<p class="c1"></p>
<div class="c1"></div>
id值不能重复
一个标签可以有多个class
<p class="cl c2" id="d1">你好</p>后面的会覆盖前面的
body .c1 空格表示什么下面的标签
{
}
.c1,.c2 ,表示什么和什么的标签
{
}
<p>aaaaaaa</p>
<div>cccccc</div>
<h>ddddddd</h>
css里
* -------------------页面中的所有标签默认
{
color：#F00;
}
/* ---------------------------注释
* /
<><><><><><><><><><><><><><><><>
<div>
<p >aaaaaaaaaaaaaaaaaaaa</p>
<p class="c1">你好</p>
<p >bbbbbbbbbbbbbbbbbbbbbb</p>
<p >cccccccccccccccccccc</p>
<p >dddddddddddddddddddd</p>
<p >eeeeeeeeeeeee</p>
</div>
<p >esffegs</p>
css里
.c1+p +表示紧随的同一级b
{
color：#F00;
}
.c1~p +表示随后的所有同一级b,c,d,e
{
color：#F00;
}
.c1>p div 里的子元素p标签
{
color：#F00;
}
.c1 p div 后面的所有元素p标签
{
color：#F00;
}
html里
<a fref="http://www.pdf">aaaaaaaaaaaa</a>
<a fref="http://www.hao123.com" title="aaaa">vddddddddddddfa</a>
css里
a{title} 设置了 t itle属性的什么标签
{
color：#F00;
}
a{href='http://www.pdf'} 设置了 属性的什么标签
{
color：#F02;
}
a{href='http'} 设置了 签以什么开头属性的什么标
{
color：#F02;
}
a{href=$'http'} 设置了 以什么结尾属性的什么标签
{
color：#F02;
}
CSS选择器权重
<body>
<div class="c1">
<h3 class="c2" id="d2" style=color:#6633;>你好</h3> 标记的权重最高
</div>
</body>
css里
.c1
{
color：#F02; /*c*/
}
h3
{
color：#F02; /*d*/
}
.c2
{
color：#F01; /*c*/
}
.c1 h3
{
color：#F04; /*cd*/大于c
}
.c1 .c2
{
color：#F03; /*cc*/大于cd
}
#d2
{
color：#F02; /*b*/
}
.c1 #d2
{
color：#0F2; /*bc*/
}
内联权重最高
id
属性a{title}
超链接相关、表格细线合并
font-sizefont-family 字体
font-weight 字体加粗
字体相关的属性可以继承
不是所有的CSS属性都能继承
CSS里
a:link { } 一开始
a:visited { } 放上去
a:hover { } 鼠标点的那一刻
a:active { } 鼠标点了之后
l link
v visited 这四个是有先后顺序才能显示效果
h hover
a active
HTML里
<table>
<tr><th>姓名</th><th>年龄</th><th>性别</th><th>学号</th></tr>
<tr><td>张三</td><td>21</td><td>难</td><td>001</td></tr>
<tr><td>张三</td><td>21</td><td>难</td><td>001</td></tr>
<tr><td>张三</td><td>21</td><td>难</td><td>001</td></tr>
<tr><td>张三</td><td>21</td><td>难</td><td>001</td></tr>
<tr><td>姓名</td><td>年龄</td><td>性别</td><td>学号</td></tr>
<tr><td>姓名</td><td>年龄</td><td>性别</td><td>学号</td></tr>
<tr><td>姓名</td><td>年龄</td><td>性别</td><td>学号</td></tr>
<><><><>
CSS
table
{
weigh：500px;
height:400px;
border-collapse;collapse; 边框合并
}
th,td
{
border:solid lpx red; ----------------边框设置
text-aglin:center; 文本居中
}
边框，背景
<div id="d1"></div>
CSS里
solid 实现
dotted 点点
#d1
{
border-style：solid;
border-width:5px;
border-color:#00F;
}
由上到下执行
背景
<div id="d1"></div>
#d1
{
height:200px;
width:5px;
border: solid 1px #00F; 可合并
background-image:url(相对路径);小于富容器会横纵向铺满
background-repeat：repeat-y;no-repeat默认显示在左上角
background-position：10px 20px; -------------图片方位
background-color： 颜色
}
#d1
{
设置文字的高度宽度
}
body
{
height:200px;
width:5px;
border: solid 1px #00F;
background-image:url(相对路径);小于富容器会横纵向铺满
background-repeat：repeat-y;no-repeat默认显示在左上角
background-attachment：fixed ------------图片固定 也可以合成一句话
background:blue url("1.jpg") no-repeat fixed 10px 20px; 最后一个是方位
}
<div id="d1">nongsaeafffffffffff</div>
#d1
{width
height:
overflow:hidden； 超出部分隐藏
overflow:auto； 超出部分出现滚动条
overflow:scroll 超不超出都有滚动条
}
<div class="c c1">nongsaeafffffffffff</div>
<div class="c c2">nongsaeafffffffffff</div>
.c
{
width
height:
border:solid}
.c1
{
display:none; 隐藏位置不占位置
visibility：hidden 隐藏占位置
}
.c
{
width：100px;
height:100px;
border:solid 1px red;position:absolute; -----------脱离文档流不会单独占一行会合在一起
}
块级元素每个单独占一行.c1
{
.c1
{
background-color:#F00;top:10px;
left: 20px;
z-index:3; 控制快的层级，数字越大越上层
}
.c2
{
background-color:#F00;
top:20px;
left: 30px;
}
.c3
{
background-color:#F00;
top30px;
left: 40px;
}
width：100px;
height:100px;
border:solid 1px red;width：100px;
height:100px;
border:solid 1px red;width：100px;
height:100px;
border:solid 1px red;div
{
width：100px;
height:100px;
border:solid 1px red;display:inline; ---------------块元素变成行内元素
}
span
{
width：100px;
height:100px;
border:solid 1px red;display:block； -----------------行元素变成块元素
display：inline-block; 行块元素的特点都有
}
分享课
web前端的全栈之路
重构（UI工程师） HTML和CSS
web前端开发 更偏向编码
后台开发 写业务后台
基础研究 高深算法
移动客户端开发 iOS 安卓
Java script 能做什么
·服务器：express、Koa、Pomelo
前两个倾向短链接 后面长连接
·游戏:cocos2d-js,cocos2d-html5,egret
手机app：react-native，Cordoba，appcan
pc软件：electron，NW.js
AR VR:A-Frame、Three.js （3D的库）
全栈工程师的优缺点
优点
全局性思维
沟通成本 减少错误
技术leader
创业公司
地位的转变
乐趣更多
缺点
不能兼顾所有
面试容易吃亏
需要付出更多的努力
前端和后端有哪些区别及误区
依托的技能不一样
前端：经验型工种， 后端：在乎思维的工种 -------- 思考架构的思维方式
思维方式不一样
前端：由点及面 性能的优化，请求的减少，缓存的
后端：由面及点 怎么设计一个合理的架构，在考虑如缓存用哪种
误区一：自己试全栈吗？
后端是需要大大小小项目的参与
误区二：用前端的思维方式去解决服务端的问题
注重细节。
服务端的思维应该是坚持2-8法则，大部分精力放在常用的功能
建议
考虑全局，由面及点
考虑系统的稳定性在先，在这基础上去优化性能，不要吹毛求疵
坚持二八法则，不要过度设计，把大部分的精力放在功能上
鹅厂前端现状
深度和广度并存
通道答辩方向
前端方向、终端方向、后台方向note.js、富媒体方向
优秀前端的门槛越来越高
重构向前端发展、前端向全栈等多方向发展、提升自身的不可替代性
主营业务：web前端（性能、流量、安全、加速、流程等） 一定了解
js基本功
技术广度（后台、终端、富媒体）
入门书籍
106
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
