css属性类型有:1、html标签;2、CSS文字属性;3、CSS符号属性;4、CSS背景样式;5、CSS表单运用;6、CSS边界样式。
本教程操作环境:windows7系统、css3版,DELL G3电脑。
css属性类型有:
一、html标签
...文字格式化
Font size changeThe word you want to enter
Font colorThe word you want to enter
The font becomes boldThe word you want to enter
The font is italicThe word you want to input
Content
content
content< ;/p>
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:
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:
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!