origin
HTML(1993.6~2013.5.6)
W3C (World Wide Web Consortium) was established in 1994 (neutrality)
Shortcuts & basic labels
To get the empty style CSS, click me
Run: Ctrl+r
Completion syntax: Tab
Label: < H1 > ~ < H6 >
Paragraph: < p ></p>
Line feed:</br>
Horizontal line: < / HR >
Bold: < strong > or < b >
Italics: < EM > or < I >
&Multiple uses of symbols
Spaces: & nbsp;
>No.: & + gt;
< No.: & + lt;
Double quotation mark: quote;
©: Copyright symbol
Copyright symbol: copy;
Diverse connections
Picture link:
<img src="Picture path",title="Picture title",alt="What is displayed when the image is cracked",weight="image width",height="Picture height"/>
Hyperlink: you can add pictures
<a href=" Link address (where to jump)",target="Opening method (jump to a new page or open from the current page, the default is the current page)">Write what you want to display here\</a>
_ self: it is opened from the current page, that is, from itself
_ blank: open from new page
Anchor link: create an anchor point first, and then create a link
Anchor point: < a name = "" > I am the anchor point < / a >, and the content in name is user-defined
Link method 1: < a href = "" ></a>
Connection mode 2: < a href = "" # "" ></a>
Plus # sign means jump to the specific position of a page (jump to the specific position of a page must add # sign)
Small knowledge:
- The picture suffix PNG is: transparent background, Ctrl + /: comment statement
- Block elements are exclusive to one line, and intra line elements are not exclusive to one line
- < / span >: span is an empty label used to declare attributes, which is used in conjunction with style.
selector
ID > class > tag
Label selector:
< > < > (can also be divided into single label and double label)
Class selector:
class selector (starts with.)
Id selector:
An Id can only be used once in a page (starting with #)
font:
font-family:Set font type font-size:Set font size font-style: Set font style font-weight:Set font weight font Set all font properties in one declaration: font: style(Style), weight(Thickness), size(Size), family(Type); text-shadow:X Axis offset, Y Axis offset, shadow range, color text-indent:text-indent ➡➡➡px(Pixels), em((character) text-align: Horizontal alignment of elements center: Centered, left: Left, right: Right, justify: both ends line((row)-height: Row height text-decoration: Text decoration( none: (without any decoration)
RGB 0-255 (0,0,0) RGBA (transparent 0-1) (0, 0, 0, 1) #ff color corresponding words (color: red, green, blue, 0-1)
background:
Background color, style: Type, link: external CSS embed
background-color:background color
background-image: url(Path) (background picture can be inserted)
background-repeat:Background picture tile
background: no-repeat: no-repeat
background-position: (x,y)Background image positioning positive right negative left
background: Picture, positioning( x,y)，Tile, color (can be out of order))
Vertically centered text (for pictures): vertical-align: middle
Quickly generate labels: example: span*quantity/p*quantity>span.a/#a
Effect achieved by hovering the mouse over it: example: hover{Style name: style value;}
a:link Click access for
a:visited After clicking access
a:hover Hover the mouse over it
a:active Mouse click not released
H5 inline CSS: < link href = "", rel = "", type = "" >
Tips:
The picture is above the background color (similar to PS layer)
list
Unordered list ul: List declaration li: List item list-style: none； List style no style Ordered list ol: List declaration li: List item Definition list dl: List declaration dt: List title dd: List content
form
Form:<table></table> Properties: border frame title:<th></th> that 's ok:<tr></tr> Cell:<td></td> ((Consolidation)<td colspan="1"></td> One space to the right ((Consolidation)<td rowspan="1"></td> 1 grid down
Hierarchy selector
1. Descendant selector
Parent selector and descendant selector{ }
2. Sub selector
Parent selector>Child selectors
For example: h1>span{}
form declaration
form action = " " method = " "
action:Address of data submission
method:Method of submission( get/post)
get: Submission will display the form data directly to the address
post: The submission will encrypt the list data and not display it
input: An element on the form
type = input Type of element
user name:<input type = "text"/>
password:<input type = "password"/>
name Attribute: give the form a name so that the background can know what the current number is
------------------------------------------
Male:\<input type = "radio"/>
Female:\<input type = "radio"/>
Radio button to realize radio selection name Same, from name by sex(Gender)
------------------------------------------
Multi selection button
<input type = "check(Multiple) box((box)" />
Multiple check box buttons, name It must be the same
------------------------------------------
list box
select: Drop down list box declaration option: Check box of drop-down list box
<select>
<option> </option>
</select>
Selected by default:
<option selected = "selected">
------------------------------------------
Reset button
Properties: reset value: Value of element
<input type = "reset" value = "Reset">
------------------------------------------
Submit button submit
<input type = "submit"/>
get Submit: the form data will be directly displayed on the address bar (high efficiency)
post Submit: the form data will be encrypted and not displayed (high security)
------------------------------------------
Picture button (picture submission)
<input type = "image(picture)" src="route"/>
Button:<input type = "button"/>
------------------------------------------
Protocol box
<textarea name ="" rows="Several lines" cols="Several columns"/>
------------------------------------------
(complex/Radio button (selected by default)
checked = "checked";
Radio <input type:"checkbox"/>
size: " " ; Length of frame
maxlength=""; The maximum number of characters can be entered in the text box
<input type = " " value=""/>
type Contents in:
Hidden fields: hidden
Read only: readonly
Disable: disabled
------------------------------------------
Text box prompt: placeholder=" ";
latel for="";
latel:click label You can select the content in the for The label (focus);
For example:<label for ="nan">male</label>
<input id = "nan" type=""/>
box model
frame
border-color:red; border-width:1px; border-style:solid; (solid:Solid line, double:Double solid lines, dashed:Dotted line, none:(no border)
One value: up, down, left and right; Two values: up and down, left and right; Three values: up, left and right, down; Four values: up, right, down, left
border-direction-Styles: Values;(For example: border-top-color: green；) Outer margin( margin): The distance from the border of an element to the border of another element. Inner margin( padding): The inner and outer margins change the size of the element. (distance from the border to the content inside) Horizontal block level centered element 1. Must have width(For example: border-width: 1px;) 2. margin: 0 auto((automatic) box-sizing:border-box; (Used to solve the problem of box size change (border, inner margin)) (The width and height of the content can be obtained by subtracting the border and inner margin from the set width and height.)
Tips: linear gradient: linear gradient;
DIV (box (very clean (no block level elements of any style))
display: Used to change the element level (in-line variable block level) display: block； display: inline； Intra row block: (i.e. width and height can be set in one row) display: inline-block；
Small knowledge: (when writing web pages, write from outside to inside and from top to bottom) form form (for submission)
advanced selectors
#box dt: nth of type (subscript) {background}
#box dd: last-of-type{border: none}
Excess hide / scroll bar
overflow: hidden/scroll
Resolve text box collapse
1. Make a subclass (make a son)
2. Add width to it
3. hide/Add scroll bar
4. Add to collapsed elements:
#box: after{
content: "";
display:block;
clear:both;
}
Union selector:
p，h1{color:red;} Intersection selector: < p class = "a b c d e" > element hiding: display:none;
Standard document flow (let elements sort naturally according to their own level)
Off standard: off standard document flow
Floating properties: snap properties
1. When floating elements can be placed in a row, they will be placed in this row, close to the floating elements in the previous row
2. Floating directly turns the element into an inline block
3. When the floating is preceded by the standard document stream, the floating elements are placed in the next row
4. When the floating element is preceded, the standard document flow will automatically fill up the position
1. float-float attribute
float: left；Left float
right；
none；
2. clear: left；Clear left float
right；
both；
(Tell the current element that your previous element is not floating)
3. Parent element: hover Child element{ }
When the mouse is over the parent element, what happens to the child element
Example:#box: hover div{display: bloch；}
4. Border radian:
border-radius: 50%(Circle)
5. border: 1px solied red;
box-sizing:border-box;
(Borders also count as Div Part of the size)
6. margin: 0 auto；(Block level elements (centered)
7. height: 27px；
line-height: 27px；
(The height shall be consistent with the line height, and the text shall be centered vertically within the line)
8. #box>p>a:first-of-type;
9. vertical-align:middle;(Vertically centered text)