CSS acquaintance

2019/07/26 10:32:49

CSS:

1. grammar by the selector and to a number of declarations of the rule set.

2. Statement under the element of choice will apply to all of the elements in the current document.

    例：p{
            color:green;
         }
    注：所有段落字体颜色为green.

3. Select the class will apply to all elements with the class.

    例：.stress{
            font-size:21px;
        }
        <span class="stress">
        <p class="stress">
    注：包含.stress属性值的都会改变字体大小。

4. ID selector names must be unique ID.

    例：<span id="stress">
    注：只能有一个id名为.stress.

5. writing rules: Do not write multiple statements on one line.

    例：p{color:red;fout-size:21px;backgronud:blue}

6. semantic structure tags (HTML5 new):

标签名	meaning
<header>	It is used to represent the head of a page or an area.
<nav>	It is used to represent the navigation bar.
<aside>	It is used to indicate additional information related with the surrounding theme.
<article>	It is used to represent the content of the article or the presence of other independent pages.
<section>	It is used to represent a part of the overall theme.
<footer>	It is used to indicate a footnote or an area of ​​the page.

7. text elements:

Label name	meaning
<h1>~<h6>	Level 1 Level 1-6 heading title
<P>	paragraph
<strong>	Important text (emphasis) is to emphasize the importance of the text semantically, it is the text to bold the most common options.
<b>	Should be highlighted text
<em>	Emphasized text (in italics)
<i>	Text should be treated differently
<span>	Across multiple characters
<q>	Small text references
<cite>	The citation of references
<abbr>	A reference to the acronyms
	例：<abbr title="全称">简写</abbr>
	例：<abbr title="Hypertext Markup language">html</abbr>
<blockquote>	The whole reference
<a>	link
	<a href="打开的路径" target="从新的标签页打开">
	例：<a href="http://runoob.com" target="_blank">菜鸟</a>

8. Path:

• If the relative path link in the same path, directly fill in the file name.
• Href absolute path must fill in the full path of the file name. ../ represents a return to the parent directory ./ represents the directory where the current resource (can be omitted)

9. encode special characters:

Written form	meaning
 	Blank
©	Copyright (a circle a C)
<	more than the
>	Less than
®	Sign (a circle a R ®)
&	&symbol
乱数假文	Lorem Ipsum

10. The color units:

    h1{
        color:white;
        color:#fff;
        color:rgb(255,255,255);
    }
    长度单位
        一个尺寸是由长度+单位组成的
    绝对长度：px
    相对长度：em

11} * {wildcard: all current matched document elements

12. attribute selector

    [属性=值]
    [class=testclass]{}

13. The pseudo class selector

    a:link(“未访问”){
            color:#000;
        }
    a:visited(“访问后”){
            color:#ccc;
        }
    a:hover(“移入”){
            color:red;
        }
    a:acrive(“点击时”){
            font-size:30px;
        }

14. Pseudo-elements: can add words to the tag (css3 distinguishing pseudo-classes and pseudo-elements, to the pseudo-element: :)

    ：first-letter 第一个字
    ：first-line 第一行
    a::before{content:"之前"}
    a::after{content:"之后"}

15. The combination selector (selector and collector)

    h1,h2,h3,h4{
        font-weight:normal;
    }
    特点：形式不限，元素，类，id都可以选择

16. The child selector

    ul>li （大于）表示子集选择器
    特点：用于选择指定标签元素的第一代子元素。

17. descendant selectors

    ul li （空格）表示后代选择器
    特点：用于选择指定标签元素下的所有后代元素。