CSS基础

作者: LINPENGISTHEONE | 来源:发表于2017-02-24 16:45 被阅读0次

    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

    相关文章

      网友评论

        本文标题:CSS基础

        本文链接:https://www.haomeiwen.com/subject/ofuwwttx.html