进击 of python

Learn basic front-end --CSS

CSS styles can be written where it? In fact, CSS styles very flexible plug-in

According to the inserted situation, it can be divided into three cases

And the next will be a brief discussion of these three cases

Inner fitting formula

CSS stylesheets can be directly put code in existing label to go inside

This method is called inline:

<p style='color:red;'>文字颜色为红色</p>

The corresponding style property, written at the beginning label p tag

CSS style code in write style = "" double quotes, if a plurality of set CSS style code can be written together, separated by a semicolon

<p style='color:red;font-size:12px;'>文字颜色为红色</p>

Embedded

There is a new task 百因必有果！你的报应就是我！, I want one hundred because there must be fruit, you, my three turns red

If using built-in, then that would be too difficult (each <span>tag to style = "color: red;" statement, if there are multiple span it?)

So write embedded CSS styles can make us quickly to solve this problem

Embedded CSS style style is to write code in <style type='text/CSS'></style>between labels

Span style unified set of tags:

<style type='text/CSS'>
    span{
        color:red;
    }
</style>

Embedded CSS style must be written in <style></style>between

And general embedded CSS style written <head></head>between

External formula

Just imagine, if we do a similar kind of Taobao Mall website

So with the increasing needs of the project, our CSS code amount will be larger and more at a later stage

Our aforementioned inline and embedded CSS style is certainly not the way, then how should we do?

This time, we can use to write our CSS code into another separate file, that a post-maintenance convenience our code

Then this is an external CSS style style

External CSS style style (also referred to as outer chain) is to write the CSS code in a separate external file, the CSS style file ".CSS" extension

In the <head>inside (not in the style tag) using the <link>tag style file is linked to an HTML file, the following code:

<link rel="stylesheet" href="index.CSS" type="text/CSS">

CSS style file names in a meaningful alphabetical names, such as main.css, index.css, base.css etc.
rel=”stylesheet”
- rel: the relationship between the abbreviation relationship, documents rel attribute is used to define links and HTML documents
- stylesheet: external style sheet document
href: is designated a hyperlink (a label before learning time) address value style sheet file URL, href attribute of the target
<link>Label position generally written in <head>the tag of

priority

So many ways, if the overlay to use, with whose style should it? ? ? That is the problem we have now to consider

We do a test:

Use inline css set "a hundred because there must be fruit" in red text.
Then use the embedded css set the text to green
Finally, the use of external style set the text to blue (index.css file settings)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <style>
        span {
            color: green;
        }
    </style>
</head>
<body>
<p><span style="color: red">百因必有果！</span>你的报应就是我！</p>

</body>
</html>

span{
    color: pink;
}

We found that color is red, why? Since the introduction of these three ways is a priority, who is a high priority browser will show who's style attributes

内联式>嵌入式>外部式

Focus here! ! 嵌入式>外部式There is a premise: Location css styles embedded in the back outside a certain style!

green:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <style>
        span {
            color: green;
        }
    </style>
</head>
<body>
<p><span>百因必有果！</span>你的报应就是我！</p>

</body>
</html>

Pink:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span {
            color: green;
        }
    </style>
        <link rel="stylesheet" href="index.css">

</head>
<body>
<p><span>百因必有果！</span>你的报应就是我！</p>

</body>
</html>

So fundamental priority is actually the principle of proximity! , Which was modified elements from the past, with which style!

This is why CSS called Cascading Style Sheets!

***** *****

Front-end learning (IX): CSS foundation