css基础

2017-04-25 本文已影响0人小囧兔

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;
}

更多参考;