1.1 Color values
The color settings in a Web page are very important, with font color (color), background color (background-color), border color (border), and so on, there are many ways to set colors:
1, English command color
The Setup method is often used in the previous sections:
p{color:red;}
2. RGB Color
This is consistent with the RGB colors in Photoshop and is color-matched by the proportions of R (red), G (green), and B (blue) Three colors.
P{color:rgb (133,45,200);}
The value of each item can be an integer between 0~255, or it can be a percentage of 0%~100%. Such as:
P{color:rgb (20%,33%,25%);}
3. Hex Color
This color setting method is now more commonly used method, the principle is also RGB settings, but its value of each item from 0-255 to hexadecimal 00-ff.
P{color: #00ffff;}
Color table:
1.2 Length Value
Length unit summary, at present more commonly used to px (pixels), EM,% percent, you should pay attention to the fact that these three units are relative units.
1, Pixel
Why are pixels relative units? Because pixels refer to dots on the display (the CSS specification assumes "90 pixels = 1 inches"). The reality is that the browser uses the actual pixel value of the display, and most designers now tend to use pixels (px) as units.
2, EM
is the font-size value of the given font for this element, 1em = 14px If the element's font-size is 14px, and 1em = 18px If the font-size is 18px. The following code:
P{font-size:12px;text-indent:2em;}
The code above is the ability to indent the first line of a paragraph by 24px (that is, the distance of two font sizes).
A special case is noted below:
However, when Font-size is set to EM, the criteria for this calculation are based on the font-size of the parent element of P. The following code:
Html:
<p> Take this <span> example </span> for example. </p>
Css:
P{FONT-SIZE:14PX}
Span{font-size:0.8em;}
As a result, the font "example" font size in span is 11.2px (0.8 = 11.2px).
3. Percentage
p{font-size:12px;line-height:130%}
Set the line height (line spacing) to the font's 130% (* 1.3 = 15.6px).
Two, style setting skill
2.1 Horizontal center-inline elements
In the actual work we often encounter the need to set the horizontal center of the scene, for example, in order to beautiful, the title of the article is generally horizontal center display.
Here we score two things: the inline element or the block element, inside the block element is divided into a fixed-width block element, as well as an indefinite wide block element. Today, let's look at how inline elements are horizontally centered.
If the element is set to an inline element, such as text, picture, and so on, the horizontal center is implemented by setting the Text-align:center for the parent element. (Parent and child elements: in the following HTML code, p is the parent element of the text that I want to be centered horizontally in the parent container.) Conversely, this text is the child element of P, which is the following code:
HTML code:
<body> <p class= "Txtcenter" > I want to center the display horizontally in the parent container. </p></body>css code: <style> txtcenter{ text-align:center; } </style>2.2 Fixed width Block Center
When the element is set as a block element, the use of Text-align:center does not work, then there are two cases: fixed-width block elements and variable-width block elements.
In this section we will first talk about fixed-width block elements. (Fixed-width block element: The width of the block element is a constant value.) )
Elements that satisfy a fixed width and block of two conditions can be centered by setting the left and right margin value to "auto". Let's look at an example of setting p this block element horizontally centered:
HTML code:
<span style= "font-family: in italics; font-size:14pt; " ><body> <p> I am a fixed width block element, haha, I want to horizontally center the display. </p></body>css code: <style>p{ border:1px solid red;/* in order to display the center effect obviously set a border for P */ width:200px ;/* Fixed width * /margin:20px auto;/* Margin-left and margin-right set to Auto */ } </style></span>The
can also be written as:
Margin-left:auto;
Margin-right:auto;
Note: the "Up and down margin" of an element can be set arbitrarily.
2.3 Variable width
In practice we encounter the need to set the center for "block elements of variable width", such as paging on a page, because the number of paging is indeterminate, so we cannot limit its elasticity by setting the width. (Indefinite wide block element: the width of the block element is not fixed.)
There are three ways to center a block of indeterminate width (these three methods are currently used in many ways):
Join table Label
Set Display:inline method: Similar to the first one, the display type is set to the inline element, and the property of the variable width element is set Set
Settings position:relative and left:50%: Use relative positioning to offset the element to the left by 50%, that is, to center the purpose
This section of the first approach:
Why Choose a method to add a table label ? is to use the length of the table label Adaptive---that does not define its length nor the length of the default parent element body (table whose length is determined by the length of its text), so it can be regarded as a fixed-width block element, and then use the fixed-width blocky-centered margin method to align it horizontally.
First step: Add a table label (including <tbody>, <tr>, <td>) to the outside of the center element you want to set.
Step Two: Set the "left and right margin center" for this table (this is the same as for a fixed-width block element). The
example is as follows:
HTML code:
<span style= "font-family: in italics; font-size:14pt; " ><p> <table> <tbody> <tr><td> <ul> <li> I'm the first line of text < /li> <li> I am the second line of text </li> <li> I am the third line of text </li> </ul> </td></ tr> </tbody> </table></p>css code: <style>table{ border:1px solid; margin:0 auto; } </style></span><span style= "font-family: in italics; font-size:14pt; " > </span>In addition to the Insert Table label in the previous section, which allows for the horizontal centering of indeterminate block elements, this section describes the 2nd way to achieve this effect, changing the display type of the element to be the inline element, and using its properties to set directly.
The second method: Change the display of the block-level element to the inline type (set to the inline element), and then use Text-align:center to achieve the centering effect. Here's an example:
HTML code:
<body><p class= "Container" > <ul> <li><a href= "#" >1</a></li> <li><a href= "#" >2</a></li> <li><a href= "#" >3</a></li> </ul></p></body>css Code: <style>.container{ text-align:center; } /* MARGIN:0;PADDING:0 (clear the gap between text and P-border) */ . Container ul{ list-style:none; margin:0; padding:0; display:inline; } /* MARGIN-RIGHT:8PX (set the interval between li text) */ . Container li{ margin-right:8px; display:inline; } </style> This approach has the advantage of not adding no semantic tags, but there are some problems: it changes the display type of the block element to inline, so it has fewer features, such as setting the length value.
In addition to inserting the table label in the first two sections and changing the display type of the element, you can center the indeterminate block elements horizontally, and this section describes the 3rd way to achieve this effect, setting the float and relative positioning.
Method Three: center horizontally by setting float to the parent element and then setting position:relative and left:50% for the parent element, setting the position:relative and left: 50% for the child element.
We can understand this: supposedly the parent layer of the UL layer (that is, the P-layer in the example below) has a median line dividing the parent layer (P-layer) of the UL layer by an average of two parts, and the UL layer CSS code aligns the top left of the UL layer with the line of the parent layer of the UL layer While the LI layer's CSS code is to align the Li Layer's split line with the top left of the UL layer (also the split line of the P-layer), thus achieving the center of the Li Layer. The
code is as follows:
<body><p class= "Container" > <ul> <li><a href= "#" >1</a></li> <li><a href= "#" >2</a></li> <li><a href= "#" >3</a></li> </ul></p></body>css Code: <style>.container{ float:left; position:relative; left:50% } . Container ul{ list-style:none; margin:0; padding:0; position:relative; left:-50%; } . Container li{float:left;display:inline;margin-right:8px;} </style>These three methods are widely used, each with advantages and disadvantages, the specific choice of which method, depending on the circumstances.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
