Basic knowledge of CSS 1

These two days to see the front-end CSS part of the content, really let me uncomfortable, too many attributes can not remember, alas!! So just want to take notes to record, convenient for later use to view.

CSS refers to cascading style sheets, which define how HTML attributes are displayed, and styles are typically stored in style sheets.
External style sheets are typically stored in a CSS file: Multiple styles can be stacked as one.

Basic syntax for CSS:

CSS rules are composed of two main parts: selectors, and one or more declarations.
Selectors are typically HTML elements that need to change the style: Each declaration consists of an attribute and a value. property is the style property that you want to set, and each property has a value, and the property and value are separated by colons.
h1 {color:red;font-size:14px;}----------the text color within the H1 element is defined as red, and the font size is set to 14px

Property values can also be represented in the 16 binary, in addition to the English representation
When RGB percentages are used, the value is 0 o'clock, and a percent sign is required, which is not required for other situations.
P {Color:rgb (100%,0%,0%);}

* * If the value is a number of words, quotation marks are required:
p{font-family: "Sans serif";}

* * Multiple declarations: There are several declarations, as follows:

p{
Text-align:center; ------Each row describes only one property, increasing the readability of the style
Color:black;
font-family:arial;
}

css 高级语法：选择器的分组：对选择器进行分组，使被分组的选择器分享相同的声明，用逗号分开选择器。例如：        h1,h2,h3,h4,h5,h6{                color:green;            }

The **css derived selector defines the style by the context of the element in its place.

**id Selector
The ID selector specifies a specific style for an HTML element labeled with a specific ID, and the ID selector is defined as a #
#red {color:red;}
#green {color:green;}

Relationship between the ID selector and the derived selector:
The 1.id selector is used to create a derived selector
#sidebar p{
Font-style:italic;
Text-align:right;
Margin-top:0.5em;
}

   #sidebar h2{        font-size:1em;        font-weight:normal;        font-style:italic;        margin:0;        line-height:1.5;        text-align:right;   }    此时，sidebar中的p和h2有别与其他地方的此标签元素。该位置的标签元素做了特殊处理。

The 2.id selector is used alone:
#sidebar {
border:1px dotted #000;
padding:10px;
}

* * Class Selector
The class selector is displayed with the dot number:
. center {Text-align:center;}
The first character of a class name cannot be a number

Class selectors can also be used as derived selectors:
. Fancy TD {
Color: #f60;
Background: #666;
}

* * Property Selector
Sets the style for HTML elements with the specified attributes, not only with class and ID attributes
1. Property selector:
[Title]
{
color:red;
}
2. Attribute and Value selector:
[TITLE=HW]
{
BORDER:5PX solid blue;
}

3. Attribute and Value selector----Multiple values title sets the style as long as it contains the Hello character

[title ~=hello] {color :red;}      [lang | =en] {color:red;}

Sets the style of the form, which is useful in form style settings with no class and ID for the property selector
Input[type= "Text"]
{
width:150px;
Display:block;
margin-bottom:10px;
Background-color:yellow;
font-family:verdana,arial;
}

input[type="button"]     {        width:120px;        margin-left:35px;        display:block;        font-family:Verdana,Arial;     }

CSS style creation: There are three ways to insert CSS styles:
1. External style sheet:
When a style needs to be applied with many pages, an external style sheet is used
<link rel= "stylesheet" type= "Text/css" href= "Mystyle.css"/>
-----format a document from an external reference to a CSS file's style declaration

2. Internal style sheet:
<style type= "Text/css" >
hr {Color:sienna;}
p {margin-left:20px;}
Body {background-image:url ("Images/back40.gif");}
</style>

3. Inline style: (use with caution)
It can be used when the style needs to be applied once on an element, but with caution, because the performance and content are mixed together, the inline style tends to lose many of the advantages of the style sheet
<p style= "Color:sienna; margin-left:20px ">
This is a paragraph
</p>
4. Multiple styles:
If certain attributes are defined by the same selector in different style sheets, the property values will be inherited from the more specific style sheet.

External style sheet:
h3{
color:red;
Text-align:left;
font-size:8pt;
}

Internal style sheet:
h3 {
Text-align:right;
font-size:20pt;
}

 color: red;  ext-align: right;  font-size: 20pt;

When both external and internal style sheets have common properties, the color properties are inherited from the external style sheet, and the text arrangement and font size are superseded by the rules in the inner style sheet

Background of CSS:

