美文网首页我爱编程
CSS问题搜集解答

CSS问题搜集解答

作者: 饥人谷_Young丶K | 来源:发表于2017-01-23 23:59 被阅读0次

1.CSS的全称是什么?

CSS(Cascading Style Sheets):层叠样式表
样式定义如何显示 HTML 元素,样式通常存储在样式表中
CSS是一种样式表语言,用于为HTML文档定义布局, 例如,CSS涉及字体、颜色、边距、高 度、宽 度、背景图像、高级定位等方面。

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

  1. 外部样式表 写一个.CSS文件 然后用<link href=“index.css” type=“text/css” rel=“stylesheet”>进行引用。
  2. 内部样式表(位于标签内部)<style type=“text/css”>p{color: red;}</style>
  3. 内联样式(在html元素内部)<p style=“color:red; font-size:14px;”>hello</p>

link和@import的区别:外部引用CSS两种方式link和@import的方式分别是:
XML/HTML代码
<link rel=“stylesheet” rev=“stylesheet” href=“CSS文件” type=“text/css” media=“all” />
XML/HTML代码

          <style type=“text/css” media=“screen”>
          @import url(“CSS文件”);
          </style>

两者都是外部引用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
b.css
../imgs/a.png
/Users/hunger/project/css/a.css
/static/css/a.css
http://cdn.jirengu.com/kejian1/8-1.png

分为三个方面:
  • 相对路径:以当前文件所在路径为参考来查找相关文件
    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:在本地计算机上通过该路径定位到a.css文件

  • 网路路径:例如开辟一个本地服务器,当前地址为http://localhost:8080/code/index.html, 在该HTML文件中存在以下路径:/static/css/a.css:以绝对路径的方式在服务器中寻找a.css文件,即在服务器上直接通过该路径寻找相关文件
    css/a.css:以相对路径的方式在服务器中寻找a.css文件,即在index.html文件所在路径(目录)中寻找css文件夹下的a.css文件
    http://cdn.jirengu.com/kejian1/8-1.png:该地址可以找到定位到互联网上的"8-1.png"文件:如下

    例子

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

  1. 可以直接将图片上传到服务器,在页面使用这张图片;或者将图片存在本地服务器,然后打开本地服务,然后再在JS BIN上引用图片
  2. 如果这个图片本来就存在网络上其他的服务器上,可以直接使用图片的网络路径链接的方式在页面上添加url引用这张图片
    ![](/images/XXXXX.jpg)

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

  1. 语法统一使用小写
  2. 不使用内联样式的style元素定义样式,建议采用外部css
  3. id和class使用有区分度的单词
  4. 块内容缩进
  5. 属性名:后面加一个space
  6. 0后面默认不加单位
  7. class单词间以 - 分隔
    其他更丰富的规范:参考资料

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

如图所示

与JavaScript相关:


JavaScript相关

相关文章

  • CSS问题搜集解答

    1.CSS的全称是什么? CSS(Cascading Style Sheets):层叠样式表样式定义如何显示 HT...

  • css问题搜集

    margin 负值问题margin百分比margin外边距合并合并外边距2深入理解line-heightflexb...

  • CSS常见样式问题搜集

    1.块级元素和行内元素分别有哪些?动手测试并列出4条以上的特性区别? 块级元素:块级元素 行内元素:行内元素 区别...

  • CSS常见样式问题搜集2·

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

  • CSS选择器了解问题搜集

    1.class 和 id 的使用场景? id:id选择器,使用#name定义(name为id名,可任意取名),使用...

  • 搜集问题

    移动端各种 bug 叶小钗 前端之家

  • 问题搜集

    iframe地图

  • 问题搜集

    1.waiting for another flutter command to release the star...

  • css浮动,定位问题解答

    1、浮动的元素有什么特征?对父容器及其子元素、普通元素、文字有什么影响? 浮动的元素在不清除浮动的情况下会脱离正常...

  • 天之游《王者军团》二测官方答疑FAQ

    我们搜集了部分玩家在游戏中遇到的问题,并在本文中为您做出详细解答。 《王者军团》下载地址? 在微信上关注“王者军团...

网友评论

    本文标题:CSS问题搜集解答

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