Scribd
Upload
7 views

CSS - Cascading Style Sheet: Three Ways To Insert CSS

Uploaded by

skylarzhang66
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

CSS - Cascading Style Sheet: Three Ways To Insert CSS

Uploaded by

skylarzhang66
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 18

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>

You might also like