CSS
CSS - Cascading Style Sheet
Selector
* Selects all elements
a:hover Selects links on mouse over
. Select class
# Select id
Comments
/* This is a single-line comment */
<!-- These paragraphs will be red -->
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
Inline - by using the style attribute inside HTML elements
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
Internal - by using a <style> element in the <head> section
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
p{
color: red;
font-family: courier;
font-size: 160%;
</style>
</head>
External - by using a <link> element to link to an external CSS file
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
styles.css
body {
background-color: powderblue;
h1 {
color: blue;
p{
color: red;
The CSS border property defines a border around an HTML element.
p{
border: 2px solid powderblue;
padding: 30px;
p{
border: 2px solid powderblue;
margin: 50px;
}
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is
transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is
transparent
320px (width of content area)
+ 20px (left padding + right padding)
+ 10px (left border + right border)
= 350px (total width)
50px (height of content area)
+ 20px (top padding + bottom padding)
+ 10px (top border + bottom border)
= 80px (total height)
Use the HTML style attribute for inline styling
Use the HTML <style> element to define internal CSS
Use the HTML <link> element to refer to an external CSS file
Use the HTML <head> element to store <style> and <link>
elements
Use the CSS color property for text colors
Use the CSS font-family property for text fonts
Use the CSS font-size property for text sizes
Use the CSS border property for borders
Use the CSS padding property for space inside the border
Use the CSS margin property for space outside the border
Sytax
p{
color: red;
text-align: center;
p is a selector in CSS (it points to the HTML element you want to
style: <p>).
color is a property, and red is the property value
text-align is a property, and center is the property value
Selector
CSS selector:
1. element selector (p,h1,a)
p{
text-align: center;
color: red;
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
2. class selector （.）
.center {
text-align: center;
color: red;
}
p.center {
text-align: center;
color: red;
}
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
3. id selector (#)
id selector is used to select one unique element!
#para1 {
text-align: center;
color: red;
}
<p id="para1">Hello World!</p>
4. universal selector (*)
*{
text-align: center;
color: blue;
}
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the
style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
=
h1, h2, p {
text-align: center;
color: red;
}
CSS Comments
/* This is
a multi-line
comment */
<!-- These paragraphs will be red -->
CSS Backgrounds
In these chapters, you will learn about the following CSS background
properties:
background-color
body {
background-color: lightblue;
}
div {
background-color: green;
opacity: 0.3;
}
Opacity 透明度
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity
*/
}
background-image
body {
background-image: url("bgdesert.jpg");
}
background-repeat
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
background-attachment
The background-attachment property specifies whether the background
image should scroll or be fixed
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;/scroll;
}
background-position
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
background (shorthand property)
body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
body {
background: #ffffff url("img_tree.png") no-repeat right
top;
}
div {
background:white;
color: black;
padding: 15px;
margin: 60px auto 0px;
width: 600px;
font-family: "Raleway";
}
hr {
width: 80%;
border: 1px solid #C72A33;
margin-top: 15px;
}
CSS Border Style
The border-style property specifies what kind of border to display.
The following values are allowed:
dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the
border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color
value
inset - Defines a 3D inset border. The effect depends on the border-color
value
outset - Defines a 3D outset border. The effect depends on the border-color
value
none - Defines no border
hidden - Defines a hidden border
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
p.ex1 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thin;
}
p.ex2 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thin;
}
p.ex3 {
border: 2px solid black;
outline-style: outset;
outline-color: grey;
}
p.one {
border-style: solid;
border-width: 5px;
}
p.one {
border-style: solid;
border-color: red;
}
p{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
border-width
border-style (required)
border-color
p{
border: 5px solid red;
}
p{
border: 2px solid red;
border-radius: 5px; 圆角
}
CSS Margin
p{
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
p{
margin: 25px 50px 75px 100px;
}
CSS Padding
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
CSS Height, Width and Max-width
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
CSS Color
body {
background-color: lightgrey;
color: blue;
}
h1 {
background-color: black;
color: white;
}
div {
background-color: blue;
color: white;
}
CSS Text
Align
img.a {
vertical-align: baseline;
}
img.b {
vertical-align: text-top;
}
img.c {
vertical-align: text-bottom;
}
img.d {
vertical-align: sub;
}
img.e {
vertical-align: super;
}
Decoration
h1 {
text-decoration-line: overline;
}
h2 {
text-decoration-line: line-through;
}
h3 {
text-decoration-line: underline;
}
p{
text-decoration-line: overline underline;
}
Transformation
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
Spacing
p{
text-indent: 50px; first-line space
}
h1 {
letter-spacing: 5px; spaces between letters
}
h2 {
letter-spacing: -2px;
}
Shadow
Then, add a blur 模糊 effect (5px) to the shadow
h1 {
text-shadow: 2px 2px 5px red;
}
Font Families
.p1 {
font-family: "Times New Roman";
}
Styles
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
Size
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p{
font-size: 14px;
}
Google font
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>
CSS Links
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
CSS List
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
Img
ul {
list-style-image: url('sqpurple.gif');
}
CSS Table
table, th, td {
border: 1px solid;
}
table {
width: 100%;
}
th {
height: 70px;
}
td {
text-align: center;
}
th, td {
padding: 15px;
text-align: left;
}
th, td {
border-bottom: 1px solid #ddd;
}
tr:hover {background-color: coral;}
odd：
tr:nth-child(even) {background-color: #f2f2f2;}
th {
background-color: #04AA6D;
color: white;
}
CSS Display
Examples of block-level elements:
<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>
Examples of inline elements:
<span>
<a>
<img>
