我爱编程

关于css

2017-04-27  本文已影响0人  LeeoZz

css全称Cascading Style Sheets,层叠样式表。
css的基本结构:

css重要有三种引入方式:
1.内联样式
<h1 style="color: red; font-size: 20px;"></h1>
2.内部样式

<style type="text/css">
  h1 {
    color: red;
    font-size: 20px;
  }
</style>
<h1>element</h1>

3.外部样式

<head>
  <link rel="stylesheet" type="text/css" href="index.css">
</head>
<style>
  @import url("hello.css");
</style>
<style>
  @import "world.css";
</style>

关于link和@import:1.link是html中的一个标签,它可以放在html文件中的任何位置;@import是css的一种语法,只能放在style标签中;2.加载顺序不一样,link在网页加载时同步加载,@import在网页html加载完成后再加载css,所以有时候浏览@import加载css的页面时,若网速不好,开始会没有样式;3.兼容性问题,@import是css2.1提出的,较老的浏览器可能不支持@import,link则无此问题;4.使用js控制dom改变样式时只能用link,@import不受dom控制。

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

相对路径:
css/a.css 当前目录下的css文件夹中的a.cc文件
./css/a.css 意义同上
b.css 当前目录中的b.css文件
../imgs/a.png 上级目录下的imgs文件夹下的a.png文件
绝对路径:
/Users/hunger/project/css/a.css 绝对路径下的a.css文件路径
网站路径:
/static/css/a.css(网站路径中也可以使用相对路径)
http://cdn.jirengu.com/kejian1/8-1.png (网站上的8-1.png文件地址)

1.把图片上传到服务器,并把图片地址写入到img标签的src属性中;
2.寻找网络图片的源地址(可利用图床网站),把地址写入到img标签中。

1.语法不区分大小写,但建议统一用小写;
2.不使用内联的style属性定义样式(结构样式分离);
3.id和class应该按照元素功能命名,不应该SHOULD NOT按照元素表现命名,命名应该含义清晰;
4.css属性中的0值不应该带单位;
5.必须采用4个空格为一次缩进;
6.css属性声明必须以分号结尾;
7.css属性名冒号后必须有一个空格;
8.CSS 属性值中所有使用到引号的位置必须使用单引号

上一篇下一篇

猜你喜欢

热点阅读