CSS is an abbreviation for the Cascading Style Sheets (laminated style form). More people call it style sheet. As the name suggests, it is a tool for design webpage style. With the powerful features of CSS, the web page will change thousands of imagination.
Figure 1 Figure 2
See the two pictures above, you may think this is made with photoshop or other graphics processing software. However, the above example is completely written in CSS. Let's take a look at its source code (don't think that you don't understand the code, very simple ^ _ ^):
CSS Word </ title> <style> // * CSS style definition start * // <! - div {width: 200; filterblur (add = true, Direction = 135, stren = 20);} // * Define the style within the DIV range, including the width (Width), the fuzzy filter property (BLUR) * // -> </ style> // * style definition end * // </ head> <body> <div> // * The following is used in <HEAD> <style> in the <style> Font-Size: 48; font-style: bold; color: red; " > HONGEN </ P> // * Defines Font-Style, including font size, thickness (bold), color (color) * // </ div> </ body> </ html></p>
<p>The above code is displayed in red, which is used to help you better understand the meaning of the code. The above code is generated by the effect of Figure 2. The font of the font is the filter function of the CSS. Filter function is very interesting to CSS and is also very attractive, we will introduce it in later chapters.</p>
<p>In fact, CSS code is composed of some of the most basic statements. The structure of its basic statement is this: Select {Property: Attribute} Look, is it very simple, only three parts.</p>
<p>We combine the above code to explain, such as <head> ... </ head> in the above code, using <style> to specify the style. Generally speaking, <style> The following CSS statement is written in the form of an comment statement, that is, the part of the above code is included. Therefore, the statement defined in the above example is: DIV {Width: 200; filter: blur (add = true, direction = 35, stren = 20);} DIV is a selector, selector Can be any identifier in HTML, such as P, DIV, IMG or even fody can be used as a selector. The selection is used here, that is, in HTML, editing the page format in <div> will display the format defined in the brace in the above statement. Width and Filter in parentheses are attributes. Width defines the width of the page in the DIV area, 200 is the attribute value. FILTER defines the filter properties, BLUR is its attribute value, which is a fuzzy effect, which defines some parameters of the BLUR attribute value in parentheses. The Add parameter has two values: true and false. Specify whether the picture is set to a fuzzy effect. The Direction parameter is used to set the fuzzy direction. 0 degrees represent vertical up, then one unit per 45 degrees, 135 in the example represents the bottom to the right 135 degrees, each of which represents a blur direction, if you are interested, you can refer to the detailed parameter in the following explanation set. Strengh represents how much pixel width will be blurred, and the parameter value is set with an integer. We see the definition of CSS in <head>, there is also a CSS definition in <body>: <p style = "font-size: 48; font-style: bold; color: red;"> Hongen </ P> Here STYLE is embedded in <p> to define the format in this paragraph. We found that the CSS statements in <body> and the definition are still different in <head>, it is directly defined by <style =>. This definition method is very suitable for the case where the code is written. The CSS definition format of the above code is very suitable for the case where the code is small and the structure is simple. According to the basic format of the CSS statement, we can see that font-size, font-style, and color in the CSS code in the defined P paragraph, define the size of the "Hongen" font in <p>, respectively (size), style ( Style) and Color (color); 48, bold, red is attribute value. It means "Hongen" will be displayed in 48pt, bold, red style. Since the entire paragraph is defined in <div>, Hongen will display the filter properties defined in <head>. The final result is like Figure 2. The effect in Figure 1 is also implemented with a very simple CSS statement, just the filter properties in the CSS.</p>
<p>Through the above explanation, we can see that you can achieve many effects that you need professional software can achieve with a very simple CSS statement. Using properties to set fonts, color, background, etc. page format; use positioning to make the page layout more specifications, good-looking; use filters to make multimedia effects in the page. How is the function of CSS is very powerful, in the following tutorial we will explain it in detail.</p>
<p>How to write CSS from the above example, we can see that the CSS statement is embedded within the HTML document. Therefore, the method of writing CSS and the method of writing HTML documents is the same. You can use any text editing tool to write. For example, Notepad under Windows, a dedicated HTML text editing tool (FrontPage, UltraEdit, etc.) can be used to edit the CSS document. Then you may ask, how to join the HTML document independently edited CSS document? In fact, two methods have been introduced in the examples in the first chapter. One is to put the CSS document in the <head> document: <style type = "text / css"> ... </ stop> in <style> "type = 'text / css'" means <style > The code is defined by the style form. Another way is to write the CSS style table in the html line, such as the following code: <p style = "font-size: 14pt; color: blue"> Blue No. 14 text </ p> This is <style = ""> The format writes the pattern in any of HTML, which is relatively convenient and flexible. Another way is to save your CSS document into a ".css" file, then define it in <head>. The defined format is like this: <head> <link rel = stylesheet href = "style.css"> ...... </ head> We see a <link>, "rel = style" means the connection element is A style sheet (STYLESHEET) document. Generally, you don't need you to change. The back "href = 'style.css'" refers to the file address that needs to be connected. You can use the detailed path name of the ".css" file to be written. This approach is very suitable for simultaneous definition of multiple documents. It allows multiple documents to use the same style at the same time, thereby reducing a large amount of redundant code. This chapter mainly introduces the method of writing CSS and how to combine the work of CSS documents with HTML. You can choose which method to choose CSS based on the structure of HTML code written by yourself. The next chapter will enter the specific knowledge of CSS, we will start with the most basic attributes.</p>
<p>CSS properties From the basic statement of CSS, the attribute is a very important part of the CSS. Skilled, the various properties of CSS will be a more mindful hand. Below we will use some instances.</p>
<p>1, font attribute</p>
<p>This is the most basic attribute, you often use it. It mainly includes these properties:</p>
<p>Light look at the form is not a bit difficult, don't matter, let's take a look at the font styles defined in the property (as shown below):</p>
<p>The first line just uses the "font-family" attribute, the code is like this: <p style = "font-family: lucida console"> HONGEN </ P> This line code defines "Hongen" will be "Lucida Console" Font display; the second line font-family is the default value, but defines the "font-style" attribute as "italic", the code is as follows: <p style = "font-style: italic"> Hongen </ P> The third line font-family is the default value, font-style is "oblique", and the "font-weight" property is also defined "bold", "font-size" attribute is 24pt (default is absolute Size The size of the code is as follows: <p style = "font-style: oblique; font-weight: bold; font-size: 24pt"> HONGEN </ P> The last line is only added on the basis of the third line definition "" Font -variant "Small-Caps", the code is as follows: <p style = "font-style: oblique; font-weight: bold; font-size: 24pt; font-variant: small-caps" > Hongen </ P> It is worth noting that "Font-Variant" attribute value "small-caps" does not exist in the specified minor capital font, the CSS will replace all lowercase letters with uppercase letters. Maybe you will ask: What is the code that defines a font? In fact, it is still a "font" attribute in the font attribute to make simple definitions. Let's look at the following code: <p style = "font: italic small-caps bold 36pt, glitzycurl"> Leaf </ p> The effect of this code is like this (as shown below): This code defines "Leaf" "The font is Glitzycurl and is a slide, small body capital, bold, 36 word. This code is equivalent to: <p style = "font-style: italic; font-variant: small-caps; font-weight: bold; font-size: 36pt; font-family: giltzycurl> Leaf </ p> No, it is much thin. But you need to pay attention to: If you use the <font> property directly defined directly, you must pay attention to the emission order of the attribute value. Its emission rules are in the order in which "Font-style", "Font-Variant", "Font-Weight", "Font-size", "font-family" is not defined, with the default value display.</p>
<p>In fact, we are used to do not need a font attribute to unify definition, because the code that is separated is very long, but it looks very intuitive, let people know what is defined. Say a little regret, that is, CSS support for Chinese fonts may not be very good. 2, color and background properties</p>
<p>You always don't want your page in the black and white world. Is it better if you add a color to the text defined by the <font> property?</p>
<p>Let's talk about the color and background properties of CSS. Let's take a look at what attributes under the color and background under CSS (as shown in the following):</p>
<p>We still give an example. For example, the "Leaf" font speaking in the previous section, we add color properties, add the following code in <style>: Color: RGB (204, 82, 28); Background-IMG: URL (SS01038.jpg); Background-repeat: no-repeat; margin-rotion: 15em</p>
<p>// * Set the RGB value of the foreground is (204, 82, 28), you can also define the English name of the color; set the address of the background pattern; set the background pattern to not repeat the display; Attribute, this will then talk about * //</p>
<p>The font display effect of "leaf" after the addition of the code is like this (as shown below):</p>
<p>How is it, is it more beautiful than the light definition <font> property is more beautiful. Of course, you can also define the Background property (like definition font attribute), let's tell you about your background property:</p>
<p>Property: Background Property Value: <Background-Color> || <Background-Image> || <Background-Repeat> || <Background-Attacement> || <Background-Position></p>
<p>That is, using the background property can define all the properties of the background, including background colors, background patterns, and more. Therefore, the code in the "Leaf" color properties above can be written as this: "Background: URL (SS01038.JPG) No-review"</p>
<p>Ok, as for the functions of color and background properties, you can try it yourself. In the next section we will introduce the text properties of CSS.</p>
<p>3, text attribute</p>
<p>※ Define the spacing</p>
<p>As mentioned earlier how to define fonts, color, and background properties with CSS, then how do we use it to print it?</p>
<p>Below we tell the text attribute of the CSS, or let's take a look at the detailed list of text properties:</p>
<p>We can see the text spacing, almomic spacing, decorative, alignment, indentation method, and high attributes of the almomic spacing, decoration, alignment, indentation method, and high attributes of the almomic spacing, decoration, alignment, indentation. Let's take a look. For example, the following text (such as the left figure):</p>
<p>We add text attributes to this text to re-edition, and the effect after the typography is shown in the top right. We see that there is more spacing between text words and words that have been processed by text attributes, and there is more lines between rows and rows. The alignment has become aligned between the two ends, and the heads have grown in the two. What is this implementation? Very simple, just add the following code in HTML:</p>
<p><p style = "letter-spacing: 1em; Text-align: Justify; Text-Indent: 4em; line-height: 17pt"> ... </ p> // * letter-spacing set the word spacing is 1EM, where 1EM is a length unit; Text-align is set to align the alignment; Indent sets the indented grid 4em; line-height sets a row height of 17pt * //////////////</p>
<p>From the above example, we can see that the text properties of CSS can be easily typically typed on the text in the page. The next section I will introduce you to a small app for text's Text-Decoration attribute.</p>
<p>※ Decorative hyperlink</p>
<p>The shortage of the web page is like this: The unprocessed link is blue text and a blue underscore, and the accessed hyperlink is a deep purple text and a deep purple underscore. If you all your pages are this style, is it very monotonous?</p>
<p>In fact, the TEXT-DECORATION properties in the text property can be used to implement the hyperlink modification. Let's take a look at the following code:</p>
<p><html> <title> link css </ title> <head> <style> <! - // * Define pseudo elements (A :), define foreground color properties and text decorative properties in braces, Hover plus The 'font-size' property is to change the font when the mouse activates the link. * // A: link {color: green; text-decoration: none} // * No access, color is green, text decoration The TEXT-DECORATION value is not (None) * // A: visited {color: red; text-decoration: none} // * Accessed state, color is red (red), the text decorative property value is not * // a: hover {color: blue; text-decoration: Overline; font-size: 20pt} // * Mouse activation status, color is blue (Blue), text decorative attribute value is overline, Font size is 20pt * // -> </ style> </ head> <body> <p style = "font-family: line book; font-size: 18pt"> <a href = "http: // www .hongen.com "> Unprecedented link </a </ p> // * plus link, display three different states, and define the font and size of the link text * // <p> <a href =" http://www.hongen.com "> Accessed link </a> </ p> <p> <a href="http://www.hongen.com"> Mouse activation link </A> </ p> </ body> </ html></p>
<p>If you want to see the above code, please click here.</p>
<p>We see that there is no access to the link in the example to display, and remove the underscore; and the connected link is red and there is no underscore display; in addition, when the mouse activates the link, the link is displayed in blue, and plus Underline. What is this effect be implemented? In addition to using the text-decoration attribute in the text attribute, it uses a pseudo element. Through the above code comment, I believe you should have a probably aware of the pseudo element. In fact, this pseudo class we use should be called anchor, which specifies the effects of links in different states. How is it, is it very simple, you can realize the effect of dynamic links, try your trial! I will introduce you to the "container" attribute.</p>
<p>4, "Container" attribute</p>
<p>※ Marvual attribute</p>
<p>It sounds very interesting, what is the "container" attribute? The container properties of CSS include margins, filling, borders, and width, height, floating, clearance. You think that the content in the web page must be "loaded" into this "container". "Container" attribute is a very important attribute in CSS, and we will learn. Let's take a look at the detailed list of margins attributes:</p>
<p>Like the font property, four attributes in the table can be used once. The margin order is on, right, lower, left. Let's take a look at two examples before and after margin attribute. Please see this picture below:</p>
<p>We see that the above figure is the effect of plus margin attribute, and the following picture is added in <head>:</p>
<p>Body {margin: 1em 2em 3EM 4EM} // * Define on the top, right, bottom, left on the left, 1, 2, 3, 4em * // //</p>
<p>The result is shown in the figure below:</p>
<p>Define the pages behind the margins, no matter how you change the size of the window, it will be displayed according to your defined margin style.</p>
<p>If there is a missing attribute in Margin, arrange it in sequence. such as:</p>
<p>Body {margin: 1EM 3EM} The meaning of this code is: Body, the right distance is 1,3em. I will introduce you to the fill distance attribute.</p>
<p>※ Fill at property</p>
<p>I will introduce you to fill the fill distance attributes. Let's take a look at the list of attributes that fill the filling:</p>
<p>First we have to understand what is called filling, what is the difference in margin? The fill distance refers to the distance between the text border and the text. This is not a bit difficult, because the fill is the same as Margin, there is a defined attribute: Padding, so we will give an example, look at what is called fill, please see the picture below:</p>
<p>We see that the place where the red frame in the figure above is the part that is filling the distance. In fact, the effect of the figure is just the following code to the Body defined margin in the <head> of the previous section:</p>
<p>Padding: 1em 2em 3EM 4EM</p>
<p>As can be seen from it, the part of the red frame marker belongs to the margin attribute. The next section will introduce you to the border properties.</p>
<p>※ Border properties</p>
<p>Let's take a few border properties, first look at the list of properties:</p>
<p>Does it seem to have a lot, but it is very convenient to apply. As long as the flexible properties use a definition will be much more convenient. In fact, there is another Border property that sets all the borders, style, and color properties, but Border can only make the attribute value of the four borders. We now give the previous example set a 5-pixel wide, border box and is a purple border (as shown below):</p>
<p>This is the properties of <p> in <head>, the code is as follows:</p>
<p>P {border: 5px double purple} // * Defines the four borders as the same value * //</p>
<p>You can also find a text you try to try another border properties to see what is the effect. The next section will introduce you to other properties of the Container property, you will be able to enjoy the effect of the graphic mix. ※Photo-text</p>
<p>Let's take a look at the "container" attributes, please see the property list:</p>
<p>The float attribute in the above table is very interesting, let's take a look at a page effect that uses it (as shown below):</p>
<p>Do you think that inserting a table in the picture, do you have the effect of this graphic mix? In fact, it is not, just define the <IMG> FLOAT and Margin properties in <hEAD>, the code is as follows:</p>
<p><html> <title> margin css </ title> <head> <style> <! - img {margin-right: 2em; float: left} // * Define the right edge of the image is 2em, the picture floats in the text Left * // -> </ style> </ head> <body> <p class = "p2" style = "line-height: 17pt"> <img src = "logo.gif" alt = "floating"> Our company is a high-tech enterprise in software development and sales. Located in the high-tech industry, the East Gate of Tsinghua University, with nearly 4,000 square meters of independent office buildings, all employees are young and diligent and creative, very challenging and competitive. </ p> </ body> </ html></p>
<p>How is it, you don't have the form of a table, and a lot of code is reduced. You can also try Float's other effects. Ok, "Container" attributes so much, we can see that make full use of CSS's "container" attribute, will make your page layout more reasonable, styles are more beautiful. I will introduce you to the grading property.</p>
<p>5, hierarchical property</p>
<p>If you have used Word, then you must know that there is a "project symbol and number" in Word. In HTML, you don't need to initialize fonts, colors, and margins, fill distances, etc. in the previously mentioned font, color, and container properties. Because in CSS, a dedicated grading property of grading has been provided. The hierarchical property includes a variety of properties such as "List-style", "list-item", let's first look at the detailed list of hierarchical properties:</p>
<p>Let's take an example of a hierarchical property, the code is as follows:</p>
<p><html> <head> <title> FENJI CSS </ Title> <style type = "text / css"> // * Define CSS * // <! - p {display: block; white-space: Normal} / / * Definition Display Attribute is "Block", means displaying in a new area; WHITE-SPACE properties Normal make multiple blank together into a * // em {display: inline} // * Defining the display attribute of the EM Inline "purpose is to do not fold the text display under its control * // li {display: list-item; list-style: Square} // * Define the LIST-ITEM, displayed in the list A symbol tag is added, and the list-style property value is defined as Square to make the labeled mark before the list * // img {display: block} // * Define the image property to block to open the picture in the new location * / / -> </ style> </ head> <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> // * Definition list item * // <li> List-item 1 </ li> <li > List-item 2 </ li> <li> list-item 3 </ li> </ ul> <p> <img src = "ss01068.jpg" width = "280" height = "185" alt = "invisible "> </ P> // * Define a picture * // </ body> </ html> The display effect of the upper code is as follows:</p>
<p>We see that due to the definition of the attribute of <P> is Block, the text, the list, the picture is opened in different locations. The inline property makes the text unfold, the property value of List-style-type is Square to make the list item The symbol is square; if we do some changes in the code above, it will be displayed in another effect. We change the "em" display attribute value to Block in <head> to make it in a new location. Open; LIST-style "attribute value is changed to" Upper-Roman "(uppercase Roman symbol), the IMG's" Display "attribute value is changed to" None "(let the picture are not displayed). The modified display effect is as follows:</p>
<p>We see that the hierarchical properties can achieve some of the features of the typography, and several code changes can make the page changes greatly. Try yourself to try another effect! I will introduce you to the mouse properties.</p>
<p>6, mouse properties</p>
<p>We know that when the mouse moves to a different place, when the mouse needs to perform different functions, the shape of the mouse will change when the system is in different states. With CSS to change the attribute of the mouse, when the mouse moves to different element objects, let the mouse are displayed in different shapes and patterns. In CSS, this style is implemented through the "Cursor" attribute. The Cursor property has a lot of attribute values, let's take a look at its detailed list: Let's take an example, please see the following code:</p>
<p><html> <head> <title> CHANGEMOUSE </ Title> </ head> <body> <h1 style = "font-family: 文 鼎 新 艺 艺"> Mouse effect </ h1> // * Set font * / / <P style = "font-family: Book body; font-size: 16pt; color: red"> move the mouse to the appropriate location viewing effect. </ p> // * Set the name, size, color * // <div style = "font-family: line book; font-size: 24pt; color: green;"> // * Set this area Font Name, Size, Green * // <P> <span style = "cursor: hand"> Hand shape </ span> <br> // * Set the shape of the mouse attribute * // <span style = " CURSOR: MOVE "> Mobile </ span> <br> // * Set the mouse properties to move * // <span style =" cursor: ne-resize "> anti-direction </ span> <br> // * Setting the mouse The attribute is anti-direction * // <span style = "cursor: wait"> Waiting </ span> <br> // * Setting the mouse properties is waiting * // <span style = "cursor: Help"> Help </ span > // * Set the mouse properties to help * // </ p> </ div> </ body> </ html></p>
<p>The effect of the above code is clicked here.</p>
<p>CSS's properties tell here, we see its properties or more, but you only know what they mean, it will be very convenient to apply it. When you are applying, you can also refer to the properties I provide for you. The next chapter will introduce you to the CSS positioning.</p>
<p>CSS attribute list</p>
<p>Property Name font attributes (Font) font-familyfont-stylefont-variantfont-weightfont-size color and background properties ColorBackground-colorBackground-imageBackground-repeatBackground-attachmentBackground-position text attributes Word-spacingLetter-spacingText-decorationVertical-alignText-transformText-alignText-indentLine -height margin properties margin-topMargin-rightMargin-bottomMargin-left padding property padding-topPadding-rightPadding-bottomPadding-left border attribute border-top-widthBorder-right-widthBorder-bottom-widthBorder-left-widthBorder-width border-colorBorder -styleBorder-topBorder-rightBorder-bottomBorder-leftWidthHeightFloatClear grade property DisplayWhite-space List-style-typeList-style-imageList-style-positionList-style mouse (Cursor) properties meaning what fonts whether to use italic font small capitals The size of the thick font size defines the foreground color definition background color definition background pattern repeating mode Set the spacing between the spacing between the spacing between the initial position words. Decorative style. Decorative style vertical position of the vertical position. High-top margins right side distance bottom side distance left side margin top filling distance right side filling distance bottom end filling out left side fill distance top Border width Right side Box width bottom Box width left side border width One definition width setting Border Color Set Border Style One Definition Top Defining Right One Define Bidside Definition The left Define Width Attribute Definition Height Property Word Side Side Sound Defining Whether to deal with how to process blank plus item number plus pattern The second line start position One definition The list automatically positions "ten" words "ten" word default pointer hand-shaped moving arrows DPRK DPRC DPT DPRC DPT DPRC DPT DPRC DPRC DPT DPRC DPT DPRC All font NORM al, italic, obliqueNormal, small-capsNormal, bold, bolder, lithter like Absolute-size, relative-size, length, percentage, etc. Color Color path Repeat-x, repeat-y, no-repeatScroll, FixedPercentage, length, top, left Normal <Length>, Right, Bottom, etc.</p>
<p>Equally</p>
<p>None | underline | OVERLINE | LINE-</p>
<p>Through | Blink</p>
<p>Baseline | SUB | SUPER | TOP | TEXT-TOP | MIDDLE | BOTTOM | TEXT-BOTTOM |</p>
<p>Capitalize | UPPERCASE |</p>
<p>Lowercase | None</p>
<p>LEFT | Right | Center | JUSTIFY</p>
<p><Length> | <percentage></p>
<p>Normal | <Number> | <Length> |</p>
<p><percentage></p>
<p>Length | Percentage | AUTO</p>
<p>Equally</p>
<p>Equally</p>
<p>Equally</p>
<p>Length | Percentage</p>
<p>Equally</p>
<p>Equally</p>
<p>Equally</p>
<p>Thin | Medium | Thick | Length</p>
<p>Equally</p>
<p>Equally</p>
<p>Equally</p>
<p>Equally</p>
<p>Color</p>
<p>None | DOTTED | DASH | SOLID, etc.</p>
<p>Border-top-width | Color, etc.</p>
<p>Equally</p>
<p>Equally</p>
<p>Equally</p>
<p>Length | Percentage | AUTO</p>
<p>Length | Auto</p>
<p>LEFT | Right | NONE</p>
<p>Left | Right | None | Bothblock, Inline, List-item, None</p>
<p>Normal, Pre, Nowrap</p>
<p>DISC, CIRCLE, SQUARE, etc.</p>
<p><URL> | NONE</p>
<p>Inside, Outside</p>
<p><Keyword> | <position></p>
<p>| <URL></p>
<p>Auto</p>
<p>Crosshair</p>
<p>DEFAULT</p>
<p>Hand</p>
<p>Move</p>
<p>e-resize</p>
<p>NE-Resize</p>
<p>NW-resize</p>
<p>N-resize</p>
<p>SE-Resize</p>
<p>SW-Resize</p>
<p>S-Resize</p>
<p>W-Resize</p>
<p>TEXT</p>
<p>Wait</p>
<p>Help</p>
<p>CSS positioning 1. Dynamic conversion</p>
<p>By setting attributes in CSS, we can define a pattern of a page, such as color, font, border, etc. Now we have to talk about the CSS positioning is mainly defined on the layout and control of the page, making your page very perfect from these two aspects, more dynamic. In addition, before explaining, we first introduce two definitions: relative positioning and absolute positioning. The relative positioning is to allow offset at the original position of the document. And absolute positioning allows any positioning. Realizing the positioning of CSS is ultimately relying on attributes. Let's take a look at the detailed list of positioning properties (see below):</p>
<p>We will take an example in which we have a Script content. Let's take a look at how it is dynamically displayed. Before I explain, let's take a look at this example. Please click here. You have realized a dynamic effect by simple CSS positioning. The code for this effect is as follows:</p>
<p><html> <head> <title> dingwei css </ title> <style type = "text / css"> <! - # Container1 {position: absolute; top: 100} // * Definition Container1 is absolute position * / / # Container2 {Position: absolute; top: 100; Visibility: hidden;} // * Define Container2 is absolutely positioning, the initial visibility is hidden (hidden) * // p {font-size: 12pt;} // * definition P Font * // -> </ style> </ head> <body> <p style = "font-family: line book; font-size: 15pt; color: # cc33cc"> Please select a picture: < / p> // * Set font size, name, color * // <div id = "container1"> <dd> <img src = "ss01065.jpg" width = "185" height = "280"> // * Import a picture, identifier is container1 * // <p style = "font-family: line book; color: # cc9933; font-size: 12pt> Name: Deli </ p> // * Set the font name, Color, size * // <// <type = "185" Height = "280"> 185 "Height =" 280 "> // * Import in the <DD> <IMG SRC =" SS01095.JPG "Width =" 185 " A picture, identifier is container2 * // <p style = "font-family: line book; color: # 3366cc; font-size: 12pt"> Name: Sea </ p> </ dd> </ div> <form name = "myform"> // * Defines two buttons * // <p> <input type = "button" value = "οnclick =" Container1.Style.visibility = 'visible'; container2.style.visibility = 'hidden' "> // * Defines the mouse click event picture 1 is visible, picture 2 is invisible * // <input type =" button "value =" big sea "; Container1 .style.visibility = 'hidden'; οnclick = "Container2.style.visibility = 'vistyle.visibility =' vistyle '; container1.style.visibility =' hidden '> <</p>
<p>/ p> // * Define the mouse click event picture 1 is invisible, picture 2 is visible * // </ form> </ body> </ html> code is growing, but the structure is very simple, you only need to look at Comments are easy to understand. The next section I will continue to introduce a CSS positioning example.</p>
<p>2. Space positioning</p>
<p>In this section, let's take a look at the example of Z-Index positioning, this example is here. We see the two pictures in the example and a paragraph in different spatial positions, the text covers the picture of the flower, while the waves of the waves are covered with the top of the text. So how is this effect realized? This Z-Index property of the CSS positioning is taken here, the code is as follows:</p>
<p><html> <head> <title> zindex </ title> <style type = "text / css"> <! - .pile {position: absolute; left: 2in; top: 2in; width: 3in; Height: 3in } // * Define class Pile, and its location * // .pile1 {position: absolute; left: 3in; Top: 2in; width: 1in; height: 1in;} // * Defined class Pile1, and Its location * // -> </ style> </ head> <body> <img src = "ss01010.jpg" class = "pile" id = "image" style = "z-index: 1"> / / * Import a picture, make it a PILE class, the z-index property is defined as 1, the location is at the bottom * // <div class = "Pile" id = "text1" style = "color: # fff33; z- INDEX: 2 "> This text will be overwritten on the picture. </ div> // * Defines the color of a piece of text and the z-index property of 2, in the intermediate position * // <img src = "075.gif" class = "Pile1" id = "image" style = "z- INDEX: 3 "> // * Import the second picture, make it" Pile1 "class, the z-index property is 3, the location is at the top * // </ body> </ html></p>
<p>Through the examples of these two sections, we can see that the CSS positioning has powerful features, as for some other positioning properties, you can try it yourself, very simple. Using the CSS positioning function, you will make your page more exquisite, more dynamic. Next chapter I will take you into the wonderful world of CSS filters.</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-92170.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>)
</div><div></div></div></div><ul class="postlist list-unstyled">
</ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="92170" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved
</div><div class="col text-right">Processed:
<b>0.051</b>, SQL:
<b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script>
var debug = DEBUG = 0;
var url_rewrite_on = 1;
var url_path = './';
var forumarr = {"1":"Tech"};
var fid = 1;
var uid = 0;
var gid = 0;
xn.options.water_image_url = 'view/img/water-small.png';
</script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script>
var forum_url = 'list-1.html';
var safe_token = 'ToFwIYaXfcIkhj9qaDZ5QmOgwmG3JzGx1ghc_2F5Rg31cdpqMzfTxdv8pN2AiH6X4ECddIW5zq8aGcSvyhZydrQw_3D_3D';
var body = $('body');
body.on('submit', '#form', function() {
var jthis = $(this);
var jsubmit = jthis.find('#submit');
jthis.reset();
jsubmit.button('loading');
var postdata = jthis.serializeObject();
$.xpost(jthis.attr('action'), postdata, function(code, message) {
if(code == 0) {
location.reload();
} else {
$.alert(message);
jsubmit.button('reset');
}
});
return false;
});
function resize_image() {
var jmessagelist = $('div.message');
var first_width = jmessagelist.width();
jmessagelist.each(function() {
var jdiv = $(this);
var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width();
var jmessage_width = Math.min(jdiv.width(), maxwidth);
jdiv.find('img, embed, iframe, video').each(function() {
var jimg = $(this);
var img_width = this.org_width;
var img_height = this.org_height;
if(!img_width) {
var img_width = jimg.attr('width');
var img_height = jimg.attr('height');
this.org_width = img_width;
this.org_height = img_height;
}
if(img_width > jmessage_width) {
if(this.tagName == 'IMG') {
jimg.width(jmessage_width);
jimg.css('height', 'auto');
jimg.css('cursor', 'pointer');
jimg.on('click', function() {
});
} else {
jimg.width(jmessage_width);
var height = (img_height / img_width) * jimg.width();
jimg.height(height);
}
}
});
});
}
function resize_table() {
$('div.message').each(function() {
var jdiv = $(this);
jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>');
});
}
$(function() {
resize_image();
resize_table();
$(window).on('resize', resize_image);
});
var jmessage = $('#message');
jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); });
jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); });
$('#nav li[data-active="fid-1"]').addClass('active');
</script>
