CSS Note uses notes by Emerald
/ - * ------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------- * - / 1. About ID and Class's marker method,
1. Define the ID using # characters in CSS.
example: ------------------------------------------------ - #Demo {Width: 100%; Background-color: #fffffff; border: Thin Solid # 000000; Padding: 0px 0px 0px 5px; Display: Table;} ------------- -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
2. Define Class Use in CSS. Character.
example: ------------------------------------------------ --- .demo {width: 100%; Background-color: #ffffff; border: Thin Solid # 000000; Padding: 0px 0px 0px 5px; display: table;} ------------- -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
/ - * ------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------- * - /
II. Define the skills of ID and Class.
The top-level directory uses ID definitions, and there is no lower directory in the directory to use the Class definition. There is an id definition in the directory.
example: ------------------------------------------------ ---
/ - * ------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------- * - /
Three. Deepen the definition of layers
XHTML code: ----------------------------------------------- ----
Corresponding CSS code: -------------------------------------------- ------ #headerWS {} #headerWS div.logoWS {} #headerWS div # navigationCnWS {} #headerWS div # navigationCnWS div.navigationCnTopWS {} #headerWS div # navigationCnWS div.navigationCnMenuWS {} ------ --------------------------------------------- can also go deep into the beginning Label, Example: ---------------------------------------------- ----- div # headerWS {} div # headerWS div.logoWS {} div # headerWS div # navigationCnWS {} div # headerWS div # navigationCnWS div.navigationCnTopWS {} div # headerWS div # navigationCnWS div.navigationCnMenuWS {} - -------------------------------------------------
/ - * ------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------- * - /
4. Difficult to CSS.
Usually a Site CSS document will become increasingly large with the change of the site, then you should be thinned for CSS documents. Classify the CSS documentation of the same role in the documentation.
example: ------------------------------------------------ --- # sys-login-2 {padding-top: 5px;} # x-pbb-sl {padding-top: 5px;} ------------------- --------------------------------
You can classify these two definitions together. Example: ----------------------------------- -------------- # xys-login-2, # x-pb-sl {padding-top: 5px;} --------------- ------------------------------------
Note: Define multiple tags as the same attribute in CSS to use "," separated.
/ - * ------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------- * - /
5. There should be a good naming method, although there are several bytes, but for future convenience to find and modify, the defined properties should be properly named.
Different attributes should be separated by labenes that are easy to argue, such as even habits.
/ ************************************************** *********************************************************** ****************************** / * * Green Institute Navigation Menu by Emerald Green College - Green Institute http://gi.2288.org:88/ * / *********************************************************** *********************************************************** ******************* / Separate a big category,
use/************************************************ *********************************************************** ********************** / Separate a small category Use the / * XOOPS BANNER * / Named small category.
/ - * ------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------- * - /
/ ************************************************** *************** / * * Author: Emerald
