HTML and CSS notes:
Meta tags
-
Meta tags are used to set the metadata of web pages. The metadata is not displayed to users
-
Common syntax:
charset Specifies the character set for the web page name The name of the specified data content The content of the specified data -
The keywords of the name attribute indicate the keywords of the website. Multiple keywords can be specified at the same time, separated by commas
<meta name="keywords" content="Online shopping, cell phone, laptop."> Copy the code
- The description of the name attribute is used to specify the description of the web site
<meta name="description" content="..."> Copy the code
-
Semantic tag
hgroup | Used to group headings. A group of related headings can be placed at the same time |
---|---|
em | italics |
strong | Add in bold |
blockquote | Long reference |
q | Double quotation marks |
br | Page break |
nav | Navigation of web pages |
aside | Additional content related to the topic (sidebar) |
article | A separate article |
section | A separate block, used when several labels above cannot represent this label |
The list of
There are three types of HTML lists: ordered, unordered, and defined
-
Ordered list:
<ul> <li></li> <ul> Copy the code
-
Unordered list:
<ol> <li></li> </ol> Copy the code
-
Define a list:
<dl> <dt></li> <dd></dd> </dl> Copy the code
- Lists can be nested with each other
hyperlinks
-
Use the A tag to define hyperlinks
href You can specify a jump path target Specifies where the hyperlink is opened. Optional values: 1. Self Default value, open hyperlink in the current page. Blank opens in a new page id The same page is the only one that does not duplicate -
You can simply set the herf property of the hyperlink to #, so that the page does not jump after clicking the hyperlink, but instead goes to the top of the current page
-
You can use JavaScript:; As the href property, click it will not jump to any screen
Image label
-
Use the IMG tag to bring in an external image. The IMG tag is the end tag and is a replacement element (between the block and the inline element, and has the characteristics of both elements).
- Properties:
src Specifies the path to the external image alt The description of the image, which is not displayed by default, is displayed when the browser cannot load width Width of picture height Height of picture Such as:
<img src-"./img/..." alt=""}>
Copy the code
-
Inline frame for introducing an additional page (iframe) to the current page
Properties:
src Specifies the path to the page to import frameborder Specifies the border of the inline frame, usually 0
<iframe src="" frameborder="0"></iframe>
Copy the code
Audio and video playback
-
The audio tag is used to introduce an external audio and video file to the page. By default, users are not allowed to control the playback stop
-
Properties:
controls Whether to allow users to control playback autoplay Whether to automatically play audio files loop Whether the music is played on a loop <audio controls> <source src="./source/audio.mp3"> </audio> Copy the code
-
The video tag is used to introduce a video to a web page in much the same way as audio
<video controls> <source src="./source/video.mp4"> </video> Copy the code
form
-
Use TR in table to represent a row in the table, and TD in TR to represent a cell
rowspan Represents vertically merged cells colspan Represents horizontal merged cells < td rowspan = "2" > < / td >Copy the code
-
A table can be divided into three parts:
Head (theAD) Body (TBody) Bottom (tfoot)
-
Th represents the header cell and TD is generally used for the body and bottom cell
The form
Use the form tag to create a form, and the action represents the address of the server to submit
<form action="target.html"> <! <input type="text" name="username"> <br> <! <input type="password"> <br> <! -- Radio button -- Like this selector, you must specify the value property, which will eventually be passed to the server as a user-filled value, the name property must be the same, > < Input Type ="radio" name="hello" value="a"> < Input Type ="radio" name="hello" value="b" checked> <br> <! <input type="checkbox" name="test" value="1"> <input type="checkbox" name="test" value="2"> <input type="checkbox" name="test" value="3"> <br> <! <select name="haha"> <option value=" I "> <option > <option selected value="ii"> </option> <option value="iii"> </option> </select> - submit button - > < input type = "submit" value = "registered" > < / form >Copy the code
- Attribute supplement:
Add form item attributes | explain |
---|---|
readonly | Set the form entry to read-only |
disabled | Set the form item to disabled |
utofocus | Set the form item to automatically get focus |
The selector
Common selector
- Element selector
- Syntax: Tag name {}
- The id selector
- Syntax: #id attribute name {}
- Class selectors
- Syntax:.class attribute value {}
- Wildcard selector
- * {}
Compound selector
-
Intersection selector
- Syntax: selector 1 selector 2 selector 3{}
- The order is:
Label idclass
- Note: If there is an element selector in the middle, the element selector must start
-
Union selector
-
Function: Selects elements corresponding to multiple selectors simultaneously
-
Syntax: selector 1, selector 2, selector 3, selector n{}
-
H1, span, div. Red,p1{color:red; }Copy the code
-
Relational selector
Relational elements include: parent element, child element, ancestor element, descendant element, and sibling element
-
Child element selector:
-
Action: Selects the specified child element of the specified parent element
-
Syntax: Parent element > child element {}
-
-
Descendant element selector:
-
Action: Selects the specified descendant element within the specified element
-
Grammar: Ancestor descendants
-
-
Select the next adjacent brother:
- Syntax: previous + next
-
Select all brothers below:
- Grammar: brother ~ younger brother
Property selector
-
[Attribute Name] Selects the element that contains the specified attribute
p[title]{ color:red; } Copy the code
-
[Attribute name = Attribute Value] Selects the element that contains the specified attribute and attribute value
p[title=abc]{ color:red; } Copy the code
-
[Attribute name ^= attribute value] Selects the element starting with the attribute value
p[title^=abc]{ color:red; } Copy the code
-
[Attribute name $= attribute value] Selects the element whose attribute value ends
p[title$=abc]{ color:red; } Copy the code
-
[Attribute name *= attribute value] Selects the element of the element whose attribute value contains a value
p[title*=abc]{ color:red; } Copy the code
Pseudo class selector
Pseudo classes (classes that do not exist)
-
Pseudoclasses are used to describe the special state of a child element, usually beginning with:
- : first-child The first child element
u1>li:first-child{ color:red; } Copy the code
-
: last-child Specifies the last child element
-
: nth-child (n) Select the NTH child
-
Special values:
n The NTH element 2 n or even Select elements with even digits 2 n + 1 or odd Select elements with odd digits
-
-
:first-of-type, :last-of-type, and :nth-of-type(), these pseudo-classes have similar functionality, except that they sort elements of the same type
-
:not () removes qualifying elements from the selector
Pseudo elements
A pseudo-element is a special element (special location) on a page that does not really exist, starting with: :
: : first – letter | Style the first letter |
---|---|
: : first – line | Style the first line |
: : selection | Style the mouse selected content |
: : before | Style the beginning of the element |
: : after | Style the end of the element |
Before and after
Must and content property
In combination, their content is unselectable
<style> p: : first-letter{font-size: 50px; } p: : first-line{background-color: yellow; } p: : selection{background-color: greenyellow; } div: : before{content: 'ABC'; Color: red; } </style>Copy the code
Hyperlinked pseudo-classes
-
: link is used to indicate a link that is not visited (a normal link)
A: link{color: red; }Copy the code
-
: hover is used to indicate the hover state
A: hover{color: aqua; }Copy the code
-
: active indicates when the mouse is clicked (clicked but not released)
-
Remove underscores from hyperlinks:
a{text-decoration:none}; Copy the code
The box model
CSS sets up all elements in a page as a rectangular box, each box consisting of the following parts:
- Content border padding Margin
First, frame:
-
Border width:
-
Border-width can be used to specify the width of the border in four directions
-
Value case:
The four values On the lower left Three values On about the Two values The up and down or so A value The up and down or so
-
-
-
Border color:
- Border-color is used in the same way as border-width, if you do not want one side to be colored
none
- Border-color is used in the same way as border-width, if you do not want one side to be colored
2. The rules for inner margins are the same as for borders
The rules for margins are the same as for borders
-
Margins do not affect the size of the box visible box, but will affect the position of the box, which will affect the actual space occupied by the box
-
Margin can also be set to negative values
Four, horizontal layout:
-
The horizontal position of the element in the parent element has the following equation:
Margin-left +border-left+padding-left+width+padding-right+border-right+margin-right= parent element content area width
-
Width, margin-leift, margin-right
Some value is auto Automatically adjust the value of auto Set a width and a margin to Auto The width will be adjusted to the maximum Set all three values to auto The margins are all 0 and the width is maximum Set both margins to auto with a fixed width Take the average of the two margins
-
Five, vertical layout
-
If the size of the child element exceeds the parent element, the child element will overflow from the parent element. Use the overflow attribute to set how the parent element will handle this
-
Optional value:
The visible default values Child elements overflow from the parent and are displayed outside the parent hidden Overflow content will be clipped scrool Generate two scroll bars through which to view the content auto Generate scrollbars as needed
-
Display is used to set the display type of the element
inline | Set to inline element |
---|---|
block | Set to block element |
inline-block | Inline block elements can be set to both width and height and do not monopolize a row |
table | Set to a table |
none | The element is not displayed on the page |
flex | Setting the elastic box |
Visibility is used to set the display state of an element
hidden | Elements are hidden from view but still occupy the page |
---|---|
visible | By default, the element is displayed normally on the page |
Silhouettes, shadows, rounded corners
-
outline
Outline is used to set the outline of the element, as is border
Outlines are similar to borders, except that they do not affect the size of the visible box
.box1{ outline:10px red solid; } Copy the code
-
Shadow box – shadow)
.box1{ box-shadow:20px 20px 20px red; } Copy the code
The first value Horizontal offset, positive offset to the right The second value Vertical offset, positive downward offset The third value The blur radius of the shadow The fourth value Shadow color -
Rounded corner (border-radius, unit: px)
The four values Left up right up right down left down Three values Top left, top right, bottom left, bottom right Two values Top left, bottom right, top left, bottom right
Float
-
You can float an element to the left or right of its parent
-
Optional value:
none By default, the element does not float left Element floats to the left right Element floats to the right -
When an element floats, it is completely removed from the document flow and no longer occupies its place in the document flow, so elements that are still in the document flow below the element are automatically moved up
-
-
Out-of-document flow features:
A block element Instead of monopolizing a page line, the width and height are spread out by content by default Inline elements Becomes a block element, which has the same properties as a block element
The problem of height collapse and its solution
The Clearfix style solves both height collapse and margin overlap:
.clearfix::before,
.clearfix::after{
content:'';
display:table;
clear:both;
}
Copy the code
Position
Optional value:
static | By default, the element is stationary and unpositioned |
---|---|
relative | Turns on the relative positioning of elements |
absolute | Enable absolute positioning of elements |
fixed | Turns on the fixed positioning of elements |
sticky | Turn on the sticky orientation of the element |
-
Relative positioning (the reference is relative to the unopened positioning itself) :
-
Features:
- Relative positioning refers to the position of an element in the document flow
- Relative positioning raises the level of an element
- Relative positioning does not take elements out of the document flow
- Relative positioning does not change the nature of the element (block or block, in-line or in-line)
- Other elements that are not positioned do not change with the position of the element that is positioned
-
Set offset
-
When relative positioning is enabled on the element, the offset must be set (element starting position is set to (0,0), right-down is positive) :
top Position the distance above the element and position bottom The distance below the positioning element and the positioning position left Position the distance to the left of the element and position right The distance to the right of the positioning element and the positioning position
-
-
.box1{ position:relative; left:200px; top:-200px; } // Right down direction is positiveCopy the code
-
-
Absolute positioning:
-
Features:
- When turned on, elements are removed from the document flow so they don’t hog page content
- Absolute positioning changes the nature of the element (the line becomes a block, and the width and height of the block are spread out by the content)
- Raise an element to a higher level
- It’s relative to theta
Its containing block
Positioning of the
-
Contain block
- In general, the containing block is the closest ancestor block element to the current element
- After enabled, if set
Left: 0 Top: 0
Then locate the elementDefaults to the top left corner of the contain block
- If all ancestor elements are not positioned, then the HTML (root element) is its containing block (the upper left corner of the browser page)
-
When it’s on,
- The horizontal layout equation needs to be added
Left and right
Two values, then the rule andBefore the contentI just added more left and right - When an overconstraint occurs, the right value is automatically adjusted to satisfy the equation if there is no auto among the nine values
- The auto value can be set to: margin width left right
- The equation for the vertical layout must also be satisfied
- The horizontal layout equation needs to be added
-
-
Fixed positioning:
- Fixed positioning has most of the same characteristics as absolute positioning
- The only difference is the fixed positioning
Always refer to the viewport of the language browser
(visible area) to position, that is, the fixed positioning element does not change as the page scroll bar
-
Viscous positioning:
- The characteristics of viscous positioning and relative positioning are basically the same
- The difference is that viscous positioning can be at
The element is fixed when it reaches a position
-
Element hierarchy
- For positioning elements that are enabled, you can pass
Z - the index attribute
To specify the level of the element- Z-index takes an integer as an argument,
The higher the value, the higher the level of the element
- If the elements have the same hierarchy, the elements lower down are shown first
- Ancestral elements are no higher in hierarchy than descendant elements
- Z-index takes an integer as an argument,
- For positioning elements that are enabled, you can pass
Font, line height
- Font related styles:
-
Font family (font format)
Optional value:
serif Serif fonts sans-serif Non-serif fonts monospace Monospaced font -
Font-face specifies the name of the font
@font-face { font-family:'myfont'; SRC: url(' path '); }Copy the code
-
Font-weight Indicates the weight of a font
Optional value:
normal The default value is not bold characters bold Bold characters bolder Thicker characters lighter Finer characters
-
There are several ways to introduce icon fonts:
- The first way: using ICONS, we can pass
font-face
“To introduce the font
< p style="... ></i>Copy the code
- Second: use
Pseudo classes:
li::before{ content:'\f1b0'; Word-wrap: break-word! Important; "> < span style =" max-width: 100%;Copy the code
- The third:
Encoded by the entity: &#x icon
;- For example: class = “fas”>of3;
- If the icon is from Aliyun, replace fas with iconfont
- The first way: using ICONS, we can pass
-
Horizontal and vertical alignment:
-
Text-align Indicates the horizontal alignment of the text
left The left right Align right center In the middle justify full-justified -
Vertical-align Indicates the vertical alignment of the text
baseline Default baseline alignment top At the top of the alignment bottom At the bottom of the alignment middle Align center
-
-
Other text styles:
-
Text-decoration Sets text decoration
Optional value:
none Default value: none underline The underline line-through Delete the line overline Delete the line -
White-space Settings How do pages handle white space
normal normal mowrap Don’t wrap pre Leave blank
-
-
Line height: Refers to the actual height of the text.
-
Line height can be specified as a size (px em)
You can also set the line height directly to an integer (the line height is the specified multiple of the font)
Line spacing = line height – font size
-
The line height is set to center the font
-
Image flicker problem (Sprite)
Solve image flicker problem:
- Multiple small images can be saved into a single large image and then adjusted
background-position
To display the - This technique is called
CSS-Sprite
We call it Sprite
How to use Sprite:
1. Determine the icon to use 2. Measure the size of the icon 3. 5. Set a background-position to display the correct imageCopy the code
Background, gradient
background-image
Setting the background image
-
If the background image is smaller than the element, the background image automatically fills the element
-
If the background image is larger than the element, part of the image cannot be displayed
Background-image: url ("./img/1.png ");Copy the code
background-repeat
Used to set the repetition of the background
-
Optional value:
repeat By default, the background repeats bidirectionally along the x and y axes repeat-x Repeat only along the x axis repeat-y Repeat only along the Y-axis no-repeat Don’t repeat
background-position
Used to set the position of the background image
-
Setting Mode:
- Go to the Top Left Right Bottom Center
- Both values must be set at the same time. If only one value is written, the second value defaults to Center
-
The position can also be set by offsets
Background-position: 50px 50px; // Represents the offset in horizontal and vertical directions respectively (positive for right and positive for down)Copy the code
- Setting the background range
-
backround-clip
Optional value:
border-box By default, the background appears below the border padding-box The background does not appear in the border, only in the content area and inside margins content-box The background will only appear in the content area -
Background-origin Specifies the origin for calculating the offset of a background image
Optional value:
-
Padding-box Default value, background-position computed from inside margin
-
The offset of the content-box background image is calculated from the content area
-
Border-box Variables for the background image are computed from the border
padding-box The default value, background-position, is calculated from the inside margin content-box The offset of the background image is calculated from the content area border-box Background image variables are computed from the border
-
background-size
Sets the size of the background image
-
The first value represents the width, the second value represents the height, and if you write only the first value, the second value defaults to auto
cover The scale of the image remains the same. Fill the image with elements contain Image proportions remain unchanged, leaving the image intact in the element
- background-attachment
-
Whether the background image moves with the element
scroll By default, the background image moves with the element fixed Views are fixed in the page and do not move with elements
-
Background Is the shorthand property for background. All background styles can be set using this style. There are no order requirements and no mandatory properties
- Note:
- Background-size must be written after background-position and used
/
separated - Background-origin Background-clip two styles, orgin must be before clip
- Background-size must be written after background-position and used
- Note:
-
Linear gradient
-
Some complex background colors can be set with linear gradients
-
Inear-gradient (Red yellow) Red is at the beginning, yellow is at the end, and the middle is a transition, which can also specify the direction
45deg Represents a 45 degree gradient The to… (Example: left) To the… Gradient (example: left) -
Repeat gradient: repeating-Linear-gradient
Transition
transition-property | All if all attributes are transitioned, none if none |
---|---|
transition-duration | Specifies the duration of transition effects (in s and ms) |
transition-timing-function | A timing function for transitions that specifies how transitions are executed |
transition-delay | Delay the transition effect, wait a period of time before performing the transition |
transiotion | All transition-related properties can be set at the same time, with only one requirement, if you want to write delay, in two timesThe first is duration and the second is delay |
-
Transition-timing-function optional values:
ease Default, slow start, speed up, then slow down linear Uniform motion ease-in Accelerated motion ease-out Slow motion ease-in-out Speed up first, then slow down cubic-bezier() Specify timing function steps The transition effect is performed step by step, with the end argument performing the transition at the end of time (the default) and the start argument at the beginning of time
animation
Animation is similar to transition, both can achieve some dynamic effects, but the difference is that transition needs to be triggered when a property changes, animation can be triggered automatically
To set the animation effect, you must first set a keyframe, which sets the animation to perform each step
@keyframes test{from{margin-left: 0; } to{margin-left: 700px; }}Copy the code
Set animation:
animation-name | The name of the keyframe in which the current element is active |
---|---|
animation-duration | Animation execution time |
animation-delay | Animation delay |
animation-timing-function | The timing function of an animation is used in the same way as a transition |
animation-iteration-count | The number of times the animation was executed. Optional value: 1. 2. Infinite execution |
animation-direction | Specifies the direction in which the animation runs |
animatio-play-state | Sets the execution state of the animation. Optional values :1. Running Default value, animation execution; 2. Paused animation |
animation-fill-mode | Fill mode for animation |
-
Optional values of animation-fill-mode:
none By default, the element returns to its original position after animation forwards The element stops at the end of the animation backwards The element is in the starting position while the animation waits both It’s a combination of forwards and forwards -
Optional values of animation-direction:
normal The default value runs from from to reverse Run from to to from alternate Run from from to and reverse when repeated alternate-reserve Run from to to from and reverse on repeat
Deformation, translation, rotation
-
The distortion does not affect the layout of the page
-
Transform: Sets the morphing effect of an element
-
Translation:
translateX() It’s shifted along the X-axis translateY() It’s shifted along the Y-axis translateZ() It’s shifted along the z-axis
-
-
-
Z-axis translation:
-
The normal situation is to adjust the distance between the element and the human eye, the greater the distance, the closer to the person
-
Z-axis translation is a stereo effect. By default, web pages do not support perspective. If you want to see the effect, you must set the page (HTML) distance
HTML {perspective: ××px; }. Box1 {transform: translateZ ((px); }Copy the code
-
-
Rotation: Rotates an element by a specified Angle along x, y, or z
rotateX() Rotate the specified Angle along the X-axis rotateY() Rotate the specified Angle along the y axis rotateZ() Rotate the specified Angle along the Z axis - Such as:
Rotate 180 degrees along the y axis
:
Transform: rotateY (180deg); Backface - visibility: hidden; // Sets whether to display the back of the elementCopy the code
- Such as:
-
Zoom:
-
Functions that scale elements:
scaleX() Horizontal scaling scaleY() Vertical scaling scaleZ() Scaling in both directions
-
Less usage
-
Less is a CSS preprocessor language
- It is the CSS
Enhanced version
With less, you can write less code to achieve more powerful styles - A lot of new features have been added to less, like support for variables, support for mixins…
- The syntax of less is roughly the same as that of CSS, but there are many extensions to CSS in less, so the browser cannot execute less code directly. To execute less code, the browser must first convert it to CSS
- It is the CSS
-
Such as:
html{ --color:#bfa; } .box1{ color:var(--color); } // Set a function about the color, convenient to use calc (100px/2) // set a calculation function div{width: 200px; Height: $width; } // make height and width the sameCopy the code
-
Single-line comments in less // are not parsed to CSS
-
Variables:
- Any value can be stored in a variable, and we can change the value of the variable as needed
- Syntax: @ variable name
- For example: @a: 200px;
- If the variable is a class name, or part of the value must be used as @{variable name}
- When variables have the same name, the nearest variable is preferred (proximity principle)
-
Common variables use:
&
Represents the outer parent element
.box1{&:hover{}} // represents the hover attribute of box1Copy the code
The extend ()
Specifies the selector style for the current selector extension (selector grouping)
p2:extend(.p1){ color:red; } // indicates that P2 not only has all the styles of P1, but also has the color attributeCopy the code
- Copy style:
.p3{ .p1(); } // indicates that P3 copies all the styles of P1 // mixinCopy the code
- With class selectors you can add a parenthesis to the end of the selectors, so we’ve actually created one
mixins
.p4(){ width:100px; height:100px; } .p5{ .p4; } Copy the code
average
The color function averages the two color parameters:
Span {color: average (red, blue); }Copy the code
darken
You can combine existingColor burn
:
Background-color: darken (#bfa, 10%);Copy the code
- All data can be computed directly in LESS:
Width: 100px + 100px;Copy the code
- Can be achieved by
@import
To add other LESS files to the current LESS file:
@ import "xx. Less";Copy the code
Elastic box
-
Flex (elastic box)
- CSS is a layout method, it is mainly used instead of floating to complete the layout of the page
- Flex makes elements elastic, allowing them to change with the size of the page
-
Elastic container:
-
To use an elastic box, you must first set an element to be an elastic container
-
We set the elastic container with display
Display: flex Set it to a block-level elastic container Display: inline – flex Set to an elastic container in the row
-
-
Elastic element:
-
The children of an elastic container are elastic elements
-
An element can be both an elastic container and an elastic element
-
-
Flex-direction specifies the arrangement of elastic elements in the container
-
Optional value:
row By default, elastic elements are in the container Horizontal arrangement
row-reverse The elastic element is in the container Reverse horizontal arrangement
column The elastic element Vertical alignment
column-reverse The elastic elements are arranged in reverse longitudinal directions
-
-
Principal axis: The orientation of the elastic elements is called the principal axis
Side axis: perpendicular to the main axis is called the side axis
-
Attributes of elastic elements:
flex-grow If you specify the stretch factor for the elastic element, the remaining space of the parent element is allocated proportionally flex-shrink Specifies the shrinkage factor of an elastic element that shrinks children when there is not enough space in the parent element to hold all of them Such as:
The flex - turns up: 1; The flex - the shrink: 0;Copy the code
-
The flex – wrap:
Sets whether the elastic element wraps when the child element overflows
-
Optional value:
nowrap By default, elements are not wrapped wrap The element wraps along the secondary axis wrap-reverse The element winds in reverse along the auxiliary axis
-
-
Illustration-content sets how elements on the spindle are arranged (how white space on the spindle is allocated)
-
Optional value:
flex-start The elements are edged along the principal axis flex-end The elements are arranged along the terminal edge of the principal axis center The elements are centered space-around White space is distributed on both sides of the element space-between White space is evenly distributed between elements space-evenly Whitespace is distributed to one side of the element
-
-
How are the align-items elements aligned on the secondary axis
-
Optional value:
stretch Default value that sets the length of the element to the same value flex-start Elements do not stretch and are aligned along the secondary axis flex-end Align along the final edge of the secondary center Align center baseline Baseline alignment
-
-
Align-self overrides the align-items on the current elastic element
The align - self: stretch;Copy the code
-
Flex can set all three styles of elastic elements: grow shrink base
-
Optional value:
initial growth auto cut none basis
-
-
The order style sets the order of several of the same elements:
li:nth-child(1){ order:2; } li:nth-child(2){ order:1; } li:nth-child(3){ order:3; } // the sequence is second, first, and thirdCopy the code
The last
If it helps you, please like and bookmark this article and let more people see it ~ (“▔□▔)/
If you have any objections, please leave them in the comments section and I will reply one by one
If you are interested, please visitA blogger with a light in his eyes