What are CSS properties? Summary of Common properties of CSS (example)

What are CSS properties? CSS properties There are many, today here, I would like to summarize some of the CSS properties we often use, including CSS text properties, CSS border properties, CSS positioning properties, list styles and so on, but also to introduce you to the CSS style.

Common CSS Properties

1. CSS Block Properties (*block)

Row height Line-height: numeric | Inherit | Normal
Word spacing letter-spacing: numeric | Inherit | Normal
Word spacing word-spacing: numeric | Inherit | Normal
Space White-space:pre (Reserved) | NoWrap (No line break) | Normal

/* Table width adaptive */th {white-space:nowrap;}

Show display:

None /* Not shown, using a lot of scenes */
Block /* Turn inline tags into block-level labels */
Inline /* Change block-level labels to inline tags */
List-item; /* List Item */
run-in; /* Append part */
Compact /* Compact */
Marker /* Flag */
Table
inline-table;
Table-raw-group;
Table-header-group;
Table-footer-group;
Table-raw;
Table-column-group;
Table-column;
Table-cell;
Table-caption; /* Table Header */

2.css Box Properties (*box)

Breadth Width: Length | Percent | Auto
Height: Length | Percent | Auto
Clear Clear:none | Left | Right | Both
Border margin: upper right down left;
Fill padding: upper right lower left;
Positioning Position:absolute | Relative | Static
Transparency Visibility:inherit | Visible | Hidden
Overflow Overflow:visible | Hidden | Scroll auto;

3.css float Property (float)

Floating Float:left | Right | None Most used when the page is in the layout

Common usage:

<p style= ' background-color:red;float:left;width:50%; ' >p1</p><p style= ' background-color:green; float:right;width:50%; ' >p2</p>

A problem:

When a child tag uses float, the parent tag's style fails

<p style= ' background-color:red; ' >    <p style= "Float:left" >p1</p>    <p style= "Float:left" >p2</p></p>

Solution One: Clear:both

<p style= ' background-color:red; ' >    <p style= "Float:left" >p1</p>    <p style= "Float:left" >p2</p>    <p style= " Clear:both; " ></p> <!--plus Clear:both, it's normal--></p>

Solution Two: Clearfix

<p style= ' background-color:red; ' class= ' Clearfix ' >    <p style= ' float:left ' >p1</p>    <p Style= "Float:left" >p2</p></p>

. clearfix:after{    content: ".";    Display:block;    height:0;    Clear:both;    Visibility:hidden;}

4.css positioning properties (position)

Fixed

Usually used to write a fixed navigation bar at the top of the page, or a menu on either side.

<!--after adding position:fixed to a block-level label, the p does not take up a full line, and it is generally necessary to manually define the width, such as width:100%--> <div style= "position:fixed;height:10 %;background-color:lightskyblue;color:white;width:100%;top:0px; " > Navigation </div><div style= "" >    <div style= "position:fixed;bottom:0px;top:10%;float:left;width:20% ; background-color:indianred "> Menu </div>    <div style=" float:right;width:80%; " >        <p>php </p> <p>php Chinese network        </p>        <p>php Chinese network </p>        <p> PHP Chinese </p>        <p>php </p> <p>php Chinese network        </p>        <p>php Chinese network </p>        <p>php Chinese web </p>        <p>php Chinese </p>        <p>php Chinese network </p>        <p> PHP Chinese </p>        <p>php </p> <p>php Chinese network        </p>        <p>php Chinese network </p>    </div></div>

Operating effect:

Absolute and Relative

These are used in conjunction with each other to adjust the relative position of the div

<div style= "" >   <div style= "position:relative;width:300px;height:150px;" >    <div style= "position:absolute;float:left;width:20%;background-color:indianred;bottom:0px;right:0px;" > This is a menu </div></div>

The results are as follows:

5.CSS Transparency

. image{    opacity:0.5}

6.css font Properties (fonts)

Colour color: value;
Size font-size: Numerical value;
Font font-family: "Courier new", Courier, monospace, "Times New Roman", Times, Serif, Arial, Helvetica, Sans-serif, Verdana
Style font-style:oblique; (oblique body) italic; (italic) normal; (normal)
Thickness font-weight:bold; (bold) lighter; (fine body) normal; (normal)
Variant font-variant:small-caps; (small capital letter) normal; (normal)

7.css Background properties (background)

Background background:transparent; /Perspective Background */
Color Background-color: value;
Picture Background-image:url () | None
Repeat Background-repeat:inherit | No-repeat | Repeat | Repeat-x | Repeat-y;

Background-repeat:repeat; /* Repeat Arrangement-page default */background-repeat:no-repeat; /* Do not repeat the arrangement of */background-repeat:repeat-x; /* Repeats the */background-repeat:repeat-y on the x-axis; /* Repeat arrangement on y-axis */

