CSS基础

  • CSS全称层叠样式表(Cascading Style Sheets)

CSS的几种引入方式

  1. 行间样式(写在html标签的style属性里)
    <input type="text" style="color:#ccc;width:120px">

  2. 内部样式(写在<head></head>里面,以<style>...</style>标签包裹。比)
    <!doctype html>
    <html>
    <head>
    <meta charset=“utf-8”>
    <style>
    p {
    font-size: 20px
    }
    </style>
    </head>
    <body>
    <p>你好!</p>
    </body>
    </html>

  3. 外部样式:也称链接样式,写在<head></head>里面。以link定义,(rel="stylesheet"和tbye="text/css"为规范必写,详细原因现在的我也不知道), css样式写在另一个文件夹取名为style(文件名可以随便取但推荐是英文)。比如:
    <link rel="stylesheet" type="text/css">

  4. @import 引用CSS(放在<style></style>之间)

    <style type="text/css">
       @import url(引入的样式表的路径);
    </style>
    

link 和@import的区别

链接方式(下面用 link 代替)和导入方式(下面用 @import 代替)都是引入外部的 CSS 文件的方式,下面我们来比较这两种方式,并且说明为什么不推荐使用 @import。

  • 差别1:ink属于HTML标签,而@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可以控制的。
    从上面的分析来看,还是使用link标签比较好。

以下这几种文件路径分别用在什么地方,代表什么意思?

css/a.css 相对路径:当前文件夹内CSS目录下的a.css文件
./css/a.css 相对路径:当前文件夹内CSS目录下的a.css文件
b.css 相对路径:当前目录下的b.css文件
../imgs/a.png 相对路径:当前目录的上级目录内的images目录下的a.png文件
/Users/hunger/project/css/a.css 绝对路径:本地/Users/hunger/project/css/目录下的 a.css文件
/static/css/a.css 网站路径:当前服务器根目录下的/static/css的a.css文件
http://cdn.jirengu.com/kejian1/8-1.png 网络路径:通过该路径可以找到cdn.jirengu.com域名下kejian1目录下的8-1.png文件

如果我想在js.jirengu.com上展示一个图片,需要怎么操作?

  1. 可以直接将图片上传到服务器,在页面使用这张图片
  2. 如果这个图片本来就存在网络上其他的服务器上,可以直接使用图片的网络绝对路径链接的方式在页面上添加url引用这张图片

HTML和 CSS的书写规范

HTML:
  1. 标签名必须使用小写字母。
  2. 对于无需自闭合的标签,不允许自闭合。
  3. 对 HTML5 中规定允许省略的闭合标签,不允许省略闭合标签。
  4. 一次缩进2个空格,不要使用 tab 或者混合 tab 和空格的缩进。
  5. class 必须单词全字母小写,单词间以 - 分隔。
  6. 标签的使用应该遵循标签的语义。
  7. 标签的使用应尽量简洁,减少不必要的标签。
  8. 属性值必须用双引号包围。
  9. 布尔类型的属性,建议不添加属性值。
  10. 引入 CSS 时必须指明 rel="stylesheet"。

下面是常见标签语义

  • p - 段落
  • h1,h2,h3,h4,h5,h6 - 层级标题
  • strong,em - 强调
  • ins - 插入
  • del - 删除
  • abbr - 缩写
  • code - 代码标识
  • cite - 引述来源作品的标题
  • q - 引用
  • blockquote - 一段或长篇引用
  • ul - 无序列表
  • ol - 有序列表
  • dl,dt,dd - 定义列表
CSS
  1. 选择器与 { 之间必须包含空格。
  2. 属性名与之后的 : 之间不允许包含空格, : 与 属性值 之间必须包含空格。
  3. 在可以使用缩写的情况下,尽量使用属性缩写。
  4. 属性书写顺序
    建议同一rule-set下的属性在书写时应按功能进行分组,并以Formatting Model(布局方式、位置) > Box Model(尺寸) > Typographic(文本相关) > Visual(视觉效果)的顺序书写,以提高代码的可读性。
  5. 数值为0时不带单位
  6. 复合样式使用缩写
  7. 统一使用小写

注释:

  • Formatting Model 相关属性包括:position / top / right / bottom / left / float / display / overflow 等
  • Box Model 相关属性包括:border / margin / padding / width / height 等
  • Typographic 相关属性包括:font / line-height / text-align / word-wrap 等
  • Visual 相关属性包括:background / color / transition / list-style 等

截图介绍 chrome 开发者工具的功能区

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,053评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,527评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,779评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,685评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,699评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,609评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,989评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,654评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,890评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,394评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,976评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2 342

推荐阅读更多精彩内容

  • 一、css是什么? CSS全称是Cascading Style Sheets,简写为CSS,称作:层叠样式表,又称...
    青鸣阅读 804评论 0 1
  • CSS的全称是什么? CSS全程是Cascading Style Sheets层叠样式表 CSS有几种引入方式? ...
    Taaaaaaaurus阅读 366评论 0 1
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,592评论 18 139
  • 1.CSS简介 CSS 的全称是Cascading Style Sheets,层叠样式表 2.CSS的引入方式 内...
    毛毛独角兽阅读 320评论 0 0
  • 8 霜叶城地处东海要扼,城中除了惯有的府尹衙役,还设有一队海道防官兵。朝廷竭尽异士金银,造了一批纸浆铠甲,专供此类...
    山岫阅读 801评论 0 0