网站：cssreference
mozilla
mozilla
mozilla css如何工作
声明顺序：PBTV
Positioning
Box model
Typographic
Visual
即: position 相关
盒模型相关
text文字相关
view相关
能省则省 能简则简
CSS是什么
CSS全称是Cascading Style Sheets 层叠样式表
@charset "utf-8";
h1 {
color: red;
font-size: 20px;
/* 这是注释*/
}
a: hover{
color: red;
}
样式来源
1.使用不同的选择器设置的样式
2.浏览器默认样式 (user agent stylesheet)
3.继承的样式 (Inherited from xxx)
p {
color: red;
width: 500px;
border: 1px solid black;
}
//选中多种元素
p, li, h1 {
color: red;
}
1.png
CSS应用方式
//通过 <link>引入CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS</tilte>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<h1>Hello CSS!</h1>
</body>
</html>
//通过@import 引入样式，放入CSS中
不要忘记分号
<style>
@import url("index.css");
@import url('index.css');
@import url(index.css);
@import 'custom.css';
@import "common.css";
@import url('landscape.css') screen and (orientation:landscape);
</style>
//内部样式
将CSS放在页面的<style>元素中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS</title>
<style>
h1 { background: orange; }
</style>
</head>
</html>
//内联样式
不推荐，某些情况下很有用
<p style="background: orange; font-size: 24px;">CSS很6</p>
//属性样式
废弃
<img src="a.png" width=100 height=200>
//外部样式
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<style>
@import url("hello.css"); //三种都可以
@import url(hello.css); //注意放在style标签中或-
@import "world.css"; //-其他样式文件中
<style>
CSS风格
空格
body {
font: 1em/150% Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0 auto;
max-width: 33em;
}
@media (min-width: 70em) {
body {
font-size: 130%;
}
}
div p, #id:first-line {
background-color: red;
background-style: none;
}
注释
/* */
缩写
padding: 10px 15px 15px 5px;
等价于
padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;
文件路径
相对路径 //相对于当前的路径
css/a.css //当前目录下css下的a.css文件
./css/a.css //等价与上一种
b.css //当前同一个目录下的b.css文件 可以直接引用
../imgs/a.png //..imgs/a.png 指定父目录下的imgs下的a.png照片（..等于返回）
绝对路径
/User/fem/project/css/a.css 本地绝对路径
网站路径
/static/css/a.css
css/a.css //一般都写相对路径
http://cdn.jriengu.com/kejian1/8-1.png //线上图片地址
题目1：CSS的全称是什么?
CSS全称是Cascading Style Sheets 层叠样式表
题目2：CSS有几种引入方式? link 和@import 有什么区别?
<link rel="stylesheet" href="index.css">
<style>
@import("index.css")
</style>
题目3：以下这几种文件路径分别用在什么地方，代表什么意思?
css/a.css
./css/a.css
b.css
../imgs/a.png
/Users/hunger/project/css/a.css
/static/css/a.css
http://cdn.jirengu.com/kejian1/8-1.png
题目4：如果我想在js.jirengu.com上展示一个图片，需要怎么操作?
将本地图片做成线上cdn地址
题目5：列出5条以上html和 css 的书写规范
语法不区分大小写，但建议统一使用小写
不适用内联的style属性定义样式
id和class使用有意义的单词， 分隔符建议使用-
有可能就用缩写
块内容缩进
属性名冒号后面添加一个空格
题目6：截图介绍 chrome 开发者工具的功能区
略
网友评论