You can apply a solid color as a background, or you can create a fairly complex effect using a background image

You can receive any valid color value by using the Background-color property digital background color

p {
Background-color:green;
}

Background-color cannot be inherited, the default value is transparent transparent meaning

Background Image:
Put the image in the background, using the Background-image property, the default value is None, indicating that no image is placed

* * If you need to set a background image, you must set a URL value for this property:
Body {background-image:url (/i/eg_bg_04.gif);}
Background-image cannot be inherited, and all background properties cannot be inherited.

Background repetition:
If you need to tile a background image on a page, use the Background-repeat property
The Repeat property causes the image to be tiled horizontally and vertically, repeat-x and repeat-y respectively causing the image to repeat horizontally and vertically, no-repeat not allowing the image to be tiled in any direction

The default background image starts at the upper-left corner of an element:
Body
{
Background-image:url (/i/eg_bg_03.gif);
Background-repeat:repeat-y;
}

Background positioning:
Using the Background-position property to change the position of an image in the background
Body
{
Background-image:url ('/i/eg_bg_03.gif ');
Background-repeat:no-repeat;
Background-position:center;
}

关键字：top、bottom、left、right和center以及使用长度值，如100px、5cm

Keywords usually appear in pairs, and if only one keyword appears, the other is the center

Background Association:
If the document is long, the background image scrolls when the document scrolls down, and the image disappears when the document scrolls beyond the location of the image.
The Background-attachment property prevents this scrolling, and through this property, you can declare that the image is fixed with respect to the viewable area (fixed).
Body
{
Background-image:url (/i/eg_bg_02.gif);
Background-repeat:no-repeat;
Background-attachment:fixed
}

background-attachment 属性的默认值是scroll 。默认情况下，背景随着文档滚动**css的背景属性：background                   背景属性设置在一个声明中

Background-attachment whether the background image is fixed or scrolls along with the rest of the page
Background-color setting the background color of an element
Background-image setting the image to the background
Background-position setting the starting position of the background image
Background-repeat set whether and how the background image repeats

CSS text

The Text property of a CSS is to manipulate the appearance of the text, such as changing color, size, indentation of characters, and so on.

Indent text:
Text-indent Property
p {text-indent:5em;}
In general, this property can be applied to all block-level elements, but cannot be applied with inline elements, and substitution elements such as images cannot be applied to this property.
However, if there is an image in the first row of a block-level element, it is moved along with the rest of the text of the line.
If you want to "indent" the first line of an inline element, you can create this effect with the left padding or margin.

Use negative values: You can implement hanging indent, where the first row hangs on the left side of the remaining part of the element
p {text-indent:-5em;}
If a negative value is set on a paragraph, some text in the first line may exceed the left edge of the browser window, and in order to avoid the problem, you need to set a margin or some padding:
p {text-indent:-5em; padding-left:5em;}

Use percent values:
The percentage relative to the width of the indent element's parent element. If you indent 20%, the width of the parent element is also indented by 20%
div {width:500px;}
p {text-indent:20%;}
<div>
<p>this is a paragragh</p>
</div>
Inheritance: Text-index can be inherited
Div#outer {width:500px;}
Div#inner {text-indent:10%;}
p {width:200px;}
<div id= "outer" >
<div id= "inner" >some text. Some text. Some text.
<p>this is a paragragh.</p>
</div>
</div>

Horizontal alignment:

Text-align Property
Property values: Left, right, center
<CENTER> not only affects the text, it also centers the entire element, Text-align does not control the alignment of the element, only the internal content
Justify is the justification property

Word (Word) interval
The Word-spacing property can change the standard interval between words, and the default value is normal and 01-like meanings
The Word-spacing property accepts either a positive length value or a negative length value. If a positive length value is provided, the spacing between words increases, and conversely, the

P.spread {word-spacing:30px;}
p.tight {word-spacing: -0.5em;}
<p class= "Spread" >
This is a paragraph. The spaces between words'll be increased.
</p>
<p class= "Tight" >
This is a paragraph. The spaces between words'll be decreased.
</p>

The Letter-spacing property is an alphabetic interval, which is the interval between numbers and letters.
H1 {letter-spacing: -0.5em}
h4 {letter-spacing:20px}

Character Conversions:
The Text-transform property handles the case of text
Property value: None---no action
Uppercase---All caps
lowercase--All lowercase
Capitalize---Capitalize only on the first letter of each word
h1 {Text-transform:uppercase}---The contents of the H1 element are all uppercase

