Home > Developer > Web Develop

Topsy html5+ Cross-platform development [8] CSS Basics-Experience CSS

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

CSS Origins

    • The decline of the Web:

      • In the early days of the web (1990-1993), HTML was a very limited language. Consists almost entirely of structured elements used to describe paragraphs, hyperlinks, lists, and headings. With the advent of the World Wide Web (the enhancement of user interaction experience), the need for HTML is increasing, and it is imperative that HTML add new elements to complete a specific function

      • Under pressure, HTML begins to appear <font>，<i> , <s> as tags. but HTML is a description of the structure of the language, also began to describe the external expression . A few years later this casual approach exposes serious problems : 1: Because of the structure and writing style of HTML, the page is not structured, reducing the accessibility of Web pages;2: page maintenance is becoming more and more difficult.

    • Great Savior CSS

      • When there is a problem with the expression tag in HTML, there is no neglect. In 1995, the consortium began publishing an ongoing program called CSS (work-in-prrgress).
      • Compared to HTML, the Css支持更丰富的文档外观，Css可以为任何元素的文本和背景设置颜色；允许在任何元素外围设置边框；允许改变文本的大小，装饰（如下划线），间隔，甚至可以确定是否显示文本 .
Experience CSS

Sample Analysis:
There is a title (H1), and there are some paragraphs (P)
The title is centered and the paragraph is centered. So we can set H tag and P tag's align property equal to center to implement
Both the title and the paragraph have colors, both have fonts and are size, so you need to wrap a font tag with the font and then set the color and font and size

    • Complete with HTML

<H1 Align="Center"><Font  Face="Microsoft Jas Black" Color="Red">The rule of success</Font></H1><P Align="Center"><Font  Face="Microsoft Jas Black" Color="Blue" size="5">Be late and ruin your life</Font></P><P Align="Center"><Font  Face="Microsoft Jas Black" Color="Blue" size="5">Early retirement and poor generation</Font></P><P Align="Center"><Font  Face="Microsoft Jas Black" Color="Blue" size="5">Commute on time</Font></P><P Align="Center"><Font  Face="Microsoft Jas Black" Color="Blue" size="5">will become high-rich handsome</Font></P>

    • Disadvantages of modifying styles through HTML tags:
      1. Need to remember which tags have what properties, if the label does not have this attribute, then the setting has no effect;
      2. When requirements change, we need to modify a large number of code to meet the existing requirements;
      3.HTML only one function is to add semantics.
    • Complete with HTML+CSS
<! DOCTYPE html><HTML Lang="en"><Head>    <Meta CharSet="UTF-8">    <title>01-Experience CSS</title>    <style type="Text/css">h1{Text-align:center;            color:red;        Font-family: "Microsoft Jas Black";            } p{Text-align:center;            Color:blue;        font-size:20px; }</style></Head><Body><H1>The rule of success</H1><P>Be late and ruin your life</P><P>Early retirement and poor generation</P><P>Commute on time</P><P>will become high-rich handsome</P></Body></HTML>
    • What are the benefits of using CSS to modify styles?
      1. Do not remember which attributes belong to which label;
      2. When requirements change, we do not need to modify a large number of code to meet the needs;
      3. CSS has only one function in front-end development, which is to modify the style .

So in the enterprise development to modify the style is to be given to CSS to do .

    • CSS格式
< style type="text/css">        label name {            attribute name: The value corresponding to the property;            ...        } </ style >

    • Note the point:

      • The style tag must be written between the start tag and the end tag of the head tag (that is, it must be a brotherly relationship with the title tag);
      • The type attribute in the style tag can actually be used without writing, the default is Type= "Text/css" ;
      • The style must be set in a fixed format. key: value; where colons: cannot be omitted, semicolons cannot be omitted in most cases (when there are multiple attributes, the last one can be omitted)

    • How to learn CSS?

      • CSS learning is divided into two parts, one is the CSS properties, and the other is the CSS selector. In other words, the two parts of the CSS will have no other things.


Reference: Geek Jiangnan -08-css Basics-Experience CSS

Topsy html5+ Cross-platform development [8] CSS Basics-Experience CSS

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
customize html5 audio player css cross platform development ide cross platform development tools cross platform app development frameworks java cross platform mobile development output css css ellipsis

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More