I am small and live in Wuhan, do two years of new media, ready to use 6 months time to switch to the front end of the industry.

Lesson Objective for today

Yesterday, I had an overall understanding of all tags. Today, I’m ready to have a basic understanding of CSS. It’s a good day for learning

Learning CSS Preparation

Before continuing, you need to have a basic understanding of the following:

  • HTML / XHTML

WHAT(CSS)

  • CSS refers to Cascading Style Sheets
  • How are style definitions displayedThe HTML element
  • Styles are usually stored inThe stylesheetIn the
  • Styles were added to HTML 4.0 in order toSolve the problem of separating content from presentation
  • External style sheetsCan greatly improve the work efficiency
  • External style sheetsUsually stored inThe CSS fileIn the
  • Multiple style definitions are availablecascadingAs a

WHY(CSS)

Stylesheets define how HTML elements are displayed, just as font labels and color attributes in HTML do. Styles are usually stored in external.css files.

You can change the layout and appearance of all your pages by editing a simple CSS document.

HOW(CSS)

CSS rules consist of two main parts: selectors, and one or more declarations


The rules of Rule description
The selector Need to change the styleHTMLThe element
The statement By aattributeAnd avaluecomposition

Property: is the style property you want to set (style attribute).

Each attribute has a value, separated by a colon.

CSS declarations always start with a semicolon (;) The declaration is always enclosed in braces ({}).

WHERE(CSS)

Refer to instructions Reference way use
Styles are used for multiple pages External style sheets use<link>The label
Styles are used for single pages Internal style sheet use<style>The label
Styles are used once Inline style sheets usestyleattribute

External style sheets (External style sheet)

External stylesheets are ideal when styles need to be applied to many pages.

In the case of external stylesheets, you can change the look of an entire site by changing one file. Each page is linked to the stylesheet using the tag. The tag is in the header.

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

Copy the code

The browser reads the style declaration from the file mystyle.css and formats the document according to it.

External stylesheets can be edited in any text editor.

The file cannot contain any HTML tags. Stylesheets should be saved with the.css extension.

Internal style sheets (Internal style sheet)

Internal style sheets should be used when individual documents require special styles.

You can define an internal style sheet in the document header with the 

<head>

<style>

hr {color:sienna; }

p {margin-left:20px; }

body {background-image:url("images/back40.gif"); }

</style>

</head>

Copy the code

Inline style (Inline style)

By mixing presentation and content, inline styles lose many of the benefits of stylesheets.

To use inline styles, use the style attribute within the associated tag.

The style property can contain any CSS property. This example shows how to change the color and left margin of a paragraph

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

Copy the code

Precautions!!

Use this approach with caution, for example when the style needs to be applied only once to an element.

CSS comment

Comments are used to explain your code and can be edited at will; browsers ignore them.

CSS comments start with /* and end with \*/, as shown in the following example

/* This is a comment */

p

{

text-align:center;

/* This is another comment */

color:black;

font-family:arial;

}

Copy the code

Summary of today’s lesson

  • The main purpose is to separate page presentation from content, hence CSS styles
  • There are three types of introductions: external, internal and inline
  • CSS comment 以 / *Began toA \ * /The browser ignores it

Today the mood

Now that I have a basic understanding of CSS, I hope to learn more about rules and declarations tomorrow

This article is formatted using MDNICE