What types of css properties are there?

css属性类型有：1、html标签；2、CSS文字属性；3、CSS符号属性；4、CSS背景样式；5、CSS表单运用；6、CSS边界样式。

本教程操作环境：windows7系统、css3版，DELL G3电脑。

css属性类型有：

一、html标签

• e03b848252eb9375d56be284e690e873...bc5574f69a0cba105bc93bd3dc13c4ec文字格式化

• dc6dce4a544fdca2df29d5ac0ea9906b......16b28748ea4df4d9c2150843fecfba68Column block container

• Font size change6204e19e0330f923081a4c16d4055266The word you want to entere6e38b3c62e8df885fe2e3986461aa63

• Font color f3a4c98eff4f3c6be42a23567f866410The word you want to entere6e38b3c62e8df885fe2e3986461aa63

• The font becomes bolda4b561c25d9afb9ac8dc4d70affff419The word you want to enter0d36329ec37a2cc24d42c7229b69747a

• The font is italic5a8028ccc7a7e27417bff9f05adf5932The word you want to input72ac96585ae54b6ae11f849d2649d9e6

• ##The font is underlined88f336217b3880082bb52d49b5de60a5The word you want to input 04e11139013d3ca73accef66348e2e58

• Align to center syntax0511ef35f46864c22a06c599220d1c6fContent94b3e26ee717c64999d7867364b1b4a3

• Align left syntax a90b68a47b1014b68a00d00a43397863content94b3e26ee717c64999d7867364b1b4a3

• Align right syntax211e86be24691be96dcf6c7a347bafabcontent< ;/p>

• Font strikethrough2e44d2d3284d23d932e1fd85f3d4cf3aWords you want to enter6cf51b1709551acbf4a696702deda05f

• Font settings12ff8a182d83dd48bbeebbc4b60ecf3bThe word you want to inpute6e38b3c62e8df885fe2e3986461aa63

• Typewriter font78f983dbc27872ba42409adefe5049d9The word you want to inputd98ca7951c814b9263d12f482df06c69

• Superscript word2cdea26b4c3988e37d674b56660962a7The word you want to input2eb235f530502820017cce1685312d59

• Subscript wordb96cac025db4031319c29e1eb68f19d6The word you want to input270ea406e83044e5b95e23270c35ff95

• Horizontal line7066f81884652dc8592b2fa2a7556360

• Enter the word you want to enter in a new line0c6dc11e160d3b678d68754cc175188aThe word you want to enter

• Hyperlink08ee74b2e8e9d096b4c6ad310883c32dThe name of the link5db79b134e9f6b82c0b36e0489ee08ed

• 02a528e84a81ba0ea90ccb49d7f3f116The words you want to display enter here5db79b134e9f6b82c0b36e0489ee08edNetwork mail label

• Picture8c0c9937b7bd53eba204203aca4db673

• Marquee (loop) 207e674a51a625de79a64c6b5771913bWords you want to enter7204e33a7a23f6efcc788532e245c31b

External file import format tag

CSS external import format:

<link rel="stylesheet" type="text/css" href="/css.css" />

Direct reference:

<style type="text/css">
<!--
id{...}
-->
</style>

javascript - Load external .js independent file:

<script type="text/javascript" src="/script.js"></script>

2. CSS Text attributes:

color : #999999; /*Text color*/

font-family : 宋体,sans-serif; /*Text font*/

font-size : 9pt; /*Text size*/

font-style:itelic; /*Text italic*/

font-variant:small-caps; /* Small font*/

letter-spacing: 1pt; /*Distance between words*/

line-height: 200%; /*Set line height*/

font -weight:bold; /*Bold text*/

vertical-align:sub; /*Subscript*/

vertical-align:super; /*Superscript*/

text-decoration:line-through; /*Add strikethrough*/

text-decoration:overline; /*Add top line*/

text-decoration: underline; /*Add underline*/

text-decoration:none; /*Remove link underline*/

text-transform : capitalize; /*Capitalize the first word*/

text-transform : uppercase; /*English uppercase*/

text-transform : lowercase; /*English lowercase*/

text-align:right; /*Text right-aligned* /

text-align:left; /*Justify text to the left*/

text-align:center; /*Align text to the center*/

text-align:justify ; /*Text dispersed alignment*/

vertical-align attribute

vertical-align:top; /*Vertical upward alignment*/

vertical-align:bottom; / *Align vertically downwards*/

vertical-align:middle; /*Align vertically center*/

vertical-align:text-top; /*Align text vertically upwards*/

