HTML and CSS Learning Overview-cont <Lovo>

1, CSS is the abbreviation for Cascading style sheets (cascading style Sheets), which defines the display of HTML elements and is a technique for formatting Web page content. CSS is now supported by most browsers and becomes one of the technologies that Web designers must master.

2, the CSS will be built from the ground up until the full replacement of traditional web design methods. The CSS technology created by the organization will replace HTML elements used in HTML for performance.
Improve page browsing speed. Using CSS, you save at least 50% more file sizes than traditional web design methods.
Shorten the revision time, reduce maintenance costs. Simply modify a few CSS files to redesign a site with hundreds of pages.
Strong font control and typesetting capabilities. With CSS, we no longer need to use a font tag or a transparent 1 px gif to control the title, change the font color, font style, and so on.
CSS is very easy to write. We can write CSS as easily as we write HTML code.
Can be designed at once, published anywhere. Your design is not just for web browsers, but also for publishing on other devices.
Better control of page layout. Combined with CSS and div elements, you can better control page layout than traditional table elements.
The realization of the performance and structure, content separation. By splitting the Web page's presentation into a standalone style file, you can reduce the likelihood of future page invalidation.
Search engine is more convenient. Instead of nested tags with HTML that contains only structured content, search engines will search the content of the Web page more efficiently and may give a higher rating to the page.

