CSS Core Properties

Catalog

1. Font Properties

1.1 Font Size

1.2 Font Style

1.3 Set line height

1.4 Font Tilt

Compound Writing of 1.5 font

2. Text Attributes

2.1 Font Color

2.2 Retrieve or set the case of text in an object

2.3 Text Alignment

2.4 Text Modification

2.5 first line indentation

2.6 Word Spacing

2.7 Word Spacing

3. List Attributes

3.1 Define list symbol styles

3.2 Use pictures as list symbols

3.3 Position of custom list symbols

3.4 Short Forms

4. Border Properties

4.1 Composite Form

4.2 Border Width

4.3 Border Color

4.4 Border Style

4.5 Set the border properties in a direction separately

5. Background Map Properties

5.1 Background color

5.2 Background Picture

5.3 Principles for Displaying Background Pictures

5.4 Background Picture Tiling Properties

5.5 Background Picture Location

Fixed 5.6 Background Map

6. Floating attributes

6.1 Definition

6.2 Clear Float

6.3 Example

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>

Tags: Front-end css3 html css IT

Posted by Matt Kindig on Sun, 07 Aug 2022 21:42:26 +0300