CSS的简单功能及chrome审查元素简单介绍

1.样式有几种引入方式?link和@import有什么区别

最常用的方式,引入样式表。在外部创建一个样式表(xxxx.css),在此样式表中编写样式,然后在html中引入样式,一般来说要创建一个单独的css文件夹来存放css样式表,引入方式如下:

<link href="css/xxxx.css" rel="stylesheet"type="text/css">


这种方式一般放在<head>中,优点就是在于可以把要套用相同样式规则的数篇文件都指定到同一个样式档案中,便于日后的修改维护,缺点是在个别文件或元件的灵活度不足,会在href的请求过程中对服务器造成一定压力。

Ps:

浏览器一般会默“index.html"为初始页面,所以一般将初始页面名称设置为这个,这样,在进入这个页面的时候,就不需要多输入“www.xxxxxx.com/index.html"


②在Html中用<head>包起来,在这里面编写样式:

<head>

<style type="xxxx/css">

body {

      样式规则表

}

</style>

</head>

将样式表写于<head>,这种方式的缺点是不便于维护,推荐在只有本页面会使用的唯一样式中使用这种方法。


③在标签里面直接编写行内样式:

使用STYLE属性,将STYLE属性直接加在个别的元件标签里。

<元件(标签) style="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...>

例:

<body>

       <p style="color:blue;font-size:9px;font-family:"微软雅黑”;line-height:1.5>

        </p>

</body>

这种方式只对当前元素有效。


④使用@import引入: 

跟link用法很像,但必须包含在<style>...</style>中。

<style type="text/css">

    @import url=(引入的样式表路径、名称);

</style>

例:

<style type="text/css">

     @import url(http://css/xxxx.css);

</style>

注意:行末的分号必不可少的。

link和@import都是外部引用CSS的方式,但是存在一定的区别:

区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。

区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。

区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。

区别4:ink支持使用Javascript控制DOM去改变样式;而@import不支持。

@import最优写法:

@import的写法一般有下列几种:

1.@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别

2.@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别

3.@import url(style.css) //Windows NS4, Macintosh NS4不识别

4.@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别

5.@import url("style.css") //Windows NS4, Macintosh NS4不识别

由上分析知道,@import url(style.css) 和@import url("style.css")是最优的选择,兼容的浏览器最多。从字节优化的角度来看@import url(style.css)最值得推荐。


2.文件路径 ../main.css、./main.css、main.css有什么区别

../main.css是指上一级目录中的css文件

./main.css是指本目录中的css文件,”./"可以省略,所以“./main.css”与“main.css"代表的意义相同

引申:绝对路径与相对路径的区别

绝对路径:

平时使用计算机时要找到需要的文件就必须知道文件的位置,而表示文件的位置的方式就是路径,例如只要看到这个路径:c:/website/img/photo.jpg我们就知道photo.jpg文件是在c盘的website目录下的img子目录中。这样完整的描述文件位置的路径就是绝对路径。我们不需要知道其他任何信息就可以根据绝对路径判断出文件的位置。

相对路径:

所谓相对路径,顾名思义就是自己相对与目标位置。不论将这些文件放到哪里,只要他们的相对关系没有变,就不会出错。

我们使用“../”来表示上一级目录,“../../”表示上上级的目录,以此类推。

例:

比方C盘ABC文件夹有个1文件,还有一个DEF文件夹,而DEF文件下有个2文件.

那1和2的文件路径分别为:(都是绝对路径)

C:\ABC\1

C:\ABC\DEF\2

如果让1文件来表示2文件的路径

绝对路径: C:\ABC\DEF\2

相对路径: DEF\2 (因为1和2文件前面的C:\ABC这段路径相同就不用写出来了)。


3.console.log是做什么用的

主要是方便调式javascript。可以看到你在页面中输出的内容。

相比alert他的优点是:

console能看到结构话的东西,如果是alert,弹出一个对象就是[object object],但是console能看到对象的内容。

console不会打断你页面的操作,如果用alert弹出来内容,如果不先点弹出框,整个页面就会卡死,无法进行其他动作,但是console输出内容后你页面还可以正常操作。


4.text-align有几个值,分别有什么作用

①left  把文本排列到左边。

②right  把文本排列到右边。

③center  把文本排列到中间。

④justify  实现两端对齐效果,在一行文字较多时,使用此效果,可以使文字较为均匀的分布于行内,由于字数较多,字间距较小,视觉效果可以忽略。


5.px、em、rem分别是什么?有什么区别?如何使用

①px像素(Pixel) 相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

②rem 是相对于HTML根元素的相对长度单位。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

③em 是相对长度单位,在html中是根据其父级元素为标准的。这个单位过于灵活,只要有一个父单位被改变,此单位就会随之改变,所以一般来说用的少一些。


6.chrome 审查元素功能简单的截图介绍



7.如下设置p为几个rem,让h1和p的字体大小相等?


浏览器默认字体大小是16px,h1的字体大小是60px,则16×0.625×?=60px。解出来为6,所以是6rem。


本教程版权归本人和饥人谷所有,转载须说明来源

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

推荐阅读更多精彩内容

  • 1、CSS的全称是什么? 答:CSS全称是Cascading Style Sheets,层叠样式表 2、CSS有几...
    饥人谷_牛牛阅读 350评论 0 1
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,585评论 18 139
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,725评论 1 92
  • 早就知道对自己自视甚高,早就知道自己是完美主义拖延症,早就知道自己一事无成。 所以,我才TMD再也受不了了啊。 说...
    月上山河阅读 151评论 0 0
  • 一周总结 1.MECE法则 找到主心骨,利用工具解决问题。 2.波特五力模型 威胁因素不仅限于同行业的横向对比,更...
    潘_PT阅读 131评论 0 0