HTML + CSS Study Notes (5)

I. CSS style preliminary

From today on, I began to learn another big piece of CSS. CSS is English cascading
Style sheet is a computer language used to represent file styles such as HTML and XML. In layman's terms, CSS separates the content formats of webpages, which is beneficial to website modification and maintenance.

1. A simple CSS style

h1 {    color: red;    text-align: center;}a {    color: green;    text-align: right;}p {    color: blue;}

These codes are very familiar. Yes, these codes are equivalent to putting forward attributes in HTML together. H1 {} sets the title style, a {} sets the link style, and P {} sets the paragraph style.

This code can be stored in HTML code. You can use the <style> </style> label or put it in a separate file, that is, a CSS file. This is an external style table.

2. layout attributes

Layout attributes include attributes that affect the element location on the webpage. For example, the layout attribute can control the width, height, margin, fill and alignment of the content, or even control the precise position of the content on the webpage.

① Display
Block: a new line is displayed.
List-item)

Inline: displays the preceding content.

None: hidden and not occupying space ② width and height
Controls the size of the rectangle area of an element. The unit is pixel or centimeter. Try to unify it as much as possible.

③ Margin
Controls the size outside the rectangle of an element, such as margin-Left = 10px. The left margin is set to 10 pixels.

3. Format attributes

The formatting attribute is used to control the appearance of webpage content, such as the outer border and font.

① Border
Border-width; border-color; border-style; border-left.

② Font
I will not go into detail here. I just want to emphasize that font-family refers to the font, and font-style refers to the use of italics,

In addition, you can use text-indent to control the indentation of the first line. You can use 2em to indent two Chinese or four English characters.

 

Ii. Style

A style class is used to set the content of the same type to different formats. For example, if you set two H1 s, one font should be in red, and one font should be in blue, and one H1 style cannot be used.

In this way, we can use the style class implementation, just add "." And class name after the original style, and then add class = "Style Class Name" when using it, as shown below:

H1.red {color: red ;}

H1.blue {color: Blue ;}

<H1 class = "red"> here is the title of the red letter

<H1 class = "blue"> blue title

◇ General

You can set the same style for different types of content. Remove the type and retain only the vertices and class names.

. Bold {font-weight: bold}

<H1 class = "bold"> title

<H3
Class = "bold"> title

◇ Set the same style at a time and separate h1.text and P. Text with commas
{Color: red ;}

 

3. Advanced Text Formatting skills

1. Use a small uppercase letter: font-variant: Samll-caps

2. Increase the letter Spacing: letter-Spacing: 5px

3. Increase the word Spacing: Word-Spacing: 5px

4. case-sensitive conversion: Text-transform: uppercase (upper case), lowercase (lower case), capitalize (upper case)

 

4. Modify the appearance of a link

It is usually set to Blue underline text by default, and the link becomes purple.

Set the connection style to use a pseudo class. Use a colon (:) instead of a dot. Do not add class = "" CSS to include a mechanism for modifying the link appearance based on the link status,

Links are in four states: Link (unaccessed link), hover (directed to link), active (Click link), and visited (accessed link.

For example, you can set the style when the mouse points to the link.

A: hover {font-weight: bold; color}

V. Code comments

/* Comment */

Click the link to open the exercise result.
______________________________________________________