CSS tips
/****************
Media Query
****************/
@media screen and (min-width: 480px) {
body {
background: navy;
}
}
@media screen and (min-width: 660px) {
body {
background: darkgreen;
}
}
/****************
Child select
****************/
li:nth-child(4n) {
clear: left;
};
/Apply every four child/
/****************
Validation check
****************/
Markup Validation Service: http://validator.w3.org/
CSS Validation Service: http://jigsaw.w3.org/css-validator/;
/****************
CSS Basics
****************/
in HTML file
in CSS file
@import “import-styles.css”; //the path of css file in the quotos
/****************
Text Styles
****************/
text-align
/the horizontal alignment of text./
text-transform
/the case of text – uppercase, lowercase, or capitalized./
text-decoration
/Sets the line decoration of elements./
font-weight
/Sets how thick or thin the characters are displayed./
/****************
Box-sizing
****************/
/* Things are like this:
when you define border the box will be extended.
However, you can set box-sizing to frizen the box width and height. */
box-sizing: border-box;
/****************
Max-width
****************/
limit the max width of the content
/****************
Background
****************/
background-color:
/just to prevent some cases/
background-image: url(‘’);
background-size: cover; /this is real important!/
background-repeat: no-repeat;
background-position: center;
/in a sentence/
background:
/****************
Float
****************/
/* (.a & .b) in .c*/
the browser will not count a and b in c, sometimes the menthod below
can solve the problem. However, sometimes we may need the second methods.
.c {
overflow: auto;
}
.a {
float: left;
}
.b {
float: right;
}
/– Float Clearfix –/
.group:after {
content: “”;
display: table;
clear: both;
}
/****************
Lists
****************/
ul, ol {
list-style-position: inside;
}
/****************
Text Shadows
****************/
text-shadow: 5px 8px 10px #222;
The first value sets the horizontal offset of the shadow. The second value sets the vertical offset. The third is an optional value that sets the blur radius of the shadow. The fourth value is the color value.
可以多层叠加，依次往下，separated by a comma(,).
/****************
Box Shadows
****************/
.wildlife {
box-shadow: (inset) 15px 15px 10px 20px rgba(0, 0, 0, .8);
}
The first value sets the horizontal offset of the shadow. The second value sets the vertical offset. The last value sets the color of the box shadow.
The optional third value defines the blur radius in a box shadow. The optional fourth value defines the spread distance of a box shadow.
The key word ‘inset’ to create an inner shadow.
Multiple values separated by a comma(,).
/****************
Border Radius
****************/
.box {
border-radius: 50px 10px 50px 10px;
}
+border top get Amazing!!
border-radius: 100% 0;
get Leaf result;
/****************
CSS gradients
****************/
background-image: linear-gradient(position, value1 x%, value2 x%, …)
radial-gradient(position, value1, value2, …)
Add depth to our designs by creating smooth and gradual transitions between two or more colors.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients#Linear_gradients-Color_stops
/****************
CSS gradients
****************/
background: linear-gradient(#ffa949, transparent 90%),
linear-gradient(0deg, #fff, transparent),
#ffa949 url(‘../img’) …
/****************
@font-face
****************/
/****************
letter-spacing
****************/
