.

Understanding css (Cascading Style Sheets)-Video Beginners guide


     Cascading Style Sheets (CSS) are being used more and more by web
     designers to layout and format web pages. Although they have been
     around for several years now many designers have avoided them due
     to browser incompatibility.
     
     Although compatibility problems still exist they are no longer an
     issue for most applications. Here I will concentrate here on the
     main features and how they work and why they are used.
     You may find yourself using CSS anyway without you knowing as
     programs like FrontPage use CSS (depends on page setup options)
     for some of their functionality.
     
     Styles Solve a Common Problem
     
     HTML was originally designed to define the content of a document
     but not the document presentation/layout. The layout of the
     document was supposed to be taken care of by the browser, without
     using any formatting tags. The content is defined by using tags
     like <h1>, <p>, <table>, which basically say "This is a header",
     "This is a paragraph", "This is a table" and so on.
     
     The principal browser vendors, Netscape and Microsoft, competed by
     adding support for new, proprietary tags (like the <font> tag and
     the colour attribute) and technologies that permitted increasingly
     high-impact Web pages.
     These innovations were good for spurring the development of Web
     technology, but they created problems as well.
     
     Consequently it became more and more difficult to create Web sites
     where the content of HTML documents was clearly separated from the
     document's presentation and that would be displayed correctly on
     any browser.
     
     The World Wide Web Consortium (W3C) - the consortium responsible
     for standardizing HTML - created a language called Cascading Style
     Sheets, or CSS.CSS, unlike HTML, is designed solely to define
     appearance as efficiently as possible.
     
     It can exist either within HTML or as a linked document, letting
     developers separate a Web page's content (marked up in HTML) from
     its presentation (defined by CSS). Both Netscape 4.0 and Internet
     Explorer 4.0 and later support Cascading Style Sheets.
     
     Style sheets work like templates: you define the style for a
     particular HTML element once (e.g. header tag <h1>), and then use
     it over and over on any number of Web pages.
     
      If you want to change how an element looks, you just change the
     style; the element automatically changes wherever it appears.
     (Before CSS, you had to change the element individually, each time
     it appeared) .Style sheets let Web designers quickly create more
     consistent pages--and more consistent sites.
     
     Understanding CSS Video Part 1
     
     
     
     
     
     
     How Style sheets are Implemented
     
     There are 3 basic ways to add the functionality of Style Sheets:
     
     1. Inline - Creating the elements for each HTML Tag. This will
     allow the same HTML Tag to have different styles on the same page.
     2. Embedding - Creating the elements on the page itself that will
     affect every occurrence of an HTML Tag.
     3. Linking - Creating one page that defines the elements and
     include in the pages that you want to affect.
     
     For beginners using Embedding or Linking is recommended.. The
     Linking Style is used when you want to use the same style on
     multiple pages, you can then use Embedding and/or Inline on
     specific pages that don't fit the design style of the Linking
     Sheet.
     
     
     
     Precedence and inheritance
     
     As the term Cascading Style Sheets implies, more than one style
     sheet can be used on the same document, with different levels of
     importance. Generally styles from different style sheets merge
     together (cascade) into a virtual style.
     
     However, If you define conflicting styles for the same HTML
     element, the innermost definition--the one closest to the
     individual tag-wins
     The precedence Style Sheets follow is Inline, Embedding, then
     Linking. Inline Style takes precedence over Embedding Style, which
     takes precedence over Linking Style.
     
     There is a fourth style sheet which is set not by the document
     author but by the reader and that is the browser default. Taking
     this style sheet into consideration the order of precedence is:
     
     1. Inline Style (inside HTML element) .
     2. Embedding Style Sheet (inside the <head> tag).
     3. External Style Sheet.
     4. Browser default.
     
     So, an inline style (inside an HTML element) has the highest
     priority, which means that it will override every style declared
     inside the <head> tag, in an external style sheet, and in a
     browser (a default value).

http://www.build-your-website.co.uk/Cascading-Style-Sheets.htm

 

--
※ 編輯: ott 時間: 2011-05-13 17:05:25