Web Learning CSS

CSS refers to cascading style sheets (cascading style Sheets), a standard layout language that controls the size, color, and layout of elements. CSS has been invented by the consortium to replace table-based layouts, frameworks, and other non-standard performance methods. Styles define how HTML elements are displayed; Styles are typically stored in style sheets, and external style sheets are stored in CSS files.

CSS can solve the duplication of style definition in HTML code, improve the maintainability of later style code, and enhance the function of the Web page display effect. Simple sentence: CSS separates the content of the Web page from the display style, which improves the display function. 1, CSS Basic part

Stacking order

What style is used when the same HTML element is defined by more than one style? Generally, all styles are stacked in a new virtual style sheet according to the following rules, where the number 4 has the highest precedence.

1. Browser default settings
2. External style sheet
3. Internal style sheet (inside the
4. Inline style (inside HTML elements)

CSS Basic syntax

A CSS rule consists of two main parts: a selector, and one or more declarations. selector {declaration1; declaration2; ... declarationn}
Selectors are usually HTML elements that you need to change the style. Each declaration consists of an attribute and a value. The property is the style property (style attribute) that you want to set. Each property has a value. Attributes and values are separated by colons. selector {Property:value}

The CSS is not sensitive to casing. However, there is one exception: class and ID names are sensitive to capitalization if they involve working with HTML documents.

CSS Advanced Syntax

Selectors are grouped so that you can group selectors so that the grouped selectors can share the same declaration. Separate the selectors that need to be grouped with commas. In the following example, we group all the header elements. All the caption elements are green.

1 H1,h2,h3,h4,h5,h6 {2     color:green;3}

CSS Derivation selectors
You can make the markup more concise by defining the style based on the context of the element in its place. In CSS1, selectors that apply rules in this way are called context selectors (contextual selectors) because they rely on context to apply or avoid a rule. In CSS2, they are called derived selectors, but whatever you call them, they work the same way.
A derived selector allows you to determine the style of a label based on the context of the document. By using derived selectors reasonably, we can make the HTML code neater. For example, if you want the strong element in the list to become italic instead of the usual bold, you can define a derived selector that only works on the strong tag in the LI tag:

1 Li Strong {2     font-style:italic;3     font-weight:normal;4}

CSS ID Selector
The ID selector can specify a specific style for an HTML element that is labeled with a specific ID. The ID selector is defined as "#". The following two ID selectors, the first one can define the color of the element to be red, the second defines the color of the element as green:

1 #red {color:red;} 2 #green {color:green;}

In the following HTML code, the P element with the ID property of red is shown in red, and the P element with the id attribute green is shown in the blue. Note: The id attribute can only appear once in each HTML document.

1 <p id= "Red" > This paragraph is red. </p>2 <p id= "Green" > This paragraph is greenish. </p>

ID selector and Derivation selector
In modern layouts, ID selectors are often used to establish derived selectors.

#sidebar p {    font-style:italic;    Text-align:right;    Margin-top:0.5em;}

A selector, multiple usages

This ID selector can be used many times as a derived selector, even if the element labeled Sidebar only appears once in the document:

haha for form Id#haha {    color:green;} #haha  Input {    color:blue;} #haha  Select {    color:red;}

The above style will only be applied to the contents of the ID that is within the haha element. For example, in a form with id haha, the font color in the input tag is red in the Blue,select label, and the other color is green.

CSS class Selector

In CSS, the class selector is displayed as a dot:. Center {Text-align:center}
In the example above, all HTML elements that have the center class are centered. In the following HTML code, both the H1 and P elements have the center class. This means that both will adhere to the rules in the. Center selector.

1 
Note: The first character of the class name cannot use a number! It doesn't work in Mozilla or Firefox.
Do we use the class selector or the ID selector when we use it? Note that the ID selector is used once, and only once, if there are multiple ID entries that match the ID selector, only the first one will work. Unlike class selectors, ID selectors cannot be used in conjunction because the ID attribute does not allow a space-delimited list of words. Similar to a class, you can select an ID independently of the element. In some cases, you know that a particular ID value appears in your document, but you do not know which element it will appear on, so you want to declare a separate ID selector. For example, you might know that there is an element with an ID value of mostimportant in a given document. You don't know whether the most important thing is a paragraph, a phrase, a list item, or a section heading. You only know that each document will have one of the most important things, it may be in any element, and only one can appear. In this case, it is particularly appropriate to use the ID selector.
CSS Property Selector
Sets the style for the HTML element with the specified property. You can set the style for the HTML element that owns the specified property, not just the class and ID properties. The property selector is especially useful when styling a form that does not have a class or ID:
[Attribute] {    color:red;}
The above code will be for <p attribute= "" > I am a paragraph </p> has a role.
Creation of CSS
How to insert a style sheet, when a stylesheet is read, the browser formats the HTML document according to it. There are three ways to insert a style sheet: an external style sheet, an inner style sheet, and a restrained style.
External style sheet
An external style sheet is an ideal choice when the style needs to be applied to many pages. With an external style sheet, you can change the appearance of the entire site by changing a file. Each page uses <link> tags to link to the style sheet. <link> tags at the head of (document):
1 
The browser reads the style declaration from the file mystyle.css and formats the document according to it. External style sheets can be edited in any text editor. The file cannot contain any HTML tags. Style sheets should be saved with a. css extension. Here is an example of a style sheet file:
1 hr {Color:sienna;} 2 p {margin-left:20px;} 3 Body {background-image:url ("Images/back40.gif");}
Internal style sheet
An internal style sheet should be used when a particular style is required for a single document. You can use the <style> tag to define an internal style sheet at the head of the document, just like this:
inline style
Inline styles lose many of the benefits of stylesheets because of the mix of performance and content. Use this method with caution, such as when the style only needs to be applied once on one element. To use inline styles, you need to use style properties within the relevant tags. The Style property can contain any CSS properties. This example shows how to change the color and left margin of a paragraph:
1 <p style= "Color:sienna; margin-left:20px ">2 This is a Paragraph3 </p>
HTML+CSS Program Examples
The web-side displays the following effects:
2. CSS style
CSS Background
CSS allows you to apply a solid color as a background, and also allows you to create quite complex effects using a background image. CSS's ability in this area is far above HTML.
p.bg {    background-image:url (img/bg_1.jpg);    padding:20px;    background-repeat:repeat-y;    Background-position:center;    Text-align:center;} <p class= "BG" > I am a background paragraph </p>
The final page effect is:
CSS text
CSS Text properties Define the appearance of text. With text properties, you can change the color of the text, the spacing of characters, the alignment text, the decoration, the indentation of the text, and so on.
1 {2     text-indent:2em;/* Indent 2 characters */3     text-align:left;/* Left align */4     word-spacing:20px;/* character interval */5     letter- spacing:5px; /* Letter interval */6     text-transform:uppercase;/* Text converted to uppercase character */7     text-decoration:underline;/* Text underline processing */8}
CSS Fonts
{    Font-family:serif;/* Select font *    /font-style:normal;/* Text Format bold/italic */    font-size:20px;/* Text size */}
CSS links
a:link {color:blue;}        /* Non-visited link */a:visited {color:red;}    /* The link that has been visited */a:hover {color:yellow;}    /* mouse pointer moves to link on */a:active {color:black;}    /* The link that is being clicked */
CSS List
Ul.disc {list-style-type:disc}ul.circle {list-style-type:circle}ul.square {list-style-type:square}ul.none { List-style-type:none}
CSS Tables
table, Th, td {    border:1px solid blue;/* Border set Blue table box */    border-collapse:collapse;/* Whether to collapse table borders to a single border */}table {
   width:100%; /* Table width */    height:100%;}
CSS Outlines
A contour (outline) is a line that is drawn around an element, at the periphery of the edge of the bounding rectangle, that acts as an element of prominence. The CSS outline property specifies the style, color, and width of the element outline.
{    outline:dashed;    outline-color:red;    outline-style:dotted;}
3. CSS Box model
The CSS box model specifies how the element frame handles element content, padding, borders, and margins.
The inner part of the element box is the actual content, and the content is directly surrounded by the padding. The inner margin renders the background of the element. The edge of the padding is a border. Outside the bounding rectangle is the margin, and the margin is transparent by default, so it does not obscure any subsequent elements.
CSS padding
h1 {    padding:10px;/* All H1 elements have an padding of 10 pixels */}h1 {    padding:10px 0.25em 2ex 20%;/* Set the padding for each edge in the top, right, bottom, and left order, with no The same unit */}h1 {    padding-top:10px;/* up or down respectively set */     padding-right:0.25em;     Padding-bottom:2ex;     padding-left:20%;}
CSS Border
The bounding rectangle (border) of an element is one or more lines around the content and padding of the element. The CSS border property allows you to specify the style, width, and color of the element's border.
h1 {    border-style:outset;/* Set Border style (raised button effect) */    border-width:10px;/* Border Width    */border-color:red;/* Border color * /}
CSS Outer box
h1 {margin:10px;/* Four-sided margin Properties    */    margin:20px 30px 30px 20px;/* Four-sided margin properties */    margin-top:20px;/* Unilateral margin properties */
   margin-right:30px;    margin-bottom:30px;    margin-left:20px;}
4. CSS Positioning
There are three basic positioning mechanisms for CSS: normal flow, floating, and absolute positioning. Unless specifically specified, all boxes are positioned in the normal stream. That is, the position of an element in a normal stream is determined by the position of the element in the (X) HTML. Block-level boxes are arranged from top to bottom, and the vertical distance between boxes is calculated from the vertical margin of the box. The inline box is arranged horizontally in a row. You can use horizontal padding, borders, and margins to adjust their spacing. However, vertical padding, borders, and margins do not affect the height of the inline box. A horizontal box formed by a row is called a line box, and the height of the row box is always sufficient to hold all the inline boxes it contains. However, setting the height of the row can increase this box.
CSS relative positioning
　　Relative positioning is a very easy-to-grasp concept. If a element is positioned relative to it, it will appear where it is located. You can then move the element "relative to" its starting point by setting a vertical or horizontal position. If you set top to 20px, the box will be 20 pixels below the top of the original position. If left is set to 30 pixels, a space of 30 pixels is created on the right side of the element, that is, the element is moved to starboard.
#box_relative {    position:relative;    left:30px;    top:20px;}
CSS Absolute Positioning
　　Absolute positioning makes the position of an element independent of the document flow and therefore does not occupy space. This is different from relative positioning, where relative positioning is actually considered part of the normal flow positioning model because the position of the element is relative to its position in the normal stream. The layout of other elements in the normal stream is like an absolutely positioned element that does not exist:
#box_relative {    position:absolute;    left:30px;    top:20px;}
5, CSS Advanced features
CSS Horizontal arrangement
. line{    Display:inline;/* when the block-level element class is line, the blocks will be displayed horizontally */}
CSS Size
img.normal {    height:normal;/* Set the picture to display normally */}img.small {    height:100px;/* Picture small image display */}
CSS Navigation bar
/* navigation bar format */.navigation  {    margin:0;    padding:0;}. Navigation li {    display:inline;} <p> The following is the navigation bar content </p><ul class= "navigation" >    <li><a href= "#" > Computer </a></li >    <li><a href= "#" > Economy </a></li>    <li><a href= "#" > History </a></ Li></ul>
The Web page displays the following results:
Reference
1. CSS Tutorial
2. HTML of Web Learning
Web Learning CSS