CSS基础
- CSS是什么？
- 全称cascading style sheets，层叠样式表
- 同一个元素，可能会写比较多的样式，所以层叠
- 有中文注释：@charset “utf-8”
- 注释/* */，其他的方法有些浏览器可能会报错
- 伪类选择器
- 作用：给网页穿衣服
- 如何在页面上引用CSS
- 内联样式
<h1 style=“color: red; font-size: 20px;”></h1> - 内部样式
<style type=“text/css”> h1{ color: red; } </style> <h1></h1> - 外部样式
<head> <link rel=“stylesheet” type=“text/css” href=“index.css”> </head><style> @import url(“hello.css”); @import “world.css”; </style> - 内联样式
- 浏览器默认样式
- 认识开发者工具
- 文件和路径
- 相对路径
- css/a.css
- ./css/a.css
- b.css
- ../imgs/a.png
- 绝对路径
- /Users/hunger/project.png
- 网站路径
- /static/css/a.css
- css/a.css
- http://cdn.jirengu.com
- 相对路径
- 书写规范
- 语法不区分大小写，但建议统一使用小写
- 不使用内联的style属性定义样式
- id和class使用有意义的单词，分隔符建议使用-
- 有可能就使用缩写
- 属性值是0的省略单位
- 块内容缩近
- 属性名冒号后面添加一个空格
如何切图
- 切图：美工给一张图片，如何把图片还原成网页；把一张psd文件里面的图片抠出来
- 如何让图片最清晰，文件最小化
- 图层-对应图片里面的元素
- 切片工具—编辑切片选项—右键挪走不需要的东西—画方框—文件—存储为web所用的格式—JPEG可以压缩，设置清晰度—imgs文件夹里面有切出的图片—调整大小—http://tinypng.com
chrome开发调试
- 右键—审查元素
- element—元素—随意拖放—删除—如果用户输入字数发生变化，页面的样式会发生什么变化
- styles：添加不同的样式
- console: 用于调试JS代码
- 报错调试
- source添加断点
- network：调试ajax接口
- resources：页面的资源
- emulation：移动端开发模拟手机浏览器
CSS学习方法
- CSS里面没有为什么，你只能接受现实；声明式语言
- CSS里面有些属性相互影响，组合起来极其复杂；eg：行高和字体大小
- CSS里面有些属性很独立，跟其他属性一点关系都没有；eg：动画，3D变化
- 从表象反推理论—观察法
- border大法—给所有元素加上border
- sources—snippets
- 两个span在一起，之间有任何字符，都会变成空格
- span与div之间不存在空隙问题，因为div自动换行
- div与div之间没有空格
CSS学习路线
- 文字、背景、布局、响应式、动画变形
- 从一点点开始学，从小东西开始学
- bootstrap
- 按照一个成熟的框架，把一个一个小组件弄出来
- 只需要学会常见的CSS
网友评论