css基础

CSS的全称是什么?

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

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

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

  

2.内嵌方式
内嵌方式是在 HTML 头部中的

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

   
        
        
    

link 和@import 的区别

link 属于 HTML标签,通过 标签中的 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 开发者工具的功能区

css基础_第1张图片
image.png

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


css基础_第2张图片
image.png

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

css基础_第3张图片
image.png

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

css基础_第4张图片
image.png

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


css基础_第5张图片
image.png

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


css基础_第6张图片
image.png

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

css基础_第7张图片
image.png

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


css基础_第8张图片
image.png

你可能感兴趣的:(css基础)