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标签

• ...

  文字格式化

• ......
  Column block container

• Font size changeThe word you want to enter

• Font color The word you want to enter

• The font becomes boldThe word you want to enter

• The font is italicThe word you want to input

• ##The font is underlinedThe word you want to input

• Align to center syntax

  Content

• Align left syntax

  content

• Align right syntax

  content< ;/p>

• Font strikethroughWords you want to enter

• Font settingsThe word you want to input

• Typewriter fontThe word you want to input

• Superscript word^{The word you want to input}

• Subscript word_{The word you want to input}

• Horizontal line

  ---

• Enter the word you want to enter in a new line
  The word you want to enter

• HyperlinkThe name of the link

• The words you want to display enter hereNetwork mail label

• Picture

• Marquee (loop) Words you want to enter

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" ></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 box

• Button

• checkbox

• Select button

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

• Drop-down menuOption 1
  Option 2

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!