CSS Knowledge Point collation

• Introduction method
• Selector Selector
• Property
• Box model

Introduction Method

1. Inline style

Inline styling is to embed CSS code in HTML tags

<div style= "color:red;font-size:100px;" > Hello, children </div>

Grammar:

(1) Use the Style property to embed styles into HTML tags

(2) How attributes are written: attributes: Property values

(3) Use semicolons between multiple attributes;

do not recommend using

2, internal style in the head tag using the style tag for the introduction of CSS

<style type= "Text/css" >    div{color:red;font-size:100px;} </style>

Grammar:
(1) using the style tag to introduce CSS

<style type= "Text/css" >

Property: Type: Tells the browser to parse with CSS parser
(2) How attributes are written: attributes: Property values
(3) Use semicolons between multiple attributes; separate 3, external styles extract CSS styles into a single CSS file who will use the reference

<link rel= "stylesheet" type= "Text/css" href= "Demo1.css"/>

Grammar:
(1) Create CSS file to write CSS properties in CSS file
(2) Introduction using LINK tag in head

<link rel= "stylesheet" type= "Text/css" href= "CSS file address"/>

Rel: Represents the relationship of the file to be introduced with HTML
Type: tells the browser to use the CSS parser to parse
HREF:CSS file Address
(3) How attributes are written: attributes: Property values
(4) Use semicolons between multiple attributes, separated by 4, @import way

<style type= "Text/css" >    @import URL ("CSS address");</style>

The difference between link and @import way:
(1) Link all browsers support import part low version IE does not support
(2) Import mode is waiting for HTML to load after loading
(3) Import mode does not support the dynamic modification of JSSelector Selector1. Basic Selector

1.1. Element Selector
Syntax: HTML tag name {CSS Property}
Example:

<span>hello CSS!!! </span>        <style type= "Text/css" >            span{color:red;font-size:100px;} </style>

1.2. ID Selector ID Uniqueness
Syntax: #id的值 {CSS Properties}
Example:

<div id= "DIV1" >hello CSS1!!! </div><div id= "DIV2" >hello CSS2!!! </div><style type= "Text/css" >      #div1 {}       #div2 {}</style>

1.3. Class Selector
Syntax: The value of the. class {CSS Property}
Example:

<div class= "Style1" >div1</div><div class= "Style1" >div2</div><div class= "Style2" > Div3</div><style type= "Text/css" >     . style1{outline:0px; word-break:break-all; Color:rgb (51, 51, 51); Font-family:-apple-system, "SF UI Text", Arial, "Pingfang SC", "Hiragino Sans GB", "Microsoft Yahei", "Wenquanyi Micro He I ", Sans-serif, Simhei, SimSun;}                       . style2{outline:0px; word-break:break-all; Color:rgb (Wuyi, Wuyi, Wuyi); font-family:-apple-system, "SF UI Text", Arial, "Pin Gfang SC "," Hiragino Sans GB "," Microsoft Yahei "," Wenquanyi Micro Hei ", Sans-serif, Simhei, SimSun;}         </style>

The priority of the selector:id>class> element

2. Attribute Selector

Syntax: Basic Selector [property = ' property value ']{css property}
Example:

<form action= "" >    name:<input type= "text"/><br/>     pass:<input type= "password"/>< Br/></form><style type= "Text/css" >    input[type= ' text ']{outline:0px; word-break:break-all;}                       Input[type= ' Password ']{background-color:pink}</style>

3. Pseudo element Selector

Pseudo element selector for a tag
Grammar:
Quiesce State A:link{css Property}
Suspended State A:hover{css Property}
Trigger State A:active{css Property}
Completion Status A:visited{css Property}
Example:

<a href= "#" > Click me </a><style type= "Text/css" >    a:link{color:blue}    a:hover{color:red}    A:active{color:yellow}    a:visited{color:green}</style>

4. Level Selector

Syntax: parent selector child selector .....
Example:

<div id= "D1" >    <div class= "DD1" >        <span>span1-1</span>    </div>    < Div class= "DD2" >        <span>span1-2</span>    </div></div> <div id= "D2" >    <div class= "DD1" >         <span>span1-1</span>    </div>    <div class= "DD2" >        <span>span1-2</span>    </div></div><style type= "Text/css" >    #d1. dd2 Span{color:red}</style>

Properties

1. Text attributes

Font-size: Size

Font-family: Font type

2. Text Properties

Color: Colors
Text-decoration: Underline
Property value: Noneunderline
Text-align: Alignment
Property value: Left center right

<div>hello CSS!!! </div><a href= "#" >click me!!! </a><style type= "Text/css" >    div{color:red;text-decoration:underline;text-align:right}    a{ Text-decoration:none;} </style>

3. Background properties

outline:0px; Word-break:break-all; Color:rgb (51, 51, 51); Font-family:-apple-system, "SF UI Text", Arial, "Pingfang SC", "Hiragino Sans GB", "Microsoft Yahei", "Wenquanyi Micro He I ", Sans-serif, Simhei, SimSun;" >background-image: Background image
Property value: URL ("picture address");
Background-repeat: Tiling mode
Property value: Default Horizontal Vertical Tile
Repeat: Horizontal vertical tiling
No-repeat: Uneven Shop
Repeat-y: Portrait
Repeat-x: Landscape

body{                background-image:url ("Images/dog.gif");        Background-repeat:repeat-y;}

4. List Properties

List-style-type: A small flag before a list item
Property value: Too many.
List-style-image: A small picture before a list item
Property value: URL ("picture address");

<ul>    <li>css</li>    <li>css</li>    <li>css</li>    <li >css</li></ul><style type= "Text/css" >/    * ul{list-style-type:decimal-leading-zero;} */    Ul{list-style-image:url ("Images/forward.gif");} </style>

5. Scale attribute

Width: Wide

Height: High

6. Display Properties

Display
Property value: None: Hidden
Blocks: block-level display
Inline: Row-level display

<form action= "" >    name:<input id= "name" type= "text"/><span id= "span" > Sorry input does not meet the requirements </span>    <br>    pass:<input id= "pass" type= "password"/>    <br>    <input id= "btn" type= " Button "value=" button "/></form><style type=" Text/css ">    span{color:red;display:none}</style ><script type= "Text/javascript" >    document.getElementById ("btn"). onclick = function () {    document.getElementById ("span"). Style.display = "inline";}; </script>

7. Floating Properties

Float
Property value: Left Right
Clear: Clear floating left right both
Disadvantages: (1) affect adjacent elements can not display properly

(2) Affects parent elements not displaying properly

Box model

Border
Border-width: Width of border
Border-color: Color of the border
Border-style: Linetype of borders
Border-top: Top Border
Border-bottom: Bottom Border
Border-left: Left Border
Border-right: Right Border
Padding
Represents the distance between the inner wall of the border and the inner element
padding:10px, on behalf of the top and bottom are 10px
padding:1px 2px 3px 4px; upper right lower left
padding:1px 2px; up/down/around
padding:1px 2px 3px;
Padding-top: Set individually
Margin
Represents the distance between the outer wall of the border and other elements
margin:10px, on behalf of the top and bottom are 10px
margin:1px 2px 3px 4px; upper right lower left
margin:1px 2px; up/down/around
margin:1px 2px 3px;
Margin-top: Set individually

Note: Starting at 79581883

CSS Knowledge Point collation