Getting Started with CSS

Last Update:2017-06-22 Source: Internet

Author: User

Tags border color dashed line repetition

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

1 Getting Started with CSS
1.1 Introduction
HTML: Responsible for the structure of the Web page
CSS: Responsible for the beauty of the Web page (style)
1.2 Experience

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>css Getting Started </title>
<style type= "Text/css" >
a{
font-size:24px;
Color: #0F0;
}
</style>

<body>
<a href= "xxxx" > Hyperlinks </a><br/>
<a href= "xxxx" > Hyperlinks </a><br/>
<a href= "xxxx" > Hyperlinks </a><br/>
<a href= "xxxx" > Hyperlinks </a><br/>
</body>

1.3 Definitions
CSS (cascading style Sheet cascading style sheet) for short, style.
Mainly responsible for the aesthetics of Web pages.
How to use 1.4 CSS
1) Inline style
Attention:
1) CSS control using the label's Style property, CSS written in the Style property value
2) Cons: Only control the style of one label
<a href= "xxxx" style= "Font-size:19px;color: #090" > Hyperlinks </a>

2) Internal style
Attention:
1) CSS control using style tags, CSS content written in style tag body
2) control the style of multiple labels at once
3) and HTML tags mixed together, not good maintenance. CSS content cannot be reused in multiple HTML pages
<style type= "Text/css" >
a{
font-size:24px;
Color: #0F0;
}
</style>

3) external style (recommended)
Attention:
1) Create a file with a separate suffix of CSS, CSS content written in the file
2) in the HTML page using CSS, import the external CSS file

<!--importing external CSS files
HREF: Represents the location of an external CSS file
Rel: Indicates that the association is a style sheet
-
<link href= "01.css" rel= "stylesheet"/>

2 CSS Syntax

a{
font-size:24px;
Color: #F00;
}

Selector (selector): Use the selector to select the label you want to add a style to.
CSS property: What style to add to the selected label. For example, font size, color, background .....
CSS value: Adds a specific value for the style. 12px, red, background picture ....

2.1 Selector
Tag Selector
Action: Select a label with the same name
div{
font-size:24px;
Color: #F00;
}
Attention:
1) Select to all labels with the same name

Class Selector
Role: Select the same label
/* Class Selector */
. c1{
font-size:24px;
Color: #F00;
}
Attention:
1) The selected label must have a class attribute. Similar labels use the same name
2) When a label is selected by both the tag selector and the class selector, the class selector takes precedence!!!
ID Selector
Role: Select a label
#d1 {
font-size:24px;
Color: #0F0;
}
Attention:
1) The selected label must have an id attribute.
2) in the same HTML page, it is recommended that you do not have two tags with the same id attribute, getElementById ("id attribute value") when using JavaScript code to select a label
3) The ID selector has the highest priority!

and set Selector
/* and set selector */
. C1, #d1 {
font-size:24px;
Color: #0F0;
}
Function: When the CSS content of multiple selectors is the same, you can use the union selector to merge CSS content.

Intersection Selector

/* Intersection Selector
The span tag inside the DIV
*/
. C1 span{
font-size:24px;
Color: #0F0;
}

Action: Select a sub-label in a selector.

Universal Selector

/* Universal Selector */
*{
font-size:24px;
Color: #0F0;
}
Select all the labels
Pseudo class Selector
Action: Controls the style of the label in different states.

There are four states of the label:
Link: status not visited
Hover: The state of the mouse over
Active: The state of mouse activation (pressed but not released)
Visited: A state that has been visited (mouse click and release)

/* Use active pseudo class control--mouse activated (pressed but not released) status */
a:active{
font-size:24px;
Color: #0F0;
Text-decoration:underline;
}

/* Note:
1) in the CSS definition, a:hover must be placed after A:link and a:visited to be valid.
2) in the CSS definition, a:active must be placed after a:hover, is the
and effective.

Correct order: Link visited hover active
*/
</style>

<body>
<a href= "01.css Getting Started. html" > Hyperlinks </a>
</body>

(Classroom practice) Case: Add background to each row of the table mouse

2.2 Common CSS properties and values
CSS text

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>css text </title>
<style type= "Text/css" >

body{
/*color: Color */
Color: #F00;
/* Character Spacing */
letter-spacing:10px;
/* Alignment Method */
Text-align:center;
/* Text modifier underline-underline, underline (Line-through) underline-overline not: none*/
Text-decoration:line-through;
/* Word spacing */
word-spacing:30px;
}
</style>

<body>
The weather is good today!
</body>

CSS Fonts
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>css Fonts </title>
<style type= "Text/css" >
body{
/* Font type
Note: The font type here is to read the system's default font library, try to use a generic font, if you set the font, the user's system is not, is to use the default Arial display.
*/
/*
font-family: "Song Body";
*/
/* Font Size */
/*
font-size:24px;
*/
/* Font style: positive (normal default) skew (italic) */
/*
Font-style:italic;
*/
/* Font thickness bold Bold */
/*
Font-weight:bold;
*/

/* Font: Shorthand property */
Font:italic bold 36px "Blackbody";
}
</style>

<body>
Hua Yu International
</body>

CSS Background
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>css background </title>
<style type= "Text/css" >