vertical-align:text-bottom; /*Align text vertically downward*/

3. CSS symbol attributes:

list-style-type:none; /*No number*/

list-style-type:decimal; /*Arabic numerals*/

list-style-type:lower-roman ; /*Lowercase Roman numerals*/

list-style-type:upper-roman; /*Uppercase Roman numerals*/

list-style-type:lower-alpha; /*Lowercase English letters*/

list-style-type:upper-alpha; /*Uppercase English letters*/

list-style-type:disc; /*Solid circle symbol*/

list-style-type:circle; /*Hollow circle symbol*/

list-style-type:square; /*Solid square symbol*/

list- style-image:url(/dot.gif); /*Picture symbol*/

list-style-position:outside; /*Convex row*/

list-style-position :inside; /*Indent*/

4. CSS background style:

background-color:#F5E2EC; /*Background color */

background:transparent; /*Perspective background*/

background-image : url(/image/bg.gif); /*Background image*/

background-attachment : fixed; /*Watermark fixed background*/

background-repeat : repeat; /*Repeat arrangement - web page default*/

background-repeat : no-repeat; / *Do not repeat the arrangement*/

background-repeat : repeat-x; /*Repeat the arrangement on the x-axis*/

background-repeat : repeat-y; /*Repeat the arrangement on the y-axis */

Specify the background position

background-position : 90% 90%; /*The position of the x and y axes of the background image*/

background-position : top; /*Align up*/

background-position : buttom; /*Align down*/

background-position : left; /*Align left*/

background-position : right; /*Align right*/

background-position : center; /*Align center*/

##五, CSS connection properties:

a /*All hyperlinks*/

a:link /*Hyperlink text format*/

a:visited /*Viewed link text format*/

a:active /*Format of pressed link*/

a:hover /*Mouse to link*/

Mouse cursor style:

Link finger CURSOR: hand

Cross body cursor:crosshair

Arrow down cursor:s-resize

Cross arrow cursor:move

Arrow to the right cursor:move

Add a question mark cursor:help

Arrow to the left cursor:w-resize

Arrow to the up cursor:n-resize

Arrow points to the upper right cursor:ne-resize

Arrow points to the upper left cursor:nw-resize

Text I-type cursor:text

Arrow tilts to the lower right cursor:se-resize

Arrow diagonally lower left cursor:sw-resize

Funnel cursor:wait

Cursor pattern (IE6) p {cursor:url("Cursor file name .cur"),text;}

6. CSS border list:

border-top: 1px solid #6699cc; /* Top border*/

border-bottom: 1px solid #6699cc; /*Bottom border*/

border-left: 1px solid #6699cc; /*Left border*/

border-right : 1px solid #6699cc; /*Right border line*/

The above is the recommended writing method, but you can also use the conventional method as follows:

border-top-color : #369 /*Set the top color of the top border*/

border-top-width:1px /*Set the top width of the top border*/

border-top-style : solid/*Set the top border style*/

Other border styles

solid /*Solid border*/

dotted /*dotted frame*/

double /*double frame*/

groove /*three-dimensional convex frame*/

ridge /*three-dimensional Relief frame*/

inset /*concave frame*/

outset /*convex frame*/

## 7. CSS form application:

• Text box1d4ff764ff0bebd2953d4c2fe5a65a83

• Buttonf3d13a9c5caf587679bbba9fb5e03574

• checkboxe692305e0b0f4c8955fd1c02a59e2bed

• Select button053bd6615814153ab6550b2d39306478

• Multi-line text box< ;textarea rows="1" name="S1" cols="15">40587128eee8df8f03d0b607fe983014

• Drop-down menu8e391191ff9f00f3fcdce9103c5ea6055a07473c87748fb1bf73f23d45547ab8Option 14afa15d3069109ac30911f04c56f3338
  5a07473c87748fb1bf73f23d45547ab8Option 24afa15d3069109ac30911f04c56f333818bb6ffaf0152bbe49cd8a3620346341

8. CSS border style:

margin-top:10px; /*Top border*/

margin-right:10px; /*Right border value*/

margin-bottom:10px; /*Lower margin value*/

margin-left:10px; /*Left margin value*/

##9 , CSS border blank:

padding-top:10px; /*Leave blank top border*/

padding-right:10px; /*Leave blank right border* /

padding-bottom:10px; /*Leave the bottom border blank*/

padding-left:10px; /*Leave the left border blank*/

Related tutorial recommendations:

CSS video tutorial

The above is the detailed content of What types of css properties are there?. For more information, please follow other related articles on the PHP Chinese website!