# 1 title # # 2 headlines # # # # # # # 3 4 headlines # # # # # # # 5 # # # # six levels of headingsCopy the code
The effect is as follows:
Primary title
The secondary title
Level 3 title
Level 4 titles
Five titles
Six levels of headings
List 2.
Unordered list
It can be created with *, +, —
* A
+ B
- C
Copy the code
The effect is as follows:
A
B
C
An ordered list
Notation: The dot after a number can only be an English dot. Note that the ordinal number of an ordered list is based on the number in the first line of the list
1. a
2. ab
3. abc
4. abcd
Copy the code
The effect is as follows:
a
ab
abc
abcd
If I don’t write it in order
4. aaa
2. bbb
9. ccc
Copy the code
aaa
bbb
ccc
3. Block references
If you want to make a statement or quote something, add a > in front of the statement
"> < p style =" max-width: 100%; clear: both; min-height: 1emCopy the code
The effect is as follows:
Chan Lin-Nong – Young and Innocent
How lucky to meet every time, you protect me considerate, even if it’s just a certain section of the trip
Multiple levels of nested references are also possible
> A Level 1 reference >> B Level 2 reference >>> C Level 3 referenceCopy the code
The effect is as follows:
A Level 1 reference
B Level 2 Citation
C Level 3 Citation
4. Line
The value can contain at least three consecutive symbols (asterisk, minus sign, bottom line) and Spaces.
***
* * *
---
- - -
____
_ _ _
Copy the code
The effect is as follows:
Links to 5.
Writing method: divided into inline and parameter two ways,
The inline link format is: the text of the link is placed in [], and the address of the link is placed in the following (). When the mouse stops on the text of “Baidu”, the floating box of “This is Baidu” will be displayed. In the second line, “This is Baidu” is the floating window text.
[] baidu net (http://www.baidu.com), click [baidu] "this is baidu net" (http://www.baidu.com)Copy the code
Baidu dot click
baidu
Parameter type: use links as parameters. It is suitable for scenarios where the same links are used. Note the corresponding relationship of parameters. The text of the link can be Chinese.
"Name" [name] : http://www.baidu.com/name [home] : http://www.baidu.com/home "home page" [test]. https://juejin.cn/ "Test wow" > here is [name], here is [home], here is [test]Copy the code
Here’s name, here’s home, here’s test
Picture 6.
Writing method: divided into inline type and parameter type two kinds, and link writing method is similar, but the front to add a!
Inline picture:! [li-nong Chen] (https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2915819795, 826199084 & FM = 26 & gp = 0. JPG) [farmers farming] : https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1756886155-3286377353 & FM = 26 & gp = 0. JPG image parameter type, is here! [farmers farming]Copy the code
Inline picture:
Parametric picture, here is
7. Code box
How to write: reference code, single line with ‘ ‘, multiple lines with three ‘ ‘, that ‘is the English state Esc key below the first line of the first key, i.e. the second line of the first key typed out.
# # # # single use ` ` ` < input type = "button" value = "login" / > ` # # # # multi-line with three ` ` ` ` ` ` can write comments < input type = "button" value = "login" / > < input type="text" value="name"/>```Copy the code
Single use ` `
<input type="button" value=" button" />
Use three for multiple lines
<input type="button" value="name"/>Copy the code
Form 8.
Notation: In the first case, the colon after the line indicates alignment, left means left, right means right, and center means both.
The first kind of
| name | age | sex | | : -- -- -- -- -- : | : - | -- -- -- -- -- - : | | Tony 20 male | | | | | | 18 female Lucy |Copy the code
Write: Add ~~ before and after the content to be deleted
~~ delete me ha ha ha ha haCopy the code
Delete me hahaha
2. Look at any site and see which tag is used the most, and think why
CSDN website, < SPAN > and <div> tags are often used, because the home page has many content sections, and it is convenient for designers to add content to the sections according to content requirements. Because it doesn’t have a default style, you can put anything in it, and it’s easy to use.
3. Read the “index. CSS” file to understand the attributes and record or comment the attributes that you have not seen or are not familiar with
Stylelint rules
At-rule-empty-line-before: Requires or disallows an empty line before at-rules
At-rule-name-space-after: indicates the at-rule name after a space
At-rule-no-unknown: Indicates that at-rules cannot be unknown.
No-duplicate-selectors: indicates that duplicate selectors are not allowed
Declaration-bang-space-before: A space is required before a bang declaration or no space is allowed
::-ms-clear represents a button (clear button) on the edge of the text input box that clears the current value of the text box . This button will only appear if the text box is focused and not empty.
input::-ms-reveal {
display: none;
}
Copy the code
::-ms-reveal A “password reveal button “used to display and apply the style. It usually displays the element type=”password” along the edge. The password reveal button displays the value of the password field in plain text (instead of the usual hidden privacy all-asterisk). If the Clear button appears, the content of the right edge of the text box is clipped. The solution is to hide the button with display: None
Pseudo-classes and pseudo-elements, pseudo-elements are written with double colons.
Common pseudo-classes, : hover, : link, active, : target, not () : the focus. Common pseudo elements – : : first – letter, : : first – line, : : before and: after, : : selection.
a::hover
a::active
a[disable]
The unique content under ::before and ::after is used to add content to the logical head or tail of an element in a CSS rendering.
Css3 attribute prefixes (-moz, -ms, -webkit, -o-)
-moz- Indicates the private property of the Firefox browser
-ms- Indicates the private property of Internet Explorer
-webkit- Indicates safari and Chrome private properties
– o – on behalf of the Opera
-ms-overflow-style Controls the behavior of the scroll bar when element content overflows.
Attribute values: auto | none | scrollbar | – ms – autohiding – scrollbar, scrollbar – if the element content overflow, shows “traditional” scroll bar. -ms-autohiding-scrollbar – If the content of an element overflows, use the automatic hiding scrollbar.
-webkit-tap-highlight-color Sets the highlight color that appears when a link is clicked.
::-moz-focus-inner
In Firefox, ::-moz-focus-outer and ::-moz-focus-inner are mainly used for elements of button type, including button type, reset type and submit type.
@-ms-viewPort lets websites automatically adapt to different IE10 window sizes
@viewPort, which allows us to set the size of the document viewPort. This feature is primarily used on mobile devices, but can also be used on desktop browsers that support features like “fix-to-edge,” such as Microsoft’s Edge.
SVG scalable vector graphics
SVG :not(:root) together is an element of an SVG non-root element
The box – x attributes
The box – sizing properties
Allows you to define specific elements that match a region in a specific way.For example, if you want to place two framed boxes side by side, set box-sizing to “border-box”. You can have the browser render a box with a specified width and height, and place a border and an inner margin inside the box.
Adds one or more shadows to the box.Usage and renderings are as follows
div { width:300px; height:100px; background-color:#ff9900; -moz-box-shadow: 10px 5px 5px #888888; /* Old Firefox */ box-shadow: 10px 10px 5px #888888; //h-shadow v-shadow blur color }Copy the code
The display properties
Specifies the type of box the element should generate,
Block — This element is displayed as a block-level element, preceded by a newline character.
span{ display: block; }
The inline – by default. This element is displayed as an inline element, with no newlines around it.
<head> <style type="text/ CSS "> p {display: inline} div {display: none}// None - This element will not be displayed. </style> </head> <body> <p> Set paragraph elements to inline elements. </p> <p> and div elements are not displayed! The contents of the </p> <div>div elements are not displayed! </div> </body>Copy the code
Positioning properties
Position attribute
Specifies the positioning type of the element.
<head> <style type="text/css"> h2.pos_left { position:relative; left:-20px } h2.pos_right { position:relative; Left :20px} </style> </head> <body> <h2> This is the normal position of the title </h2> <h2 class="pos_left"> this title relative to its normal position </h2> <h2 Class ="pos_right"> The title moves to the right relative to its normal position </h2> <p> Relative positioning moves the element according to its original position. </p> <p> Style "left:-20px" subtract 20 pixels from the original left position of the element. </p> <p> Style "left:20px" adds 20 pixels to the original left position of the element. </p> </body>Copy the code
Top/bottom properties
Top – Specifies the top edge of an element. It defines the offset between the upper margin of a positioning element and the upper margin of the containing block.
Bottom – Specifies the bottom edge of the element, defining the offset between the underlying margin of the positioning element and the underlying margin of the containing block.
If the value of the “position” property is “static”, setting the “top/bottom” property has no effect.
<head> <style type="text/css"> img { position:absolute; </h1> <img class="normal" SRC ="/ I /eg_smile.gif" /> <p> Some text. Some text. Some text. Some text. Some text. Some text. </p> </body>Copy the code
Left/right attributes
Left – Specifies the left edge of the element. This property defines the offset between the left margin of the positioning element and the left margin of the containing block.
Right – Specifies the right edge of the element. This property defines the offset between the right margin of the positioning element and the right margin of the containing block.
If the value of the “position” property is “static”, setting the “left/right” property has no effect.
img
{
position:absolute;
left:100px
}
Copy the code
Clip properties
Clipping absolutely positioned elements. For an absolute definition element, the contents of this rectangle are visible. Content outside this clipping area is processed according to overflow values. The clipping area may be larger or smaller than the content area of the element.
Specifies the type (shape) of the cursor to display. This property defines the shape of the cursor to use when the mouse pointer is placed within the bounds of an element.
Overflow attributes
Specifies what happens when content overflows the element box.
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll;
}
Copy the code
The overflow-x attribute specifies whether to crop the left/right edge of the content if it overflows the element content area.
The overflow-y attribute specifies whether to crop the top/bottom edge of the content if it overflows the element content area.
div { width:110px; height:110px; border:thin solid black; overflow-x:hidden; // No scrolling mechanism is provided. overflow-y:hidden; // No scrolling mechanism is provided. }Copy the code
The text – x attributes
text-size-adjust
Allows us to control the application of text overflow algorithms to some mobile devices. This property is not written into the standard yet and must be prefixed when used: -moz-text-size-adjust, -webkit-text-size-adjust,, and -ms-text-size-adjust. Attribute values: auto (default) | none | < percentage > – use a percentage to specify text size under the condition of different sizes how to adjust the device. Because text becomes small when zooming fits a small screen, many mobile browsers use text overflow algorithms to make text larger and easier to read. When an element containing text is 100% wide, its text size increases until it reaches a readable size, but does not modify the layout. Note that placing -webkit-text-size-adjust in the body will cause page scaling to fail, so do not set -webkit-text-size-adjust to be global or inheritable.
text-transform
Controls the case of text.
select{
text-transform: none;
}
Copy the code
text-rendering
Defines how the browser rendering engine renders a font. Browsers make trade-offs between speed, clarity, and geometric precision. Property value: optimizeLegibility — Browsers will focus on legibility when drawing text.
text-decoration
Define the style of text decoration.
If you define None in the A tag, do not display the underline of the link.
The content that defines which parts of an element need to be skipped by text modification. It can control all the text modifier lines drawn by that element or its ancestors. Property values: objects — Atomic inline elements with a full box model are skipped, such as images and inline block elements.
– its – text – decoration – skip: objects;
Animation-x Animation property
-webkit-animation implements the animation in Chrome
The animation-name property specifies the name of the @keyframes animation.
The animation-duration property defines how many seconds or milliseconds it takes for an animation to complete a cycle.
The animation-fill-mode property specifies whether the animation is visible before or after playback.
The animation-play-state property specifies whether the animation is running or paused. Attribute values: RUNNING, paused.
Animation-timing-function Specifies the speed curve of the animation. The speed curve defines how long it takes for an animation to change from one set of CSS styles to another.
@-webkit-keyFrames antFadeIn {0% {/* Using the @keyframes rule, you can create animations. 0% is the beginning animation, 100% is when the animation is finished. */ opacity: 0; } 100% { opacity: 1; }}Copy the code
The opacity property sets the opacity level of the element. Property value: 0.0 (completely transparent) to 1.0 (completely opaque).
Using the @keyframes rule, you can create animations. 0% is the beginning animation, 100% is when the animation is finished
@keyframes antMoveDownIn { 0% { transform: translateY(100%); /* Define the conversion using only the Y-axis value. */ transform-origin: 0 0; opacity: 0; } 100% { transform: translateY(0%); transform-origin: 0 0; opacity: 1; } } @keyframes loadingCircle { 100% { transform: rotate(360deg); } @-webkit-keyframes antSlideDownOut {0% {transform: scaleY(1); /* Define the scale transformation by setting the Y-axis value (i.e., 1). */ transform-origin: 100% 100%; opacity: 1; } 100% {transform: scaleY(0.8); transform-origin: 100% 100%; opacity: 0; }}Copy the code
The transform property applies 2D or 3D transformations to elements. This property allows you to rotate, scale, move, or tilt elements.
Attribute values:
Translate (x,y) — Defines 2D transformations.
Translate3d (X, Y, Z) — Defines 3D transformations.
Scale (x,y) – Defines 2D scale transformations.
Scale3d (x, Y,z) – Defines 3D scaling transformations.
Rotate (Angle) – Defines 2D rotation, specifying the Angle in the parameters.
Rotate3d (x,y,z, Angle) – Defines 3D rotations.
The transform-origin attribute allows you to change the position of the transformed element. 2D transformation elements can change the x and y axes of elements. 3D transformation elements can also change their Z-axis. Note that this property must be used with the transform property.
Other attributes
Margin Sets the width of all the margins of an element, or sets the width of each edge margin
The margin-top property sets the top margin of the element
The margin-bottom property sets the lower margin of the element.
Font -variant sets small uppercase fonts to display text
The font-feature-Settings property allows you to control advanced printing features in OpenType fonts
The tabIndex property specifies the tab-control order of elements (when TAB is used for navigation).
none ! Important invalidates the outline attribute and invalidates a line drawn around an element.
An outline is a line drawn around an element, around the edge of the border, to highlight the element. Contours do not take up space and are not necessarily rectangles.
The line-height property sets the distance (row height) between rows. Attribute value: inherit — Specifies that the value of the line-height attribute should be inherited from the parent element.
The vertical-align property sets the vertical alignment of elements. Attribute value: baseline — default. The element is placed at the baseline of the parent element.
Transparent – the default. The background color is transparent.
background-color: transparent;
The Transition property allows the CSS to smoothly transition property values within a certain period of time. This effect can be triggered with a mouse click, a focus, a click, or any change to an element, and smoothly animates the CSS property values. Property values: color — transformed by red, green, blue, and transparency components (each value is treated separately)
The transition: color 0.3 s;
The pointer-events attribute defines whether the element reacts to pointer events.
The touch-action property is used to set how the touch screen user manipulates the area of the element. The property value is manipulation — the browser only allows scrolling and continuous scaling.
Touch – action: manipulation;
Border-radius This property allows you to add rounded borders to elements.
Border-collapse property Sets whether the borders of the table are merged into a single border. Property value: collapse — If possible, borders are merged into a single border.
The padding-top property sets the top inner margin (space) of the element,
The padding-bottom property sets the lower inner margin (space) of the element.
Caption -side property sets the position of the caption.
The appearance attribute allows you to make an element look like a standard user interface element.
-webkit-appearance: listbox;
div
{
appearance:button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari and Chrome */
}
Copy the code
The white-space property sets how whitespace within an element is handled.
The outline-offset property offsets the contour and draws at the border edge.
Clearfix Clears floating
The phrase tags
The tag is used to define computer code text
The < KBD > tag defines keyboard text.
The < SAMP > tag is used to define the sample text of a computer program.
The < DFN > tag is a phrase tag that defines a definition item.
Defines the important text of the sample computer program
Other tags
The
tag defines pre-formatted text. The text enclosed in the
tag element is usually reserved for Spaces and newlines. Text is rendered in a monospaced font.
The
The < DL > tag defines a description list. The < DL > tag is used with
(which defines the item/name of the list) and < DD > (which describes each item/name). Within the < DD > tag, you can place paragraphs, line feeds, images, links, lists, and so on. The writing method and effect are as follows:
The < blockQuote > tag defines a block reference taken from another source. Browsers typically indent the < blockQuote > element.
The tag defines subscript text.
The tag defines superscript text.
The tag defines small text (and marginalia).
The tag defines the title of the table. The < Caption > tag must be placed directly after the
tag.
The
The
The
The tag defines a visible title for the
element. The details are displayed when the user clicks on the title.
The
tag defines the title for the
element, using the
tag to specify the individual stream content (images, diagrams, photos, code, and so on).
Headings are combined using the
tag: the
tag is used to specify the body content of the document.
The
The tag is used to indicate an acronym or acronym, such as “WWW” or “NATO”.
The
tag defines the contact information of the document’s author/owner. The text of the
element is usually rendered in italics. Most browsers add line breaks before and after the element.
If the <address> element is inside the <body> element, it represents the contact information of the author/owner of the document. If the <address> element is inside the <article> element, it represents the contact information of the article’s author/owner.
