Based learning, the front end CSS

A basic introduction .CSS

As already learned HTML, HTML is a learned HTML , it uses markup tags to describe web pages, but under normal circumstances HTML input text, if you want to set the text to give it a nice style, we need the help today learning CSS (Cascading style Sheet) is achieved when the browser reads to CSS styles, you'll use that style to render text, text effect we want to achieve.

Two .CSS of reference

Method One: inline style (inline style while the highest priority, will be mentioned later)

<div style="color: red;">今天天气真好</div>

Method two: internal style (style tags need to be added in the head tag)

<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style>
        #d1{
            border: 1px solid black;
        }
        .c1{
            height: 50px;
            width: 50px;
            background-color: blue;
            border: 1px solid red;
            float: left;
        }
        .c2{
            height:20px;
            background-color: darkgray;
        }
    </style>

Method three: external style sheet (CSS establish a separate file, and then introduced in the html file)

<link rel="stylesheet" href="此处写CSS的文件名">

Three .CSS selector

1. Basic sorter

Tag selector

p {color: "red";}

ID selector

#i1 {
  background-color: red;
}

Class selector

.c1 {
  font-size: 14px;
}
p.c1 {
  color: red;
}

Universal selector

* {
  color: yellow;
}

Note: tag class attribute if more, should be separated by a space.

2. Combination Selector

Descendant selectors

li a {
  color: green;
}

NOTE: use a space separated and li a, showing the inside of the label li a yellow.

Son selector

div>a {
  font-size:20px;
}

Select all parent div tag is a label, the font size becomes 20px.

Nearby selector

div+p {
  margin: 5px;
}

Select p tag immediately after all div tags

Brother selector

#i1~p {
  border: 2px solid royalblue;
}

ID is behind all of the p i1 tags (both on behalf of the same relationship)

3. attribute selectors

/*用于选取带有指定属性的元素。*/
p[title] {
  color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
  color: green;
}

4. nested packet

Groups: When there are n elements have the same style, without having to write style n times, we only need to name its elements separated by commas, as follows:

div, p，a {
  color: red;
  font-size:30px;
}

Nesting: choice may be used in combination, e.g. :( c1 to the interior of the p-type label font color to red)

.c1 p {
  color: red;
}

The priority selector

The higher the priority the closer tag (principle of proximity)

Calculation of the weight
1. The inline style 1000 (written directly in the tag style)
2. 100 ID selector
3. The selector 10 class
4. Selector elements 1

div#d1(101)   div.c1(11)

Note:! By adding important way to force the styles to take effect, but not recommended. Because if too much use! Important cause confusion difficult to maintain the style file.

6. pseudo class selector

/* 未访问的链接 */
a:link {
  color: white；
}

/* 已访问的链接 */
a:visited {
  color: yelow；
} 

/* 鼠标移动到链接上 */（非常重要，划重点划重点）
a:hover {
  color: #FF00FF
} 

/* 选定的链接 */ （不常用）
a:active {
  color: #0000FF
}

/*input输入框获取焦点时样式*/
input:focus {
  outline: none;
  background-color: #eee;
}

7. pseudo-element selector

/*在p元素之后插入内容*/
p:after {
  content:"[?]";
  color:blue;
} 
/*在p元素之前插入内容*/
p:before {
  content:"*";
  color:red;
}

Two or more pseudo-multi-element selector for removing floating, the floating will be mentioned later on.

/*给首字母设置样式*/(不常用)
p:first-letter {
  font-size: 48px;
  color: red;
}

IV. Common property on CSS

1. font properties

/*family为设置字体，size为字体大小，weight为字体粗细，color为字体颜色*/
div{
            font-family:"Microsoft JhengHei Light",serif;
            font-size: 20px;
            font-weight: bold;
            color:red;
        }

2. Text Properties

text-align alignment (important)
Decorative text-decoration (underlined removing a label (text-decoration: none))
text-indent the first line indent

div{
            text-align: center;
            text-decoration: none;
            text-indent: 10px;
        }

3.color property

red (direct write the name)
# ff0000
rgb (255, 0, 0) -> rgba (255,0,0,0.5) (a representative of transparency)

        div{
            color:red;
        }
        div{
            color:#ffff;
        }
        div{
            color:rgb(255,255,255);
        }
        div{
            color:rgba(255,21,21,3);
        }

4. border attribute

border-width (frame width)
border-style (border style)
border-color (border color)
the border into border-radius fillet

       div{
            border-width: 20px;
            border-style: solid;
            border-color: #ffff;
        }
        简写：
        div{
            border:2px solid red;
            border-radius: 50%;
        }

5. Background Properties

background-color background color
background-image background image

        div{
            background-color: #204982;
            background-image: url();
        }

 背景重复
 repeat(默认):背景图片平铺排满整个网页
 repeat-x：背景图片只在水平方向上平铺
 repeat-y：背景图片只在垂直方向上平铺
 no-repeat：背景图片不平铺