Text decoration:
The Text-decoration property------its value is replaced instead of cumulative
Attribute value: None--Remove the original decoration, restore the default
Underline--Underline elements
Overline---Draw an underscore at the top of the text
Line-through draw a penetrating line in the middle of the text
Blink----Make text blink

    可以结合多种装饰使用；例如：     a:link a:visited {text-decoration: underline overline;}   --超链接既有下划线，又有上划线

To handle whitespace characters:
The White-space property can handle whitespace between words and lines of text in a way that

<p>this paragraph has many
Spaces in it.</p>

p {white-space: normal;}

When the White-space property is set to normal, all whitespace characters are merged and line breaks are ignored

Property value:
Pre----The browser does not merge whitespace characters and does not ignore line breaks
nowrap-----Prevent text wrapping in elements unless a BR element is used
Pre-wrap----Browser not only preserves whitespace characters and preserves line breaks, it also lets you wrap
Pre-line----The browser preserves line breaks and allows line wrapping, but combines whitespace characters (and pre-wrap differences)

Text direction:
The direction property affects the writing direction of the text in a block-level element, the direction of the column layout in the table, the direction in which the content fills the element box horizontally, and the position of the last row in the justified element
For inline elements, the direction property is applied only if the Unicode-bidi property is set to embed or bidi-override
Property values: Ltr and RTL;;; The default value is LTR, which displays left-to-right text. RTL is displayed from right to left

css文本属性：    color               设置文本颜色        direction           设置文本方向。        line-height         设置行高。        letter-spacing      设置字符间距。        text-align          对齐元素中的文本。        text-decoration     向文本添加修饰。        text-indent         缩进元素中文本的首行。        text-shadow         设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。        text-transform      控制元素中的字母。        unicode-bidi        设置文本方向。        white-space         设置元素中空白的处理方式。        word-spacing        设置字间距。

CSS Fonts
Defines the size, weight, style, etc. of the font in the text
Font-family property defines the font of the text

   body {font-family: sans-serif;}

Font-style Property---setting italic text
Property value: Normal---text is displayed
Italic--Text italic display
Oblique--Text skew display

Font variants:
The Font-variant property sets a small capital letter---a different size uppercase letter

                             p {font-variant:small-caps;}

Font Bold:
Font-weight property sets the thickness of the text
Property value: Bold Bold

p.normal {font-weight:normal;}
P.thick {font-weight:bold;}
P.thicker {font-weight:900;}

Font Size:
Font-size setting the size of text

If you do not specify a font size, the default size for plain text (such as paragraphs) is 16 pixels (16px=1em)

CSS Font properties:
Font Shorthand property. The function is to set all the font-oriented properties in a single declaration.
font-family set the font family.
Font-size sets the size of the font.
Font-size-adjust the replacement font is smart-scaled when the preferred font is not available. (CSS2.1 has deleted this property.) ）
Font-stretch a horizontal stretch of the font. (CSS2.1 has deleted this property.) ）
Font-style set the font style.
Font-variant displays text in either a small uppercase font or a normal font.
Font-weight sets the weight of the font.

CSS Links:
Four states of the link:
A:link-Generic, inaccessible links
A:visited-The user has visited the link
A:hover-the mouse pointer is over the link
A:active-the moment the link is clicked

规则：

A:hover must be located after A:link and a:visited
A:active must be located after a:hover

The Text-decoration attribute is mostly used to remove underscores from links

Background-color attribute specifies the background color of the link

CSS list:

CSS List properties allow you to place, change, or label an image as a list item

List type: The simplest way to affect the style of a list is to change its flag type

修改列表项的标志类型：list-style-type属性   ul {list-style-type : square}

List item Image:
Using images for each flag: List-style-image property

ul li {list-style-image : url(xxx.gif)}

List Flag Location: List-style-position Property

To simplify the list style:

List-style Property
Li {list-style:url (example.gif) square inside}

The values of List-style can be listed in any order, and these values can be ignored. As long as a value is provided, the other will fill in its default value

List Properties for CSS:
The List-style shorthand property. Used to set all properties used for the list in a declaration.
List-style-image sets the image to the list item flag.
List-style-position sets the position of the list item flags in the list.
List-style-type sets the type of the list item flag.

CSS Tables
Improve the appearance of the table

Table border:
Border Property
table, TH, TD
{
BORDER:1PX solid blue;
}
If you need to display the table as a single-line border, use the Border-collapse property

