Front End Tutorials (9) CSS Getting Started Tutorial-css property settings

A Font property

1, font-weight: Text thickness

Take value	Description
Normal	Default value, Standard weight
Bord	Bold body
Border	More coarse
Lighter	More fine
100~900	Set the specific thickness, 400 equals normal, and 700 equals the bold
Inherit	Inherit the weight value of the parent element font

2. Font-style: Text Style

3. Font-size: Text Size

fs: typically 12px or 13px or 14px Note:1, by font-sizeto set the text size must be with units, that is, be sure to write PX2, if set to inherit represents the parent element to inherit the font size value.

4. font-family: Text font

" Microsoft Yahei " " Microsoft Ya-Black " " Arial ", sans-serif common fonts: serif serif font sans-serif non-liner font Chinese: Arial, Microsoft ya Black, bold note:    1, The font you set must be a font that is already installed on the user's computer, and the browser will use the first value it can recognize.     2, if the value is Chinese, need to use single or double quotation marks to expand

5, text attributes shorthand

' Serif ',' Microsoft Jas Black '; */'serif','  Microsoft ya Black '

6. Color: Text Colors

Take value	format	Description
English words	color:red;	Most colors have a corresponding English word description, but the English word has its limitations: cannot represent all colors
Rgb	Color:rgb (255,0,0)	What are the three primary colors? Red,green,blue What is pixel px? For an optical display, a whole screen is made up of dots, each of which is called a pixel. Point, each pixel is composed of a three-color light emitting element, the component can emit three kinds of pigments Color, Red,green,blue. Luminous elements coordinate three colors luminous brightness can adjust the other colors Format: rgb (255,0,0); Parameter 1 controls the brightness of the red display Parameter 2 controls the brightness of the green display Parameter 3 controls the brightness of the blue color display Number range 0-255, 0 for non-illuminated, 255 for glow, higher value brighter Red: rgb (255,0,0) Green: rgb (0,255,0) Blue: rgb (0,0,255) Black: rgb (0,0,0) # All is not lit White: rgb (255,255,255) # all the brightest Gray: As long as the red/green/blue values are the same gray, and the smaller the three values, the more biased Black, bigger, more white
Rgba	Color:rgba (255,0,0,0.1);	Rgba to CSS3 in the launch, more than RGB more than a a,a to represent transparency A value of 0-1, the smaller the value, the more transparent
Hexadecimal	Color: #FF0000;	#FFEE00 where FF represents R,ee on behalf of g,00 on behalf of B As long as the hexadecimal color is the same for every two bits, then it can be shortened to one, For example, #f00 is equivalent to #ff0000

Two Text properties

1, Text-align: The horizontal alignment of the text in the specified element.

value	Description
Left	Left aligns default values
Right	Align Right
Center	Center Alignment

2, Text-decoration: Text decoration

value	Description
None	Default. Defines the standard text.
Underline	Defines a line below the text.
Overline	Defines a line on the text.
Line-through	Defines a line that passes through the text.
Inherit	Inherits the value of the parent element's Text-decoration property.

3, Line-height: Row height

<! DOCTYPE html>"en">"UTF-8"> <title> descendant selector </title> <style type="Text/css">p {width:500px;            height:200px; Background-Color:yellow; Text-Align:center; Text-Decoration:underline; Line-height:200px; } A {text-Decoration:none; }    </style>"#"> I </a></div></body>Example

ExampleThree Background properties

Note: There is no wide label, even if setting the background is not displayed

