# # 1.css composite selector
in order to more precisely target element fine label
## 1.1 css descendant selector ##
for selecting future generations element or group of elements of
the outer label EDITORIAL middle separated by a space to write grandfather father son
.cc ul p {
color: green;
}
When the tags are nested, the inner tags become the descendants of the outer tags
## 1.2 子代
选器 ## / * Descendant selector sons and grandchildren are selected * /
div strong {
color: red;
}
/ * child selector only select the pro son * /
div> strong {
color: green;
}
## 1.3 Intersection selector ##
Condition
-The intersection selector consists of two selectors, the labels must be met, both The characteristics of label 1 and the characteristics of label 2
-grammar
/ * intersection selector is both p and .red selector relationship * /
p.red {
color: red;
} ## 1.4并 集 精选
器 ##
Union selectors are separated by commas, commas are understood as meaning of peace, and are generally used to collectively declare
<style>
/ * Customer requirements: the colors in p and span are red * /
/ * p {
color: red;
}
span {
color: red;
} * /
p, span {
color: red;
}
</ style>
<body>
<p> Me and you </ p>
<p> Me and you </ p>
<p> Me and you < / p>
<span> Me and you </ span>
<span> Me and you </ span>
<span> Me and you </ span>
<div> Me and you </ div>
<div> Me and you < / div>
<div> Me and you </ div>
</ body>
## 1.5 Link pseudo class selector ##
Syntax
-For example: link {}
-a: link / * unvisited link * /
-a: visited / * visited link * /
-a: hover / * mouse over link * /
-a: active / * selected link * /
note Try not to reverse the order when writing, according to the lvha order.
Because a link browser has a default style, we need to specify the style for the link separately in our actual work.
Actual development rarely writes all four states
css
a {/ * a is the tag selector all links * /
font-weight: 700;
font-size: 16px;
color: gray;
}
a: hover {/ *: hover is Link pseudo-selector mouse passes * /
color: red; / * When the mouse passes, the original gray changes to red * /
}
## 2.label display mode ##
## 2.1 What is the label display mode ##
-What is the label display mode?
How to display tags, such as div occupies one line, such as span line can put many
-function:
our web page has many tags, and then different types of tags will be used in different places, in order to better complete our web page.
-Types of tags (classification)
HTML tags are generally divided into two types: block tags and inline tags. They are also called block elements and inline elements.
## 2.2 块 级 元素 ##
Common block elements include <h1> ~ <h6>, <p>, <div>, <ul>, <ol>, <li>, etc., where the <div> tag is the most typical Block element.
-Characteristics of block-level elements
(1) Own a line on its own
(2) Height, width, outer margin and inner margin can be controlled.
(3) The width is 100% of the container (parent width) by default.
(4) It is a container and a box, which can contain internal or block-level elements.
-Note:
-Only text can form paragraphs, so p cannot contain block-level elements, especially p can not put div
-Similarly, there are these tags h1, h2, h3, h4, h5, h6, dt, they are all text types Block-level tags, where no other block-level elements can be placed.
## 2.3 行 内 元素 ##
-Example:
`` `
Common inline elements are <a>, <strong>, <b>, <em>, <i>, <del>, <s>, <ins>, <u>, <span>, etc., where <span> The most typical inline element of the label.
Some places to inline elements `
- Characteristics of the line elements:
(1) elements in the adjacent row on one line, multiple lines displays.
(2) The direct setting of height and width is invalid.
(3) The default width is the width of its own content.
(4) ** Inline elements can only hold text or other inline elements. **
Note:
-No more links can be placed in the link.
-In special cases, block-level elements can be placed in a, but it is safest to switch the block-level mode to a.
## 2.4 行 内 块 元素 ##
-Example:
`` `
There are several special tags in the inline elements-<img />, <input />, <td>, you can set the width and height and alignment attributes on them, Some data may refer to them as inline block elements.
`` `-Features
of inline block elements:
(1) It is on the same line as the adjacent line element (inline block), but there will be a blank gap between them. One line can display multiple
(2) The default width is the width of its own content.
(3) Height, line height, outer margin and inner margin can be controlled.
## 2.5 Three elements summary ##
| Element Pattern | Element Arrangement | Set Style | Default Width | Contains |
| ---------- | -------------- -------- | ---------------------- | ---------------- |- ----------------------- |
| Block-level elements | Only one block-level element can be placed on a line | You can set the width and height | 100% of the container | Container-level Can contain any label |
| Inline elements | You can put multiple inline elements in one line | You cannot set the width and height directly | The width of its own content | To accommodate text or other inline elements |
| Inline block element | Put multiple inline block elements in one line | You can set the width and height | The width of its own content | |
## 2.6 Label display mode conversion display
-block to line: display: inline;-line
to block: display: block;
-Blocks, inline elements are converted to inline blocks: display: inline-block; At
this stage, we only need to care about these three, and the rest is our later work.
# 3. Line-height
goals
-understand
-can tell the relationship between line height and height
-can easily understand why line height is equal to the height of single line text will be vertically centered
-application
-use line height to achieve vertical centering of single line text
-Can be able to measure line height
## 3.1 行 高
测 ## 3.2 Single-line text is vertically centered
One of the places we use the most is: You can make single-line text vertically aligned in the box.
> ** The line height of the text is equal to the height of the box. **
The situation here is a little bit complicated. Let's start learning. We can start with a simple place.
Line height = upper distance + content height + lower distance
<img src = "media / 1.png" width = "700" /> The
upper and lower distances are always equal, so the text appears to be vertically centered.
** Three relationships between row height and height **
-If the line height is the same as the height, the text will be vertically centered
-If the line height is
greater than the height, the text will be lower -If the line height is less than the height, the text will be upward
# 4. CSS background (background)
goal
-understanding
-the role of the
background-css background image and insertion The difference between pictures
-application
-add background styles to page elements through CSS background attributes
-can set different background picture positions
## 4.1 background color (color)
-syntax:
`` `
background-color: color value; the default value is transparent
`` `
## 4.2 Background image (image)
-Syntax:
` `` css
background-image: none | url (url)
`` `
| Parameters | Function |
| ---- |: ---- ------------------------: |
| none | No background image (default) |
| url | Use absolute or relative address to specify background image |
` `` css
background-image: url (images / demo.png);
`` ` -Tip
: We advocate the address behind the background image, do not add quotation marks to the url.
## 4.3 Background tiling (repeat)
-Syntax:
`` `css
background-repeat: repeat | no-repeat | repeat-x | repeat-
y` ``
| Parameter | Function |
| -------- -|: ----------------------------------: |
| repeat | The background image is flat in portrait and landscape
Tiling (default) | | no-repeat | background image is not tiled |
| repeat-x | background image is tiled horizontally |
| repeat-y | background image is tiled vertically |
## 4.4 background position (position) focus
-Syntax:
`` `css
background-position: length || length
background-position: position || position`
``
| Parameter | Value |
| -------- |: ---------------------------------- ------------------------: |
| length | percentage \ | The length value composed of floating-point numbers and unit identifiers |
| position | top \ | center \ | bottom \ | left \ | center \ | right Position noun |
-Note:
-The background-image attribute must be specified first-
position followed by x and y coordinates. You can use position nouns or precise units.
-If you specify two values, both of which are position names, the order of the two values is irrelevant, such as left top and top left have the same effect.
-If only one position noun is specified, the other value is center-aligned by default.
-If the position is followed by precise coordinates, then the first one must be x and the second must be y
-If only one value is specified, the value must be the x coordinate, and the other is vertically centered by default
-if the two specified values are If the precise unit and bearing names are mixed, the first value is the x coordinate, and the second value is the y coordinate.
** The most used in actual work is that the background image is centered. **
Exercise 1:
Large background image
Exercise 2:
Small picture is vertically centered on the left side of the box
## 4.5 Background Attachment
-Background attachment is to explain whether the background is scrolled or fixed
-Syntax:
`` `】
background-attachment: scroll | fixed`
``
| Parameters | Function |
| ------ |:- --------------------: |
| scroll | The background image is scrolled with the content of the object |
| fixed | The background image is fixed |
## 4.6 Background shorthand
-background: attribute There is no mandatory standard for the order in which values are written. For readability, it is recommended that you write as follows
:-background: background color background image address background tile background scroll background position;
-syntax:
`` `css
background: transparent url (image.jpg) repeat-y scroll center top;
` ``
Case:
Navigation Bar Case
## 4.7 Background Transparency (CSS3)
-Syntax:
`` `css
background: rgba (0, 0, 0, 0.3);
` ``
-The last parameter is alpha transparency value range 0 ~ Between 1
-We are accustomed to omit the 0.3 of 0 to write background: rgba (0, 0, 0, .3);
-Note: background translucent means the background of the box is translucent, and the contents of the box are not affected
-because it is CSS3, So versions lower than ie9 are not supported.
## 4.8 Summary of Background
| Properties | Role | Value |
| --------------------- |: -------------- -|: ----------------------------------------------- ------------ |
| background-color | background color | predefined color values / hex / RGB code |
| background-image | background image | url (image path) |
| background-repeat | Whether to tile? repeat / no-repeat / repeat-x / repeat-y |
| background-position | background position | length / position are the x and y coordinates respectively, remember that if there is a precise numerical unit, you must follow the X first and then Y |
| background-attachment | background fixed or scrolled | scroll / fixed |
| Background abbreviation | simpler | background color background image address background tile background scroll background position; they have no order |
| background transparent | make the box translucent | background: rgba (0,0,0,0.3); must be followed by 4 Value |
# 5. Three CSS characteristics
: Objectives:
* Understand
* Can speak the principles of css style conflicts
* Can speak those common styles will inherit
* Application
* Can write CSS priority algorithm
* Can calculate common Selector's overlay value
## 5.1 CSS stackability
-Concept: The
so-called stackability refers to the superposition of multiple CSS styles.
It is a browser's ability to deal with conflicts. If an attribute is set to the same element through two identical selectors, then at this time one attribute will stack another attribute
-principle:
-The style conflict, the principle to follow is the ** nearest principle. ** The style is close to the structure, and the style is executed.
- Style does not conflict, not stacked
`` `
CSS stacking of the last execution formulas: The waves pushed forward waves before the waves die on the beach.
`` `
## 5.2 CSS Inheritance
-Concept:
Child tags inherit certain styles of the parent tag, such as text color and font size.
To set an inheritable attribute, just apply it to the parent element.
The simple understanding is: inheritance of fatherhood.
-** Note **:
-Proper use of inheritance can simplify the code and reduce the complexity of CSS styles. For example, there are many children who need a certain style. You can assign one to the parent. These children will inherit it.
-Child elements can inherit the style of the parent element (** text-, font-, line- These elements can be inherited at the beginning, and the color attribute **)
`` `
CSS inheritance formula: Longshenglong, Fengshengfeng, mouse Born children will make holes.
`` `
<img src =" media / shu.gif "/>
## 5.3 CSS priority (emphasis)
<img src =" media / 22% E4% BC% 98% E5% 85% 88% E7% BA% A7.png ">-Concept
: When
defining CSS styles, it is often the case that two or more rules are applied to the same element. At this time,
* selectors are the same, then execution is cascading
* selectors are different, and priority will appear problem.
#### 1). Weight calculation formula
About CSS weights, we need a set of calculation formulas to calculate, this is CSS Specificity (speciality)
| tag selector | calculation weight formula |
| -------- -------------- | ------------ |
| Inheritance or * | 0,0,0,0 |
| Each element (tag selector) | 0,0,0,1 |
| Each class, pseudo-class | 0,0,1,0 |
| Each ID | 0,1,0,0 | | Each
inline style style = "" | 1, 0,0,0 |
| Each! Important is important | ∞ infinity |
-The value is from left to right, the largest on the left, one level is greater than one level, there is no base between the digits, and the levels cannot be exceeded.
-About CSS weights, we need a set of calculation formulas to calculate, this is CSS Specificity (speciality)
-div {
color: pink! Important;
}
#### 2). Weight overlap plus
we often use intersection selectors, offspring Selectors, etc., are composed of multiple basic selectors, then at this time, there will be overlapping weights.
Is a simple addition calculation
-div ul li ------> 0,0,0,3
-.nav ul li ------> 0,0,1,2
-a: hover -----—> 0,0,1,1
-.nav a ------> 0, 0,1,1
<img src = "media / w.jpg" /> Note:
1. There is no base between digits, for example: 0,0,0,5 + 0,0,0,5 = 0,0 , 0,10 instead of 0,0, 1, 0, so there will be no situation where 10 divs can catch up with a class selector.
#### 3).
It is not difficult to inherit the weight of 0 , but it is easy to ignore the halo if it is ignored. In fact, when we modify the style, we must see whether the label is selected.
1) If selected, the weight is calculated according to the above formula. Who listens to whom.
2) If it is not selected, then the weight is 0, because the inherited weight is 0.
# 6. CSS comments
** CSS annotation rules: **
`` `
/ * the content that needs to be annotated * / If you are annotating, you need to annotate Use "/ *" before the content to start the comment, and use "* /" at the end of the content to end the comment.
`` `
For example:
p {
/ * All fonts are 14 pixels in size * /
font-size: 14px;
}