CSS(Cascading Style Sheets,层叠样式表)
引入方式
- 通过<link>标签引入(外部样式)
为了成功加载一个外部样式表(外部样式表只能包含css注释和css规则,不能有其他文档标记,否则会造成一部分或者全部被忽略),link标签需要放置在head标签内部。
候选样式表,即将rel属性的值设置为alternate stylesheet,大多数基于Gecko的浏览器都可以支持候选样式表,不过通过js,IE也可支持。 - 通过在<style>标签中(内部样式)写入样式,一定要设定type属性
- 通过在<style>标签中的@import
@import一定要写在style标签内,并且要在所有CSS规则之前
- 通过在标签中加入style属性(内联)
相对路径和绝对路径
相对路径
相对于目前路径名的文件写法,只要开头不是(/)就不是绝对路径绝对路径
由根目录(/)开始写起的文件名或目录名称-
. 表示当前目录; .. 表示上一层目录
以下这几种文件路径分别用在什么地方,代表什么意思?css/a.css (网站路径,css路径下的a.css文件)
./css/a.css (相对路径,当前路径下css下的a.css文件)
b.css (相对路径,当前路径下的b.css文件)
../imgs/a.png (相对路径,当前路径的上一级下的a.png图片)
/Users/hunger/project/css/a.css (绝对路径,根目录下的User文件夹下的hunger文件夹下的project文件夹下的css文件夹下的 a.css文件)
/static/css/a.css (网站路径,代表网站服务器根目录static文件夹中的css文件夹中的a.css文件)
http://cdn.jirengu.com/kejian1/8-1.png (8-1.png的网站路径)
**ps:如果我想在js.jirengu.com上展示一个图片,需要怎么操作? **
方法1:可以直接将图片上传到服务器,在页面使用这张图片;
方法2:如果这个图片本来就存在网络上其他的服务器上,可以直接使用图片的网络绝对路径链接的方式在页面上添加url引用这张图片
html和css的一些书写规范
- 语法不分大小写,推荐统一使用小写
- 内容与样式分离
- id和class使用有意义的单词,分隔符建议使用-
- 有可能尽量用缩写
5.属性值是0的省略单位 - 块内容缩进
- 属性名冒号后添加一个空格
chrome 开发者工具
- 使用Elements面板检查和实时编辑页面的HTML和CSS
- 在 Elements 面板中检查和实时编辑 DOM 树中的任何元素。
- 在 Styles 窗格中查看和更改应用到任何选定元素的 CSS 规则。
- 在 Computed 窗格中查看和修改选定元素的框模型。
- 在 Sources 面板中查看在本地对页面所做的更改。
- 使用 Computed 窗格检查和编辑当前元素的框模型参数。 框模型中的所有值均可修改,只需点击它们即可。
[参考]