CSS基础

作者: D一梦三四年 | 来源:发表于2017-09-01 03:09 被阅读0次

    CSS的全称是什么?

    Cascading Style Sheets 层叠样式表

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

    CSS有4种引入方式

    1. 行内样式:直接在HTML的style属性中添加样式
    <div style="background: blue; color: red;"></div>
    

    缺点:太过混乱

    1. 内部样式:在HTML头部的<style>标签中添加样式
    <head>
        <style>
            #div1 {
                backgoround: blue;
                color: red;
            }
        </style>
    </head>
    

    缺点:多个页面之间CSS的复用不够

    1. 链接方式:通过头部的<link>标签从外部引入CSS文件
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    

    (推荐)

    1. 导入方式:通过@import导入外部CSS文件
    <style>
            @import url(../css/style.css);
    </style>
    

    或者在CSS文件中@import url(../css/style.css)
    缺点:性能差

    link 与@import 的区别

    1. 范畴不同:link属于HTML的标签,通过其href属性来引入外部文件;@import属于CSS,所以@import导入语句应写在CSS中,且应该写在样式标的开头,否则无法正确导入外部文件
    2. 加载顺序的不同:页面在加载时,link引入的CSS会同时加载;而@import导入的CSS需要在页面完全载入之后再加载,所以浏览使用@import导入的页面时,最开始会没有样式(就是闪烁)
    3. 兼容性的区别:link是XHTML标签,无兼容问题;而@import是CSS2.1提出的,IE5以上的浏览器才能识别
    4. 是否支持JavaScript DOM改变:link支持使用DOM改变CSS样式;而@import不支持

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

    1. 相对路径(不以"/"开头):以当前文件的所在路径为基准来查找文件
    • css/a.css 当前文件夹下的css文件夹下的a.css文件
    • ./css/a.css 同上
    • b.css 当前文件夹下的b.css文件
    • ../imgs/a.png 父文件夹下的imgs文件下的a.png文件
    1. 绝对路径(以"/"开头):文件在硬盘或目录下的真实路径
    • /Users/hunger/project/css/a.css 根文件夹(根目录)/ Users文件夹/hunger文件夹/project文件夹/css文件夹/a.css文件
    • /static/css/a.css 根文件夹(根目录)/static文件夹/css文件夹/a.css文件
    1. 网站路径:文件上传到服务器后生成的地址链接
    • http://cdn.jirengu.com/kejian1/8-1.png 8-1.png在互联网上的地址

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

    • 将图片上传到服务器(如七牛),通过外部链接可直接调用

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

    HTML书写规范

    • HTML页面开头使用<!DOCTYPE>指明标准模式
    • <html>标签应加上lang属性 <html lang="zh-cn">
    • 在HTML头部声明字符编码方式 <meta charset="UTF-8">
    • 属性名小写
    • 不要使用内联样式

    CSS书写规范

    • 缩进使用4个空格
    • 每个属性声明末尾都要加分好
    • 注释统一用"/* */"
    • 类名小写,以中划线分隔
    • id采用驼峰式命名 myList
    • 去掉小数点前面的0
    • 属性值0后面不要加单位

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

    Chrome开发者工具.png

    相关文章

      网友评论

          本文标题:CSS基础

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