Home > Developer > Web Develop
<!--the files that must be introduced--
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<!--introduce my.css file--
<link href= ' my.css ' type = ' text/css ' rel= ' stylesheet '/>
<body>
<!--pointing style1-->
<div class= ' Style1 ' >
<table>
<tr><td>1</td><td2></td><td>3</td><td>4</td><td>5 </td></tr>
<tr><td>1</td><td2></td><td>3</td><td>4</td><td>5 </td></tr>
<tr><td>1</td><td2></td><td>3</td><td>4</td><td>5 </td></tr>
<tr><td>1</td><td2></td><td>3</td><td>4</td><td>5 </td></tr>
<tr><td>1</td><td2></td><td>3</td><td>4</td><td>5 </td></tr>
</table>
</div>
</body>
CSS file/* Selector */
/*margin: Upper right lower left */
. style1{
width:100px;
height:200px;
border:1px solid red;
Color:blue;
margin:100px 200px 300px 400px;
}
/* Parent-Child selector table*/
. Style1 table{
width:99px;
height:180px;
BORDER:1PX solid black;
}
/* Parent-Child selector td*/
. style1 Table td{
BORDER:1PX solid black;
Text-align:center;
}
The necessity of CSSUse <span> and powerful tools
Using the IDE (integrated development environment) Myeclicpse
Because MyEclipse comes with a hint function
General Website Header file interpretation
Eclipse's shortcut key settings (content Assitant), configure it to ~
In windows–prefrecnse-input key-input content-content assitant– shortcut key change to ·
Explanation of the new HTML file
Use the span format to see a general format for using CSS
< element name style = "Property Name: Property value; Property Name: Property value;" >
An element can be any of the HTML
Property names and property values refer to the W3cschool documentation
Run:
Then use CSS to unify the style
CSS categories: internal CSS, external CSS
Using internal CSS
Wenchuan all pictures and text in black and white when the big earthquake-----------------filter Technology
CSS Selectorid> class selector >html Selector Selector
Class 1 SelectorWrite a CSS file, introduce CSS in HTML, use CSS-defined class controllers
Can be dragged directly into CSS
2 ID SelectorNote: Yes #
3 HTML SelectorsThis is the control of the global style of the selector, priority is lower, priority is:id> class selector >html selector
Practice:
For hyperlink handling:
Wildcard Selector
Function: Used to solve the problem that the left margin and top margin of different browsers are not uniform, sometimes especially useful
/* Use a wildcard selector to clear the margins and padding by 0 */
*{
/*margin:0px;*/
/* margin:10px 0px 0px 10px; */* Represents the upper right lower left counterclockwise direction */
Margin:10px 0px 0px ; /* represents the upper or lower * *
padding: 0px;
}
CSS Integrated Usedifferent formatting styles within a line of characters using ID Selector Selector
#style2 {
Font-size: 50px;
Color: green;
Font-style: Italic;
}
/* Parent/Child Selector */
#style2 span {
Color: red;
Font-size: 60px;
}
2 Parent-child selectors can be used in both the ID selector and the class selector
But the ID selector is larger than the class selector
3 The parent-child selector can also appear multilayer Style2-span-span
#style2 span span {
Color: red;
Font-size: 60px;
}
41 elements can have only one ID selector, but can have multiple class selectors
When there are two class selectors, see who writes behind the CSS file who is the main
priority for Class four selectors: ID class HTML wildcard characters
Then, optimize the Code section to extract the common CSS
For example
Exercises
CSS file code
Block elements and inline elementsInline elements: Span element: How big is the inside of the content, only the width of the contents, the default will not wrap, generally put text or other inline elements
Block elements: div,p elements: No matter how much content, to wrap, and occupy the entire line (too overbearing), you can put text, industry elements, block elements
block element and inline element interchange
Display:block element to block elements in line
Display:inline elements in a change-of-block element
DIV+CSS Foundation
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
