Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.
###CSS
- Casecading stacked Style Style Sheet sheet, the role: to beautify the page
#### CSS manner of introduction
- the introduction of three ways:
-
Inline style: style code added in the style attribute tag, can not be reused
<h1 style="color: red">内联样式</h1> -
Internal Style: Add style tags inside head tags, labels add style to an element in the body through the selector, the benefits: the current page can be reused in, the downside: only the current page multiplex
-
External style: style code added css in a separate file, and then introduced through the link tag css file benefits: multi-page multiplexed
- The priority adding methods: inline after the highest priority, performs the same internal and external coverage performed prior
###Selector
- Tag name selector
- All that match the specified tag name tags
- Format: style code label name} {
- id selector
- Match the specified one element of id
- Format: #id {}
- Class selector
- Elements that match the specified class is a class of
- Format: .class {}
- A packet selector
- The combined into a plurality of selectors selector
- Format: div, # abc, .c1 {}
- Attribute selectors
- By property names and values to select matching element
- Format: div [attribute name = 'value']
- Future generations selector
- Format: div div span {} div div inside which span all
- Child element selector
- Format: div> div> span {} div sub-elements inside the div inside span
- Pseudo class selector
- State used to select elements: unvisited link visited hover hover visited Click active
- Any element selector
- Select all the elements of the page
- Format: *} {
### color assignment mode
- The three primary colors: red, green and blue red green blue values for each color 0-255
-
Red color word
-
6 hexadecimal assignment # ff0000 (most used)
-
3 hexadecimal assignment # f00
-
3 decimal assignment rgb (255,0,0)
-
The smaller the value a = 0-1 alpha transparency values assigned four decimal rgba (255,0,0,1) more transparent
### Background image/* 设置背景图片 */ background-image: url("../imgs/1.jpg"); /* 背景图片宽高 */ background-size:100px 100px; /* 禁止重复 */ background-repeat: no-repeat; /* 控制位置 left/right/top/bottom/center 通过百分比控制位置 */ background-position: 90% 90%;
### related to the layout style (box model)
- Box Model: Margin Width High + + + frame padding
####Width Height
- width, height: assignment two ways: 1. 2. higher percentage of pixel elements
- Inline elements can not modify the width and height, determined by the contents
#### Margin - What are the margins: the higher the element or elements from the adjacent sibling elements of distance is called Margin
- Assignment mode:
/ * added separately margins to one direction
margin-left / Top / right / bottom * /
/ * margin-Top: 50px;
margin-left: 30px;
margin-bottom: 20px; /
/ margin: 50px; / / four directions are all 50 /
/ margin: 20px 40px; / / down about 40 20 is /
/ margin: Auto 0; // horizontal center /
/ margin: 10px 20px 30px 40px; / / right lower left clockwise * / - Vertically adjacent block elements simultaneously added and bottom margin on the margins takes a maximum value, the left and right rows of adjacent elements, while adding the left and right outer outside adding
vertically adjacent horizontally adjacent take the maximum sum - Up and down the line from the outside elements within invalid
- When the edges overlap the upper edge of the parent element and the element, the element is added to the margins, there will be adhesion problems, add elements to the superior overflow: hidden to solve
###frame
- border: the border style border thickness color;
- border-left / right / bottom / top: Color Border Style Border thickness;
- Inline elements borders into full force, affecting the share element width but does not affect the height occupied by the elements
padding ### - What is padding: distance from the content of the element's border
- Add padding to the elements will affect the width and height of the element
- If you move a child element of the child element is added to the margins, if you move the text content of the element you can only use padding
- Inline elements within the margins into full force, affecting the share element width but does not affect the share element height
### Special inline elements
- Width and height: width and height can not be modified
- Margins: upper and lower invalid
- Border: height does not affect the share
- Padding: share does not affect the element height
### text related
- Text horizontal alignment of
text-align: left / right / center - Text-decoration
text-decoration: overline / underline / line-through / none - Text Color
color: red; - Text Shadow
text-shadow: x offset y offset color concentration value (the larger the value the more blurred) - Line High
Line-height: 30px;
### Fonts
/ * font size /
font-size: 30px;
/ bold font /
font-weight: Bold / Normal;
/ italic /
font-style: Italic;
/ font set * /
font-Family: "blackbody";
### three CSS properties - Inherited: element can inherit the parent element of the text and font-related style, individual labels own unique style inherited from influences such as: hyperlinks a label's font color, h1-h6 font size.
- Laminating properties: When the selector selects a different element to the same time, if the role of the different styles are all laminated together all styles (full force), acting if the same style by priority determination
- Priority: The smaller the higher the priority scope, id> class> tag name> inherit (indirectly selected)
#### display elements display
- block: block-level elements in the default display mode, width and height can be modified
- inline: inline elements default display mode can be accounted for one line
- inline-block: the block row, width and height can be modified line may be accounted for
within the #### element row vertical alignment vertical-align - Align the top
- Under align bottom
- Align middle intermediate
- Baseline alignment baseline (default)