任务六-主线

2017-10-02 本文已影响0人饥人谷_我已经是一条咸鱼了

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

上一篇下一篇

猜你喜欢

热点阅读