以下内容均来自MDN，仅作为笔记参考使用：
https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals
Nested statements are a specific subset of at-rule, the syntax of which is a nested block of CSS rules that will only be applied to the document if a specific condition is matched:
- The
@mediaat-rule content is applied only if the device which runs the browser matches the expressed condition; - the
@supportsat-rule content is applied only if the browser actually supports the tested feature; - the
@documentat-rule content is applied only if the current page matches some conditions.
dot used to be followed by a class name
hash(#) used to be followed by an id
The universal selector (*) is the ultimate joker. It allows selecting all elements in a page.
Presence and value attribute selectors
These attribute selectors try to match an exact attribute value:
[attr]: This selector will select all elements with the attributeattr, whatever its value.[attr=val]: This selector will select all elements with the attributeattr, but only if its value isval.[attr~=val]: This selector will select all elements with the attributeattr, but only if the valuevalis one of a space-separated list of values contained inattr‘s value, for example a single class in a space-separated list of classes.
Substring value attribute selectors
[attr|=val]: This selector will select all elements with the attributeattrfor which the value is exactlyvalor starts withval-(careful, the dash here isn‘t a mistake, this is to handle language codes.)[attr^=val]: This selector will select all elements with the attributeattrfor which the value starts withval.[attr$=val]: This selector will select all elements with the attributeattrfor which the value ends withval.[attr*=val]: This selector will select all elements with the attributeattrfor which the value contains the stringval(unlike[attr~=val], this selector doesn‘t treat spaces as value separators but as part of the attribute value.)
需要理解
| Combinators | Select |
|---|---|
| AB | Any element matching both A and B at the same time. |
| A B | Any element matching B that is a descendant of an element matching A (that is: a child, or a child of a child, etc.) |
| A > B | Any element matching B that is a direct child of an element matching A. |
| A + B | Any element matching B that is the next sibling of an element matching A (that is: the next child of the same parent.) |
| A ~ B | Any element matching B that is among the next sibling of an element matching A (that is: one of the next children of the same parent.) |
element selectors have low specificity. Class selectors have a higher specificity, so will win against element selectors. ID selectors have an even higher specificity, so will win against class selectors. The only way to win against an ID selector is to use !important.
In CSS, there is a special piece of syntax you can use to make sure that a certain rule will win over all others: !important. Adding this to the end of a property value will give it superpowers.
But really, don‘t use it if you can avoid it. Because !important changes the way the cascade normally works, it can make debugging CSS problems really hard to work out, especially in a large stylesheet.
px: pixel size
em: ?em = ?*parent element size, i.e. font-size of <p> is 10px, then the <span> with the font-size of 1.4em will be 14px.
rem: ?rem = ?*root element size, i.e. font-size of <html> is 10px, then the <li> or <span> inside the <html> tags whose font-size is 1.4em will be 14px, no matter the size of its parent element.
font-style: Used to turn italic text on and off. Possible values are as follows (you‘ll rarely use this, unless you want to turn some italic styling off for some reason):-
normal: Sets text to normal font (turns existing italics off.)italic: Sets text to use the italic version of the font if available; if not available, it will simulate italics with oblique instead.oblique: Sets text to use a simulated version of an italic font, created by slanting the normal version.
font-weight: Sets how bold the text is. This has many available values available in case you have many font variants available (such as -light, -normal, -bold, -extrabold, -black, etc.), but realistically you‘ll rarely use any of them except fornormalandbold:-
normal,bold: Normal and bold font weightlighter,bolder: Sets the current element‘s boldness to be one step lighter or heavier than its parent element‘s boldness.100–900: Numeric boldness values that provide finer grained control than the above keywords, if needed.
text-transform: Allows you to set your font to be transformed. Values include:-
none: Prevents any transformation.uppercase: Transforms ALL TEXT TO CAPITALS.lowercase: Transforms all text to lower case.capitalize: Transforms all words to Have The First Letter Capitalized.full-width: Transforms all glyphs to be written inside a fixed-width square, similar to a monospace font, allowing aligning of e.g. latin characters along with asian language glyphs (like Chinese, Japanese, Korean.)
text-decoration: Sets/unsets text decorations on fonts (you‘ll mainly use this to unset the default underline on links when styling them.) Available values are:-
none: Unsets any text decorations already present.underline: Underlines the text.overline: Gives the text an overline.line-through: Puts a strikethrough over the text.
-
text-shadow: 4px 4px 5px red;- The horizontal offset of the shadow from the original text — this can take most available CSS length and size units, but you‘ll most comonly use px. This value has to be included.
- The vertical offset of the shadow from the original text; behaves basically just like the horizontal offset, except that it moves the shadow up/down, not left/right. This value has to be included.
- The blur radius — a higher value means the shadow is dispersed more widely. If this value is not included, it defaults to 0, which means no blur. This can take most available CSS length and size units.
- The base color of the shadow, which can take any CSS color unit. If not included, it defaults to
black.
The
text-alignproperty is used to control how text is aligned within its containing content box. The available values are as follows, and work in pretty much the same way as they do in a regular word processor application:left: Left justifies the text.right: Right justifies the text.center: Centers the text.
The
line-heightproperty sets the height of each line of text — this can take most length and size units, but can also take a unitless value, which acts as a multiplier and is generally considered the best option — thefont-sizeis multiplied to get theline-height.The
letter-spacingandword-spacingproperties allow you to set the spacing between letters and words in your text. You won‘t use these very often, but might find use for them to get a certain look, or to improve the legibility of a particularly dense font. They can take most length and size units.Many font properties can also be set through the shorthand property
font. These are written in the following order:font-style,font-variant,font-weight,font-stretch,font-size,line-height, andfont-family.list-style-type: Sets the type of bullets to use for the list, for example square or circle bullets for an unordered list, or numbers, letters or roman numerals for an ordered list.list-style-position: Sets whether the bullets appear inside the list items, or outside them before the start of each item.ol { list-style-type: upper-roman; list-style-position: inside;//outside }list-style-image: Allows you to use a custom image for the bullet, rather than a simple square or circle.ul { list-style-image: url(star.svg); }The
startattribute allows you to start the list counting from a number other than 1.The
reversedattribute will start the list counting down instead of up.<ol start=“4" reversed> <li>Toast pitta, leave to cool, then slice down the edge.</li> <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> <li>Wash and chop the salad.</li> <li>Fill pitta with salad, humous, and fried halloumi.</li> </ol>The
valueattribute allows you to set your list items to specific numerical values.<ol> <li value="2">Toast pitta, leave to cool, then slice down the edge.</li> <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> <li value="6">Wash and chop the salad.</li> <li value="8">Fill pitta with salad, humous, and fried halloumi.</li> </ol>- Link (unvisited): The default state that a link resides in, when it isn‘t in any other state. This can be specifically styled using the
:linkpseudo class. - Visited: A link when it has already been visited (exists in the browser‘s history), styled using the
:visitedpseudo class. - Hover: A link when it is being hovered over by a user‘s mouse pointer, styled using the
:hoverpseudo class. - Focus: A link when it has been focused (for example moved to by a keyboard user using the Tab key or similar, or programmatically focused using
HTMLElement.focus()) — this is styled using the:focuspseudo class. - Active: A link when it is being activated (e.g. clicked on), styled using the
:activepseudo class.
a { } a:link { } a:visited { } a:focus { } a:hover { } a:active { }顺序很重要： lvfha
<div class="one"></div> <div class="two"></div>html { font-family: sans-serif; background: #ccc; } .one, .two { background: red; width: 300px; height: 150px; padding: 20px; border: 10px solid black; margin: 20px auto; } .two { box-sizing: border-box; }var one = document.querySelector(‘.one‘); var two = document.querySelector(‘.two‘); function outputWH(box) { var width = box.offsetWidth; var height = box.offsetHeight; box.textContent = ‘Width: ‘ + width + ‘px, Height: ‘ + height + ‘px.‘ } outputWH(one); outputWH(two);当你想生成一个border-box的时候（换言之，想生成一个以border作为box外边界、而非content的box的时候——所给他设置的padding和border被包含在box内部）https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_boxes/Box_model_recap