CSS简介:
CSS(Cascading Style Sheets):层叠样式表
样式定义如何显示 HTML 元素,样式通常存储在样式表中
CSS引入方式
内联样式:<h1 style="color:red;></h1>
内部样式
link与@import的区别
本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别
- 1.link属于XHTML标签,而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。
- 2.加载顺序的差别。当一个页面被加载的时候,link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时性能较差
- 3.兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题
- 4.使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。
3.以下这几种文件路径分别用在什么地方,代表什么意思?
3.1.相对路径
css/a.css 当前目录下的css文件夹中的a.css
./css/a.css 当前目录中css文件夹中的a.css文件
b.css 当前目录下的b.css文件
../imgs/a.png 上级目录中的imgs 文件夹中的a图片
3.2.绝对路径(本地文件的绝对地址)
/User/hunger/project/css/a.css 本地绝对路径中的a.css文件
3.3.网站路径
/static/css/a.css 网站中也可以使用相对路径
http://cdn.jirengu.com/kejian1/8-1.png9网络中的路径
如果我想在js.jirengu.com上展示一个图片,需要怎么操作?
思路:将本地图片上传,通过浏览器加载server中文件夹内的图片
上传完成后,当图片所在文件夹与html展示页面在同级目录中时,我们可以通过相对路径直接调用展示
比如:img src="url" alt="some_text" style="width:width;height:height;"
这里的url是对应的相对路径
比如/images/html5.gif
如果在另外一台服务器中:
img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com"
可采用网络路径直接引入
html和 css 的书写规范
1.语法统一使用小写
2.不使用内联样式的style元素定义样式,建议采用外部css
3.id和class使用有区分度的单词
4.块内容缩进
5.属性名:后面加一个space