css的基础知识学习

作者: 南山码农 | 来源:发表于2017-07-17 11:07 被阅读0次

1.CSS的全称是什么?

Cascading Style Sheets 层叠样式表CSS是一种样式表语言,用于为HTML文档定义布局,对HTML进行美化,修饰HTML页面,提高用户体验, 例如,CSS涉及字体、颜色、边距、高 度、宽 度、背景图像、高级定位等方面

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

2.1 CSS总体来看有4种引入方式

  • 1.内联CSS(Inline CSS)exp:<h1 style="color:blue;">This is a Blue Heading</h1>
  • 2.内部CSS(Internal CSS)在html的head中加入style标签
    <style type="text/css">
    li {
    background-color:green;
    }
    </style>
  • 3.外部CSS(external CSS)在html中引入外部链接,要使用外部的样式表,在<head> 添加一个链接到它的HTML页面的部分:
    exp:
    <link rel="stylesheet" href="styles.css"> </head>
  • 4.导入CSS@import url()
    @import url()

2.2 link与@import的区别

本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别

  • 1.link属于XHTML标签,而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。
  • 2.加载顺序的差别。当一个页面被加载的时候,link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时性能较差
  • 3.兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题
  • 4.使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。

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

  • 3.1.相对路径css/a.css 当前目录下的css文件夹中的a.css
    ./css/a.css 当前目录中css文件夹中的a.css文件
    b.css 当前目录下的b.css文件
    ../imgs/a.png 上级目录中的imgs 文件夹中的a图片
  • 3.2.绝对路径(本地文件的绝对地址)/User/hunger/project/css/a.css 本地绝对路径中的a.css文件
  • 3.3.网站路径/static/css/a.css 网站中也可以使用相对路径http://cdn.jirengu.com/kejian1/8-1.png17 网络中的路径

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

思路:将本地图片上传,通过浏览器加载server中文件夹内的图片上传完成后,当图片所在文件夹与html展示页面在同级目录中时,我们可以通过相对路径直接调用展示比如:img src="url" alt="some_text" style="width:width;height:height;"这里的url是对应的相对路径比如/images/html5.gif
如果在另外一台服务器中:img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com"[图片上传中。。。(1)] 可采用网络路径直接引入

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

  • 1.HTML的标签尽量使用有语义标签比如header,content,footer,img,p等,类别名layout,container,navigation等等
  • 2.不使用内联样式的style元素定义样式,建议采用外部css
  • 3.html标签嵌套应使用tab键缩进,嵌套结构清晰明了
  • 4.每套css用大括号{}包裹,间隔一行
  • 5.语句结束以分号(;)结束

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

Paste_Image.png

转载自《饥人谷官网》

相关文章

  • CSS 学习一(简介)

    一、学习CSS需要具备的HTML和XML基础知识,点我。 二、CSS 概述: 1.CSS 指层叠样式表 (Casc...

  • CSS学习第一天--样式

    HTML基础知识已经学习完了,接下来就学习CSS设置样式的知识了,笔记练习会持续更新。。。。 CSS样式--内联式...

  • web学习之css基础教程

    一、CSS简介 需要具备的基础知识 在继续学习之前,你需要对下面的知识有基本的了解:HTMLXHTML CSS 概...

  • CSS相关汇总

    CSS命名规范 CSS基础知识 CSS优化技巧 CSS的继承关系 CSS的选择器关系介绍

  • PHP学习路径大纲

    PHP学习路径大纲 [TOC] 入门基础 Web基础 学习HTML、CSS样式基础知识,了解各种常用标签的意义以及...

  • CSS样式表继承详解

    最近在恶补css样式表的基础知识。上次研究了css样式表之冲突问题详解。这次是对css继承特性的学习。 什么是cs...

  • H5+class6

    今天学习的css基础知识包括如下: 百度首页的设计; 背景图片; 精灵图; 边框属性; 内边距,外边距; css盒...

  • CSS 基础入门

    引言:学习前端基础知识。第二课 CSS 基础知识。时间:2017年11月22日作者:JustDo23 01. 基础...

  • PHP从入门到精通

    一、PHP学习教程 PHP学习前期,首要的WEB前端基础知识,比如:html5、css3、java、jquery有...

  • Web前端基础三剑客学习知识分享

    Web前端开发基础知识学习路线分享,前端开发入门学习三大基础:HTML、CSS、JavaScript。除此之外还要...

网友评论

    本文标题:css的基础知识学习

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