Let's look at an example of a hierarchical attribute, as shown in the following code:
<title> fenji css </title>
<style type= "Text/css The >//* definition css*//
<!--
P{display:block;white-space:normal}
//* defines the display property as "block", meaning it is displayed in the new area; The White-space property
Normal makes the multiple whitespace fit into a *//
Em{display:inline}
//* The display property of the EM is "inline" for the purpose of not wrapping the text display under its control *//
L I{display:list-item;list-style:square}
//* defines the display property of Li as "List-item", which shows the inclusion of a symbol mark in the list item, and
The List-style property value is defined as square so that the list items are marked as squares *//
Img{display:block}//* define picture properties for block so that the picture opens in a new location *//
-->
</style >
<body>
<p><em>sample</em>text<em>sample</em> Text<em>sample</em>
Text<em>sample</em> text<em>sample</em></p>//* Define a piece of text *//
<ul>//* define list items *//<li>list-item 1</li>
<li>list-item 2</li> <li> List-item 3</li> </ul>
<p> alt= "invisible" ></p>//* define a picture *//
</body>
The previous code shows the following image:
We see that because the <p> attribute is defined as block, the text, list, and picture are opened in different places, the inline property makes the text do not wrap, and the List-style-type property value is square so that the symbol before the list item is square;
If we make some changes in the above code, we will show in another effect that we change the display property value of "EM" to block in
We see that the hierarchical properties can also achieve the layout of some of the functions, a few code changes can make a great change in the page. Try the other effects yourself!
I'll introduce you to the mouse properties in the next section.
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
