Scribd
Upload
13 views

CSS - Cascading Style Sheet: Three Ways To Insert CSS

Uploaded by

skylarzhang66
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

CSS - Cascading Style Sheet: Three Ways To Insert CSS

Uploaded by

skylarzhang66
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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