[] CSS front end of the road learning basic grammar content

What is CSS

CSS stands for Cascading Style Sheet, cascading style sheets. CSS is primarily used to modify the HTML display style, so HTML elements look more beautiful. HTML focuses on content pages, and focus on the elements of CSS styles.

CSS type

According to the scope of CSS, CSS can be divided into:

• Inline style
• Internal Style
• External style
  using rules specific three styles can look at this article:
  [path] front-end learning in three ways HTML link css styles
  they affect the priority of the HTML element is: inline style> internal style> External style

CSS syntax

A pattern consists of three parts: a selector (selector), property (Property) and value (value).
Selector (selector): Select HTML elements that define the style
attribute (property): The desired attribute changes
a value (value): specify a value for each attribute, and the attribute value are separated by a colon, surrounded by braces.
example:

body { 
color: #000000; 
background: #ffffff; 
margin: 0; 
padding: 0; 
font-family: serif; 
} 

Selector

Tag selector

The tag selector to select the label, a defined style affect all of the same HTML document tags.
Syntax structure: tag {}
example: h1 all tags have become red.

<!--样式定义-->
<style type="text/css">
	h1{
	color:red
}
</style>
<!--在HTML中使用-->
<h1>h1标题</h1>

Class selector

Class selector to display a number of points used to define a style earth elements.
Syntax structure: {} class attribute value element
, for example: use the class selected by the selector element and edit the text alignment element

<!--样式定义-->
<style type="text/css">
.center {text-align: center}
</style>
<!--在HTML中使用-->
<h1 class="center"> 
      This heading will be center-aligned. 
</h1> 

<p class="center"> 
      This paragraph will also be center-aligned.
</p>

id selector

id selector can specify a particular style for the unique id water HTML elements.
Syntax structure: elements of a particular id value # {}
Example: id using the selected element and changing its color

<!--样式定义-->
<style type="text/css">
#red {color:red;} 
#green {color:green;}
</style>
 <!--在HTML中使用-->
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

Derived selector

Style context defined by the elements, the marking is more compact, with a space between the selector.
Syntax structure: Selector Selector 1 2 3 {...} selector
example: You want to table elements becomes strong in italics, bold instead of the usual, can define a derived selector:

<style type="text/css">
table strong {
    font-style: italic;
    font-weight: normal;
  }
</style>

A packet selector

Group of selectors, the selectors can be grouped to share the same statement will need to be grouped selector separated by commas.
Syntax structure: selector [selector] {}
Example:

h1,.green,#green{
	color:green;
}

Wherein h1, .green, #greenthree selectors share a style statement.

CSS box model

In the CSS concept, everything is box (box).
Box model (Box Model) elements specified frame processing element content, padding, border, and padding of the way.

• element: element.
• border: Borders
• padding: padding, or filling.
• margin: margins, or blank margins.

Example:
Suppose the outer edge of each block and Padding five pixels 10 pixels.
If the desired frame element 100 pixels, it is necessary to set the width of the content is 70 pixels:

#mybox {
  width: 70px;
  padding: 5px;
  margin: 10px;
}

Display HTML elements

That the display elements of the frame can be divided into

• Block elements: a box on a line by line up a box
• Inline elements: a plurality of rows of elements can share one row
• Variable elements: determined by the parent of the element is a block element or the row element

Block elements

块级元素生成一个元素框，(默认地)会填充其父级元素的内容，旁边不能有其他元素，在元素框之前和之后生成“分隔”符。一般是其他元素的容器元素，例如div。
块元素特点：

• 总是在新行上开始
• 高度，行高以及顶和底边距都可控制；
• 缺省宽度是它的容器(上级元素)的100%，除非设定一个宽度。

常见块元素：

<h1>：标题
<p>：段落
<div>：层
<form>：表单

行内元素

也叫内联元素，内联元素在当前行内生成元素框，而不会打断这行，行内元素不会在它本身之前或之后生成“分隔符”，行内元素只能容纳文本或者其他行内元素。
行内元素特点：

• 和其他行内元素都在一行上
• 高，行高及顶和底边距不可改变
• 宽度就是它的文字或图片的宽度，不可改变。

常见行内元素：

<a>：超链接；                    
<font>：字体
<image>：图片
<textarea>：多行文本输入框
<input>：输入框
<select>：选择输入框
<br>：换行

可变元素

可变元素：为根据上下文语境决定该元素为块元素或者内联元素。
常见的可变元素：

<applet>：Java Applet
<button>：按钮

使用display属性改变元素的框模型

display 属性设置为 inline：行内元素
display 属性设置为 block：块元素
display属性设置为 none ：让生成的元素根本没有框，这样的话，该框及其所有内容就不再显示。

例子：修改Display

<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<script src="js/jquery-1.9.1.min.js" type="text/javascript">
</script>
<script type="text/javascript" >
function changeDisplay() {
   //1-获得用户新的显示选择
var newDisplay = $("#selectDisplay").val();
//2-设置元素样式的display属性
$("#head1").css({"display" : newDisplay});
$("#head2").css({"display" : newDisplay});
}
</script>
</head>

<body>
<h1 id="head1">我是标题1</h1>
<h1 id="head2">我是标题2</h1>
<select id="selectDisplay" onchange="changeDisplay();">
<option selected>block</option>
<option>inline</option>
<option>none</option>
</select>
</body>
</html>

选择不同的display属性，动态改变h1标签的display状态。

HTML元素定位

坐标系统：可以将任何元素(框模型)放置在坐标系统(浏览器)的任何位置上。
距离：使用像素(px)或者百分比(%)

CSS定位方式

Normal flow positioning

absolute positioning
element position of absolute positioning with respect to the nearest positioned ancestor element, if the element is not already positioned ancestor, then its position relative to the first block containing
absolute positioning the position of document elements flow has nothing to do, no occupy space.
To be absolutely positioned elements, should the value of the position property to absolute. Then, you can set the box placed on the property where by left, right, top and bottom.

The relative positioning of
elemental relative positioning, the position is relative to its original position (position model flow) in a document from the calculation. This means that, by the relative positioning of the elements from the original position to the right, left, up or down to locate.
The relative positioning of the elements employed to obtain the corresponding space will, in fact, be considered as part of the relative positioning of the normal stream localization model, since the position of the element relative to its normal position in the stream.

Element positioning properties

Wherein z-index attribute content can be displayed in different layers, the stacking order is formed.