3, there are three ways to introduce CSS into HTML
1. External style sheet
No style label required
<link rel= "stylesheet" href= ""/> (try to separate CSS from HTML, so it's common to use the external)
2. Embed style Sheets
<style type= "Text/css" >
p{}
</style>
3. Inline style sheet
Property name is Style
Example: <p style= "" ></p>

4, each style rule is divided into two parts of the selector and the rule itself, the selector is used for the element that the rule applies to, and the rule itself specifies the format.
Simple Selector
Element Selector
Class Selector
ID Selector
Pseudo-class and pseudo-element selectors
Composite Selector
Intersection Selector
and set Selector
Descendant Selector

The 4.1,html element is the most typical selector type, and any HTML element can be used as a selector

4.2, if you want to apply a style to different HTML elements, you can use a class selector to define it, and then apply them in different tags. (class= "")

4.3, in addition to using the class selector to define a style, you can also use the ID to define the style. The ID is similar to the class selector, except that the ID selector can only be referenced once, and the class selector may be referenced more than once.
To include an ID in the style definition, apply a pound sign (#) as the prefix for the ID name

4.4, pseudo-classes and pseudo-elements are special classes and elements that can be automatically recognized by CSS-enabled browsers.
Pseudo-classes distinguish between different kinds of elements. For example, visited links (visited links) and active links (which can be activated) describe the types of two anchor points.
A pseudo-element refers to a part of an element, such as the first letter of a paragraph. (Selector: Pseudo-Class {property: value;}
a:link {color: #FF0000; text-decoration:none}/* Link not visited */
a:visited {color: #00FF00; Text-decoration:none}/* Visited link */
a:hover {color: #FF00FF; text-decoration:underline}/* Mouse on link */
a:active {color: #0000FF; text-decoration:underline}/* Activate link */

Selector: Pseudo-Element {property: value;}
P:first-letter {FONT-SIZE:2EM}//P element in the first letter of the content */)

4.5, 4 kinds of selectors as the basis, through the combination, but also can produce more kinds of selectors, to achieve a stronger and more convenient selection function, composite selector is composed of the basic selector through different connection methods.
A composite selector is a selector of two or more basic selectors that are connected in different ways.

4.6, the intersection selector is made up of two selectors directly, and the result is a selection of the intersection of their respective element ranges. The first one must be a tag selector, and the second must be a category selector or an ID selector. There can be no spaces between the two selectors and must be written consecutively.

4.7 The set selector is a comma-connected selection of multiple selectors. When declaring various CSS selectors, if the style of some selectors is exactly the same, or partially the same, you can declare CSS selectors of the same style with the set selector.

4.8 If you need to set a specific style rule for an element that is inside a marker, you should specify the selector as a contextual HTML tag (descendant selector)

The concept behind 4.9 cascading style sheets is that multiple style definitions can cascade down through multiple layers to influence the document. Multiple levels of a style definition can be applied to any document. The priority level of the hierarchy is from small to large:
External style sheet
Inline style Sheets
inline style
If you have different selectors in the same style sheet, the priority level is from small to large:
Element Selector
Category Selector
ID Selector

Basic properties of CSS

1, in HTML, regardless of the size of the font, or the length of the picture set, usually use pixels or percentages to set. In the CSS, there are more choices, you can use the length of units, mainly divided into two types, one is the relative type, the other is the absolute type.
Relative type
Absolute type

The so-called relative, is to have a reference base, relative to the reference base and set the scale units. There are two kinds of this in web authoring.
1.PX (PIEXL)
pixels, which represent different lengths depending on the resolution of the display device.
2.em
The height of the current character.

The so-called absolute, that is, regardless of the display device resolution is how much, all represent the same length.

2,

CSS defines colors in a number of different ways:

H3{color:blue;} use the English name of the color as the property value
H3{color: #0000ff;} Use is a hexadecimal value
H3{color: #00f;} shorthand for the second way
H3{color:rgb (0,0,255), using a decimal value of 3 color components of a given red-green-blue
H3{color:rgb (0%,0%,100%): Percentage of 3 color components using a given red-green-blue

3. set font for text

h1{
Font-family: blackbody;
}
p{
Font-family:arial, "Times New Roman";
}
If the Arial font and the Times New Roman font, the meaning is to tell the browser to first look for the Arial font on the visitor's computer, and then use the Times New Roman font if it does not exist.

4, set the font tilt effect
Font-style:normal; /* Normal Font mode */
font-style:italic;/* Italic */
Set text Bold effect
Font-weight:nomal; /* Normal */
Font-weight:bold; /* Bold */
Font-weight:bolder; /* Bold */
font-weight:100/* Range 100-900, the larger the number font size */

5, English letter case Conversion

p.one{
Text-transform:capitalize; /* Capitalize the first letter of the word */
}
p.two{
Text-transform:uppercase; /* ALL CAPS */
}
p.three{
Text-transform:lowercase; /* All lowercase */
}

6, control text Size

font-size:12px; /* Set the text size to 12 pixels */
Font-size:2em; /* Set the text size to twice times the current text size */
font-size:150%; /* Set the text size to 1.5 times times the size of the original text */

6, the decorative effect of the text
Text-decoration:none; /* Normal display */
Text-decoration:underline; /* Underline */
Text-decoration:line-through; /* Delete line */
Text-decoration:overline; /* Top Line */

7, set the indent for the first line of the paragraph
Text-indent:2em; /* The distance of the first line indents 2 standard character sizes */
Set word spacing
In English, the text is composed of words, and the word is composed of letters, so for the English text, to control the text of the density of Chengdu, need to be considered from two aspects, that is, set the letter spacing within the word (letter-spacing) and the distance between words (word-spacing)
word-spacing:10px;
letter-spacing:-1px;

8, set the text line height inside the paragraph
If you do not use CSS, you cannot control the distance between lines in the paragraph in HTML. In CSS, Line-height is used to control the height of a row, which allows you to adjust the distance between rows and rows. The setting values for the Line-height property are listed below:
Length: A value that can be used in the scale units described earlier.
Multiples: Font-size Sets the multiple of a value
Percentage: Percentage relative to Font-size

9, control the horizontal position of the text
The Text-align property makes it easy to set the horizontal position of the text.
Left: aligned to the right (browser default)
Right: Justify
Center: Center Alignment
Justify: Justify on both sides
Set text and background color
Background-color: #000; /* Background color */
Color: #000; /* Front View */

Set the vertical alignment of the paragraph
There is a property vertical-align in the CSS for vertical alignment. In the current browser, you can only set the vertical alignment of elements in a table cell, and for general block-level elements, such as Div, are not working. For example, if you use vertical-align:middle in a table cell, the elements in that cell will be aligned vertically, if placed in a div, without effect.
Setting using the Line-height property
If the text content has only one row, you can use the same line-height as height to center the text vertically.
Disadvantage: If the text content is more than one line, the method is invalid.

Basic properties of CSS---image styles

1. In HTML, you can add a border to a picture directly from the border property of the tag, the weight of the border, in pixels, to control the thickness of the border. If the value is 0, it is displayed without a border. However, the limitation of this approach is that the border can only be black, with a single style and solid lines.

2, in CSS, you can add a variety of borders to a picture by border properties. A border is made up of 3 features.
1.border-width (thickness): You can use the length units in various CSS.
2.border-color (color): can be defined using a variety of legal colors.
3.border-style (linear): Can be selected in some pre-defined linearity.
Set styles for different borders, respectively
In fact, a border is divided into four directions, left, right, top (top), bottom (bottom), respectively. You can set the border style for each of these four directions, for example: Border-left-style, Border-top-width.
When you are familiar with border settings, you can write each value of border to a statement, separated by a space. For example: border:1px solid red, which represents a solid red line with a border width of 1 pixels.

The size of the control picture in 3,css is the same as HTML, and is achieved by two attributes of width and height. The difference is that more values, such as percentages, can be used in the CSS.

img{
width:50%; /* Relative Width */
height:100px; /* Absolute Height */
}

4, Text wrapping
The way the text wraps around the picture is widely used in the actual page, and can achieve a variety of brilliant effects if it is combined with content, background and other means. In CSS, text wrapping is accomplished mainly by setting the float property to the picture.

img{
Float:left; /* Picture on the left of text */
}

5, when the picture and text appear on the page at the same time, the image alignment is very important. If the picture can be reasonably aligned to the ideal position, it becomes the important factor for the overall coordination and unification of the page. Below are the two aspects of horizontal alignment and vertical alignment.
Horizontal alignment
Horizontal alignment can be set by using the Text-align property. For example, after setting the text-align in the parent tag of the IMG tag, the picture can also be aligned according to the set value, for example:
<p style= "Text-align:right" ></p>
Vertical alignment
The vertical alignment of the picture is mainly in the case of collocation with the text, especially when the height of the picture is inconsistent with the text itself. In CSS, the Vertical-align property is also implemented to achieve various effects.

<p></p>

6, Setting the background color
Background-color: #00F
Set a background picture
Background-image:url (bg.jpg)
Set background picture tiling
By default, the image is automatically tiled horizontally and vertically. If you don't want to tile, or just want to tile in one direction, you can use the Background-repeat property to control it. There are several values for this property:
Repeat: tile horizontally and vertically with default values.
No-repeat: Uneven paving.
Repeat-x: Tile horizontally only.
Repeat-y: Tiles are only vertically oriented.

7, if the background image is set uneven, then the background image is displayed by default in the upper left corner of the element. If you want the background image to appear in the lower-right corner or somewhere else, you need to use one of the CSS's property background-position.

body{
Background-image:url (bg.jpg);
background-repeat:no-repeat;/* Uneven Shop * *
Background-position:right Bottom;
}
/*
In the Background-position property, set two values:
1. The first value is used to set the horizontal direction position, you can choose left, center (middle), right (to).
2. The second value is used to set the position of the vertical direction, you can select Top (top), center (middle), bottom (bottom).
In addition to using fixed values, you can also use pixels and percentages to set the display position.
*/

8, when the background picture is set on the webpage, the background image will move along with the scroll bar. If you use the Background-attachment property of CSS, you can set the background image to a fixed effect, so that the background image is fixed.

body{
Background-image:url (bg.jpg);
Background-repeat:no-repeat;
background-position:50% 0px;
background-attachment:fixed;
}

HTML and CSS Learning overview-continuation <lovo>