Collapse border:
The Border-collapse property collapses a table border into a single border
Table
{
Border-collapse:collapse;
}

Table,th, TD
{
BORDER:1PX solid black;
}
If there is no rule! The Doctype,border-collapse property may cause unexpected errors

Width and height of table:

Width and height---widths and heights

Table
{
width:100%;
}

Th
{
height:50px;
}

Text alignment for the table:
Text-align and Vertical-align properties set the alignment of text in a table

Text-align is horizontal alignment
Vertical-align is vertically aligned

Inner margin of table:
Controls the distance between the contents and borders of the table, setting the Padding property for TD and Th:

Td
{
padding:15px;
}

Color of table:

Table, TD, Th
{
border:1px solid Green;
}

Th
{
Background-color:green; --Background color
Color:white;
}

CSS Table Properties:

Border-collapse sets whether to merge the table borders into a single border.
Border-spacing sets the distance separating the border of the cell.
Caption-side sets the position of the table header.
Empty-cells sets whether to display empty cells in the table.
Table-layout sets the algorithm for displaying cells, rows, and columns.

CSS outlines:
The contour outline is a line that is drawn around the element, at the periphery of the edge of the bounding rectangle, which acts as a prominent element. CSS outline attributes specify element outlines
The style, color, width

CSS Border Properties:
Outline sets all the profile properties in a declaration.
Outline-color sets the color of the outline.
Outline-style sets the style of the outline.
Outline-width sets the width of the contour.

CSS Box model
The CSS box model specifies how the element box handles the elements ' contents, padding, borders, and margins.

border     边框

margin outer margin
padding inner margin
Element elements

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景

The edge of the padding is a border. Outside the border is the margin, and the margin is transparent by default and does not obscure any subsequent elements.

背景是由内容和内边距以及边框组成的区域；内边距、边框和外边距是可选的，默认是零。可以通过设置内外边距为零来覆盖浏览器样式* {    margin: 0;    padding: 0;    }       

In CSS, width and height are the widths and heights of element content, and increasing the inner and outer margins and borders does not affect the size of the content, but increases the total size of the element box

内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边外边距可以是负值，而且在很多情况下都要使用负值的外边距边框内的空白是内边距，边框外的空白是外边距

1.css Inner margin

The padding is a blank part of the bounding rectangle, which is the empty part of the element's content to the border, and the Padding property allows you to accept the length and percent values, but not the negative value

h1 {padding:10px;}---Set 10px padding for all edges of H1

You can also set the padding in the order of top, right, bottom, and left, respectively.

  h1 {padding: 10px 0.25em 2ex 20%;}   ----简写规则

Properties for single-sided padding:
Padding-top
Padding-right
Padding-bottom
Padding-left
The padding function is to set the inner margin property of an element in a declaration

H1 {
padding-top:10px;
Padding-right:0.25em;
Padding-bottom:2ex;
padding-left:20%;
}

The padding can set a percentage value, and the percentage value is calculated from the width of its parent element. and change

The upper and lower padding is consistent with the left and right margins, i.e. the percentage of the top and bottom padding is set relative to the parent element width, not relative to the height

CSS Border
The border of an element is one or more lines around the content and padding of the element
You can set the style, width, and color of an element's border

The Border-style attribute defines 10 different non-inherit styles, including none

Define a Picture:
A:link img {border-style:outset;}

Define multiple styles for a border:
p.aside {border-style:solid dotted dashed double;}

Define a single-sided style:

p {Border-style:solid solid solid none;} "=====" p {border-style:solid; border-left-style:none;}

Width of the border:
The Border-width property specifies
There are two ways to specify the width:
1. Specify the length value; 2. Use keywords, thin, medium (default), and thick

p {border-style:solid; border-width:5px;}

Or
p {border-style:solid; border-width:thick;}

Define single-sided widths:
Set the edge borders of the elements in the order of top right and bottom left:
p {border-style:solid; border-width:15px 5px 15px 5px;}
or shorthand:
p {border-style:solid; border-width:15px 5px;}

You can set the width of each edge of the border with the following properties:
Border-top-width
Border-right-width
Border-bottom-width
Border-left-width

Border Width Setting Value:
None---no border
Solid
Outset
When the property value Border-style is set to none, there is no border, so no matter what you define, it will disappear. Include any style
Since the default value of Border-style is none, if no style is declared, it is equivalent to Border-style:none. Therefore, if you want the border to appear, you must declare a border style

