CSS basics of web front-end study notes

1. Introduction to CSS

1. CSS stands for Cascading Style Sheets. In general, styles are usually stored in style sheets, while external styles are usually stored in CSS files, and multiple style definitions can be cascaded into one.

2. CSS can solve the following problems:

(1) Define how to display HTML elements;

(2) Solve the problem of separation of content and performance;

(3) Improve work efficiency.

Second, the basic syntax of CSS

Composition of CSS

CSS is mainly composed of selectors and one or more declarations.

That is: selector { declaration 1, declaration 2, ..., declaration N } (where the selector is usually an HTML element that needs to be styled, and the declaration is composed of attributes and values, separated by colons)

For example: h1 {color:red; font-size:14px;} or h1{

                                             color:red;

                                             font-size:14px;

                                            }

Note : (1) If the value is multiple words, add double quotation marks to the value;

           (2) CSS is not case sensitive. For easy compilation, spaces are usually added between ":" and the value, because spaces will not affect the effect of CSS implementation;

3. CSS selectors

CSS selectors can be roughly divided into: derived selectors, id selectors, class selectors, and attribute selectors.

1. Derived selector

Styles are defined by the positional relationship of elements within their contexts.

For example, there is a piece of html code:

<p><strong>I'm in bold, not italic, because I'm not on the list, so this rule doesn't work for me</strong></p>
<ol>
<li><strong>I am in italics. This is because the strong element is inside the li element. </strong></li>
<li>I am normal font. </li>
</ol>

 I want to italicize the code between the <li><strong> tags in the code, which can be defined like this:

 

 

li strong{
       font-style:italic;//Font style: italic
       font-weight:normal; font weight: normal
    }

 2. id selector

The id selector can specify a specific style for HTML elements marked with a specific id, defined by the "#" sign.

For example the following html code:

<p id="red">This paragraph is red. </p>
<p id="green">This paragraph is green. </p>

 Change the p element with id="red" to red, and change the p element with id="green" to green

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

 The id selector can also be used with derived selectors, for example:

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

Note: The id attribute can only appear once per html

 3. Class selector

In CSS, class selectors are displayed with a dot

For example the following html code:

<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>

 Define a class selector:

.center {
 text-align:center;
}

 Class selectors can also be used as derived selectors, for example:

.fancy td {
	color: #f60;
	background: #666;
	}

 4. Attribute selector

Styles the html element with the specified attribute.

For example for the following html code:

<h1>Styles can be applied:</h1>
<h2 title="Hello world">Hello world</h2>
<a title="W3School" href="http://w3school.com.cn">W3School</a>

 Set the style:

[title]
{
color:red;
}

 It can also be extended to attribute and value selectors, etc., as in

[title=w3school]
{
color:red;
}

 4. References to CSS

There are three ways to reference style sheets: internal style sheets, external style sheets, and inline styles

1. Internal style sheet

<head>
<style type="text/css">
//css code snippet
</style>
</head>

 2. External style sheets

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

 Among them: rel represents the relationship between the current document and the linked document, href specifies the address of the linked document, the format is ".css"

3. Inline style sheets (generally not used)

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

 So, write the style in the tag

Note : In the html document, if the internal style sheet and the external style sheet exist at the same time, the internal style sheet will be the main one, and the external style sheet will be supplemented.

5. CSS style

CSS styles are divided into: background, text, font, link, list, table, outline

Six, CSS box model (box model)

Divided into: padding, margins, borders, margins combined

Seven, CSS positioning

Divided into: relative positioning, absolute positioning, floating

 

Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=326961643&siteId=291194637