用户界面

序言

HTML、 CSS、 JavaScript 是前端的三大法宝。 其中, CSS
最为琐碎,虽说它不是一门编程语言,理解容易,在项目中,需要反反复复地修改。
对CSS,需要有一个清晰的理解。
为此,准备了以下CSS的基础面试题。


  • I Like Your
    Color
    输入URL然后它会抓出其中的颜色并用16进制表示。
  • CSS Multi-element Rollover
    Generator
    使用CSS和一个图片创建出一个翻转按钮的样式。
  • CSS Rounded Box
    Generator
  • Ruthsarian
    Layouts
    6个CSS页面布局模板,包括颜色、标题等。
  • Bluerobot Layout
    Reservoir
    2栏和3栏的CSS布局框架
  • Glish CSS Layout
    techniques
    2、3、 4栏的CSS布局框架
  • The
    Layout-o-matic
    输入页宽、栏数和padding,它会自动生成CSS和HTML的布局框架。
  • Little
    Boxes
    w3cn.org上提供的那些布局模板
  • Open Source Web
    Design
    各种免费的完整页面模板
  • Web Builders’
    Toolkit
    更多的模版资源
  • Iconico Online CSS Scrollbar Color
    Changer
  • List-u-Like
    一个CSS菜单生成器:轻松创建采用li并兼容各种浏览器的导航菜单。
  • Nifty Corners:
    无需图片的圆角矩形
  • Round Corner Stone/Icon (rcsi)
    V1.0
    增强的圆角矩形
  • Xylescope
    无需下载其他站点就能轻松分析其CSS代码。
  • W3C Core
    Styles
  • Checkliste zur
    Webseitengestaltung
  • Testseite zur
    Zeilenbreite

CSS Interview Questions

A list of top frequently asked CSS interview questions and answers
are given below.

易用性检查

1) What is CSS?

CSS stands for Cascading Style Sheet. It is a popular styling language
which is used with HTML to design websites.


  • Accessibility Valet
    Demonstrator
  • Bobby Online
    Service
  • Cynthia
    Says
  • OCAWA Web Accessibility
    Expert
  • Torquemada
    使用工具对页面进行一个完整的易用性分析方法测试,以快速辨别页面中哪些部分存在错误。
  • UI Site
    check
    一个站点检查工具,只需要输入你的网址,便可以列出几十个验证器和易用性工具。
  • WAVE 3.5 Accessibility
    Tool
    可以提供你页面上的易用性细节和错误方面的有用信息。他会用红黄绿蓝等几种图标来表示需要改进的页面部分。这些图标代表了你页面上有关结构、内容、可用性和易用性方面的问题细节。你可以清楚地看到当前页面上哪些位置存在问题。
  • Web-based Site Usability
    Checker
  • WebXACT Quality & Accessibility
    Check
    一个免费的在线服务,让你对单个页面进行质量、易用性和保密性问题的测试。
  • Will the browser apply the
    rule(s)?
  • TAW – Test accessibilidad
    web

2) What is the origin of CSS?

SGML (Standard Generalized Markup Language) is the origin of CSS.


整理和优化

3) What are the different variations of CSS?

Following are the different variations of CSS:

  • CSS1
  • CSS2
  • CSS2.1
  • CSS3
  • CSS4

  • CSS Formatter and
    Optimiser
    能让你选择你的CSS更易读还是更小。
  • CSS
    Compressor
    使用这个工具可以压缩你的CSS使之提高载入速度和节约带宽。
  • Online CSS
    Compressor
    多种途径来清理并压缩你的CSS,牺牲了可读性来获得相当程度的优化和尺寸的减少。
  • CSS
    Compressor
  • CSS Syntax Checker for BBEdit and
    TextWrangler
  • CSSTidy
    CSSTidy 是一个开源的CSS解释器和优化工具
  • CSS Tweak ~ Web Based CSS
    Tweaker!
    CSS Tweak 会优化你的CSS以减少文件大小和下载时间。
  • Clean CSS – Optmize and Format your
    CSS
  • Format CSS
    Online
    自动格式化你的CSS使之便于阅读和编辑
  • Online CSS
    Optimizer
    CSS Optimizer 优化并减少CSS的文件尺寸
  • Online CSS
    Optimiser/Optimizer
    这个工具用于优化CSS代码。
  • Tabifier
    使HTML和CSS代码变漂亮。
  • Webucator
    有一个CSS参考手册,你还可以在上面测试你的CSS代码
  • CSS
    Centricle
    CSS hack浏览器兼容一览表 (就是w3cn.org 上的那个)

4) How can you integrate CSS on a web page?

