2020/03/14 05-CSS

布局的事情交给美工，那你只需要辅助即可，告诉你这块布局准备做什么，业务上有什么功能，多少行，做下交流，高度宽度，交流之后模你开发你的功能，美工自己做自己的，各自开发各自的，美工做好前端页面，你用django套用这个模版，或者做好所谓的模版，用js，后端纯数据，前后端完全分离，就靠ajax返回json互相通信。
模版可以卸载django中，所以需要懂一些CSS，如果做爬虫就也需要懂

css叫层叠样式表，是非常古老的技术，一般用css2和3,3 才用了模块化更新方式，如果用的浏览器不同，对css3的差异也比较大，基本上都支持css2，但是3可能就不好说了。
前端的兼容性都是和头疼的，html，css，所以要框架来磨平差异

层叠样式表实际上是控制html布局，html本身也是个层次结构，层叠样式表在控制的时候也用了层叠结构的思想

2020/03/14 05-CSS
几乎所有标签都支持style属性，style就可以写样式 了，color之类的

三种方式使用 css

2020/03/14 05-CSS
2020/03/14 05-CSS
要引入外部的css文件，写link 里面写rel href外部引用链接，可以是绝对，相对，可以是http，大多数是相对路径
2020/03/14 05-CSS
基本语法，selector选择器，选择器的能力不亚于document.getelementid，能力狠强大
2020/03/14 05-CSS
a就代表元素选择器，这么久代表所有的a标签都变成红色，有一条线传过去
2020/03/14 05-CSS
color的写法
2020/03/14 05-CSS
可以压缩，一般使用数值表述方式
2020/03/14 05-CSS
rgb三原色来表示
2020/03/14 05-CSS
第一个选择器，标签选择器

2020/03/14 05-CSS
2020/03/14 05-CSS
vscode打开文件夹

2020/03/14 05-CSS
test现在有这么多东西

2020/03/14 05-CSS
这就是要做ajax请求的

2020/03/14 05-CSS
test就是毫无样式可言的
2020/03/14 05-CSS
link链接外部的样式表，我们用页内样式表，给body标签一个样式
2020/03/14 05-CSS
color是改前景色，就是字体颜色，这就是把所有文字颜色都改了，除了链接，控制后久由上往下传递，body标签往下子孙标签传递颜色，通过这种方式就可以知道这种样式可以向下
2020/03/14 05-CSS
已经说明颜色是从不哪里来的，是从body继承下来的

2020/03/14 05-CSS
要保存，这就是标签选择器，选择器在做jquery的时候要用，爬虫的时候也要用，样式是美工做的，最重要的还是选择器
2020/03/14 05-CSS
** 代表所有html标签都管，影响跟body一样大所以基本不用*
2020/03/14 05-CSS

2020/03/14 05-CSS
id选择器用的时候特殊点
2020/03/14 05-CSS
现在是div的颜色不用你管了，body是个全局设定，div就是在针对下面所有div标签的
2020/03/14 05-CSS
如果只想管menu
2020/03/14 05-CSS
现在只有这一块变了
2020/03/14 05-CSS
第一个div就是menu，其他颜色都没变
2020/03/14 05-CSS
这就叫id选择器
2020/03/14 05-CSS

这就是div标签同时id叫menu，js中要求id是一个，写两个代表设计有问题，虽然网页不会报错，但是不建议这么做
2020/03/14 05-CSS
p标签找这个menu就没有2020/03/14 05-CSS
就没有效果
2020/03/14 05-CSS

2020/03/14 05-CSS
css就是通过一些特殊的写法帮你找到你想要变样式的标签
这就是找到menu将颜色，宽度。里面关掉，margin外边距修改

2020/03/14 05-CSS
现在进行一些修改，border-bottom边框底部，现在只控制下面的
2020/03/14 05-CSS
这条线就出来了
2020/03/14 05-CSS
外边框margin，顺序是顺时针，上右下左
2020/03/14 05-CSS
现在就分开一段距离了，因为有边距，一般边距都是5-10PX像素，适当的留白
2020/03/14 05-CSS
现在都是写死的，可以改成less，就可以用变了，之前把less转换成css
2020/03/14 05-CSS
2020/03/14 05-CSS
类选择器起作用就是class，这个标签有class，就是类选择器，类用.点号

2020/03/14 05-CSS
修改下文本居中

2020/03/14 05-CSS

2020/03/14 05-CSS
id是尽量要唯一，class可以复用，center可以在很多上面用
2020/03/14 05-CSS

