Comprehensive list of commonly used attributes of DIV organized by yourself_HTML/Xhtml_Web page production

1. Attribute list

Copy code

The code is as follows:

color: #999999 Text color
font-family: Song style font
font-size: 10pt Text size
font-style:itelic Text italic style
font-variant:small-caps small Font
letter-spacing: 1pt Text spacing
line-height: 200% Set line height
font-weight:bold Text bold
vertical-align:sub Subscript
vertical -align:super Superscript
text-decoration:line-through Add ?h to divide line
text-decoration:overline Add top line
text-decoration:underline Add underline
text-decoration: none ?hExcept for connecting the bottom line
text-transform: capitalize The first word is capitalized
text-transform: uppercase English capitalization
text-transform: lowercase English writing
text-align:right Text * right-aligned
text-align:left text*left alignment
text-align:center text center alignment
These are some simple text effects that can be applied to CSS pages.
Background
background-color: black Background color
background-image: url(image/bg.gif) Background image
background-attachment: fixed Fixed background
background-repeat: repeat Repeat Arrangement - webpage default
background-repeat: no-repeat non-repeat arrangement
background-repeat: repeat-x repeats the arrangement on the x-axis
background-repeat: repeat-y repeats the arrangement on the y-axis
background-position: 90% 90% The position of the x and y axes of the background image
Link
A All hyperlinks
A:link Hyperlink text format
A:visited Browsed link text format
A:active Press the connection format
A:hover Move the mouse to the connection
Border
border-top: 1px solid black upper frame
border-bottom: 1px solid #6699cc lower frame
border-left : 1px solid #6699cc Left border
border-right : 1px solid #6699cc Right border
border: 1px solid #6699cc Four borders
Dotted line
<br>Solid line<br><TEXTAREA STYLE="border:1px solid pink"> <br>Just set the height of the div to be the same as the line height of the text, that is, line- It is enough that the values ​​​​of height and height are the same. Finally, give the div an over-flow: hidden to hide the excess part. <br> </div> <br><strong> 2. Common attributes </strong> <br> <br><div class="msgheader"> <div class="right"><span style="CURSOR: pointer" onclick="copycode(getid('phpcode95'));"><u>Copy code</u></span></div>The code is as follows:</div> <div class="msgborder" id="phpcode95"> <br>1. Height: Set the height of the DIV; Width: Set the width of the DIV. <br>2. Margin: used to set the extended margin of DIV, which is the distance to the parent container. margin: followed by four distances respectively from the top, right, bottom and left of the parent container; margin: [top][right][bottom][left] <br> can be set separately: margin-left: to The distance to the left border of the parent container; margin-right: the distance to the right border of the parent container; margin-top: the distance to the top border of the parent container; margin-bottom: the distance to the bottom border of the parent container. <br>3. padding: used to set the inner margin of DIV (the distance between the inner sub-element and the DIV boundary). padding: followed by four distances, which are the distances from the top, right, bottom, and left of the parent container; margin: [top][right][bottom][left]: It should be noted that the distance set by padding is not included in Within its own width and height (in IE7 and FF), for example, if the width of a DIV is set to 100px, and the padding-left is set to 50px, then the DIV will be 150px wide when displayed on the page. <br>4. border: Set the border style of DIV; display: Set the display attribute. Its values ​​include block and none; float: Set the flow direction of DIV on the page. Its values ​​include left (displayed on the left), right (displayed on the right), and none; <br>background: Set the background style of the DIV; after background, you can Directly follow the background color, background image, tiling method and other styles. It can also be set separately using the following properties. <br>background-color: set the background color; background-attachment: the attachment method of the background image, whose values ​​include scroll and fixed; background-image: specify the existing background image; background-repeat: the tiling method of the background image . Its values ​​include no-repeat (not tiled), repeat (tiled in two directions), repeat-x (tiled horizontally), repeat-y (tiled vertically); background-position: Position the background position in the DIV . Its value has different combinations of top bottom left right. You can also specify a specific location using coordinates. <br>5. Position: Set the positioning method of DIV. There are four attributes of position: static, fixed, relative, and absolute. Commonly used are relative and absolute. If it is specified as static, the DIV follows HTML rules; if it is specified as relative, you can use top, left, right, and bottom to set the offset of the DIV in the page (relative to its own offset), but layers cannot be used at this time. ; If it is specified as absolute, you can use top, left, right, and bottom to absolutely position the DIV (to its nearest parent element); if it is specified as fixed, the position of the DIV in IE7 and FF is fixed relative to the screen. No change, it has no effect in IE6 (I don’t know why). <br>6. Font: Specify the style of the text in the DIV, which can be followed by multiple styles of the text. font-family: Set the font name to be used; font-weight: Specify the thickness of the text, its values ​​include bold bolder lighter, etc.; font-size: Specify the size of the text; font-style: Specify the text style, its values ​​include italic normal oblique, etc.; color: specifies the text color; text-align: specifies the horizontal alignment of the text, its values ​​include center (center) left right justify; text-decorator: used for text decoration; its values ​​include none underline overline line-through and A combination of blink; text-indent: sets the indentation of the text; text-transform: sets the letter case of the text. Its values ​​include lowercase uppercase capitalize (capitalize the first letter) none; direction: the flow direction of the content. Its values ​​include ltr (from left to right), rtl (from right to left); line-height: specifies the line height of the text; Word-spacing: word spacing. <br>7. Overflow: Content overflow control. Its values ​​include scroll (scroll bar is always displayed), visible (scroll bar is not displayed, but the excess part is visible), auto (scroll bar is displayed when the content exceeds), and hidden (scroll bar is displayed when the content exceeds). content). <br> </div> <br><strong>3. Some special effects: <br><br></strong>1. z-index: Set the stacking order of DIVs. When using the z-index attribute, position must be specified as absolute. <br><br>2. cursor: Set the style of the cursor on the DIV. <br><br>3. clip: Set the clipping rectangle. clip:rect(top right bottom left); Set the distance between top, bottom, left, and right, but at this time, the position must be specified as absolute. <br><br>4. Opacity transparency filter:alpha(opacity=value) eg: filter:alpha(opacity=50);opacity:0.5; <br><br><strong>4. Positioning and control</strong> <br><br><strong>Absolute positioning and relative positioning (position)</strong> <br><br>Absolute positioning: <br><br>Positioning attributes will be the key to happiness for netizens: <br><br>H4 { position: absolute; left: 100px; top: 43px } <br><br>This CSS rule allows the browser to set the starting position of <H4> exactly 100 icons from the left side of the browser pixel, 43 pixels from its top. Note that the only settings here are the left and top. In other words, the text will enter the browser window from left to right and from top to bottom. <br><br>The left and top attributes are very intuitive. Left (left) sets the distance from the left side of the browser window, and top (top) sets the distance from the top of the browser window. When setting these distances, you can use various degree units or scale values ​​that you have learned about. When using scale values, the scale values ​​are relative to the dimensions of the parent feature. <br><br>What can you target? anything! Paragraphs, words, GIF and JPEG images, QUICKTIME movies and more. <br><br>Relative positioning: <br><br>Absolute positioning allows you to accurately position an element at its independent position on the page, regardless of the positioning settings of other elements on the page. Relative positioning means that the position of the feature you are positioning is relative to its assigned position in the file. Example: <br><br>I { position: relative; left: 40px; top: 10px } <br><br>The key to relative positioning is that the position of the positioned element is relative to where it should normally be. . Relative positioning units appear between lines of ordinary static positioning units and are positioned without completely separating themselves from the static positioning units. If you stop using relative positioning, the text's display position will return to normal. Be careful when using relative positioning, otherwise it can easily clutter the page. <br><br>In addition to relative positioning and absolute positioning, you can also use static parameter values. Static is the default value for the position attribute. Its usage is the same as the positioning method in ordinary HTML, and no special positioning settings can be attached. That is, nothing else can affect the positioning of a cell except the margin property, or by floating the cell using the float property. <br><br><strong>Control of positioning unit (width, height, visiblility) </strong> <br><br>In addition to controlling the upper left corner position of the positioning unit, you can also control the width and height of the unit, and the unit Visibility on the page. <br><br>Width: The positioned elements will still be displayed from left to right when displayed on the page. You can use the width attribute to set restrictions on the flow of characters to the right, that is, to set the width of the element. <br><br>DIV { position: absolute; left: 200px; top: 40px; width: 150px } <br><br>When the browser receives this rule, it will display the text according to the effect specified by the rule, and also Limit the maximum horizontal size of paragraphs to 150 pixels. <br><br>The width attribute only applies to absolutely positioned features. You can use any of the length units we learned about, or set the width using a scale value, which is relative to the parent feature. In IE 4, this attribute is also available for images. You can artificially widen or compress the image through the width setting. <br><br>Height: In theory, the height should be set similarly to the width, but in the vertical direction: <br><br>DIV { position: absolute; left: 200px; top: 40px; height: 150px } <br><br>Here I use "theoretically" because some browsers do not support the height attribute. <br><br>Visibility: Using CSS, you can hide elements so that they are not visible on the page. This attribute applies to both located and unlocated features. <br><br>H4 { visibility: hidden } <br><br>Options: <br><br>visible makes the feature visible<br><br>hidden makes the feature hidden<br><br>inherit Indicates that it will inherit the visibility settings of the parent feature. <br><br>The value inherit is the default value. This causes the cell to inherit the visibility of the parent cell. So, if a paragraph is hidden, any inline cells it contains are also hidden. This inheritance can be overridden by explicitly specified visibility. For example, if the EM cell within a section is designated as visible, and the section is hidden, all other content within the section will disappear, and only the text in the EM cell will be visible. <br><br>When an element is hidden, it still occupies the original space in the browser window. So, if you wrap text around a hidden image, it will appear as if the text is surrounding an empty space. This news <br><br>This attribute is useful when writing languages ​​and using dynamic HTML. For example, you can make a certain paragraph or image only display when the mouse rolls over it. <br><br><strong>Unit level (z-index) </strong> <br><br>The z-index attribute is used to stack cells on the screen. By default, units are stacked in the order in which they appear in the HTML tags—that is, units that appear later are stacked on top of units that appear earlier. The Z-index property actually defines the stacking order of sibling units and the stacking of units relative to their parent units. According to the draft specification, groups of units with positive z-index values ​​are stacked on top of their parent units, and their own stacking order is determined by the size of their values ​​(units with larger values ​​are on top). Similarly, unit groups with negative z-index values ​​are stacked under the parent unit, and their own stacking order is also determined by the size of the value (units with larger values ​​​​are on the upper layer, for example, units with a value of -1 are in the upper layer. -2 above the unit). <br><br>Use pure integers for this parameter value. z-index is used for absolutely positioned or relatively positioned features. You can also set the z-index of the image. (For Communicator, it's best to wrap the <IMG> tag within a <SPAN> or <DIV> tag, and then apply z-index to the <SPAN> or <DIV>.) <br><br> <strong>Clip absolutely positioned units (clip) <br></strong><br>Absolutely positioned units can be clipped - that is, clip the area displayed to the user, showing only part of the unit and making the rest transparent. This is not a very useful feature for traditional text- and image-based web pages. But this is useful if multimedia pages are required. For example, Netscape Communivator 4 and Internet Explorer 4 both support multimedia pages. They dynamically adjust the clipping area around the unit through the document's scripting interface, so that solid line text "crosses in" and images fade in and other display features. <br><br>In CSS, clipping is controlled through the clip feature. This feature can only be used for absolutely positioned units. Its default value is auto, which clips the unit according to its outer edge (actually equals no clipping). . In addition, the clip box can be set by the following expression: <br><br>clip : rect(top,right.bottom,left); <br><br>where top, right, bottom and left are the rectangular clip box respectively. The positions of the top, right, bottom and left edges relative to the upper left corner of the clipped unit. The values ​​for Top, right, bottom, and left can be any absolute or relative length value (but not a percentage value), or the keyword auto. A value of auto means that after all sides of the clipping area are placed, any content in the clipped unit will not exceed this area. <br><br><strong>Control unit overflow (overflow) </strong> <br><br>Fix the width and height of the absolute or relative positioning unit. It is likely that the specified area cannot meet the needs of the actual content of the unit. This causes the unit content to overflow. You can use overflow to specify how the browser handles overflow: the value none (the default) allows the browser to display overflow content, so the cell can overflow the specified area. The value clip requires the browser to clip the cell content at the bottom and right of the cell, so that cell content beyond the specified area will not be displayed. The value scroll also requires the browser to clip the cell content at the bottom and right of the cell (same as clip). However, the browser should (if possible) provide scroll bars for the cell so that the user can scroll through the clipped content.</div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="HTML css production of simple progress bar_HTML/Xhtml_web page production" href="https://m.php.cn/faq/11566.html">HTML css production of simple progress bar_HTML/Xhtml_web page production</a></span><span>Next article：<a class="dBlack" title="HTML css production of simple progress bar_HTML/Xhtml_web page production" href="https://m.php.cn/faq/11570.html">HTML css production of simple progress bar_HTML/Xhtml_web page production</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="https://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/faq/348757.html" title="Summary of Html knowledge" class="aBlack">Summary of Html knowledge</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348804.html" title="How to learn HTML quickly" class="aBlack">How to learn HTML quickly</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348873.html" title="The difference between html xhtml xml" class="aBlack">The difference between html xhtml xml</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348884.html" title="The difference between src and href attributes" class="aBlack">The difference between src and href attributes</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/348902.html" title="About HTML5 and CSS replacement use" class="aBlack">About HTML5 and CSS replacement use</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><!-- End Matomo Code --></html>