CSS Meet
1, CSS of those things
CSS (Cascading Style Sheets) translation of " cascading style sheets " My understanding is: all kinds of style overlay table .
A web page, if there is no CSS, is wearing "emperor's new clothes" in the streaking! CSS importance of self-evident!
Clothes as HTML, CSS HTML elements to provide a description of the style definition display mode, the TA can be precisely controlled pixel-level page elements.
CSS history is not too much to say, first introduced in several ways and understand the difference.
2, external style
External style refers to the establishment of a single extension .cssstylesheet using link method incorporated in the head tag, you may also be introduced using the import mode:
// link 引入
<link rel="stylesheet" type="text/css" href="css/style.css" />
// @import 引入
<style type="text/css">
@import url("css/style.css");
</style>The benefits of the introduction of external style is a style sheet can be reused across multiple pages, use the link wall cracked recommend ways to introduce, import novice caution.
3, inline style
Inline styles, mainly through <style> 标签editing style in the page:
<style>
.title {
color: red
}
</style>The method of writing style only valid in the current page, other pages can not be used, <style>the label can be placed anywhere to put the proposal in the head.
4, inline style
Inline style is an element in the HTML page directly define it directly, for example with p elements:
<p style="color: red"></p>Inline style tags only where its entry into force, in fact, recommended to use less or no time to write a page.
The best quote style is to use the first way to link the introduction of separate HTML page code and CSS style , easy maintenance and management of the project, as well as to improve the CSS style of reusability.
The other two methods use less or no, try to reduce the complexity of the page.
5, CSS selectors
Most elements of style HTML page is controlled by CSS selectors.
To use CSS to achieve one of the HTML element on the page, one to many or many-to-control, can not be separated CSS selectors.
CSS selectors about these:
- Universal selector
- Tag selector
- class selector (Class Selector)
- id selector
- Descendant selectors
- Descendant selector
- Combination selector
- Adjacent Sibling Selector
- Pseudo class selector
- Media queries (tentatively also considered it)
Some may miss the welcome message to add, to re-set some common selector.
5.1 Universal selector
* Used the beginning of the universal selector, directly behind to keep up with the style, apply to all labels, it represents a common definition.
Like all normal definitions: a head, hands, legs.
Example:
* {
font-size: 18px;
color: red
}This means that all label font size is 18px, color is red.
5.2 tag selector
The tag selector to select all of the same label element, directly behind the label to keep up with style.
Like requiring students to wear uniforms, workers in different factories have corresponding work clothes.
Example:
p {
font-size: 16px;
color: blue
}Here represents all p tags font size is 16px, color is blue.
5.3 class selector (Class Selector)
class selector may select a particular tag with the class name is style definition, i.e. many, when written in. at the beginning, to keep the class name, then write pattern, the corresponding tag with class = "" reference.
Like assign a class of class cadre, give them the same type of property.
Example:
// css 样式
.title{
background-color: red
}
// html 页面
<div class="title">语文课代表</div>
<div class="title">数学课代表</div>Here the background color can be represented by two classes are set to red, one to many settings.
5.4 id selector
id selector beginning with #, back to keep the id, then writing style. Used in the corresponding id = Tags "" reference name which is unique id.
To a school, for example, attribute defines the principal, a school has only one principal.
Example:
// css 样式
#title{
background-color: black
}
// html 页面
<div id="title">校长</div>Here is the background color is defined as black president, although id selector is unique, and if several elements are named to the same name id, CSS selectors will still be marked elements are selected application style (and class selection Like device).
At first glance, the uniqueness of id selector does not seem to exist. However, in javascript select only have the same first name id element. So, develop a good habit, the same id not appear a second time on the same page.
Note that, since the CSS explanation is top-down element for a same attribute assignment properties described above will overwrite below, so we must pay attention writing order attribute.
5.5 Descendant selectors
Selecting progeny is also known comprising a selector for selecting a particular element of the progeny, in front of the parent element, the sub-elements on the back, separated from the middle of a space.
This should be relatively easy to understand it, an analogy, I am a Chinese, all of my descendants will keep the Chinese people's blood.
Example:
// css 样式
.china p {
background-color: yellow
}
// html 页面
<div class="china">
<p>儿子</p>
<p>女儿</p>
</div>Here's son and daughter background color will be yellow.
Descendant selector element is not limited two, is also applicable to a multilayer descendant relationship, the maximum nesting be separated layer does not exceed 256 a plurality of spaces.
5.6 offspring selector
And descendant selector is different, only the progeny of the first generation of the selector means TA, progeny space selected by the selector, by selecting progeny> selection.
For example, I just give my red dress their children, other descendants, such as grandchildren, great-grandchildren do not send.
Example:
// css 样式
div > strong {
color:red
}
// html 页面
<div>
<strong>儿子</strong>
<span>
<strong>孙子</strong>
</span>
</div>Children's font color is red, and grandchildren is the default color.
5.7 combinations selector
A case where a plurality of different elements do the same operation, the same style code can be used in common, separated by commas between the elements, which is a combination of selectors.
Like to send a different identities of people "touched Jiu Qi Ten Youth Award", we can put them all together called the award.
Example:
// css 样式
div, p, span, h1 {
color: red
}
// html 页面
<div>小明</div>
<p>小红</p>
<span>小刚</span>
<h1>小利</h1>Here Xiaoming, red, Xiaogang and a small profit colors are red, the biggest advantage of using a combination of selectors is: simplify CSS code, coding efficiency is improved.
5.8 & adjacent sibling selectors universal selector brothers
Brothers or adjacent selector good appreciated, the MDN presentation is: interposed between two selectors, immediately when the second element after the first element, and two elements belong to the same parent element the child element, the second element will be selected.
Like the emperor said that the next son is born when the prince, it is currently the last reference to a child, the next son is Prince, if Mr. a daughter, is not.
Example:
// css 样式
div + p {
color: red
}
// html 页面
<div>大儿子</div>
<span>二女儿</span>
<p>二儿子</p>
<p>三儿子</p>Here are the default color, because the middle separated by a second daughter, second son is not so when the prince.
Adjacent sibling selector summed up on two key points:
- Immediately after the first of another element
- Both have the same parent element
General sibling adjacent sibling selector is similar, but it is certainly not the same, except that the first common sibling element is connected with the back of the ~.
Continue to take the son of the emperor, for example, after the eldest son of Emperor said all the sons are champion, it is the eldest son as a reference, the son of the king, after all, if a daughter, then skipped.
Example:
// css 样式
div ~ p {
color: red
}
// html 页面
<div>大儿子</div>
<span>二女儿</span>
<p>二儿子</p>
<p>三儿子</p>Here is your guess will be the horse of God look like?
5.9 the pseudo-class selector
Pseudo class selector style elements are generally used to describe in some specific state, the most common is to use a element (hyperlinks) are, of course, other elements may be, but is relatively less.
Helenians like it, not happy when will frown, laugh when happy, angry, they might break things, mainly the definition of different states.
Example:
// 没有被访问过a标签的样式
a:link {
color: black
}
// 访问过后a标签的样式
a:visited {
color: yellow
}
// 鼠标悬浮时a标签的样式
a:hover {
color: red
}
// 鼠标摁住的时候a标签的样式
a:active {
color: blue
}Pseudo-class selectors I think it should be the most interesting of the selector, try to know.
5.10 Media Inquiries
Media inquiries should be regarded as a selector, it is not Guannameduo I first pull in TA.
TA can use different styles in different conditions to achieve different pages in different rendering the device.
Like a man to do under different scenarios of different things, for the education of their children when the father, to protect his wife for the husband, when the Son of man to take care of their parents.
Example:
@media screen and (max-width: 300px) {
body {
background-color: red
}
}Style here indicates if the page width is less than 300px then change the background color to red, simple and easy to understand it.
6, the final
CSS is a simple recovery disk on here, all the instances are no screenshots show, still hope you can own to try and see the effect, knock is the right way.
If you have some place to write is wrong, please correct me also share that is learning.