2020/03/14 05-CSS
这个div是inline，这个div叫块，要占够所有宽度，但是现在要求80%
2020/03/14 05-CSS
这个menu是对外面一层的100%，但是对于body来说，实际跟center一样只有80% 2020/03/14 05-CSS
div居中，margin:auto
2020/03/14 05-CSS
外面的80%指的是div center
2020/03/14 05-CSS
里面的是100%，现在网页布局，两边空出来，中间居中就是这么来的2020/03/14 05-CSS
类可以写多个
2020/03/14 05-CSS
类多个之间用空格隔开，相当于有两个类，一个类叫main，一个类叫center
2020/03/14 05-CSS
**这个意思相当于h1或者h2，颜色都是绿色
**
2020/03/14 05-CSS
层次选择器，这个代表从div下找li，不管多少层都会找到，也就是div下所有子孙的后代中li全部受控制

2020/03/14 05-CSS
只要li在div下面，不管多少层，li就要受影响

2020/03/14 05-CSS
2020/03/14 05-CSS
变颜色了

2020/03/14 05-CSS
表单控制有两种方式，常用的是现在这种方式table，还有一种是div布局，ul li也可以
2020/03/14 05-CSS
inline指的是一行，找到div下li的显示方式变成inline方式
2020/03/14 05-CSS
变成一行了，菜单就是这么做的
2020/03/14 05-CSS
加个链接
2020/03/14 05-CSS
链接不受颜色影响

2020/03/14 05-CSSi
inline横着过去，每个li选个样式就可以做菜单
2020/03/14 05-CSS

2020/03/14 05-CSS
找div，切div class有center，然后去他下面找li
2020/03/14 05-CSS
在下面的div加id
2020/03/14 05-CSS
id是#号，div找一个id为form的，找它下面的li标签
2020/03/14 05-CSS
上面就不受影响了
2020/03/14 05-CSS
2020/03/14 05-CSS
这样就又回来了
2020/03/14 05-CSS
用这种方式就可以进行选择器的选择

2020/03/14 05-CSS
这是后代子孙
2020/03/14 05-CSS
这是任意层次
2020/03/14 05-CSS
2020/03/14 05-CSS
子选择器，前面元素和后面元素找到之后应该具有父子关系，最后控制的层级样式表是最后的标签上
2020/03/14 05-CSS
大于号表示，id=menu的div下的子里面有没有li，子时ul，孙才是li
2020/03/14 05-CSS
现在就没关系了
2020/03/14 05-CSS
这个意思是，div，id=menu下的子ul 下有没有li
2020/03/14 05-CSS
这样就可以
2020/03/14 05-CSS
除非是你就想控制子一级的，要用>号，否则大多数情况是都会控制所有子孙
2020/03/14 05-CSS

2020/03/14 05-CSS
id为menu的div下子孙有ul，ul下子有li
2020/03/14 05-CSS
2020/03/14 05-CSS
先找到div下的p标签
2020/03/14 05-CSS
这个叫相邻兄弟
2020/03/14 05-CSS
符合条件的只有这个，两个p标签必须相邻，第一个p不能被控制，所以只有第二个才能被控制
2020/03/14 05-CSS
2020/03/14 05-CSSp标签就变了2020/03/14 05-CSS
试试加一个p标签，会不会改变
2020/03/14 05-CSS
变了，因为是以第一个为基础找后面的
2020/03/14 05-CSS
这是最重要的使用方式，也就是子孙都受控制，如果影响太大，就在找父的时候把范围缩小
2020/03/14 05-CSS

2020/03/14 05-CSS这些都是常见的，还有伪类，最常用的是锚点的伪类
2020/03/14 05-CSS
锚点的伪类，就是a的伪类，有4种。
link是未访问的时候的样子
visited ，一个链接点击过了就变色了
hover 鼠标挪上去的时候
active 点一下的时候，松手就是visited访问过了。
一般现在都是链接的颜色和访问的颜色都死统一的，鼠标上去的时候提醒别人现在放在哪里
2020/03/14 05-CSS

2020/03/14 05-CSS
点过之后是绿，放上去蓝

2020/03/14 05-CSS
鼠标放上去变蓝
2020/03/14 05-CSS
把这两个去掉
2020/03/14 05-CSS
现在已经变成**的了
2020/03/14 05-CSS
visited一般和link一样，大多数网站都这么做

2020/03/14 05-CSS

