Home >Web Front-end >HTML Tutorial >After learning these, you can get started with DIV CSS (transfer)_html/css_WEB-ITnose

After learning these, you can get started with DIV CSS (transfer)_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:29:10920browse

Reprinted from: http://www.zhukun.net/archives/361#more-361

CSS functions are complex and changeable, and most novices are confused and don’t know how to do it. To take control. So let’s make a simple tutorial.
1, text control class

font-size:12px; text size, usually 12px. 14px is now popular again. Control the size yourself.

color:#666; Color control, choose the color palette yourself. Hexadecimal
line-height:2em; line height, em is a character, supports px, percentage and other units
text-align:center; text is centered, left is not necessary, right is right
font -weight:bold; Text bold
text-indent:2em; Each paragraph is indented, two characters, commonly used

Using the above CSS can basically solve 90% of the problems, and the rest will gradually Do your own research.
2, layout class

margin:10px 10px 10px 50px; outer patch, top right bottom left. Except for 0, it must be in unit, and the unit can be px cm, etc. Commonly used px
padding10px 10px 10px 50px inner patch, set the same as outer patch
float:left; float, common attribute. Try more
width:51px; Width
height:89px; Height
overflow:hidden; Clear three-dimensional floating (for browsers such as Firefox), overflow hiding
clear:both; Clear flat floating
border:1px solid #77543b; Set the border to 1, solid line, color, hexadecimal

The following code must be written before each CSS

*{ padding:0; margin:0;} If not specified, both the inner patch and the outer patch will be 0, which can solve 90% of Firefox incompatibility problem codes.
body{font-size:12px; background:#AC956C;} sets the default font size of the content, etc. It is not recommended to control the line height here.

a:link,a:visited,a:active{ color:#333; text-decoration:none; font-size:12px;}
a:hover{ color:#666; text- decoration:underline;font-size:12px;} Default link properties.

li{ list-style:none;} liRemove the previous dot.

List

#tuijian {}
#tuijian ul { margin-left:60px;}
#tuijian ul li{ line-height:1.5em;color:#EEE4C1 }
#tuijian ul li a{ color:#EEE4C1}

List control is difficult to learn, but it is actually simple. It is not recommended to use the outer left patch to control the spacing for li. It is recommended to use LI width control. Generally, ul can be left blank. If you want to position it separately, if you need the list to be one line, which is often used in navigation, just set li to a left float.

Master the above CSS content and you will basically get started.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn