CSS2.0 summary
CSS refers to cascading style sheets
CSS style
css background
1, background-iamge:url("add picture address");
2, background-repeat:repeat; (representing repeat-X and repeat-Y axis directions for tiling) or set no-repeat (not tiling) );
<style>
background-repeat:no-repeat;
</style>3. background-color: (table background color) this attribute accepts any legal color value 4. background-position: (background image positioning) directly followed by the x-axis and y-axis coordinates. The image placement keyword is the easiest to understand, and its function is as indicated by its name. For example, top right causes the image to be placed in the upper right corner of the inner margin area of the element
<style>
background-position:right center;
</style>css text
1. Indent text text-indent property, which can easily achieve text indentation. By using the text-indent attribute, the first line of all elements can be indented by a given length, even the length can be negative. The unit em, which means byte. The text-indent attribute can be inherited.
2. Text-align is a basic attribute that affects the alignment of text lines in an element. The values left, right, and center cause the text in the element to be aligned to the left, right, and center, respectively. Inheritance, for block-level elements, the text in the box can be changed position, but for inline elements or inline block elements (width and height cannot be set, unless disply:block or disply:inline-block is used to change the attribute) It can act on the box.
3. Line-hight: For block-level elements in the line height setting, the line height can support the height of the box. For inline elements, setting the row height does not make the height of the joint venture, but the box itself can be changed (for example, by setting the row height to center, the box of the inline element can be centered).
4. font-size: increase the size of the font font-style: whether the font is slanted (intlic slanting is normal)
font-weight: whether to bold (bold bolder is relatively thick and normal)
font-family: which type of font ( SongTi, HeiTi) …)
Comprehensive attribute font: font-style font-weight font-size/line-height font-family; the first two positions can be interchanged or not written, font-size/line-height for example 24px/2 means font size The 24px line height is 2 times the font size.
css list :
ordered list: ol li unordered list ul li custom list dl dt dd where the flag before the list can be removed.
You can use the attribute list-style-type: square (set as a square) none (no) list-style- image (Set the image as the list item flag.) list-style-position (Set the position of the list item flag in the list.)
css table :
table, tr (row), th (first column), td (column) border -collapse:collapse(single border); (property setting whether to fold the table border into a single border)
1. Alignment: text-align (property setting horizontal alignment, such as left, right, or center) and vertical-align( The property sets the vertical alignment, such as top alignment, bottom alignment or center alignment) The property sets the alignment of the
text in the table 2, border-spacing: (set the distance of the cell border)
Box model
The CSS box model (Box Model) specifies how the element box handles element content, inner margins, borders, and outer margins.
1. element: the content inside the box.
2. padding: the inner margin of the box (between the edge of the box and the content). Distance) If a percentage is set for padding, the percentage is set according to the width of the parent element, not the height.
3. Border: the border of the box border-style (line of the border): dotted (dotted line) dashed (dashed line) solid (solid line)
4. Margin: If the margin of the box is set to a percentage, the percentage is based on the parent element The width setting, not the height.
5. height: the height of the content
6. width: the width of the content
In CSS, width and height refer to the width and height of the content area. Increasing inner margins, borders, and outer margins will not affect the size of the content area, but will increase the total size of the element box.
Both padding and margin can set the distance size: abbreviated as padding/margin: upper right, lower left; padding/margin: up, down, left, and right; padding/margin: up, left, right, and lower; border abbreviation: 1px (the size of the border line) solid (the size of the border line) Style) red (the color of the border line);
For inline elements (inline block elements are also included in special inline elements), the padding margin setting in the vertical direction is invalid.
The setting of margin will cause the parent and child elements, the sibling elements to collapse (adhere to the larger value, the solution: set border or padding for the parent element)
Only the vertical margins of the block boxes in the normal document flow will merge the margins. The margins between inline boxes, floating boxes, or absolute positioning will not merge
Border and background: The background of the element should appear between the visible parts of the border. The background of the element is the background of the content, padding and border area. After setting the background image: the filling area is padding+content+tile part of the border image (refer to the top for border style)
css selector
1. CSS element selector: The element of the document is the most basic selector, and the element selector is also called the type selector.
<style>
html {
color:red};h1 {
color:blue;}h2 {
color:silver;}
</style>2. Wildcard selector: displayed as an asterisk (*). The selector can match any element, just like a wildcard.
<style>
*{
color:red;}*{
margin:0;padding:0}
</style>3. Combining selectors and declaration grouping: you can use a few sentences to define relatively complex styles
<style>
h1, h2, h3, h4, h5, h6 {
color:gray; background: white; padding: 10px; border: 1px solid black; font-family: Verdana;
</style> }4. CSS class selectors: Class selectors allow you to specify styles in a way that is independent of document elements. These selector styles can only be used after the document is appropriately marked. The selector can be used alone or in combination with other elements.
<style>
<h1 class="important">This heading is very important.</h1>
<p class="clear">This paragraph is very important.</p>
</style>Important is the name of the class. If you want to select and add a style:
<style>
.important{
color:#ddd ; .... }
</style>CSS multiple class selectors have the same attributes separated by spaces:
<style>
.important .clear{
font-size:24px; ....}
</style>5. CSS ID selector: The ID selector allows you to specify styles in a way that is independent of document elements. First, the ID selector is preceded by a # sign-also known as a chessboard number or pound sign. E.g:
<p id="intro">This is a paragraph of introduction.</p>
选中它的话:
<style>
#intro{
color:#eee; .....}
</style>Unlike the class, in an HTML document, the ID selector will be used once, and only once. Unlike the class selector, the ID selector cannot be used in combination because the ID attribute does not allow a list of words separated by spaces
6. The descendant selector is also called the inclusion selector. The descendant selector can select the element that is the descendant of an element. In the descendant selector, the selector on the left side of the rule includes two or more selectors separated by spaces. The space between selectors is a kind of combiner. For example:
<div class = qa>
<p class = hou> 我是后代 </p>
</div> The selected offspring can be:
<style>
.qa .hou{
color:red;}
</style>or
<style>
.qa p{
background-color:#ddd;}
</style>
Etc ... 7. CSS pseudo-class:
(1), :first-child pseudo-class to select the first child element of the element
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul><style>
li:first-child{
font-weight:bold; }
</style>(2), :hover: When the mouse is hovering over the element, add style to the element.
8. Pseudo-element: (1), ":before" pseudo-element can insert new content in front of the content of the element
<style>
h1:before{
content:url(logo.gif);}
</style>(2), ":after" pseudo-element can insert new content after the content of the element
<style>
h1:after{
content:url(logo.gif);}
</style>float
flot:left/right/center;
The original intention of floating is to achieve the word surrounding effect, and then it is applied to display block-level elements side by side
Floating will make it half out of the standard document flow, so that the text can have a word surround effect
Floating features:
(1) Closeness: the floating box is close to each other, and the width is not enough to wrap automatically.
(2) Wrapping: if a block-level element floats without setting the width and height, its width and height will be as wide as possible small.
The floating of the element will affect the elements behind it, the following elements (boxes) will drill up to occupy the position, but the text in the element will not (still maintain the word surrounding effect)
Clear the impact of floating on the parent element's sibling elements:
parent element: overflow: hidden; or add a height
sibling element: clear: both (added to the first affected element) After
the inline element is set to float, you can directly set the width high.
<div class = "flo">
<div class = "flet"></div>
<div class = "cent"></div>
<div class = "righ"></div>
</div>Three child elements float: (the parent box does not set the width and height, the width is as large as possible, and the height is supported by the height of the child box. The floating of three boxes at the same time will cause the height of the parent box to collapse, so set overflow: hidden (intentionally The excess part is hidden, but it is also possible to clear the impact caused by floating))
<style>{
.flo{
overflow:hidden;}
.flo .flet{
flot:left; width:120px hight:100px background-color:#aaa;}
.flo .cent{
flot:left; width:120px hight:100px background-color:#fff;}
.flo .righ{
flot:left; width:120px; hight:100px; background-color:#ccc}
</style>