There are three methods to integrate CSS on web pages.

  1. Inline method
  2. Embedded/Internal method
  3. Linked/Imported/External method

字体

澳门新葡亰8455下载app,5) What are the advantages of CSS?

  • Bandwidth
  • Site-wide consistency
  • Page reformatting
  • Accessibility
  • Content separated from presentation

  • CSS Font and Text Style
    Wizard
    你可以在这里测试用不同的字体和样式来生成CSS源代码。
  • Em
    Calculator
    转换字体大小到em的工具
  • text sizing – up the garden
    path
    不同浏览器下字体表现的研究,共有264个截图。

6) What are the limitations of CSS?

  • Ascending by selectors is not possible
  • Limitations of vertical control
  • No expressions
  • No column declaration
  • Pseudo-class not controlled by dynamic behavior
  • Rules, styles, targeting specific text not possible

表单

7) What are the CSS frameworks?

CSS frameworks are the preplanned libraries which makes easy and more
standard compliant web page styling.


  • Accessible Form
    Builder
    轻轻松松生成符合XHTML标准的表单。
  • CSS Form Code
    Maker
    表单生成器
  • JotForm
    所见即所得的表单生成器
  • korhoen
    typeviewer
    帮你查看CSS的排版效果,帮你调整使之易读。

8) Why background and color are the separate properties if they should always be set together?

There are two reasons behind this:

  • It enhances the legibility of style sheets. The background property
    is a complex property in CSS and if it is combined with color, the
    complexity will further increases.
  • Color is an inherited property while background is not. So this can
    make confusion further.

布局

9) What is Embedded Style Sheet?

An Embedded style sheet is a CSS style specification method used with
HTML. You can embed the entire style sheet in an HTML document by using
the STYLE element.


  • CssCreator -> Page
    Layout:
    this generator will create a CSS layout that has fixed width left
    and/or right columns with a dynamic width center column, all the
    same height with header and footer.
  • CSS HTML PHP Website Template
    Maker
    一个PHP – HTML –
    CSS模板生成器,可以生成包括页头和页尾的两栏布局的模板。
  • Firdamatic
    Firdamatic? 是一个无表格的布局生成器。
  • Free CSS Template Code
    Generator
    生成三栏的布局
  • Layout-o-Matic
    也是一个无表格的布局生成器。
  • QrONE CSS
    Designer
    在线CSS生成器
  • Scriptomizers
    一个CSS样式生成器
  • The Generator Form
    v2.90
    1-3栏可定制的CSS页面生成器。

10) What are the advantages of Embedded Style Sheets?

  • You can create classes for use on multiple tag types in the
    document.
  • You can use selector and grouping methods to apply styles in complex
    situations.
  • No extra download is required to import the information.

酷站

11) What is CSS selector?

It is a string that identifies the elements to which a particular
declaration will apply. It is also referred as a link between the HTML
document and the style sheet. It is equivalent of HTML elements.


  • CSSElite
  • openwebdesign.org
    设计师和站长在这里分享网页设计模板和资讯。
  • CSS
    thesis
  • Wow-Factor
  • Web Standards
    Awards
  • W3 Compliant
    Sites
  • Unmatched
    Style
  • The Weekly
    Standards
  • CSS-Mania
  • CSS
    Drive
  • CSS
    Import
  • CSS Zen
    Garden
  • CSS
    Vault
  • CSS
    Beauty
  • Stylegala

12) What is ruleset?

Ruleset is used to identify that selectors can be attached with other
selectors. It has two parts:

  • Selector
  • Declaration

帮助向导 / Hacks / 学习资源

13) What is the difference between class selectors and id selectors?

