css properties-HTML Tutorial-php.cn

Word Body Genus Sex

Font properties	Describe
font-family	Use a specified font name or a type of font family
font-size	The size of the font display
font-style	Use one of 3 methods to define the displayed font: normal (normal), italic (italic) or oblique (oblique)
font-weight	Use bold as the value to make the font bold
font-variant	Set up English case conversion
	font{font-family: "宋体"; font-size: 12px; font-style: normal; line-height: 20px;font-weight: bold; font-variant: normal; text-transform: capitalize; color: # 666666; text-decoration: underline;}

文本 genus 性

Text attribute	Description
letter-spacing	Define an amount of space appended between characters
Word-spacing	Define an amount of space appended between words
text-decoration	The text modification attribute allows text to be modified by one of 5 attributes
text-align	Set the horizontal alignment of text, including left alignment, right alignment, center, and alignment
text-indent	The first line of text is indented
line-height	The line-height property accepts a value that controls the spacing between text baselines
text-transform	Control the case of English text
	font{letter-spacing: 2em; text-align: left; text-indent: 10px; vertical-align: middle; word-spacing: 5em; white-space: normal;}

side frame attribute

边边 border-color Border color border-style Border style border-width Border width border-top-color Top border color border-left-color Left border color border-right-color Right border color border-bottom-color Bottom border color border-top-style Top border style border-left-style Bottom border style border-right--style Right border style border-bottom-style Bottom border style border-top-width Top border width border-left-width Bottom border width border-right-width Right border width border-bottom-width Bottom border width border{ border-top-width: 1px; border-top-style: dotted; border-top-color: #FF0000;}

Border Frame Property	Describe
Border	Border
Border-top
border-left	Left border
border-right	Right border
Border-bottom	bottom border

🎜 🎜

Border attribute setting value

Border style attribute value	Describe
none	No borders
dotted	The border is composed of points
dash	The border is composed of short lines
solid	The border is a solid line
double	The border is a double solid line
groove	The frame has a three-dimensional groove
ridge	The border is formed into ridges
inset	There is a three-dimensional frame embedded in the frame
Outset	A three-dimensional frame is embedded outside the frame

Ding Bit Genus Sex

Positioning attributes	Describe
position	Absolute (absolute positioning) relative (relative positioning)
top	The distance between the layer and the vertical coordinate of the vertex
left	The distance between the layer and the abscissa of the vertex
width	The width of the layer
height	Height of layer
z-index	Determines the order and coverage relationship of layers. Elements with higher values will cover elements with lower values
clip	Limit the display to only the cropped area. The cropped area is a rectangle. Just set two points. One is the vertex of the upper left corner of the rectangle, which is completed by the settings of top and right. The other is the apex of the lower right foot, which is completed by the settings of bottom and right
overflow	When the content in the layer exceeds the range that the layer can accommodate, Visible: the content will be displayed regardless of the size of the layer; Hidden: the content that exceeds the size of the layer will be hidden; scrol: regardless of whether the content exceeds the scope of the layer, select this items will add scroll bars to the layer; auto: only display scroll bars when the content exceeds the scope of the layer
visibility	This item is for the setting of nested layers. Nested layers are inserted into other layers and are divided into nested layers (child layers) and nested layers (parent layers). Inherit: The child layer inherits the visibility of the parent layer. If the parent layer is visible, the child layer is also visible; if the parent layer is invisible, the child layer is also invisible. Visible: Whether the parent layer is visible or not, the child layer is visible. Hidden: Whether the parent layer is visible or not, the child layer is hidden.

District Block Property

Block attributes	Describe
width	Set the width of the object
height	Set the height of the object
float	Let text wrap around an element
Clear	Specify whether to allow surrounding text or objects on a certain side of an element
padding	Determines how much space should be inserted between the border and the content. It has four attributes, namely: top (top), right (right), bottom (bottom), and left (left), which are used to set the top, bottom, left, and right padding distances respectively.
margin	Determines the spatial distance between the content block and the outer elements. They are: top (top), right (right), bottom (bottom), and left (left) are used to set the top, bottom, left, and right padding distances respectively.
	#alignLeft{float:left;margin:0;padding:0;width:100px;height:100px;clear:both}

Column Table Attribute

List properties	Describe
list-style-type	Set the symbol type of the boot list item
list-style-image	Choose an image as a guide symbol for your project li{ list-style-image:url(14-25.gif)}
list-stle-position	Determine the degree of indentation of list items

List symbol type attribute value

加 Add a lowercase Roman numeral in front of the text line upper-roman lower-alpha upper-alpha none Does not display any bullets or numbersList position attribute value

List symbol type attribute value	Describe
disc	Add a “●” solid circle in front of the text line
circle	Add a “○” hollow circle in front of the text line
spuare	Add a “■” solid square in front of the text line
decimal	加 Add ordinary Arabic numerals in front of the text line
lower-roman
加 Added to Rome in front of the text line
Add lowercase English letters in front of the text line
Add uppercase English letters in front of the text line

#alignLeft li { list-style-image: url(images/arrow1.gif);	list-style-type: none;list-style-position: outside;}

List position attribute valueDescription

outside

The list is close to the left border

inside

List indentation

/*This is how comments are written*/

body {

/*Text attribute*/

font-size:12px;/*text size*/ color:#CCCCCC;/*text color*/

font-family:Arial, Helvetica, sans-serif;/*Set font*/

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

text-align:center;/*The horizontal direction inside the DIV tag is centered or left/right*/

text-decoration:underline;/*Underline No underline is none*/

line-height:150%;/*Line heightcan also be pixelspx*/

/*Background attributes*/

/*Background Color*/

background-image:url(images/test.gif);/*background image*/

background-repeat:no-repeat;/*The background image is not tiled*/

background-position:5px 10px;/*The position of the background image, the first is the abscissa, the second is the ordinate*/

/*Padding and border properties*/

height: 100px; width: 100px;

margin:10px 0 5px 0;/*Container external margin The order is top right bottom left, when it is 0, no unit is needed*/

margin-top:10px; /*How to write a single item */

padding:10px 0 5px 0;/*Container internal margins, the order is top right bottom left, when it is 0, no unit is needed*/

float:left; /*1. Only use left right and */

when making column structures

/*List attributes*/

list-style-type:none;/*Eliminate the small black dots in front of ul unordered list li*/

display:block;/*Displayed in block form, usually used to achieve the mouse-over effect in links*/

display:inline;/*Use it only when the outer margin of the DIV that is moved to the side doubles when float is used. This is for a bug in IE6*/

/*Border attribute*/

border:1px solid #ccc;/*Border attributes of tables, DIV, LI, A and other containers, the dotted line is dashed*/

overflow:hidden;/*Hide the overflow part*/ overflow:auto;/*Automatically determine the height of the container and choose to automatically appear/hide the vertical scroll bar*/

/*Special attributes, do not need to be mastered by force*/

/*Vertical text arrangement:*/writing-mode: tb-rl;

/*Predetermined format*/

/*Character spacing*/ letter-spacing:5px;

/*word spacing*/ word-spacing:5px;

}

Positioning attributes	Describe
position	Absolute (absolute positioning) relative (relative positioning)
top	The distance between the layer and the vertical coordinate of the vertex
left	The distance between the layer and the abscissa of the vertex
width	The width of the layer
height	Height of layer
z-index	Determines the order and coverage relationship of layers. Elements with higher values will cover elements with lower values
clip	Limit the display to only the cropped area. The cropped area is a rectangle. Just set two points. One is the vertex of the upper left corner of the rectangle, which is completed by the settings of top and right. The other is the apex of the lower right foot, which is completed by the settings of bottom and right
overflow	When the content in the layer exceeds the range that the layer can accommodate, Visible: the content will be displayed regardless of the size of the layer; Hidden: the content that exceeds the size of the layer will be hidden; scrol: regardless of whether the content exceeds the scope of the layer, select this items will add scroll bars to the layer; auto: only display scroll bars when the content exceeds the scope of the layer
visibility	This item is for the setting of nested layers. Nested layers are inserted into other layers and are divided into nested layers (child layers) and nested layers (parent layers). Inherit: The child layer inherits the visibility of the parent layer. If the parent layer is visible, the child layer is also visible; if the parent layer is invisible, the child layer is also invisible. Visible: Whether the parent layer is visible or not, the child layer is visible. Hidden: Whether the parent layer is visible or not, the child layer is hidden. css