Properties	Description	value
Background-color	Sets the background color of the label.	Background-color:rgb (0,255,0); Background-color: #00ffff;
Background-image	Set the background picture of a label	Background-image:url ("images/2.jpg"); Background-image:url ("Image url"); Note: If the size of the picture is not larger than the size of the label, it will be automatically tiled and filled in the horizontal and the hammer direction
Background-size	Sets the width and height of the background picture of the label	background-size:300px 300px; background-size:100% 100%;
Background-repeat	Set how the background picture of a label is tiled	Background-repeat:repeat; #默认值, repeat in both vertical and horizontal directions Background-repeat:no-repeat; #不重复, the background image will be displayed only once Background-repeat:repeat-x; #背景图片将在水平方向平铺 Background-repeat:repeat-y; #背景图片将在垂直方向平铺 Application: You can cut a large picture into small pictures on the server and then repeat the small graph on the client based on the tiling properties This allows the user to assume that it is a large image, so that it saves traffic and improves speed without impacting user access For example, the navigation bars of many websites are made with this technique.
background-attachment	Set the background picture of a label fixed in the label or scrolled along with the page	background-attachment: Scroll #默认值, the background picture scrolls with the scroll bar background-attachment:fixed; #不会随着滚动条的滚动而滚动
Background-position	Front-End coordinate system ": -------------------->x Shaft | | | | | | Y-Axis The picture is by default in the upper left corner of the box, Background-position: A property that is specifically used to control the position of the background image	Background-position: Values in the horizontal direction, values in the vertical direction 1, the specific direction of the noun Horizontal direction: Left,center,right Vertical direction: Top,center,bottom If only one keyword is set, then the second value is "center". 2. Percentage 　　The first value is a horizontal position, and the second value is the vertical position. The upper-left corner is 0% 0%. The lower right corner is 100% 100%. If only one value is set, the other value is 50%. 3, the specific pixel (must add PX units) For example: 30px,50px, etc. The first value is a horizontal position, and the second value is the vertical position. The upper-left corner is 0 0. Units are pixels (0px 0px) or any other CSS unit. If only one value is set, the other value is 50%. Can be mixed % and position values are used.
Inherit	Set inherit Background property value from parent element	The value of the background property above can be set to inherit, which represents inheriting the background property from the parent element
Background abbreviations		body { background: red url(xx.png) no-repeat fixed center/300px 300px; }

1. Background attribute abbreviation

<! DOCTYPE html>"en">"UTF-8"> <title> descendant selector </title> <style type="Text/css">Div {width:500px;            height:500px; /*background-color:red;*//*background-image:url ("http://image.bubuko.com/info/201805/20180527185100340842.jpg"); *//*background-repeat:no-repeat;*//*background-position:right bottom;*//*backgroun d-size:100px 100px;*/background:red URL ("http://image.bubuko.com/info/201805/20180527185100340842.jpg") No-repeat Right bottom/100px 100px; }    </style>Example
2. The difference between the background picture and the inserted picture
# 1. The background image is just a decoration, does not occupy the position, inserting the picture will occupy the position # 2. The background image has the positioning property, it is easy to control the position of the picture, but the insertion of the picture can not # 3. Insert Picture semantics is better than background image semantics, so in enterprise development if your picture wants to be indexed by search engines, it is recommended to insert a picture
<! DOCTYPE html>"en">"UTF-8"> <title> descendant selector </title> <style type="Text/css">. box1 {width:200px;            height:200px; Background-color:red; Background-image:url ("https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180510214613754-737636530.jpg"); Background-repeat:no-repeat; Background-Position:right Bottom;            }. box2{width:300px;            height:300px; Background-Color:green; }    </style>class="Box1"></div><divclass="Box2"> "https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180510214613754-737636530.jpg"alt=""></div></body>Practice
Little Practice
3. Background picture Practice
Background positioning material
 <! DOCTYPE html> " en   " >"  utf-8    > <title> Center Picture </title> < Style Type= " text/css              " > div {height:500px; Background -image:url ( " bg2.jpg             Span style= "COLOR: #800000" > " );        Background -position:top Center; }  </style> background picture centered  
Background Image Center display
<! DOCTYPE html>"en">"UTF-8"> <title> Picture stitching </title> <style type="Text/css">Div {height:720px; Background-image:url ("bg1.jpg"); }. box2 {background-image:url ("Ksyx.png"); Background-Position:bottom Center; Background-repeat:no-repeat; }    </style>class="Box1"> <divclass="Box2"></div></div></body>Picture Stitching
Picture Stitching
<! DOCTYPE html>"en">"UTF-8"> <title> navigation bar </title> <style type="Text/css">. navbar {margin:0 auto;             width:920px;             height:50px; Background-image:url ("Dht.png"); Background-repeat:repeat-x; }    </style>class="NavBar"></div></body>Navigation bar
Navigation bar
Update in ...
Front End Tutorials (9) CSS Getting Started Tutorial-css property settings