1 CSS Introduction
1.1 Introduction
html: responsible for the structure of web pages
css: responsible for the beauty (style) of web pages
1.2 Experience
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css Introduction</title>
<style type="text/css">
a{
font-size:24px;
color:#0F0;
}
</style>
</head>
<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>
</html>1.3 Definition
CSS (Cascading Style Sheet Cascade Style Sheet) is short for style.
Mainly responsible for the beauty of web pages.
1.4 css usage
1) In-line Style
Be careful:
1) Use the style attribute of the label to control the css. The CSS is written in the style attribute value.
2) Disadvantage: only one label style can be controlled
Hyperlinks
2) Internal Style
Be careful:
1) Use the style tag to control the css. The content of the CSS is written in the style tag body.
2) Control the style of multiple tags at a time
3) Mixed with html tags, it is not easy to maintain. css content cannot be reused in multiple html pages
<style type="text/css">
a{
font-size:24px;
color:#0F0;
}
</style>3) External Style (Recommended)
Be careful:
1) Create a file with independent suffix css, in which the content of CSS is written
2) Import external css files in html pages using css
<! - Import external css files
href: Represents the location of an external css file
rel: Represents the associated style sheet
-->
<link href="01.css" rel="stylesheet"/>2 CSS grammar
a{
font-size:24px;
color:#F00;
}
Selector: Use the selector to select the label that needs to be added to the style.
CSS property: What style to add to the selected tag? For example, font size, color, background...
CSS value: Adding the specific value of the style. 12px, red, background picture...
2.1 selector
tag chooser
Function: Select labels with the same name
div{
font-size:24px;
color:#F00;
}
Be careful:
1) Select all tags with the same name
Class selector
Function: Select similar labels
/* Class selector*/
.c1{
font-size:24px;
color:#F00;
}
Be careful:
1) The selected label must have class attributes. Similar labels use the same name
2) When a label is selected by both label selector and class selector, then class selector takes precedence!!!
id selector
Function: Select a label
#d1{
font-size:24px;
color:#0F0;
}
Be careful:
1) The selected label must have an id attribute.
2) In the same html page, it is recommended not to have two tags with the same ID attribute. When using javascript code to select tags later, getElementById("id attribute value")
3) id selector has the highest priority!
Union selector
/* union selector*/
.c1,#d1{
font-size:24px;
color:#0F0;
}
Function: When the css content of multiple selectors is the same, the merge selector can be used to merge the css content.
Intersection selector
/* intersection selector
span tag in div
*/
.c1 span{
font-size:24px;
color:#0F0;
}
Function: Select sublabels in a selector.
universal selector
/* Universal selector*/
*{
font-size:24px;
color:#0F0;
}
Function; Select all labels
Pseudo-class selector
Function: Control the style of labels in different states.
Labels have four states:
link: State not accessed
hover: The state of the mouse passing through
active: The state of mouse activation (pressed but not released)
visited: The state that has been accessed (click and release)
<style type="text/css">
/*Using link pseudo class control -- states that have not been accessed*/
a:link{
font-size:24px;
color:#F00;
}
/*Use visited pseudo class control -- the state that has been accessed (click and release)*/
a:visited{
font-size:24px;
color:#CCC;
text-decoration:none;
}
/*Using hover Pseudo Class to Control the Mouse's Passing State*/
a:hover{
font-size:24px;
color:#00F;
text-decoration:none;
}
/*Use active Pseudo-Class Control -- The State of Mouse Activation (Pressed but Not Loosened)*/
a:active{
font-size:24px;
color:#0F0;
text-decoration:underline;
}
/*Be careful:
1)In the definition of CSS, a:hover must be placed after a:link and a:visited before it is valid.
2)In the definition of CSS, a: activity must be placed after a:hover in order to be valid.
Correct order: link visited hover active
*/
</style>
</head>
<body>
<a href="01.css Introduction.html">Hyperlinks</a>
</body>
</html>
(Classroom Exercise) Case: Add background to each line of the form
2.2 Common CSS attributes and values
CSS Text
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css text</title>
<style type="text/css">
body{
/*color: colour*/
color:#F00;
/*Character spacing*/
letter-spacing:10px;
/*align*/
text-align:center;
/*Text modification underline, line-through underline - overline does not:none*/
text-decoration:line-through;
/*Word spacing*/
word-spacing:30px;
}
</style>
</head>
<body>
//It's a nice day today!
</body>
</html>CSS font
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css Typeface</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 generic fonts, if you set the font, the user's system does not have, is to use the default Song display.
*/
/*
font-family:"Song Style;
*/
/*font size*/
/*
font-size:24px;
*/
/*Font Style: normal Default Italic*/
/*
font-style:italic;
*/
/*Bold bold bold bold bold bold bold bold bold bold bold bold bold bold bold bold bold bold bold bold bold bold bold bold bold bold bold bold bold*/
/*
font-weight:bold;
*/
/* font: Abbreviation attributes */
font:italic bold 36px "Blackbody";
}
</style>
</head>
<body>
//Huayu International
</body>
</html>CSS Background
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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 or how the background image repeats
not-repeat: No repetition
repeat-x: x Axis Repetition
repeat-y: y Axis Repetition
repeat: x Repeat with y axis (default)
*/
/*
background-repeat:no-repeat;
*/
/*Set the starting position of the background*/
/*
/*Detailed explanations of drawings are required.*/
background-position:top center;
*/
/*Abbreviation attributes*/
background:#3FF url(../05.%E7%B4%A0%E6%9D%90/mm.jpg) no-repeat top center;
}
</style>
</head>
<body>
</body>
</html>
CSS List
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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;
/*Pictures with list symbols*/
list-style-image:url(../05.%E7%B4%A0%E6%9D%90/start.jpg);
}
</style>
</head>
<body>system menu
<ul>
<li>Student Management</li>
<li>Teacher management</li>
<li>course management</li>
</ul>
</body>
</html>
CSS tables
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css form</title>
<style type="text/css">
table{
/*Boxes for merging tables*/
border-collapse:collapse;
}
</style>
</head>
<body>
<table border="1px" width="400px" height="200px" align="center">
<caption>2014 Final Examination Report Card</caption>
<thead>
<tr>
<th>Full name</th>
<th>class</th>
<th>achievement</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dog baby</td>
<td>Computer Class 1</td>
<td>80</td>
</tr>
<tr>
<td>godson</td>
<td>Computer Class 2</td>
<td>78</td>
</tr>
<tr>
<td>son of a bitch</td>
<td>Software Class 1</td>
<td>90</td>
</tr>
</tbody>
</table>
</body>
</html>CSS border
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css Frame</title>
<style type="text/css">
div{
/*Border color*/
/*Abbreviation attributes
1) Default Setting Direction Properties: Upper Right and Lower Left
2)If no color is set in the current direction, 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*/
/*Abbreviation attributes
*/
/*
border-width:10px;
*/
/*
border-left-width:10px;
border-right-width:20px;
border-top-width:30px;
border-bottom-width:40px;
*/
/*Border Style (Note: Borders are displayed only with border-style added)
solid: single vertical real line
dashed:Dotted line
dotted: spot
double: Double solid line
*/
/*Abbreviation attributes*/
/*
border-style:solid;
*/
/*
border-left-style:solid;
border-right-style:dashed;
border-top-style:dotted;
border-bottom-style:double;
*/
/*Short attributes for all border attributes*/
border:2px solid #F00;
}
</style>
</head>
<body>
<div>div1</div>
</body>
</html>3-box model
3.1 Definition
You can think of each tag on an html page as a box.
Explain the box model through requirements:
1. Make the box twice as wide as before.
2. Double the thickness of the box
3. The contents of the box are 10px from the top.
4. The contents of the box are 10px from the left inside.
5. The box below is 10px from the box above.
Box-related attributes:
width and height: Determine the capacity of the box
padding: The distance between the box border and the content
border: The thickness of the box
margin: The distance between the box and the box
- CSS Location (Picture Interpretation)
Relative positioning: relative (relative to your previous position)
Absolute positioning: abosolute (relative to the parent tag)
Fixed positioning: fixed (relative to the browser position fixed, not with the scroll bar drag and position change)
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;
}- Job: Design a qq q login page with div+css, draw the requirement and complete the code
The code is as follows:
You have to change the location of the picture.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled document</title>
<style type="text/css">
div{
width: 400px;
height: 400px;
border-6px solid #900;
position:fixed;
left:500px;
top:200px;
width:10px;
height:60px;
border:2px solid #900;
}
div{
width: 320px;
height: 300px;
border-1px solid #900;
position:fixed;
left:500px;
top:220px;
text-align: center;
background-image: url(C:\\Users\\hunter\\Desktop\\javaweb\\The first02Sky Code+data\\css data\\05.Source material\\1.jpg);
background-repeat: no-repeat;
background-position: top center;
}
#d1
{
background-image: url(C:\\Users\\hunter\\Desktop\\javaweb\\The first02Sky Code+data\\css data\\05.Source material\\head.png);
}
#d2
{
background-image: url(C:\\Users\\hunter\\Desktop\\javaweb\\The first02Sky Code+data\\css data\\05.Source material\\key.jpg);
}
.type1{
padding-left:30px;
background-repeat: no-repeat;
}
#d3{
margin-right:20px;
}
</style>
</head>
<body>
<div >
<br ><br ><br ><br ><br >
//User name:<input type="username" name="username" id="d1" class="type1" ><br >
<br>
//Password: & nbsp; & nbsp; & nbsp; & nbsp;<input type="password" name="password" id="d2" class="type1"><br>
<br>
<input type="button" value="Sign in" id="d3">
<input type="submit" value="register" id="d4"></div>
</body>
</html>