body{
/* Background color */
/*
Background-color: #0CF;
*/
/* Background picture */
/*
Background-image:url (.. /05.%e7%b4%a0%e6%9d%90/mm.jpg);
*/
/* Set whether the background picture repeats, or how to repeat
Not-repeat: No repetition
Repeat-x: X-Axis Repetition
Repeat-y: Repeat y-axis
Repeat:x and y-axis repetition (default)
*/
/*
Background-repeat:no-repeat;
*/
/* Set the starting position of the background */
/*
/* need to draw a detailed explanation */
Background-position:top Center;
*/
/* Shorthand Property */
Background: #3FF URL (... /05.%e7%b4%a0%e6%9d%90/mm.jpg) no-repeat top center;

}
</style>

CSS List
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
<meta http-equiv= "Content-type" Content= "text/html; Charset=utf-8 "/>
<title>css list </title>
<style type=" Text/css ";
ul{
/* List symbol type */
List-style-type:none;
/* Set Picture of list symbol */
List-style-image:url (.. /05.%e7%b4%a0%e6%9d%90/start.jpg);
}
</style>

<body>
System Menu
<ul>
<li> Student Management </li>
<li> Teacher Management </li>
<li> Course Management </li>
</ul>
</body>

CSS Tables

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>css Forms </title>
<style type= "Text/css" >
table{
/* Merge the borders of the table */
Border-collapse:collapse;
}

</style>

<body>
<table border= "1px" width= "400px" height= "200px" align= "Center" >
<CAPTION>2014 Annual Final Exam results list </caption>
<thead>
<tr>
<th> name </th>
<th> class </th>
<th> Results </th>
</tr>
</thead>
<tbody>
<tr>
<td> Dog Doll </td>
<td> Computer Class 1 </td>
<td>80</td>
</tr>
<tr>
<td> Dog left </td>
<td> Computer Class 2 </td>
<td>78</td>
</tr>
<tr>
<td> Dog Eggs </td>
<td> Software Class 1 </td>
<td>90</td>
</tr>
</tbody>
</table>
</body>

CSS Border

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
&LT;TITLE&GT;CSS Border </title>
<style type= "Text/css" >
div{
/* Border Color */
/* Shorthand Property
1) default setting direction property: Top Right bottom left
2) If the current direction does not set the color, then take the opposite color
*/
/*
Border-color: #F00;
*/
/*
Border-left-color: #F00;
Border-right-color: #0F0;
Border-top-color: #00F;
Border-bottom-color: #C90;
*/

/* Border Width */
/* Shorthand Property

*/
/*
border-width:10px;
*/
/*
border-left-width:10px;
border-right-width:20px;
border-top-width:30px;
border-bottom-width:40px;
*/

/* Border Style (note: The border is only displayed if the Border-style is added)
Solid: Solid Line
Dashed: Dashed line
Dotted: Dot
Double: two solid lines
*/

/* Shorthand Property */
/*
Border-style:solid;
*/

/*
Border-left-style:solid;
border-right-style:dashed;
border-top-style:dotted;
border-bottom-style:double;
*/

/* Shorthand properties for all border properties */
border:2px solid #F00;
}
</style>

<body>
<div>div1</div>
</body>

3 Box model
3.1 Definitions
Each label on an HTML page can be viewed as a box.

Explain the box model through requirements:
1. Turn the box's width height to twice times before
2. Change the box thickness to twice times the original
3. Contents inside the box 10px from top
4. Contents inside the box is 10px from the left inner edge
5. The box below is 10px from the box above (two ways)

Box-related properties:
Widths and heights (width and height): Determines the capacity of the box
Padding (padding): The distance between the box border and the content
FRAME (border): Thickness of box
Margin: The distance between the box and the box

4. CSS Positioning
Relative positioning: relative (relative to his previous position)
Absolute positioning: Abosolute (relative to the parent tag's location)
Fixed positioning: fixed (relative to the browser position, does not change position with scroll bar dragging)
div{
width:100px;
height:100px;
border:10px solid #999;}
#div1 {
Background-color: #006;
}
#div2 {
Background-color: #0C0;}
#div3 {
Background-color: #3F0;
/*position:relative;
top:10px;
left:10px;*/
/*
Position:absolute;
top:20px;
left:20px;*/
position:fixed;
top:200px;
left:450px;
}

Getting Started with JavaScript
5.1 Introduction
HTML: Responsible for Web page structure
CSS: Responsible for Web page aesthetics
JavaScript: Responsible for user interaction with the browser. (Experience verifying user name)
5.2 Javacript.
At 1994, Netscape developed the LiveScript language, the Navigator browser (the LiveScript language is implanted in the browser)
Microsoft's IE browser, then spent $2 billion to develop JScript

1995, Sun Company, launched jdk1.1. Talk about cooperation. livescript-"JavaScript

1998, US online acquisition of Netscape.

2003, directly off Netscape. Netscape 6.7 billion dollars. 20 million dollars to build a smart Fund (Firefox)

Syntax for SCIRPT:
1) Basic syntax (ECMA specification)
2) BOM programming (no unification)
3) DOM Programming (no unification)

Getting Started with CSS

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More