CSS
Last updated
Last updated
Visual guide to CSS:
中文文案排版指北:
html
css
viewport <meta name="viewport" content="width=device-width">
Prefer class over id: id is only faster when id is the key selector, it's slower when #home a
, because browser read from right to left so #home a
is read as finding all a
then pick #home
.
div p
win p
same style, last one win
you give every ID selector (“#whatever”) a value of 100, every class selector (“.whatever”) a value of 10 and every HTML selector (“whatever”) a value of 1. Then you add them all up and hey presto, you have the specificity value
descendant selector
#id-name h2 { } /* it means select h2 under the id 'id-name' */
by default, it selects all nested chilren no matter how deep they are.
to select the direct child: #id-name > h2
select sibling using '+'
the pattern of the selector: context + element + pseudo-class/elements
pseudo-class :hover
Style for specific state: a:link { color: green; }, :hover, :visited
Style for specific position: p:nth-child(2n) { color: green; }
pseudo-elements ::before
Style for certain parts of a element. It's applied to content.
Input elements have no content, that's why ::before is not applied.
strong
vs em
vs b
em
emphasis
strong
added importance
b
(style only)
dl
dd
List: the only element we can place as a direct child of the <ul>
and <ol>
elements is the <li>
element
audio
figure
+figcaption
mark
for highlight
<progress value="70" max="100">70 %</progress>
px
(old IE doesn't support it!)
%
(relative to the parent element)
em
(scaling to the parent element) or keywords (small/medium etc.)
rem
(scaling relative to the root elment 'html')
to use it properly: (so it can be really easy to adjust whole font by just changing the base font)
choose a keyword for body to define the whole page size as a basement.
use em or %
use rem
line-height
: it can use number only to specify the size to its own size.
text-decoration: no need to use ,
for multiple value: text-decoration: underline line-through;
DO NOT USE Background shortcut: background-color
, background-image
, background-position
and background-repeat
as you might override
Linear gradient is background-image
By default it's inline element
display: none
: means the browser will render the page as the element doesn't exist.
visibility: hidden
: means it renders as it's there but not visible, like invisibe cloak.
opacity:0
: Similar to visibility: hidden
but when focus on it, iOS will show keyboard. The other two won't.
display:block
will stretch the element to left/right as far as possible.
width
: browser will create scrollbar if viewport is smaller, in this case, use max-width instead of width.
Order matters! The last one takes precedence, overriding anyone specified before:
Shortcuts:
Use margin to separate the block from things outside it.
Use padding to move the contents away from the edges of the block.
When styling typography and arbitrary sequences of paragraphs, headings and lists it's almost always better to space the elements with margins because of the adjacent margin collapsing behaviour.
By default, Box model is box-sizing: content-box
, means the width specifies the the content only, not including padding and border.
So if you have width: 100%
and padding, the item will display out of the container.
If you want the width to be the real width of the box, use box-sizing: border-box;
By default, it's
vertical-align
CSS property specifies the vertical alignment of an inline or table-cell box.
text-align
: it will align all inline content inside a block element.
try to avoid id in css
remove units for 0
When using vendor prefixes we need to make sure to place an unprefixed version of our property and value last, after any prefixed versions.
To check:
因此,我们在写动画的时候因该规避这些属性:width, height, margin, padding, border, display, top, right, bottom ,left, position, float, overflow等。 不会出发重新布局的属性有:transform(其中的translate, rotate, scale), color, background等。 所以,我们平时在写css动画时,应该优先使用不触发重新布局的属性,这样可以使我们所展示动画效果的更加流畅。
what's semantic css: code what you mean, think about the structure. if it's important, put it as H1.
use less can solve the problem.
other css framework: blueprint, 960.
You need to set it to the object in Javascript or using inline style
element.style is just a conversion of the element's style attribute into a scriptable object. If you haven't set any inline style on the element, you won't get anything back.
document.getElementById("convert").style.display = "block"
or <a style="display: block;"></a>
<ruby>
and <rt>
for 中文注音:
You can live editing CSS by using <style contenteditable>
:
Read:
Margin collapse on vertical:
read last comment from: