W3cschool CSS Learning précis-writers

What is CSS?

CSS refers to cascading style sheets (cascading style Sheets)

Style defines how HTML elements are displayed

Styles are typically stored in style sheets

Add a style to HTML 4.0 to solve the problem of separating content from performance

External style sheets can greatly improve productivity

External style sheets are typically stored in CSS files

Multiple style definitions can cascade to a

CSS rules

Consists of two main components: the selector, and one or more declarations:

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.

ID Selector Selector

The ID selector can specify a specific style for an HTML element that is labeled with a specific ID.

The HTML element sets the ID selector with the id attribute, and the ID selector in the CSS is defined as "#".

The following style rules apply to element properties Id= "PARA1":

class Selector Selector

The class selector is used to describe the style of a set of elements, which differs from the ID selector, and class can be used in multiple elements.

The class selector is represented in the HTML as a class attribute, and in CSS, the category selector takes a point "." Number display:

In the following example, all HTML elements that have a center class are centered.

ID Properties/ class name do not start with a number, the number begins with an ID in Mozilla/firefox does not work in the browser.

There are three ways to insert a style sheet:

External style sheet

Internal style sheet

inline 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):

<link rel= "stylesheet" type= "Text/css" href= "Mystyle.css" >

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:

Hr{color:sienna;}
p {margin-left:20px;}
Body {background-image:url ("/images/back40.gif");}

Do not leave spaces between the attribute values and the units. If you use "margin-left:20 px" instead of "margin-left:20px", it works only in IE 6, but not in Mozilla/firefox or Netscape.

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:

<style>

hr {Color:sienna;}

p {margin-left:20px;}

Body{background-image:url ("Images/back40.gif");}

</style>

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:

<p style= "color:sienna;margin-left:20px" >thisis a paragraph.</p>

Multiple styles

If some properties are defined by the same selector in a different style sheet, the property values are inherited from the more specific style sheet.

For example, an external style sheet has three properties for the H3 selector:

H3

{

color:red;

Text-align:left;

font-size:8pt;

}

An internal style sheet has two properties for the H3 selector:

H3

{

Text-align:right;

font-size:20pt;

}

If this page with an internal stylesheet is connected to an external style sheet, the H3 gets the following style:

color:red;

Text-align:right;

font-size:20pt;

That is, the color attribute will be inherited from the external style sheet, and the text arrangement (text-alignment) and font size (font-size) will be superseded by the rules in the inner style sheet.

Multiple styles are stacked as one

Style sheets allow style information to be specified in several ways. Styles can be specified in a single HTML element, in the header element of an HTML page, or in an external CSS file. You can even reference multiple external style sheets within the same HTML document.

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

4, inline style (inside HTML elements)

Therefore, the inline style (inside the HTML element) has the highest precedence, which means that it takes precedence over the style declaration in the label, the style declaration in the external style sheet, or the style declaration in the browser (the default).

CSS Frame models (box model)

All HTML elements can be thought of as boxes, and in CSS, the term "box model" is used for design and layout.

The CSS box model is essentially a box that encapsulates the surrounding HTML elements, which include: margins, borders, padding, and actual content.

The box model allows us to place elements in the space between other elements and the borders of surrounding elements.

The following picture illustrates the box model:

Description of different parts:

Margin-Clears the border area. Margin has no background color, it is completely transparent

Border-padding and content around the border. The border is affected by the background color of the box

Padding-Clears the area around the content. Is affected by the background color of the fill in the box

Content-The contents of the box, displaying text and images

To set the width and height of the elements in all browsers correctly, you need to know how the box model works.

Groupingselectors

There are many elements in the style sheet that have the same style.

H1

{

Color:green;

}

H2

{

Color:green;

}

P

{

Color:green;

}

To minimize the code, you can use the group selector.

Each selector is separated by commas.

In the following example, we use the group selector for the above code:

Instance

H1,h2,p

{

Color:green;

}

Nested selectors

It may apply to the selector's style inside the selector.

In the following example, a style is specified for all P elements, a style of class= "marked" is specified for all elements, and is used only for class= "tags", and the P element within the class specifies a third style:

Instance

P

{

Color:blue;

Text-align:center;

}

. Marked

{

background-color:red;

}

. Marked P

{

Color:white;

}

Cssdisplay- block and inline elements

A block element is an element that occupies the full width and is a newline character before and after.

Examples of block elements:

• <p>
• <div>

Inline elements require only the necessary width and do not force line breaks.

Examples of inline elements:

• <span>
• <a>

How to change the display of an element

Inline elements and block elements can be changed, and vice versa, so that the page appears to be combined in a particular way and still adheres to web standards.

The following example displays the list items as inline elements:

Instance

Li {display:inline;}

The following example takes a span element as a block element:

Instance

span {display:block;}

CSS Combo Selector

The note Combination selector illustrates the direct relationship of the two selectors.

The CSS Combo selector includes a combination of various simple selectors.

There are four combinations of CSS3 included:

Descendant picker (separated by spaces)

child element selectors (separated by greater than number)

Adjacent sibling selector (separated by a plus sign)

Normal sibling selector (separated by dashes)

W3cschool CSS Learning précis-writers