Home > Developer > Web Develop
margin:0 Auto/* Allows the box to be centered */
1. Writing methods of three style sheets
(1) Inline notation
Features: Styles only work on the current file, without really implementing the structural representation separation.
<style type= "Text/css" >
Style sheet notation
</style>
(2) Outer chain style
Features: The scope is the current site, who call who takes effect, a wide range, truly realize the separation of structural performance.
<link rel= "stylesheet" href= "1.css" >
(3) Inline style sheet
Features: The scope is limited to the current label, the range is small, the structure of the performance mixed together. (generally not used)
<p style= "font-weight:700; color:red; " > Youth is a grand banquet, it asked us to dress up, but in the end let us spend makeup, wet clothes, red eyes. </p>
2, the label classification of the respective display mode
(1) block element
Typical representative: Div, H1-h6, P, UL, Li
Features:
"1" exclusive line,
"2" can be set wide height;
div{
width:200px;
height:300px;< br> Backgroud-color:green;
}
"3" nested (inclusive), the child block element width (not defined) and the parent block element width default consistent.
<!doctype html>
<meta charset= "UTF-8";
<title >document</title>
/* style sheet written to head */
<style type= "Text/css";
. box{
width:200px;
height:300px;
Backgroud-color:green;
}
/* with no width defined, the default is the same width as the parent element */
. Box p{
height:100px
Color:yellow;
backgroud-color:red;
}
</style>
<body>
<div class= "box";
<p> if I was born drunk, I might forget all the sadness , so we kill this last cup, there is a word we can never say, who has a exquisitely carved heart, he will know, when the heart broken. </p>
</div>
</body>
(2) Inline elements:
Typical representatives: Span, a, strong, EM, del, INS ...
Characteristics:
"1" is displayed on one line;
<span> I ask Xi, see this beloved. </span><strong> Everlasting Sometimes, for no time. </strong><em> in heaven willing to make lovebirds, in the land is willing to sprigs. </em>
"2" is the width of the open content, can not directly define the width of the high, even if the outer layer is a block element containing inline elements, also cannot directly define the width of the height.
/* The following statement directly defines the center of the wide height is invalid */
<div><span> If love is just passing by, why come to this tour. </span></div>
(3) inline block elements are also called inline elements
Typical representative: Input, img
Characteristics:
"1" is displayed on one line;
"2" To set the width of the height.
3. Conversion between elements
(1) block elements converted to inline elements: display:inline;
Note: The width height cannot be defined directly after conversion.
<style type= "Text/css" >
div,p{
Display:inline;
}
</style>
<body>
<div> Walk the same street and go back to the two worlds. </div>
<p> Happiness is always full of flaws. </p>
</body>
(2) in-line conversion to block elements: display:block;
<style type= "Text/css" >
div,p{
Display:block;
}
</style>
<body>
<div> did not meet at first, and finally not Joseph. </div>
<p> hear a name, think of something, the city is quiet and makes people tremble. </p>
</body>
(3) block and inline elements are simultaneously transformed into inline block elements (emphasis): Display:inline-block;
<style type= "Text/css" >
/* After converting to inline block elements, you can define the width higher attribute at the same time */
div,p,span,strong{
Display:inline-block;
width:200px;
height:200px;
background-color:red;
}
</style>
<body>
<div> Wait, is the most humble noun in the world. </div>
<p> we can see the prosperous, but can't touch the memory .</p>
<span> the time to insist, but let go of your hand. </span>
<strong> who pale up my waiting, ironically my obsession. </strong>
</body>
CSS Basics (2) Three style sheets, transformations between blocks, inline, and inline block elements
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
