css基础

CSS的全称是什么?

css的全称是层叠样式表(Cascading Style Sheet,CSS),是一种指定HTML文档视觉表现的标准,CSS的本意是想让视觉设计师使用的,它允许设计师精确指定文档元素的字体、颜色、外边距、缩进、边框、定位等。

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

css有以下三种引人方式:
1.内联方式
内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。
如:

  <div style="height: 200px;width: 200px;"></div>

2.内嵌方式
内嵌方式是在 HTML 头部中的 <style> 标签下书写 CSS 代码
如:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       div{height: 300px;height: 300px;}
   </style>
</head>
<body>
</body>
</html>

3.外部链接方式
外链方式是在 HTML 头部的 <head> 标签之间引入外部的 CSS 文件。
如:

   <head>
        <meta charset="utf-8">
        <link href="css/style.css" rel="stylesheet" type="text/css" />
    </head>

link 和@import 的区别

link 属于 HTML标签,通过 <link>标签中的 href 属性来引入外部文件,而 @import 属于 CSS,所以导入语句应写在 样式 中,要注意的是导入语句应写在样式表的开头,否则无法正确导入外部文件;
@import是 CSS2.1 才出现的概念,所以如果浏览器版本较低,无法正确导入外部样式文件;
当 HTML 文件被加载时,link 引用的文件会同时被加载,而 @import引用的文件则会等页面全部下载完毕再被加载;

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

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.css、 b.css、../imgs/a.png都是相对路径。
css/a.css和./css/a.css表示当前目录下css文件夹的a.css文件。
b.css表示当前文件夹下的b.css文件。
../img/a.png表示上级目录中img文件夹下的a.png图片。
/Users/hunger/project/css/a.css表示绝对路径,电脑本地/Users/hunger/project/css/文件夹下的a.css文件。
/static/css/a.css表示服务器上的相对路径,
http://cdn.jirengu.com/kejian1/8-1.png 表示网络上的绝对路径。

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

1.把图片上传到服务器上存放图片的文件夹,引用服务器上的相对路径。
2.引用该图片在网络上的绝对路径。

列出5列出5条以上html和 css 的书写规范

HTML:
1.用两个空格来代替制表符(tab)
2.嵌套元素应当缩进一次(即两个空格)
3.对于属性的定义,确保全部使用双引号,绝不要使用单引号
4.不要在自闭合(self-closing)元素的尾部添加斜线。
5.不要省略可选的结束标签(closing tag)
6.为每个 HTML 页面的第一行添加标准模式(standard mode)的声明,这样能够确保在每个浏览器中拥有一致的展现。
7.强烈建议为 html 根元素指定 lang 属性,从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音,有助于翻译工具确定其翻译时所应遵守的规则等等。
8.尽量遵循 HTML 标准和语义,但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。
9.HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读性。

class
id, name
data-*
src, for, type, href, value
title, alt
role, aria-*

class 用于标识高度可复用组件,因此应该排在首位。id 用于标识具体组件,应当谨慎使用(例如,页面内的书签),因此排在第二位。
css:
1.用两个空格来代替制表符(tab).
2.为选择器分组时,将单独的选择器单独放在一行。
3.为了代码的易读性,在每个声明块的左花括号前添加一个空格。
4.声明块的右花括号应当单独成行。
5.每条声明语句的 : 后应该插入一个空格。
6.为了获得更准确的错误报告,每条声明都应该独占一行。
7.所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的,但是,如果省略这个分号,你的代码可能更易出错。
8.对于以逗号分隔的属性值,每个逗号后面都应该插入一个空格(例如,box-shadow).
9.对于属性值或颜色参数,省略小于 1 的小数前面的 0 (例如,.5 代替 0.5;-.5px 代替 -0.5px)。
10.尽量使用简写形式的十六进制值,例如,用 #fff 代替 #ffffff。
11.相关的属性声明应当归为一组,并按照下面的顺序排列:

Positioning
Box model
Typographic
Visual

由于定位(positioning)可以从正常的文档流中移除元素,并且还能覆盖盒模型(box model)相关的样式,因此排在首位。盒模型排在第二位,因为它决定了组件的尺寸和位置。
其他属性只是影响组件的内部(inside)或者是不影响前两组属性,因此排在后面。
上述规范的例子如下:

/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}
.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

更多参考;

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

image.png

2.Elements
左侧就是对页面HTML结构的查看与编辑,可以直接在某个元素上双击修改元素的属性,或者点右键选"Edit asHtml"直接对元素的HTML进行编辑,或者删除某个元素,所有的修改都会即时在页面上得到呈现.


image.png

3.Console
查看错误信息、打印调试信息(console.log())、写一些测试脚本.

image.png

4.Sources
可以打断点刷新调试代码,显示网页的源代码。

image.png

5.Network
Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用,特别是在查看Ajax类请求的时候,非常有帮助


image.png

点击左侧某一个具体去请求URL,可以看到该请求的详细HTTP请求情况:
在这里看到HTTP请求头、HTTP响应头、HTTP返回的内容等信息


image.png

6.Security
判断当前的网页是否安全。

image.png

7.Application
Application同旧版浏览器的resource功能差不多,可以查看web程序跑起来后所加载的一些资源,包括图片或者其他“值”,以及Cookies


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

推荐阅读更多精彩内容

  • CSS基础 本文包括CSS基础知识选择器(重要?。。。┘坛?、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,071评论 0 40
  • 一.CSS描述 CSS全称为“层叠样式表(Cascading Style Sheets)”,它主要是用于定义HTM...
    snowy_sunny阅读 1,069评论 0 4
  • 1.认识CSS样式CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义H...
    静默丶阅读 5,699评论 30 95
  • 我觉得这张画到这个程度也很美,拿来做封面。 后来画的太多了,反而不好看了。 我们不需要的东西太多了。 很多时候只要...
    Ann苳杭杭阅读 2,116评论 11 58
  • 今天去参观雁栖湖开APEC 个一带一路会议的地方。进到首脑圆桌会议厅的时候深深的被这种国家级的气派场面震撼了。室内...
    mmmmmming阅读 235评论 0 0