Catalog
2.2 Retrieve or set the case of text in an object
3.2 Use pictures as list symbols
3.3 Position of custom list symbols
4.5 Set the border properties in a direction separately
5.3 Principles for Displaying Background Pictures
5.4 Background Picture Tiling Properties
5.5 Background Picture Location
1. Font Properties
1.1 Font Size
font-size:20px
1.2 Font Style
font-family:"Chinese script",Arial
tip: Setting multiple fonts will start with the first one, work when found, and keep looking backwards until found
1.3 Set line height
line-height:20px //Double the original row height line-height:2
- When a single line of text is higher than the height of the container, it can be aligned vertically in the container.
- When the line height of a single line of text is less than the height of the container, the position of the single line of text in any position above the vertical alignment in the container can be achieved.
- When the line height of a single line of text is greater than the height of the container, it can be positioned anywhere below the vertical alignment of the single line of text in the container.
1.4 Font Tilt
Mode 1: through <i></i> Tags
<i>Text that needs to be tilted</i>
Mode 2: through <em></em> Tags
<em>Text that needs to be tilted</em>
Mode 3: through style
//1
div{
font-style:italic
}
//2
div{
font-style:oblique
}Tip:italic and oblique are skewed, but oblique is a little larger. But browsers don't distinguish them very clearly
Compound Writing of 1.5 font
- Many attributes are separated by spaces, except font-size/line-height s.
- size and family fixes are not interchangeable with other attribute locations
Format: font:font-style font-weight font-size/line-height font-family Example: font: bold italic 30px/2 "STXingkai",Arial;
Short form of font property:
font: 30px "STXingkai",Arial;
2. Text Attributes
2.1 Font Color
color:red; //Hexadecimal color:#ffffff //rgb color:rgb(222,123,213) //rgba fourth parameter represents transparency color:rgba(222,123,213,.4)
2.2 Retrieve or set the case of text in an object
- Change Text to Full Capital
text-transform: uppercase
- Make text all lowercase
text-transform: lowercase
- To Capitalize the First Letter
text-transform: capitalize
- Set text small capitals
font-variant: small-caps;
2.3 Text Alignment
- Horizontal alignment:
//Left Alignment text-align:left; //Right alignment text-align:right; //Center Alignment text-align:center; //Align ends text-align:justify;
- Vertical alignment:
vertical-align:top //upper vertical-align:bottom //lower vertical-align:middle //in
2.4 Text Modification
text-decoration:none //No decoration text-decoration:underline //Add Underline text-decoration:overline //Add an underline text-decoration:line-through //Add Strikeout
2.5 first line indentation
text-indent:value
tip: value can take a negative value; The text-indent property only works on the first line
2.6 Word Spacing
letter-spacing:value;
Role: Control the spacing between English letters or Chinese characters
2.7 Word Spacing
word-spacing:value;
Role: Controlling the spacing between English words and separating Chinese characters with spaces also works
3. List Attributes
3.1 Define list symbol styles
list-style-type:disc //disc list-style-type:circle //Hollow circle list-style-type:square //Square list-style-type:none //Remove list symbols
3.2 Use pictures as list symbols
list-style-image:url(Picture Path)
3.3 Position of custom list symbols
list-style-position:outside //Outside list-style-position:inside //inside
3.4 Short Forms
List property values can be abbreviated and set directly
For example: list-style: none ; //Remove List Style
4. Border Properties
4.1 Composite Form
boder:1px solid red ;
4.2 Border Width
boder-width:2px;
4.3 Border Color
boder-color:red;
4.4 Border Style
boder-style:solid //Solid line boder-style:dashed //Dashed line boder-style:dotted //dotted boder-style:double //Double Line boder-style:none //Remove Border
4.5 Set the border properties in a direction separately
border-top: //border-top border-bottom: //bottom border-left: //border-left border-right: //border-right
5. Background Map Properties
5.1 Background color
background-color:red
5.2 Background Picture
background-image:url(Picture Path)
5.3 Principles for Displaying Background Pictures
- Excess section is clipped when background image is larger than container
- Full coverage when background image equals container
- Default tiling when background map is smaller than container
- Loading background map must have container area
5.4 Background Picture Tiling Properties
background-repeat:value;
Value value:
- no-repeat: not flat
- repeat:tiling
- repeat-x: horizontal tiling
- repeat-y: vertical tiling
5.5 Background Picture Location
Grammar:
background-position: Value 1 value 2; Value 1 is the horizontal attribute value and value 2 is the vertical attribute value
tip:
* Move the value horizontally to the right and vertically down is a positive number
Horizontal, Left and Vertical Upward Move Value is Negative
Example: achieving horizontal and vertical centering
background-position:center;
Fixed 5.6 Background Map
Grammar:
background-attachment:value; value Value is scroll //Roll value Value is fixed //fixed
6. Floating attributes
6.1 Definition
- float: Defines how other text in a Web page appears around this element
- Detaches elements from the document stream for a flexible layout
- Attribute value: left: The element floats to the left of the text; Right: the element floats to the right of the text; none: default return, no float
6.2 Clear Float
Method 1: Parent adds overflow:hidden
Method 2: clear:box or add div and set style clear:
Method 3: Clear Floating All-In-One
.clear:after{
content:"";
display:block;
clear:both;
height:0;
overflow:hidden;
visibility:hidden;
} 6.3 Example
Enable text around picture
<style>
div{
width: 300px;
height: 300px;
border: 3px solid #000;
}
div img{
float: left;
}
</style>
<body>
<div>
<img src="images/img04.jpeg" alt="">
Crazy Thursday Crazy Thursday Crazy Thursday Crazy Thursday Crazy Thursday Crazy Thursday Crazy Thursday Crazy Thursday Crazy Thursday Crazy Thursday Crazy Thursday Crazy Thursday Crazy Thursday Crazy Thursday Crazy Thursday Crazy Thursday Crazy Thursday Crazy Thursday Crazy Thursday Crazy Thursday Crazy Thursday Crazy Crazy Thursday Crazy Thursday Crazy Thursday Crazy Thursday Crazy Thursday Crazy Thursday Crazy Thursday Crazy Thursday Crazy Thursday Crazy Thursday Crazy Thursday Crazy Thursday Crazy Thursday
</div>
</body>