HTML elements
1. Block-level elements
Block-level elements: Occupy a single line, you can set the height and width, if not set, the default width of the parent element is 100%.
Common block-level elements are <p></p>, <form></form>, <h1~h6></h1~h6>, <ul>, <ol>, <div></div>, etc.
2. Inline elements
Inline elements: cannot occupy a single line, cannot set the width and height, and can only support the size of the element by its own content size
Common inline elements <font>, <strong>, <b>, <em>, <i>, <del>, <s>, <ins>, <u>, <span>, etc.
3. Inline block-level elements
Inline fast-level elements: cannot occupy a line by itself, and can set its own height and width
Common inline block-level elements: <input><img>, etc.
3. Mutual transformation between elements
inline can convert block-level elements into inline elements; inline-block can convert block-level elements and inline elements into inline block-level elements; block can convert inline elements and inline block-level elements into block-level elements
Conversion method:
tag name\.class\#id value{
display：inline\inline\block;
}
Three major features of css
a. Cascading rows
It is a browser's ability to handle conflicts. If an attribute is set to the same element through two selectors, then one attribute will overlay the other at this time [that is, what we often call style override]
b. Inheritance
Role: Child elements can inherit the style of the parent element. Particularity:
-
Not all attributes can be inherited, only attributes starting with color/font-/text-/line- can be inherited.
-
In CSS inheritance, not only sons can inherit, but all descendants can inherit.
-
The color and underline settings of the a tag cannot be inherited, and must be set on the a tag itself.
-
The font size of the h tag cannot be modified, and the h tag itself must be modified.
c. css priority
1. What is priority
Priority means that when multiple selectors select the same tag and set the same attribute for the same tag, that attribute will be executed first
2. How to judge the priority
a. If you use the same type of selector, then whoever writes it later will listen to it. The principle of proximity
b. If different types of selectors are used , they will be stacked according to the priority of the selector.
!important>inline style [half not applicable]>id>class>tag>*>inheritance>browser default attribute
3.!important
a. !important can only increase the priority of the specified attribute, and the priority of other attributes will not be increased.
b. !important must be written before the semicolon after the attribute value, and a space is added between the attribute value.
c. The exclamation mark in front of !important cannot be omitted.
4. Priority weight calculation
Weight Calculation Rules
(1) Inline styles, such as: style="", weights are 1, 0, 0, 0.
(2) ID selector, such as: #content, the weight is 0, 1, 0, 0.
(3) Classes, pseudo-classes and attribute selectors, such as .content E: link E[attr], the weights are 0, 0, 1, 0.
(4) Element selectors and pseudo-element selectors, such as div p::before, have weights of 0, 0, 0, 1.
(5) Wildcards, sub-selectors, adjacent selectors, etc. Such as * , >, +, the weight is 0, 0, 0, 0.
(6) Inherited styles have no weight. !important has the highest weight
4. Background properties
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Set the background color method
background-color：
- A valid color name - e.g. "red"
- Hex value - eg "#ff0000"
- RGB values - e.g. "rgb(255,0,0)"
Which can change the background color transparency can also use
div {
background-color: green;
opacity: 0.3;
}background-color: color;
background-color：transparent；
5. Background image
1. background-image: url (image path);
To add multiple background images, you need to write multiple urls (), and each url () is separated by a comma
2. Background image tiling (background-repeat)
background-repeat: repeat [default tiling] \repeat-x [tiling along the x-axis] \repeat-y [tiling along the y-axis]\no-repeat [no tiling]
6. Background image location
background-position: try to enter two values here; separated by spaces
a. The English word center left right top bottom when entering a position, the other is centered by default
b. Percentage: The first value represents the percentage from the left, and the second represents the percentage from the top. #When entering a value, the distance is fifty percent above
c. Pixel value: similar to b percentage can be replaced with pixel index. #When entering a value, the distance is fifty percent above
Seven, background attachment (background-attchment)
background-attchment：fixed；
At this time, the background image of the sliding page is always at a fixed position on the screen
Eight, the size of the picture (background-size)
a. Pixel value or percentage
b.cover tiles the entire background, and the overflow part is hidden
c.contain is displayed according to the ratio of the maximum percentage of the background image
Nine, background style abbreviation
background: background color background address background tile background scroll background position;
10. Multiple Background Images
a. blcakground-image: url(), url(); several background images write several url()
b. Reasonably arrange the background position
Eleven, background gradient
Linear gradient: background: linear-gradient (to direction) can not write the parentheses content, the default gradient from top to bottom
Radial Gradient: background: radial-gradient (circl) can also be left out. By default, the gradient changes from the center to the surroundings.
box model
border definition
border-style: attribute;
Related attributes:
- dotted - defines a dotted border
- dashed - defines a dashed border
- solid - defines a solid border
- double - defines a double border
- groove - Defines a 3D groove border. The effect depends on the border-color value
- ridge - Defines a 3D ridge border. The effect depends on the border-color value
- inset - Defines the 3D inset border. The effect depends on the border-color value
- outset - Defines the 3D outset border. The effect depends on the border-color value
- none - defines no border
- hidden - defines a hidden border
-
<!DOCTYPE html> <html> <head> <style> p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;} </style> </head> <body> <h1>border-style 属性</h1> <p>此属性规定要显示的边框类型：</p> <p class="dotted">点状边框。</p> <p class="dashed">虚线边框。</p> <p class="solid">实线边框。</p> <p class="double">双线边框。</p> <p class="groove">凹槽边框。</p> <p class="ridge">垄状边框。</p> <p class="inset">3D inset 边框。</p> <p class="outset">3D outset 边框。</p> <p class="none">无边框。</p> <p class="hidden">隐藏边框。</p> <p class="mix">混合边框。</p> </body> </html> 