An overall block is given to class selector while id selectors take only
a single element differing from other elements.


  • SelectOracle
    Explains the structure of CSS- and HTML-documents. Enter semi-colon
    separated selectors or just paste in your existing rulesets into the
    “Direct Input area, or provide the URL of a stylesheet or an HTML
    document with an embedded stylesheet in the “URL Input area.
    English, Spanish, German and Bulgarian versions are available.
  • Tom Lee has a tutorial on Max-width in IE Using a CSS
    Expression.
    Word of caution: I hear using this method can be rather hairy, in
    some cases crashing the browser.
  • Future-proof your CSS with Conditional
    Comments
    from Bruce Lawson is a great comprehensive collection of CSS’s that,
    when combined, addresses most of CSS issues with different browsers.
  • IE Word Wrap Doppelganger
    Bug
    这个站点展示了标题(heading)元素在IE6中换行时会留个小尾巴的bug。
  • Images, Tables, and Mysterious
    Gaps
    seems like something I should’ve known already about the behavior of
    inline elements in strict mode. But of course it took me an hour of
    agony before finally realizing the ultimate truth: I’m not that
    smart.
  • Easy CSS hacks for
    IE7
    — IE7下可以用的CSS Hacks。
  • 针对IE7, Firefox 1.5和Opera
    8.5的Web浏览器CSS支持
    一览表。
  • snook.ca on the “+ CSS
    hack
    which you can use to target IE6 and
    IE7 only.
  • On having
    layout
    提供了很多信息围绕IE其特有的“渲染概念:hasLayout — one of the major
    causes for headache when it comes to how IE decides to pain the
    boundaries of certain HTML elements: 

    • “Internet Explorer
      中有很多奇怪的渲染问题可以通过赋予其“layout得到解决。John
      Gallant 和 Holly Bergevin 把这些问题归类为“尺寸bug(dimensional
      bugs),意思是这些 bug
      可以通过赋予相应元素某个宽度或高度解决。这便引出关于“layout的一个问题:为什么它会改变元素的渲染特性,为什么它会影响到元素之间的关系?这个
      问题问得很好,但却很难回答。在这篇文章中,我们专注于这个复杂问题会有那些方面的表现,某一方面的具体讨论和范例请参考文中给出的相关链接。

    这篇文章的中文翻译参见承志的SharkUI:On having
    layout

  • Negative text-indent and
    underline
    — No matter how far on the left the real text is, the underline will
    be stretched all the way to the right in some PC browsers, namely
    the Firefox.

  • IE6 Multi Class
    Bug
    — Again, something that could’ve brought to my attention last week!

    • …Internet Explorer fails to render backgrounds for elements that
      have both an ID and a class defined. For instance,
      #photos.background1 will display the corresponding background
      in IE6 for Windows, but once that
      has been defined, #photos.background2, #photos.background3,
      etc. will not be displayed.
  • Ten more CSS tricks you may not
    know
    包括少量的IE bug修复手段
  • The “Holly
    Hack
    — 著名的taming IE/Win CSS display bug by assigning a dimensional
    value such as height:1%;
  • CSS
    tests
    很不错的一系列CSS测试页面
  • max-width in
    IE
    用IE的expression来模拟max-width
  • http://imfo.ru/csstest/css_hacks/import.php
    用@import来针对不同的浏览器隐藏CSS的一系列方法。
  • Essentials of CSS Hacking For Internet
    Explorer
    助你对付IE的一系列建议。
  • Web
    浏览器标准支持
    用图表来比较IE 6, Firefox 1.0, 和Opera 8.
  • The perils of using XHTML
    properly
    正确使用XML申明和MIME类型。
  • IE Double Float Margin
    Bug.

14) What are the advantages of External Style Sheets?

  • You can create classes for reusing it in many documents.
  • By using it, you can control the styles of multiple documents from
    one file.
  • In complex situations, you can use selectors and grouping methods to
    apply styles.

小贴士

15) What is the difference between inline, embedded and external style sheets?

Inline: Inline Style Sheet is used to style only a small piece of
code.

Embedded: Embedded style sheets are put between the
<head>…</head> tags.

External: This is used to apply the style to all the pages within
your website by changing just one style sheet.


CSS-Based Forms: Modern
Solutions样式表定义的各种漂亮注册与登录表单的收集。

16) What is RWD?

RWD stands for Responsive Web Design. This technique is used to display
the designed page perfectly on every screen size and device. For
example: Mobile, Tablet, desktop, laptop etc. You don’t need to create a
different page for each device.


Hot Dates with
CSS
教你怎样使blog的日期看起来像日历页。

17) What are the benefits of CSS sprites?

: If a web page has large no. of images that takes a longer time to load
because each image separately sends out an http request. The concept of
CSS sprites is used to reduce the loading time for a web page because it
combines the various small images into one image. It reduces the number
of http requests and hence the loading time.


A nice demo of experimenting with CSS-only solution to imagemap with
popups
using unordered list.

18) What is the difference between logical tags and physical tags?

  • Physical tags are referred to as presentational mark-up while
    logical tags are useless for appearances.
  • Physical tags are newer versions on the other hand logical tags are
    old and concentrate on content.

Clagnut shows you how to have Line breaks in
tooltips
by using the carriage return entity . How utterly simple!

19) What is the CSS Box model and what are its elements?

The CSS box model is used to define the design and layout of elements of
CSS.

The elements are:

  • Margin
  • Border
  • Padding
  • Content

Styling check boxes and radio buttons only with
CSS
uses 100% CSS solution (via attribute value selector and positioned
background images) to serve up customized form elements. It’s
semantically correct and degrades well for browsers that doesn’t support
this method (IE), but is it also accessible?

20) What is the float property of CSS?