*/
background-repeat: no-repeat; 
/*背景位置*/
background-position: right top;
/*background-position: 200px 200px;*/

简写为：background:rede url('图片名') no-repeat right top;

/*页面滚动，背景图片不动*/
        div{
            background-attachment: fixed;
        }

6.CSS box model (divided into the following four elements)

content (content)
Using this property when the padding (inner fill) adjusting the distance between the border and the content
border (border)
margin (margins) for adjusting the distance between multiple labels adjusted (note that two labels next to take the maximum margin)

/*margin外边距*/
        body{
            margin-top: 20px;
            margin-bottom: 20px;
            margin-left: 20px;
            margin-right: 20px;
        }
 简写：
 		 div{
            margin:20px 10px 30px 50px;（上右下左）
        }

margin也常用来居中盒子
        div{
            margin: 0 auto;
        }

/*padding内填充*/
        body{
            padding-bottom: 20px;
            padding-top: 20px;
            padding-left:20px;
            padding-right:20px;
        }
 简写：
        div{
            padding:20px 30px 10px 5px;（上右下左）
        }

A, for the four sides;
providing two, one for the first - next, the second for left - right;
if provided three, one for the first, second for left - right, for the third;
providing four parameter values will be on - Right - lower - left order to act on the four sides;

7.display property

inline (characteristic has allowed inline tag)
block (block-level characteristic has allowed tag) menu inside a tag may be arranged to block
inline-block (the exclusive line, the height and width may be provided)
none (not to display the label, not occupying)

8.float (float) properties

Used for layout effects to achieve
the navigation bar 1. The top of the
left and right columns 2 pages
float
1. After any label can float, then a float will become block-level tags can be set high and float Width
float values:
1. left: left floating
2. right: Floating right
3. none: default value, does not float

The block floating may be moved left or right until it hit the edge of the outer frame includes a frame or the other until the floating box.
Since the general flow of the document is not in the floating box, so the ordinary flow of documents in the block box behave like a floating box does not exist.

9.clear property

Action:
Clear Clear float -> Clear floating side (the content of fly, do not hold up the parent tag)
Clear Value:
1.left allowed the floating element on the left side.
2.right not allow floating elements on the right side.
3.both left and right sides are not allowed to float.
4.none default. Allowing the floating element appear on both sides.
5.inherit clear provisions should inherit the property value from the parent element.

.clearfix:after {
					content: ""；
					display: "block"；
					clear: both；
				}

Note: clear property only for their own work, without affecting other elements.

10.overflow overflow property

The value	description
visible	Defaults. Content will not be pruned, there will be elements outside the box.
hidden	Content will be trimmed, and the remaining content is not visible.
scroll	Content will be trimmed, but the browser will display the scroll bar to view the rest of the content.
auto	If the content is pruned, the browser will display the scroll bar to view the rest of the content.
inherit	Provision should inherit the value of the overflow property from the parent element.

11.z-index

Laminating order of the objects is provided.

z-index value indicates Who pressing, a large value to cover small pressure value,

Only the positioning of the elements, in order to have z-index, that is to say, regardless of the relative positioning, absolute positioning, fixed positioning, you can use z-index, but can not use the floating element z-index

z-index value has no units, is a positive integer, the default z-index value of zero if we do not have z-index value, or z-index value is the same, then who wrote the HTML behind, someone who is pressing on it, positioning the elements, the elements do not always suppress positioning.

From the parent phenomenon: the father counsels his son and then regressed useless

#i2 {
  z-index: 1000;
}

12.opacity property

Used to define the transparency. In the range from 0 to 1,0 it is completely transparent, 1 is completely opaque.

13. Location (position)

static

static default-free positioning, not as absolute positioning reference, and set the left label objects, top of equivalence does not work.

relative (relative positioning)

It is positioned opposite the original position of the element with respect to the flow of the document, i.e., to their original position as a reference. Interestingly, even if the set of elements and relative positioning of the offset values, elements still has the original position, i.e., the space occupied by the document flow. Document follow the normal stream objects, but will be based on top, right, bottom, left and other properties in the normal offset position of the document flow. Laminating by which the z-index attribute definition.

Note: position: relative of a major usage: absolutely positioned elements found convenient reference.

absolute (absolute positioning)

Definition: set absolute positioning of elements box completely removed from the document flow, and relative to the nearest positioned ancestor element positioning, if the element is not already positioned ancestor, then its position relative to the initial containing block (ie, the body element) . Original elements in the normal flow of the document space occupied will be closed, as if the elements were not there originally. Generating a block-level element positioned after the frame, regardless of what type of frame it had generated in the normal stream.

Important: If the parent set position attributes, such as position: relative ;, then the child element will be the parent's upper left corner for positioning the original point. This can well solve the problem of adaptive website labels deviate from that parent is adaptive, that my child element is set position: absolute; parent element setting position: relative ;, then Top, Right, Bottom, Left as a percentage width represents.

In addition, the object out of the normal flow of the document, use top, right, bottom, left and other attributes of absolute positioning. Laminating by which the z-index attribute definition.