css全称
层叠样式表(英文全称:Cascading Style Sheets)
样式定义如何显示Html元素,样式通常储存在样式表。实现了内容与样式相分离。
css的3种引入方式
1.行内样式
直接在标签内加属性。
<div style="background: red"></div>
这种方式无法体现内容与样式分离,一般情况下不建议使用。
2.内部样式
把样式写在<head>标签对中,然后用<style>标签对包裹。
<head> <style> .content { background: red; } </style> </head>
优劣:因为嵌入的 CSS 只对当前页面有效,所以当多个页面需要引入相同的 CSS 代码时,这样写会导致代码冗余,也不利于维护。但是如果写末班网页的话就很适合,因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。
3.外部样式
在HTML 头部的 <head>标签里使用<link>标签引入外部的 CSS 文件。
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
tips:<link> 标签定义文档与外部资源的关系。
rel属性:规定当前文档与被链接文档之间的关系。
href属性:规定被链接文档的位置。
这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式,所有的 CSS 代码只存在于单独的 CSS 文件中,所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中,CSS 文件会在第一次加载时引入,以后切换页面时只需加载 HTML 文件即可。
4.导入方式
<style> @import url(style.css); </style>
tips:@import是 CSS2.1 才出现的概念,所以如果浏览器版本较低,无法正确导入外部样式文件;
当 HTML 文件被加载时,link 引用的文件会同时被加载,而 @import引用的文件则会等页面全部下载完毕再被加载;
总结:一般使用外部样式。其他三种不建议使用
5.路径
相对路径:
css/a.css 当前目录下的css文件夹中的a.css
./css/a.css 当前目录中css文件夹中的a.css文件
tips:./代表当前一级目录;../代表上一级目录
b.css 当前目录下的b.css文件
../imgs/a.png 上级目录中的imgs 文件夹中的a图片
绝对路径:(本地文件的绝对地址)
/User/hunger/project/css/a.css 本地绝对路径中的a.css文件
网站路径:
/static/css/a.css
网络中的路径:
http://cdn.jirengu.com/kejian1/8-1.png
6.如果我想在js.jirengu.com上展示一个图片,需要怎么操作?
(1)把图片上传到服务器上,把图片和html文件放在同一级或者上一级的img文件夹中,使用相对路径引用。
(2)直接使用网络上的地址引用。
7.
8.五条html和css的书写规范
1.语法统一使用小写
2.不使用内联样式的style元素定义样式,建议采用外部css
3.id和class使用有区分度的单词
4.块内容缩进
5.编码格式使用 "UTF-8"
6.属性名:后面加一个space