Play html5+ cross-platform development [9] CSS Basics-css Common Properties

Text Properties Common text attributes

Property	Role	Format	Take value	Shortcut keys	Watch out.
Font-style	Specify Text style	Font-style:italic;	Normal: OK, the default is normal Italic: Inclined	FS Font-style:italic; FSN Font-style:normal;
Font-weight	Specify the text thickness	Font-weight:bold;	Word Value: Bold and Bold Bolder is thicker than bold. Lighter thin line, the default is the thin line Numeric value: 100-900 whole numbers	FW Font-weight:; FWB Font-weight:bold; FWBR Font-weight:bolder;
Font-size	Specify Text Size	font-size:30px;	PX (pixel pixel)	FZ font-size:; Fz30 font-size:30px;	Set the size by font-size must be with the unit, that is, must write px
Font-family	Specify text font	Font-family: "in italics";	Various font names	FF font-family:;	If the value is Chinese, enclose it in double quotation marks or single quotation marks. The font you set must be a font that is already installed on the user's computer

Font Properties Supplement

• If the font you set does not exist, the system uses the default font to display

  • The default general use of the song body

• What if the font you set doesn't exist and we don't want to use the default font to display it?

  • You can set options for fonts
  • Format: font-family: "Font 1", "Alternative 1", ...;

• What if I want to set the font separately for Chinese and English ?

  • But all Chinese fonts contain English.
  • All English fonts are not included in Chinese
  • This means that Chinese fonts can handle English, while English fonts cannot handle Chinese

• Note: If you want to set the font in English in the interface, then the English font must be written in front of Chinese

• Supplement the most common fonts in enterprise development are the following

  • English: Arial/blackbody/Microsoft Ya Hei
  • English: "Times New Roman"/arial

• Also need to know, is not the name is English must be English font, because the Chinese font actually has its own English name, so is not the Chinese font mainly see can handle Chinese

  • Song Body SimSun
  • Blackbody Simhei
  • Microsoft Black Microsoft Yahei

literal attribute abbreviation

• abbreviation format :

Font style Weight size family;

• For example:

font:italicbold10px "in italics ";

• Note the point:
  1) in this abbreviation format, some attribute values can be omitted, sytle,weight can be omitted,
  2) in this abbreviated format, the position of style and weight can be exchanged
  3) Some attribute values in this abbreviation format cannot be omitted: size,family cannot be omitted
  4)size and family location can not be misplaced , size must be written in front of family, and size and family must be written at the end of all properties

<style>    p{/        *        font-style:italic;        Font-weight:bold;        font-size:10px;        Font-family: "in italics";        *        /font:bolditalic10px " italic ";     } </Style>

Text properties

Common Text Properties

Property	Role	Format	Take value	Shortcut keys
text-decoration		text-decoration:underline;	underline underline Line-through strikethrough overline underline None is nothing, and the most common use is to remove the underline from the hyperlink	TD Text-decoration:none; TDU text-decoration:underline; TDL Text-decoration:line-through; tdo text-decoration:overline;
Text-align	Set text horizontal alignment	Text-align:center;	Left Right In center	Ta text-align:left; Tar text-align:right; TAC Text-align:center;
Text-indent	Set text indent	Text-indent:2em;	2EM, where EM is the unit, an em represents the width of the indentation of a text	TI text-indent:; TI2E Text-indent:2em;

<style>    p{        text-decorationnone;        text-align left;        text-indent 2em;    }    a {        text-decorationnone;    } </Style>

Color Properties

• How to modify the color of text in CSS using the Color property
• Format: color: value;

• Value:

  • 1. English words

  • In general, the common color has the corresponding English words, but the English words can express the color is limited, that is, not all colors can be expressed in English words

  • 2. RGB

  • RGB is actually the three primary colors, where r (Red red) g (green) B (Blue blue)
  • Format: rgb (0,0,0)
    • The first number is the brightness that is used to set the light source component of the three primary color
    • The second number is the brightness of the green display of the light element used to set the three primary colors
    • The third number is the brightness that is used to set the light element of the three primary color to display Blue
    • Each of these numbers has a value of 0-255 before it, 0 for non-illuminated, 255 for glow, and the greater the brighter the higher the value.

      红色: rgb(255,0,0);绿色: rgb(0,255,0);蓝色: rgb(0,0,255);黑色: rgb(0,0,0);白色: rgb(255,255,255);灰色: rgb(200,200,200);只要让红色/绿色/蓝色的值都一样就是灰色

• • 3. Rgba
  • The RGB in RGBA is the same as it was explained earlier, with just one more a.
  • A for transparency, the value is 0-1, the smaller the value, the more transparent
  • For example:

    color: rgba(255,0,0,0.2);

• • 4. Hex
  • In hexadecimal, the color is essentially RGB.
  • in hexadecimal, a color is represented by each of the two bits

  • For example: #FFEE00 ff means that r EE means that G 00 means B

  • What is hexadecimal?

  • hexadecimal and decimal are the same way of counting
  • In decimal value range 0-9, every ten into one
  • Value range in hex 0-f, every 16 in one

    十进制   0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15十六进制 0 1 2 3 4 5 6 7 8 9  a  b  c  d  e  f

• • Formulas for hexadecimal and decimal conversions
  • The first digit in hexadecimal *16 + hex second digit = decimal

    15 == 1*16 + 5 = 2112 == 1*16 + 2 = 18FF == F*16 + F == 15*16 + 15 == 240 + 15 = 25500 == 0*16 + 0 = 0

• • 6, hexadecimal abbreviation
  • In CSS, as long as the hexadecimal color of each of the two values are the same, then you can be abbreviated to a
  • For example:#FFEE00 == #FE0
  • Note the point:
  • 1. If the current color corresponds to a different two-digit number, then it cannot be shortened
    • 123456;
  • 2. If the two digits of the same number do not belong to the same color, it cannot be shortened.
    • 122334

<style>P{/*color:red;*/        /*color:rgb (255,0,0); * *        /*color:rgba (255,0,0,1); * *        Color:#FF0000;Color:#F00;/*color:rgba (255,0,0,0.2); * *        Color:#ffee00;Color:#fe0;Color:#769abb; }</style>

Play html5+ cross-platform development [9] CSS Basics-css Common Properties