These HTML, CSS knowledge points, interview and normal development need No5-no7 (knowledge points: Text settings, settings background, data list)

Series of Knowledge points summary

These HTML, CSS knowledge points, interviews and peacetime development all need No1-no4 (knowledge points: HTML, CSS, box model, content layout)

These HTML, CSS knowledge points, interview and normal development need No5-no7 (knowledge points: Text settings, settings background, data list)

These HTML, CSS knowledge points, interviews and peacetime development all need No8-no9 (knowledge point: Media operations, build forms)

These HTML, CSS knowledge points, interviews and peacetime development all need no10-no11 (knowledge points: Table operations, code writing rules)

No5. Article paragraphs

1. Text attributes

The literal attribute contains both font-* and text-* categories.

2. Font-based properties

(1) font-family: Font attributes, multiple fonts are separated by commas. If the first font is not found, look for the following font in turn. For example:

Body {    font-family: "Helvetica Neue", Helvetica, Arial, Sans-serif;}

(2) Font-size: Font size, unit includes pixels, EM units, percentages, points.

(3) Font-style: Font style, including normal, italic, oblique, and inherit. Normal and Italic (italic) are often used.

(4) Font-variant: Uppercase and lowercase conversions, including: normal, Small-caps, and inherit. This property is not generally used.

(5) Font-weight: Set font weights, which can be keywords and numbers, keywords include normal, bold, bolder, lighter, and inherit. Valid enumeration numbers: +, +, 900, +,-- Normal corresponds to 400,bold 700.

(6) Line-height: Set two lines of spacing, the value can be percent%, the relative multiples of EM, and the pixel number px. For example, you can set line-height:150%,line-height:1.5em,line-height:24px. The general use of EM is relative to the Font-size setting.

(7) How to make text content vertically centered: The Line-height and height can be set to the same value. For example:

. btn {    height:22px;    line-height:22px;}

(8) Font properties abbreviated by: Font:font-style, Font-variant, Font-weight, Font-size, Line-height, and font-family. Font-size and Line-height are split by "/", font-family through "," split, other attributes are separated by spaces. For example:

HTML {    font:italic small-caps bold 14px/22px "Helvetica Neue", Helvetica, Arial, Sans-serif;}

3. Text-based properties

(1) The Text property includes: Decorate, indent, transform, space, align, shadow, transform, etc.

(2) Text-align: Contains the values left, right, center, justify, inherit.

(3) Text-align and float difference: text-align Sets the alignment of text in the element, and float sets the alignment of the entire element. The following Div still occupies a line of space, but the text content appears right.

div{    background:red;    Text-align:right;}

The following Div does not occupy a single line, the div is set to its own content, and the entire div is displayed on the right.

div{    background:red;    Float:right;}

(4) Text-decoraton: Set text decorations, values include none, Underline, overline (underscore), Line-through (dash), inherit.

(5) Text-shadow: Sets the text projection, contains 4 values, Text-shadow: Horizontal Displacement Vertical Displacement text blur radius projection color. For example:

p {    text-shadow:3px 6px 2px rgba (0, 0, 0,. 3);}

(6) Box-shadow and Text-shadow differences: Box-shadow is used to set the projection of the entire box, which contains 5 values: Inset/outset horizontal distance from the radius of the die. For example:

div{    box-shadow:inset 0 1px 1px rgba (0, 0, 0,. 1);}

(7) Text-transform: Text case conversion, contains the values of none, capitalize, uppercase, lowercase, inherit. Capitalize capitalize each word, uppercase all words to uppercase, lowercase convert all words to lowercase. For example:

p {    text-transform:uppercase;}

(8) Letter-spacing: Set the spacing between each letter, set below the P element below each letter before the spacing is font-size-based-0.5 times times.

p {    letter-spacing:-.5em;}

(9) Word-spacing: Sets the spacing between each word, similar to letter-spacing.

Text-indent: Sets the left spacing of the first line. For example, the following sets the first line to the left of the text to an example of 15px.

. intro{    text-indent:15px;}

4. Customizing Web Fonts

(1) Definition syntax: The following code defines a custom font, Font-face sets the font parameters, font-family the font name, and SRC sets the network path for the font.