Color of the border:
Border-color Property settings
It can receive up to 4 color values at a time, and if it is less than four, the value assignment will work

The border color defaults to the foreground color of the element itself, and if no color is declared for the border, it will be the same as the text color of the element. If the element does not have any text,
Its border color is the text color of its parent element, which may be body, Div, etc.

Defining one-sided color:--As with defining the width property
Border-top-color
Border-right-color
Border-bottom-color
Border-left-color

Transparent border:
Border-color:transparent creating an invisible border---

CSS margins
An empty area around the border of an element is the margin
Set margin using the Margin property, which can accept any unit of length, percent value, or even negative values

Margin can be set to auto, and more commonly, length values are set for margins

h1 {margin:0.25in;}

The Padding property value sets the percentage value that is also calculated relative to the width of the parent element.

Rules for assigning values using values:

If the value of the left margin is missing, the value of the right margin is used.
If the value of the margin is missing, the value of the top margin is used.
If the value of the right margin is missing, the value of the top margin is used.

Unilateral margin properties:
Margin-top
Margin-right
Margin-bottom
Margin-left
Margin sets all margin properties in a declaration

CSS margin Merge
Margin merging means that when two vertical margins meet, they will form an outer margin. The height of the outer margin after the merge is equal to two of the height of the outer margin where the merge occurred

CSS positioning:

CSS positioning properties allow you to position elements

Use the Display property to change the type of the build box. Display=block can make inline elements behave like block-level elements.
Display=none let the generated element have no box at all

When you add some text to the beginning of a block-level element, even if the text is not defined as a paragraph, it is treated as a paragraph

<div>
Some text------------------nameless block box
<p>some more text.</p>
</div>

SS positioning mechanism: normal flow, floating, absolute positioning

All boxes are positioned in the normal stream.

CSS Position properties:
The static element box is generated normally. Block-level elements generate a rectangular box that, as part of the document flow, creates one or more row boxes in the parent element.

The relative element box offsets a distance. The element still retains its pre-positioned shape, and the space it originally occupies remains---relative positioning

The absolute element box is completely removed from the document flow and is positioned relative to its containing block, which may be another element in the document or an initial containing block. The space that the element originally occupied in the normal document flow is closed,
As if the element had not existed. The element is positioned to generate a block-level box, regardless of what type of box it was generated in the normal flow-absolute positioning

The fixed element box behaves similar to setting position to absolute, although its containing block is the window itself---fixed positioning

CSS Positioning properties:

Position place elements in a static, relative, absolute, or fixed position.
Top defines the offset between the top margin boundary of an anchored element and the upper boundary of its containing block.
Right defines the offset between the left margin boundary of the anchored element and the right boundary of its containing block.
Bottom defines the offset between the margin boundary beneath the anchor element and the lower boundary of its containing block.
Left defines the offset between the right margin boundary of the positioned element and the left edge of its containing block.
Overflow sets what happens when the content of an element overflows its area.
Clip sets the shape of the element. The element is cut into the shape and then displayed.
Vertical-align sets the vertical alignment of elements.
Z-index sets the stacking order of elements.

CSS relative positioning:

The element box set to relative positioning offsets a distance. The element still retains its pre-positioned shape, and the space it originally occupies remains.

When using relative positioning, the element still occupies the original space, regardless of whether it is moved or not. Therefore, moving an element causes it to overwrite other boxes

CSS Absolute Positioning:
An element box set to absolute positioning is completely removed from the document flow and is positioned relative to its containing block, which may be another element in the document or an initial containing block.
The space that the element originally occupied in the normal document flow is closed as if the element had not existed. The element is positioned to generate a block-level box, regardless of what type of box it was generated in the normal flow.

CSS absolute positioning makes elements independent of the document flow and therefore does not occupy space

Relative positioning is relative to the initial position of the element in the document, and absolute positioning is relative to the nearest positioned ancestor element, if no ancestor element exists, then relative to the original containing block

CSS floating:

The floating box can be moved left or right until its outer edge touches the border of the containing box or another floating box.

Because the float box is not in the normal flow of the document, the Block box in the normal flow of the document behaves as if the floating box does not exist

Float Property

Line boxes and cleanup

To prevent a row box from wrapping around a floating box, you need to apply the clear property to the box
Property values: Left, right, both, and none
Indicates which sides of the box should not be next to the floating box

Basic knowledge of CSS 1