The CSS float property is used to move the image to the right or left
along with the texts to be wrapped around it. It doesn’t change the
property of the elements used before it.


Stuart Robertson’s CSS text
shadow
technique seems like one of the easiest-to-implement techniques I’ve
come across. It uses :before pseudo element and supports both Safari and
Firefox browsers.

21) How to restore the default property value using CSS?

In short, there is no easy way to restore to default values to whatever
a browser uses.

The closest option is to use the ‘initial’ property value, which will
restore the default CSS values, rather than the browser’s default
styles.


From “holy crap why didn’t I think of that file… Airbag has a simple but
great idea of using a ruler background images in CSS to check DIV
sizing
during development.

22) What is the purpose of the z-index and how is it used?

The z-index helps specify the stack order of positioned elements that
may overlap one another. The z-index default value is zero, and can take
on either a positive or negative number.

An element with a higher z-index is always stacked above than a lower
index.

Z-Index can take the following values:

  • Auto: Sets the stack order equal to its parents.
  • Number: Orders the stack order.
  • Initial: Sets this property to its default value (0).
  • Inherit: Inherits this property from its parent element.

CSS Colors: Take Control Using
PHP
is a wonderful tutorial from Barely Fitz on how to use PHP variables to
represent colors in your CSS which you can then manipulate — quickly
changing all the colors from a single source, generating new colors via
algorythm, etc.

23) Explain the difference between visibility: hidden and display: none?

visibility: hidden simply hides the element but it will occupy space
and affect the layout of the document.

display: none also hides the element but will not occupy space. It
will not affect the layout of the document.


Web Graphics has a CSS3 demo on using
:target pseudo class to style anchor link
targets.

24) What do you understand by W3C?

W3C stands for World Wide Web Consortium.


Dynamic Drive, a long time favorite DHTML code snippet depot of mine,
has started a new spin-off: CSS
Drive.

25) What is tweening?

It is the process of generating intermediate frames between two images.

It gives the impression that the first image has smoothly evolved into
the second one.

It is an important method used in all types of animations.

In CSS3, Transforms (matrix, translate, rotate, scale etc.) module can
be used to achieve tweening.


A More Accessible
Map
— a new tutorial on ALA shows how to create an accessible map with
tooltips via CSS and JS.

26) What is the difference between CSS2 and CSS3?

The main difference between CSS2 and CSS3 is that CSS3 is divided into
different sections which is also known as modules.

Unlike CSS2, CSS3 modules are supported by many browsers.


参考书: 《
全栈开发之道:MongoDB+Express+AngularJS+Node.js


更多全栈技术,请关注微信公众号: “全栈工程师的早读课”,每天早8:00
准时推送技术文章。

Styling horizontal rules with
CSS
— “…Don’t waste hours trying to style horizontal rules consistently
across different browsers. Instead wrap your HR in a DIV, set the HR to
display none and style the surrounding DIV instead.. Now why the heck
didn’t I think of that?

CSS image preloader
technique
from maratz.com — using background image CSS property on images to serve
as image place holders.

stefanhayden.com shows a neat (and easy) way to make sure the client
fetches new CSS with HTML update: just add a variable at the end of the
CSS
with each update.

Wrapping text around curves via
CSS
if you don’t mind the markup cruft.

codylindley.com’s Pushpin Header
Technique
“…is a CSS solution for creating a stationary header out of the thead of
a table while the table’s tbody remains scrollable

hovebox image
gallery
via sonspring. It’s sort of like mini-lightbox that enlarges the
thumbnails on hover. Very nice.

Beautifully Numbered
Lists
looks nice except that it’s not really an ordered list. Instead it used
definition lists inside the ordered list for presentation — which means
true standardistas might object.

In what could only be catagorized under Uber-Anal department,
ollicle.com how to alter CSS line-height based on paragraph width via
javascript for optimal
readbility.

From “I didn’t know that file… wg tells us that using ? instead of a
dash character prevents some browser from
wrapping
the words connected by it.

Eric Meyer, the man with CSS skillz that payz da billz, reveals
something I’ve never heard of before: line-height property can use
unitless
values!
The differences between united vs. unitless declarations are well
described in his article but I can’t believe that I had it all wrong.
I’ve been telling everyone that “You must declare unit for ANY
measurement values unless it’s zero.

loudandlonely has an interesting article on how to obscure your email
address via
CSS
by using some clever a:link:before and a:link:after pseudo-elements.

digital-web has a good run down on things to consider when using CSS
typography.

456bereastreet takes a first crack at explaining CSS3
selectors

Another good footer at the bottom using only
CSS
demo.

Pup’s Box Flow
Hack
shows you how to allow even block items to flow around floating boxes.

网站地图xml地图