CSS基础

2017-02-24 本文已影响0人 LINPENGISTHEONE

1.CSS的全称是什么?

Cascading Style Sheets全称层叠样式表，CSS是一种样式表语言，用于为HTML文档定义布局, 例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。

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

CSS有4种引入方式

1.内联样式 <p style="font-color: green;">
2.内部样式 <style type="text/sheet">
                    h1{
                        color: red;
                       }
            </style>
3.外部样式 外部样式可以通过导入（@import）
             <style>
                 @import url("a.css");
                 @import "b.css";
             </style>
4.外部样式 外部样式可以通过导入（link）
            <head>
                <link rel="stylesheet" type="text/css" href="index.css">
            </head>

link 和 @import 的区别：
1.ink 是 HTML 的一个标签，可以放在HTML中的任何一个位置，而 @import 是 CSS 提供的一种方法，需要放在 HTML 的 style 标签里，或是放在一个样式表里，不能直接放在 HTML 里。因此 link 除了加载 CSS 之外还做其他的事情，而 @import 就只能加载 CSS 了。
2.link是在加载页面前把css加载完毕，而@import url() 则是读取完文件后再加载样式，所以如果遇到网速很慢的情况，会出现先显示没有样式的页面，然后在闪烁一下之后才出现样式。
3.@import 是 css2 里提出的，所以古老的 ie5 浏览器不支持，而 link 则没有这个问题。
4.当使用javascript控制dom去改变样式的时候，只能使用link标签，@import不是dom可以控制的。

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

css/a.css
相对路径，当前目录下的css目录下的a.css文件
./css/a.css
相对路径，等价于css/a.css
b.css
相对路径，当前目录下的b.css
../imgs/a.png
相对路径，上级目录下的imgs目录下的a.png文件 
/Users/hunger/project/css/a.css 
本地绝对路径
/static/css/a.css 
网络相对路径
[http://cdn.jirengu.com/kejian1/8-1.png]
网络路径，通过该路径可以找到cdn.jirengu.com域名下kejian1目录下的8-1.png文件

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

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

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

HTML：
1.DOCTYPE标签使用大写，如<!DOCTYPE html>
2.对需要闭合的标签，闭合标签不要省略
3.页面要指定字符编码，指定字符编码的 meta 元素应为 head 的第一个子素
4.有文本标签的控件必须使用label标签将文本和控件关联
5.不要在HTML里使用内联样式
CSS：
1.统一使用小写
2.不使用内联的style属性定义样式
3.d 和 class 使用有意义的单词，命名连字符使用-
4.要有一定的缩进
5.数值为0时不带单位
6.属性值在冒号后面加一个空格
7.使用缩写

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

27fecd31528cac67f83e05da776c913ca86972db.png