Scrolling Background-attachment:fixed | Scroll
Position Background-position: value | Top | Bottom | Left | Right | Center

background-position:90% 90%; /* background picture x and Y axis position */background-position:top; /* Align the */background-position:buttom upward; /* Align */background-position:left downwards; /* Align */background-position:right to the left; /* Align */background-position:center to the right; /* Center Alignment */

shorthand background: background color | Background image | Background Repetition | Background Accessories | Background position;

8.css Text Properties

Casing Text-transform:capitalize | Uppercase | lowercase | None
Modifier text-decoration:underline; (underline) overline; (dash) Line-through; (strikethrough) blink; (flashing)
Arranging Text-align:justify | Left | Right | Center
Indent Text-indent: Values | Inherit
Shadow Text-shadow: Value;

9.css Border Properties (border)

Border style border-style:dotted; (dot line) dashed; (dashed) solid; Double, (two lines) groove, (Groove Line) ridge; (ridge) inset; (SAG) outset;
Border width border-width:;
Border color Border-color:top value right value bottom value left value;
shorthand border:width style color;

Border {border:border-width Border-style color} top Border {border-top:border-top-width Border-style color} right Box {Border-right:bor Der-right-width Border-style Color} bottom Border {border-bottom:border-bottom-width Border-style color} left box {border-left: Border-left-width Border-style Color}

10.CSS list Style (List-style)

Type List-style-type:disc | Circle | Square | decimal | Lower-roman | Upper-roman | Lower-alpha | Upper-alpha | None

List-style-type:none; /* not numbered */list-style-type:decimal; /* Arabic numerals */list-style-type:lower-roman; /* Lowercase roman numerals */list-style-type:upper-roman; /* Capital Roman numerals */list-style-type:lower-alpha; /* Lowercase English letter */list-style-type:upper-alpha; /* Uppercase English letter */list-style-type:disc; /* solid round symbol */list-style-type:circle; /* Hollow round symbol */list-style-type:square; /* Solid square symbol */

Location List-style-position:outside | Inside
Image List-style-image:url;
shorthand list-style: Directory Style Type | Directory Style Location | Url

11.css boundary attribute (margin)

margin-top:10px; (Upper boundary)
margin-right:10px; (Right border)
margin-bottom:10px; (Lower boundary value)
margin-left:10px; (left boundary value)
Margin-inside:;
Margin-outside:;

12.css Fill Properties (padding)

padding-top:10px; /* Upper Border left blank */padding-right:10px; /* Left blank */padding-bottom:10px on the right border; /* Lower border left blank */padding-left:10px; /* Left Border blank

13.css Vertical properties (vertical)

Vertical-align:sub; /* Subscript word */vertical-align:super; /* superscript word */vertical-align:top; /* Vertical upward alignment */vertical-align:bottom; /* Vertical downward alignment */vertical-align:middle; /* Vertical center alignment */vertical-align:text-top; /* text vertically upward to align */vertical-align:text-bottom; /* Text vertically downwards */

14. Link (a)

A/* All hyperlinks */a:link/* Hyperlink text Format */a:visited/* browsed link Text Format */a:active/* Press the link format */a:hover/* Mouse go to link */

15.CSS cursors (cursor)

Cursor Shape Cursor:hand | crosshair | Text | Wait | Move | Help | E-resize | Nw-resize | W-resize | S-resize | Se-resize | Sw-resize;

/* You can also customize the */cursor:hand; /* Link finger */cursor:crosshair/* 10 font */cursor:s-resize/* arrow face down */cursor:move/* Cross arrow, face right */cursor:help/* plus a question mark */cursor:w-resiz E/* Arrow facing left */cursor:n-resize/* arrow facing up */cursor:ne-resize/* arrow facing up */cursor:nw-resize/* arrow to upper left */cursor:text/* Text type */cursor:s E-resize/* Arrows oblique right lower */cursor:sw-resize/* arrows oblique Left bottom */cursor:wait/* funnel */

CSS Practices

1. Three ways to do CSS

Inline style: written in the corresponding tag's style property

Inside page style: written in the style tag inside the HTML page


External styles: Introducing CSS styles via link tags


. logo {    background-color:red;    Color:white;}
2. General Use Cases

P {font-family: "sans serif";}  /* value is a number of words, the value is quoted */.logo {background-color:red;}. Logo A,.logo p {background-color:red;} #morra {background-color:green;} A, p {color:red;}   /*a or P all use this css*/a p {color:red;}    /* Only the p below uses the css*/
Note: CSS is not case sensitive. However, there is one exception: class and ID names are sensitive to capitalization if they involve working with HTML documents.

Demo

<! DOCTYPE html>
Run as follows: