进击 of python

Front-end learning --CSS

Internet front-end is now divided into three layers:

HTML: HTML. From the semantic perspective description page structure
CSS: Cascading Style Sheets. From the aesthetic responsible for the page angle style
JS: Javascript. From the interactive point of view of the description of the page behavior

So HTML, CSS, JS, also known as front-end Three Musketeers

CSS is a wonderful thing, designers can so that our website is an entirely different look by changing the definition of the style sheet

In other words, CSS is actually clothes page, the page will be dressed "bells and whistles"

CSS acquaintance

CSS called the '' Cascading Style Sheets' (remember that name would be helpful to learn behind you)

His main definition display style HTML content in a browser, such as text size, color, font, bold, etc.

We look at the results:

Look, the word is from the original black, it has turned into a red, put on a red dress!

Using CSS

So, the above effect is how to achieve it? I want to learn it? I'll teach you ah

What if you want to use CSS, first learn a label <style></style>, style tag contains style information pages

By default, the style information of the label is usually CSS format

For example, I have a text 百因必有果！你的报应就是我！, and now I want one hundred because there must be fruit! Redden

This time we can set the style to the role, and only need to write a CSS style statement

First, in the absence of style is so written (only a part of the change, so the label tag alone):

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

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

</body>
</html>

Then we need to <head></head>use the tag<style></style>

And use the following statement:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        span {
            color: red;
        }
    </style>
</head>
<body>

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

</body>
</html>

Then look at the results:

注意：单独将标语用span标签标示出来，不会影响文本的正常显示

如果再给span标签设置了样式，那么该span标签就体现了它的语义

那么在网页中，尤其是文本，在不影响文本内容变化的情况下

并且将凸显的内容标识出来，我们就可以使用span标签再配合我们的css来修改样式

CSS syntax

That last one wrote a line of CSS code, we must know that this is how CSS syntax looks like

CSS style is composed of selectors and declarations, and declarations and the attributes and values:

Selector : we called selector element indicates that the Web using style rules, as all of the above figures pages (span) of the text turns red, and the other elements (such as ul, ol, etc.) will not be affected
Statement : English English colon between the braces "{}" is declared in the attributes and values ":" segmentation. When multiple statements, the middle can semicolon ";" split

That fact may give another chestnut, to help understand the selectors, properties and values:

Zhang {Height: 175cm; Weight: 50kg}

I would like to find Joe Smith, Joe Smith then set the height of 175cm, the weight is set to 50kg

To make it easier to read style, generally within each piece of code written in a new line

p{
    font-size：12px;
    color:red;
}

CSS comments

In css also have a comment statement:

Use /*注释语句*/to indicate (html used ). Like the code below:

/*设置段落默认样式*/
p {
    font-size：12px;
    color: red;
}

***** *****

Learning the front end (VIII): CSS