"Learning notes" CSS basics

"The learning process has encountered questions and extended reading"

1. The concept of text and characters is blurred, resulting in confusion when applying CSS properties (letter-spacing,text-indent,word-spacing)

text , which is the representation of a written language; a document type of a computer. From a literary point of view, it is usually a combination of a sentence or multiple sentences with a complete, systematic meaning (Message). A text can be a sentence (sentence), a paragraph (Paragraph), or a chapter (Discourse).

character (character) refers to the letters, numbers, words, and symbols used in a computer, including: 1, 2, 3, A, B, C, ~! #￥%......-* ()--+, and so on.

2. Relationship between row height and line spacing, font size

Row height = font size + line spacing

Http://www.cnblogs.com/dolphinX/p/3236686.html

3.CSS and Transduction

CSS style, about the attribute value is the need to combine the value of the measurement, and to understand the characteristics of various properties, finally to achieve a flexible use, and finally achieve the effect of the design diagram.

"New concept, important concept"

About the concept of paragraph formatting

First Line indent : Indents the first line of a paragraph from left to right by a certain distance, and the lines outside the first row remain unchanged, making it easy to read and differentiate the overall structure of the article.

hanging indent : A paragraph format in which the first line of a paragraph is unchanged, while text other than the first row indents a certain distance. Hanging indents are often used in bulleted and numbered lists.

"Practical knowledge of the context of the point"

1. What is CSS
HTML expression structure, what is this
CSS expression style, what to grow
The style and content/structure are detached
Note: If there is no CSS, how to display, then the browser will be displayed in the default style

The relationship between 2.HTML and CSS
What the content looks like should not be determined by the HTML and browser.
Use Word analogy to understand. HTML is the text in the file and the CSS is formatted.
Note: The current development to Html5,html's mark is used to express what it is.
HTML markup has a logical meaning. (semantic)

The role of 3.CSS
Understand the meaning of CSS
Put a page containing CSS, delete the CSS code, only the HTML text is left.

CSS in 4.HTML
How to add CSS
(1) external files that introduce CSS
(2) Adding a style tag to the head
(3) inside a single tag, add the Style property
CSS syntax: A basic pair of things
Name: value;

5. Then learn a variety of styles to enrich the page,
How to use CSS to do the style?
Background style
(1) Background: solid color, picture as background
Background-color:gray
Background-image:url (Picture location path)
-About color
Browser default background color is transparent
RGB color: #RRGGBB (hex), RGB (255,255,0), Rgba (255,255,0,0.5)
(2) Picture background
When using a picture with a background smaller than the original background,
Background-repeat:no Repeat/repeat-x/repeat-y/repeat
Background-position:center/top/right/top right/100px 100px
Background-attachment:scroll/fixed
Merging the syntax simplifies the CSS code:
Background: Composite properties, in the following order
(background color, background image, background repetition, background attachment, background position) each value is connected by a space.

6. Paragraph Style
(1) Paragraph indent
Text-indent:2em
Property values for length units
-Relative value
EM: Multiple of the current font
% percent: The percentage of the current page, not the font percentage
-Absolute Value
In: Inch
Cm
Px
PT: Lbs. (indicates the unit on printing)
(2) Hanging indent
-Suspension Indent Effect
Text-indent: -2em;
Padding:2em the inner margin of a text paragraph

(3) Spacing and alignment
-row Height
Line-height: Digital
-Align
Text-align:left/right/center/justify (available in English)
-Word Interval
word-spacing:30px (for English, mechanically set space spacing)
-Character interval
letter-spacing:10px

7. Text Style
(1) Text modification and whitespace processing
Text-transform:uppercase/lowercase/capitalize
Text-decoration:underline/overline/line-through
White-space:normal (merges contiguous spaces in the source code)
/pre (spaces and line breaks are preserved and not rotated)
/pre-wrap (spaces and line breaks are preserved and can be rotated)
/nowrap/pre-line
Direction:ltr (indicates reading from left to right)/rtl (for right-to-left sequential reading)

(2) Font
There are two types of font-family values
Specifies the font's large class, not the specific font
Font-family:serif Sans-serif monospace Cursive Fantasy
Specifies a font,
Font-family:hei
In addition, if multiple fonts are specified in the font-family,
The browser will be left-to-right, in turn, to determine which fonts it supports.
Do not support then continue to judge the next. Until they are not supported, the browser default font is used.

(3) Text decoration
Italic body
Font-style:nomal/italic (Ready-made italic)/oblique (browser-computed italic)
Font-variant:small-caps;
Font-weight:bold/900-100/
font-size:1em/10px (EM relative value recommended)
Font: Composite Properties

(4) Text effect
New features of CSS3 text
-Text Shadow Text-shadow
Example:
text-shadow:3px 5px 5px Rgba (0,255,0,0.5)
text-shadow:0px-1px 0px #000000, 0px 1px 3px #606060

-Contour Line Outline
outline-color:red;
Outline-style:solid/dotted/dashed/double/groove/ridge/inset/outset
Outline-width:10;

"Learning notes" CSS basics