美文网首页
任务6-css入门

任务6-css入门

作者: 大胡子歌歌 | 来源:发表于2017-01-04 16:19 被阅读0次

1、CSS的全称是什么?

CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

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

1)使用HTML标签的STYLE属性
将STYLE属性直接加在单个的HTML元素标签上,控制HTML标签的表现样式。这种引入CSS的方式是分散灵活方便,但缺乏整体性和规划性,不利于后期的修改和维护,当需要修改网站的样式时,一个相同的修改可能涉及多个地方,维护成本高。使用STYLE属性的样式效果最强,会覆盖掉其它几种引入方式的相同样式效果。

<div style="color:red">
...
</div>

2)将样式代码写在页面<STYLE>...</STYLE>标签之中
<STYLE>...</STYLE>结构可以位于页面<HTML>标签中的任何位置,也可以多次出现。通常是将整个<STYLE>...</STYLE>结构写在页面的<HEAD>...</HEAD>部分中。这种引入CSS方式的特点是每个页面的CSS代码可能具有统一性和规划性,一个页面内部便于复用和维护,但多个页面之间的CSS代码复用仍然不够。

<style>
  bdoy{
    font-size:14px;
  }  
</style>

3)使用 LINK标签,引入外部CSS文件
先将css代码写在一个单独的文件中,用link标签直接引入该文件到页面中。一个页面可以多次使用LINK标签引入多个外部css文件,注意这些CSS代码的相互影响,通常是后引入的CSS文件会覆盖前面引入的CSS文件的相同效果。这种引入CSS的方式是目前最为流行的,可以在站个网站范围内进行CSS代码的规划,方便复用和维护,但这样将代码高度集中,代码量可能过大,维护不当的话又容易出现混乱。

<link rel="stylesheet" type="text/css" href="style.css">

4)使用@import引入CSS文件
使用@import引入CSS文件,可以放在页面中的<style>...</style> 中,用法如下:

<style>
  @import url(index2.css);
</style>

@import与Link都是外部引用CSS的方式,但是存在一定的区别:
  区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
  区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
  区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
  区别4:link支持使用Javascript控制DOM去改变样式;而@import不支持。

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 当前站点根目录下的static目录下的css目录下的a.css文件
http: //cdn.jirengu.com/kejian1/8-1.png cdn.jirengu.com服务器上的一张png图片URL。

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

1)可以将这张图片上传到jirengu.com服务器上,指向存放的目录。
2)将这张图片上传到网络上其它可提供完整url路径的服务器上,再指向此url。

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

1)语法不区分大小写,但是建议统一写小写
2)不使用关联的style属性定义样式
3)id和class使用有意义的单词,分隔号建议使用-
4)有可能就是用缩写
5)属性值是0的省略单位
6)块内容缩进
7)属性名冒号后面添加一个空格

6、介绍 chrome 开发者工具

相关文章

  • 任务6-css入门

    1、CSS的全称是什么? CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制...

  • 任务6-css基础

    1.css的全称是什么? Cascading Style Sheets,层叠样式表 2.css有几种引入方式?li...

  • 任务6-CSS基础

    1.CSS的全称是什么? cascading style sheets, 级联内部样式 2.CSS有几种引入方式?...

  • 入门任务

    任务二 web 相关知识了解 前端是做什么的?互联网职位有哪些常见的简称(如PM…) 在一个待开发的产品中,产品经...

  • 6-css样式

    背景颜色background-color 背景颜色的值可以是英文,可以是十六进制颜色值,可以是rgb 背景图片ba...

  • 入门任务8

    块级元素和行内元素分别有哪些?## 块级元素 行内元素 区别 块级元素可以包含行内元素和其他块级元素,行内元素只能...

  • 入门任务11

    单栏布局三栏布局圣杯布局双飞翼布局页面范例

  • 入门任务9

    text-align: center的作用是什么,作用在什么元素上?能让什么元素水平居中## text-align...

  • 入门任务13

    说一说你平时写代码遵守的编码规范## 以bootstrap编码规范为基准,尽量遵守这个标准 传送门 语义化尽量使用...

  • 入门任务12

    什么是 CSS hack## CSS hack由于不同厂商的浏览器,比如Internet Explorer,Saf...

网友评论

      本文标题:任务6-css入门

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