@font-face {    font-family: "Lobster";    Src:local ("lobster"), url ("Lobster.woff") format ("Woff");

(2) Use: As with other fonts. For example, the following code is the custom font "lobster" is set to the preferred font.

Body {    font-family: "Lobster", "Comic Sans", cursive;}

(3) Font resources: Google has a lot of new fonts to download, the address is: https://www.google.com/fonts.

No6. Setting the background

1.background

(1) How to set the background: The background can be set by color, image, gradient gradient, or combination method.

(2) Background-color: The color format can be hexadecimal or RGB and RGBA. To ensure compatibility, some browsers do not support RGBA and need to add a hexadecimal setting before setting up Rgba. As follows:

div {  background-color: #b2b2b2;  Background-color:rgba (0, 0, 0,. 3);}

(3) Background-image: Set the background by adding a background image. For example:

div {  Background-image:url ("Alert.png");}

(4) Background-repeat: Sets the picture repeating form, contains the value to have repeat ,, repeat-x repeat-y , andno-repeat，repeat是默认值，表示水平和垂直都重复。

(5) Background-position: Position the background through the offset position of the upper left corner of the element to display the seat. Contains two values, the horizontal and vertical offset values, respectively. The following representation indicates that the background color of the element is shifted from the upper-left corner to 20 pixels to the right and 10 pixels downward.

div {  Background-image:url ("Alert.png");  background-position:20px 10px;  Background-repeat:no-repeat;}

The following code indicates a horizontal offset of 20 pixels, perpendicular to the default of 50%.

div{    background-position:20px;}

(6) background-position keyword parameter: The parameter can be top, right, bottom, left, center keyword, pixels, percentages or any length unit. Keywords and percentages are similar, for example: Left top (0, 0), right top (100%, 0), left bottom (0, 100%), right bottom (100%, 100%).

(7) Background abbreviation: abbreviated attribute order is Background-color background-image background-position background-repeat. The following code indicates that the background color is #b2b2b2, the background image is a URL ("Alert.png"), the position is a horizontal offset of 20 pixels, a vertical offset of 10 pixels, and a repeating property value of no-repeat.

(8) Multi-background settings: Multiple background images are set through "," separated, the front of the picture is displayed at the top, the final picture is displayed at the bottom. As shown in the following code:

div {    Background:url ("Foreground.png") 0 0 no-repeat, url ("middle-ground.png") 0 0 no-repeat, url ("Background.png") 0 0 no-repeat;}

2. Linear gradient Effect

(1) linear-gradient function: The default from top to bottom gradient, you can add more than one color. The following code:

div {    background: #466368;    Background:-webkit-linear-gradient (#648880, #293f50);    Background:-moz-linear-gradient (#648880, #293f50);    Background:linear-gradient (#648880, #293f50);}

(2) Compatibility: Some browsers do not support the gradient effect, generally need to add a monochrome background, such as the above code added background: #466368.

(3) Change the direction of the gradient: linear-gradient The first parameter can change direction, parameters use: to direction. For example, the following code lets the gradient fade from the upper-left corner to the lower-right corner.

div {    background: #466368;    Background:linear-gradient (to right bottom, #648880, #293f50);}

(4) Add multiple gradient colors: Linear-gradient method to add multiple gradient colors. The reference code is as follows:

Linear-gradient (to right, #f6f1d3, #648880, #293f50);

(5) Gradient ratio: You can set the ratio of the gradient color over the entire gradient tunnel, for example, the second color of the following code is 85%.

div{    linear-gradient (to right, #f6f1d3, #648880 85%, #293f50);}

3. Radioactive gradients

(1) radial-gradient:radial-gradient provides a reflective gradient function, with parameters that can receive multiple colors.

(2) Parameter description: The first parameter sets the color of the absolute center position, the second parameter sets the outermost color, and the final effect is an over-conversion from the central position outward.

4.CSS3 Background New properties

Background-size: Sets the size of the background relative to the element, containing the width and height two values, which can be either a number or a keyword. For example, the background width of the element below is adaptive and the height is 75% of the height of the element.

div{    Background-size:auto 75%;}

No7. Data list

1. Unordered lists unordered list

The unordered list is represented by the Block-level element ul (unordered list), with each item using an LI (list) tag alone. As shown in the following code:

<ul>    <Li>Orange</Li>    <Li>Green</Li>    <Li>Blue</Li></ul>

2. Sequence list ordered list

(1) and unordered differences: The default use of each item in disorder is "." Indicates that an ordered item is represented by a number.

(2) Contains elements: The ordered list is the block-level level, and each item uses the LI tag alone. As shown in the following code:

<ol>    <Li>Head North on N Halsted St</Li>    <Li>Turn right on W Diversey Pkwy</Li>    <Li>Turn left on N Orchard St</Li></ol>

(3) Start property: The number at which the start of the item is marked starts with: <ol start= ">" indicates that the list tag starts with 30.

(4) Reversed property: Whether the tag can be reversed, the default is False. If set <ol Reversed>, the original is 1,2,3,4,5 now becomes 5,4,3,2,1.

(5) value attribute: Used on Li, Mark Li's sequence, and the next Li will be added from this tag number. For example: Code <li value= "9" >turn right on W Diversey pkwy</li> behind the Li tag are all 9 beginning to add upwards.

3. Nested lists

(1) Use of elements: generally use UL and ol nested use. As shown in the following code:

<ol>    <Li>Walk the Dog</Li>    <Li>Fold Laundry</Li>    <Li>Go to the grocery and buy:<ul>    <Li>Milk</Li>    <Li>Bread</Li>    <Li>Cheese</Li>    </ul>    </Li>    <Li>Mow the Lawn</Li>        <Li>Make dinner</Li></ol>

(2) with nested relationships, the tag of the list element changes, such as the default UL Mark four ".", which now becomes a small square.

4. List Style

(1) List-style-type: Sets the marker style, the following code setting is marked as a square.

UL {    list-style-type:square;}

(2) List-style-type contains the following values:

"List Style Type Value"    "Content" None "No List Item" disc "A Filled circle" circle "a hollow Circle" square "a filled s Quare "decimal" decimal Numbers "Decimal-leading-zero" decimal numbers padded by initial zeros "Lower-roman" lowercase rom An numerals "Upper-roman" uppercase Roman Numerals "lower-greek" lowercase classical Greek "lower-alpha/lower-latin" low Ercase ASCII letters "Upper-alpha/upper-latin" uppercase ASCII letters "Armenian" traditional Armenian numbering "Georgi An "traditional Georgian numbering"

(3) Custom markup: To set marker with a custom picture, you must first set the List-style-type:none, and then set the background style for Li. The following code is set to mark an arrow icon, the starting position of the icon is 0, and the vertical position is 50% of the element li height.

Li {    background:url ("Arrow.png") 0 50% no-repeat;    List-style-type:none;    padding-left:12px;}

(4) List-style-position: Sets the location of the tag, including the value outside, inside, inherit, and the default is outside.

(5) List style shorthand: The format is List-style:list-style-type list-style-position, as shown in the following code:

UL {    list-style:circle inside;} OL {    List-style:lower-roman;}

5. Horizontal Display List method

(1) Set display: Displays the list horizontally by setting Li's display to inline or inline-block. The tag of the list is moved out at the same time. As shown in the following code:

HTML:<ul>    <Li>Orange</Li>     <Li>Green</Li>     <Li>Blue</Li></ul>Css:li {display:inline-block; Margin:0 10px;}

(2) Setting Float:display does not retain the marker tag and can be displayed horizontally through float:left and retains marker. However, you must set the margin arrangement li. The following code sets the float equal to left and then sets the horizontal spacing to 20px.

Li {    float:left;    Margin:0 20px;}

6. Set the list to show the navigation effect

(1) General navigation we can set rounded corners for the first and last elements, and get the first and last elements available through Css:li:first-child, Li:last-child.

(2) Set the Display:display:inline-block of Li.

(3) Set the normal and mouseover styles as shown in the following code:

. Navigation a{    background: #95870;    Background:linear-gradient (#49708f, #293f50);    border:1px solid Rgba (0, 0, 0, 0.3);    Color: #fff;    padding:12px 20px;    Text-decoration:none;}. Navigation a:hover{    background: #314b60;    text-shadow:0 10px 1px rgba (0, 0, 0,. 3);}

(4) Set the UL font and spacing: Look directly at the reference code below.

ul{    font:bold 11px "Helvetica Neue", Helvetica, Arial, Sans-serif;     margin:0;     padding:0;    Text-transform:uppercase;}

These HTML, CSS knowledge points, interview and normal development need No5-no7 (knowledge points: Text settings, settings background, data list)