2020/03/14 05-CSS
鼠标挪上去才是蓝色的

2020/03/14 05-CSS
2020/03/14 05-CSS
现在控制a标签，不管你点不点都一样，大多数都这么用，只控制一个移动鼠标的颜色
2020/03/14 05-CSS
可以配合着用， a标签，class=red，如果是visited的话颜色就变化
2020/03/14 05-CSS
伪元素，是假元素，本身并不存在
2020/03/14 05-CSS
找到homepage，在之前加一个内容，也就是在a标签前塞一个东西进去
2020/03/14 05-CSS
导航栏的小图片就可以通过样式加进去，可以用less来定义变量，一下子改全部改了

2020/03/14 05-CSS
这里就写了一个before，元素是样式表动态加的
2020/03/14 05-CSS
还有属性选择器，E代表element元素有没有attr属性，有这个属性就把样式的内容填进来，具有某属性的全部可以这么做

2020/03/14 05-CSS
所有有id属性的元素

2020/03/14 05-CSS
有些颜色变调了
2020/03/14 05-CSS
全是有id的受控制了

2020/03/14 05-CSS
这个用的很少
2020/03/14 05-CSS
所有带class属性的
2020/03/14 05-CSS
现在就做了变化了
2020/03/14 05-CSS

2020/03/14 05-CSS
img里面有alt属性=magedu-logo，对它进行处理，修改高度，宽度不管，会等比例缩小
2020/03/14 05-CSS
会控制图表大小

2020/03/14 05-CSS
上面是拥有就行，下面是等值的

2020/03/14 05-CSS
波浪线代表，这要其中有一个属性是value
2020/03/14 05-CSS
也就是现在alt属性有这个值的2020/03/14 05-CSS
2020/03/14 05-CSS
看一下这个元素
2020/03/14 05-CSS
2020/03/14 05-CSS这样就没起作用

2020/03/14 05-CSS
加波浪线就是有一个值即可

2020/03/14 05-CSS
这样就变了
2020/03/14 05-CSS
class带有多值就可以用波浪线来控制了

2020/03/14 05-CSS
2020/03/14 05-CSS

2020/03/14 05-CSS
又回去了2020/03/14 05-CSS
官方的意思是改成减号-，连字符的意思
2020/03/14 05-CSS

2020/03/14 05-CSS
也就是连字符之前的前缀匹配

2020/03/14 05-CSS
必须要一个整体，虽然是前缀匹配，但是要求连字符之前的完全匹配
2020/03/14 05-CSS
一般用波浪线

2020/03/14 05-CSS
body刚才做了，子子孙孙都继承，个别有自己的属性，其他都受影响
2020/03/14 05-CSS
font可以调字体大小，颜色，还有family，什么字体
2020/03/14 05-CSS
2020/03/14 05-CSS
斜体，加粗
2020/03/14 05-CSS
字体大小是用的比较多的
2020/03/14 05-CSS
2020/03/14 05-CSS
还有表格
2020/03/14 05-CSS
表格可以加一个border
2020/03/14 05-CSS
table是一个大框子2020/03/14 05-CSS
一个table里面是tr，td，每个小框子属于td
2020/03/14 05-CSS
加一个td

2020/03/14 05-CSS
但是比较丑，所以中间效果要去掉
2020/03/14 05-CSS
这个意思是向内塌缩
2020/03/14 05-CSS

2020/03/14 05-CSS
再设计下td，padding内边距，也是顺时针，4个方向都是20px就写一个即可

2020/03/14 05-CSS
要适当留白

2020/03/14 05-CSS
看到这里是20了
2020/03/14 05-CSS

如果不想四周都是20
2020/03/14 05-CSS
第一个控制的上下,第二个控制的是左右

2020/03/14 05-CSS
写三个试试，指的是上，左右，下
2020/03/14 05-CSS
2020/03/14 05-CSS
margin也是这么设置的，2个是上下左右，3个是，上，左右,下

2020/03/14 05-CSS
border是对所有边框的控制，下面是bottom，上边是top
2020/03/14 05-CSS
margin和padding的写法，auto是浏览器计算，刚才写居中的div试过
2020/03/14 05-CSS
往下学就需要美工注意的了，我们注意用css的选择器，用jquery，爬虫找到所要的元素，提取里面的文字

2020/03/14 05-CSS

相关文章：

  • 2021-11-17
  • 2021-07-27
猜你喜欢
  • 2021-08-03
  • 2021-09-12
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode