所有动态

CSS Lists An unordered list: Coffee Tea Coca Cola An ordered list: Coffee Tea Coca Cola CSS Styling Lists In HTML, there are two main types of lists: <ul> - unordered lists (list items are marked with bullets) <ol> - ordered lists (list items are marked with numbers or letters) CSS has the following properties for styling HTML lists: list-style-type - Specifies the type of list-item marker list-style-image - Specifies an image as the list-item marker list-style-position - Specifies the position of the list-item markers list-style - A shorthand property for the properties above CSS Style List-item Markers The CSS list-style-type property specifies the type of list-item marker in a list. The following example shows some of the available list-item markers: Example ul.a {list-style-type: circle;} ul.b {list-style-type: disc;} ul.c {list-style-type: square;} ol.d {list-style-type: upper-roman;} ol.e {list-style-type: lower-roman;} ol.f {list-style-type: lower-alpha;} ol.g {list-style-type: decimal;} Try it Yourself » Note: Some of the values are for unordered lists, and some for ordered lists. CSS Replace List-item Marker with an Image The CSS list-style-image property is used to replace the list-item marker with an image. Note: Always specify a list-style-type property in addition. This property is used if the image for some reason is unavailable. Example Replace the list-item markers with an image: ul { list-style-image: url('sqpurple.gif'); list-style-type: square; } Try it Yourself » CSS Position the List-item Markers The CSS list-style-position property specifies the position of the list-item markers (bullet points). list-style-position: outside; means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically. This is default: Coffee Tea Coca-cola list-style-position: inside; means that the bullet points will be inside the list item. As it is part of the list item, it will be part of the text and push the text at the start: Coffee Tea Coca-cola Example Position the list-item markers: ul.a { list-style-position: outside; } ul.b { list-style-position: inside; } Try it Yourself » CSS Remove List-Item Markers The list-style-type:none; property is used to remove the list-item markers. Note: A list has a default margin and padding. To remove this, add margin:0 and padding:0 to the <ul> or <ol> element: Example Remove the list-item markers: ul { list-style-type: none; margin: 0; padding: 0; } Try it Yourself » CSS list-style Shorthand Property The list-style property is a shorthand property. It is used to set all the list properties in one declaration. When using the shorthand property, the order of the property values are: list-style-type list-style-position list-style-image If one of the property values above is missing, the default value for the missing property will be inserted. Example Use the list-style shorthand property: ul { list-style: square inside url("sqpurple.gif"); } Try it Yourself » CSS Styling List With Colors We can also style lists with colors, margins and padding, to make them look a little more interesting. Anything added to the <ol> or <ul> tag, affects the entire list, while properties added to the <li> tag will affect the individual list items: Example Styling lists with colors, margins and padding: ol { background: salmon; padding: 20px; } ol li { background: mistyrose; color: darkred; padding: 10px; margin-left: 20px; } ul { background: powderblue; padding: 20px; } ul li { background: mistyrose; color: darkblue; margin: 5px; } Result: Coffee Tea Coca Cola Coffee Tea Coca Cola Try it Yourself » More Examples Customized list with a red left border This example demonstrates how to create a list with a red left border. Full-width bordered list This example demonstrates how to create a bordered list without bullets. All the different list-item markers for lists This example demonstrates all the different list-item markers in CSS. All CSS List Properties Property Description list-style Sets all the properties for a list in one declaration list-style-image Specifies an image as the list-item marker list-style-position Specifies the position of the list-item markers (bullet points) list-style-type Specifies the type of list-item marker ★ +1 Sign in to track progress

CSS Links Text Link Text Link CSS Styling Links HTML links can be styled with many CSS properties, like color, text-decoration, background-color, font-size, font-weight, font-family, etc.). Example Style a link with a color, background-color, and a bold font-weight: a { color: hotpink; background-color: yellow; font-weight: bold; } Try it Yourself » Styling Links Depending on State In addition, links can be styled differently depending on what state they are in. The four link states are: :link - a normal, unvisited link :visited - a link the user has visited :hover - a link when the user mouses over it :active - a link the moment it is clicked When setting the style for link states, there are some order rules: :hover must come after :link and :visited :active must come after :hover Example Style links according to link state: /* unvisited link */ a:link { color: red; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: hotpink; } /* selected link */ a:active { color: blue; } Try it Yourself » CSS Links - Text Decoration The text-decoration property is mostly used to remove underlines from links: Example a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: underline; } a:active { text-decoration: underline; } Try it Yourself » CSS Links - Background Color The background-color property can be used to specify a background color for links: Example a:link { background-color: yellow; } a:visited { background-color: cyan; } a:hover { background-color: lightgreen; } a:active { background-color: hotpink; } Try it Yourself » More Examples Example This example demonstrates how to add other styles to HTML links: a.one:link {color:red;} a.one:visited {color:blue;} a.one:hover {color:orange;} a.two:link {color:red;} a.two:visited {color:blue;} a.two:hover {font-size:150%;} a.three:link {color:red;} a.three:visited {color:blue;} a.three:hover {background:lightgreen;} a.four:link {color:red;} a.four:visited {color:blue;} a.four:hover {font-family:monospace;} a.five:link {color:red;text-decoration:none;} a.five:visited {color:blue;text-decoration:none;} a.five:hover {text-decoration:underline;} Try it Yourself » Example This example demonstrates the different types of cursors (can be useful for links): <span style="cursor: auto">auto</span><br> <span style="cursor: crosshair">crosshair</span><br> <span style="cursor: default">default</span><br> <span style="cursor: e-resize">e-resize</span><br> <span style="cursor: help">help</span><br> <span style="cursor: move">move</span><br> <span style="cursor: n-resize">n-resize</span><br> <span style="cursor: ne-resize">ne-resize</span><br> <span style="cursor: nw-resize">nw-resize</span><br> <span style="cursor: pointer">pointer</span><br> <span style="cursor: progress">progress</span><br> <span style="cursor: s-resize">s-resize</span><br> <span style="cursor: se-resize">se-resize</span><br> <span style="cursor: sw-resize">sw-resize</span><br> <span style="cursor: text">text</span><br> <span style="cursor: w-resize">w-resize</span><br> <span style="cursor: wait">wait</span> Try it Yourself » ★ +1 Sign in to track progress

CSS Icons - Font Awesome Icons can easily be added to your HTML page, by using an icon library. How To Add Icons The simplest way to add an icon to your HTML page, is with an icon library, such as Font Awesome. Add the name of the specified icon class to any inline HTML element (like <i> or <span>). All the icons in the icon libraries below, are scalable vectors that can be customized with CSS (size, color, shadow, etc.) Font Awesome Icons To use the Font Awesome icons, go to fontawesome.com, sign in, and get a code to add in the <head> section of your HTML page: <script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script> Read more about how to get started with Font Awesome in our Font Awesome 5 tutorial. Note: No downloading or installation is required! Example <!DOCTYPE html> <html> <head> <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> </head> <body> <i class="fas fa-cloud"></i> <i class="fas fa-heart"></i> <i class="fas fa-car"></i> <i class="fas fa-file"></i> <i class="fas fa-bars"></i> </body> </html> Result: Try It Yourself » For a complete reference of all Font Awesome icons, visit our Icon Reference. ★ +1 Sign in to track progress

CSS Fonts Font Selection is Important Choosing the right font has a huge impact on how the readers experience a website. The right font can create a strong identity for your brand. Choosing a font that is easy to read is important. It is also important to choose a good color and size for your font. The CSS font-family Property The CSS font-family property specifies the font for an element. Tip: The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font. The font names should be separated with a comma. Always start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available. Note: If the font name is more than one word, it must be in quotation marks, like: "Times New Roman". Tip: Read more about fallback fonts in CSS Web Safe Fonts. Example Specify some different fonts for three paragraphs: .p1 { font-family: "Times New Roman", Times, serif; } .p2 { font-family: Arial, Helvetica, sans-serif; } .p3 { font-family: "Lucida Console", "Courier New", monospace; } Try it Yourself » CSS Generic Font Families In CSS, there are five generic font families: Serif fonts - have a small stroke at the edges of each letter. They create a sense of formality and elegance. Sans-serif fonts - have clean lines (no small strokes attached). They create a modern and minimalistic look. Monospace fonts - here all the letters have the same fixed width. They create a mechanical look. Cursive fonts - imitate human handwriting. Fantasy fonts - are decorative/playful fonts. All the different font names belong to one of the generic font families. Difference Between Serif and Sans-serif Fonts Note: On computer screens, sans-serif fonts are considered easier to read than serif fonts. Some Font Examples Generic Font Family Examples of Font Names Serif Times New Roman Georgia Garamond Sans-serif Arial Verdana Helvetica Monospace Courier New Lucida Console Monaco Cursive Brush Script MT Lucida Handwriting Fantasy Copperplate Papyrus ★ +1 Sign in to track progress

CSS Text Color CSS has a lot of properties for styling and formatting text. text formatting This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from this colored "Try it Yourself" link. Try it Yourself » CSS Text Color The color property is used to set the color of the text. The color is specified by: a color name - like "red" a HEX value - like "#ff0000" an RGB value - like "rgb(255,0,0)" Look at CSS Color Values for a complete list of possible color values. The default text color for a page is defined in the body selector. Example body { color: blue; } h1 { color: green; } h2 { color: red; } Try it Yourself » Text Color and Background Color In this example, we define both the background-color property and the color property: Example body { background-color: lightgrey; color: blue; } h1 { background-color: black; color: white; } div { background-color: blue; color: white; } Try it Yourself » Important: High contrast is very important for people with vision problems. So, always ensure that the contrast between the text color and the background color (or background image) is good! The CSS Text Color Property Property Description color Specifies the color of text ★ +1 Sign in to track progress

CSS Outline An outline is a line drawn around an element, outside the element's border. This element has a black border and a green outline with a width of 10px. Try it Yourself » CSS Outline An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element "stand out". Note: Outline differs from borders! The outline is drawn outside the element's border, and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline. CSS has the following outline properties: outline-style - Specifies the style of the outline outline-color - Specifies the color of the outline outline-width - Specifies the width of the outline outline-offset - Adds space between the outline and the edge/border of an element outline - A shorthand property CSS The outline-style Property The outline-style property specifies the style of the outline, and can have one of the following values: dotted - Defines a dotted outline dashed - Defines a dashed outline solid - Defines a solid outline double - Defines a double outline groove - Defines a 3D grooved outline ridge - Defines a 3D ridged outline inset - Defines a 3D inset outline outset - Defines a 3D outset outline none - Defines no outline hidden - Defines a hidden outline The following example shows the different outline-style values: Example Demonstration of the different outline styles: p.dotted {outline-style: dotted;} p.dashed {outline-style: dashed;} p.solid {outline-style: solid;} p.double {outline-style: double;} p.groove {outline-style: groove;} p.ridge {outline-style: ridge;} p.inset {outline-style: inset;} p.outset {outline-style: outset;} Result: A dotted outline. A dashed outline. A solid outline. A double outline. A groove outline. The effect depends on the outline-color value. A ridge outline. The effect depends on the outline-color value. An inset outline. The effect depends on the outline-color value. An outset outline. The effect depends on the outline-color value. Try it Yourself » Note: None of the other outline properties (which you will learn more about in the next chapters) will have ANY effect unless the outline-style property is set! ★ +1 Sign in to track progress

CSS Box Model The CSS Box Model In CSS, the term "box model" is used when talking about web design and layout. The CSS box model is essentially a box that wraps around every HTML element. Every box consists of four parts: content, padding, borders and margins. The image below illustrates the CSS box model: Explanation of the different parts (from innermost part to outermost part): Content - The content of the box, where text and images appear Padding - Clears an area around the content. The padding is transparent Border - A border that goes around the padding and content Margin - Clears an area outside the border. The margin is transparent The box model allows us to add a border around elements, and to define space between elements. Example Demonstration of the box model: div { width: 300px; border: 15px solid green; padding: 50px; margin: 20px; } Try it Yourself » Width and Height of an Element In order to set the width and height of an element correctly in all browsers, you need to know how the box model works. Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the total width and height of an element, you must also include the padding and borders. Example This <div> element will have a total width of 350px and a total height of 80px: div { width: 320px; height: 50px; padding: 10px; border: 5px solid gray; margin: 0; } Try it Yourself » Here is the calculation: 320px (width of content area) + 20px (left padding + right padding) + 10px (left border + right border) = 350px (total width) 50px (height of content area) + 20px (top padding + bottom padding) + 10px (top border + bottom border) = 80px (total height) The total width of an element should be calculated like this: Total element width = width + left padding + right padding + left border + right border The total height of an element should be calculated like this: Total element height = height + top padding + bottom padding + top border + bottom border Note: The margin property also affects the total space that the box will take up on the page, but the margin is not included in the actual size of the box. The box's total width and height stops at the border. ★ +1 Sign in to track progress

CSS Height and Width CSS Height and Width The CSS height and width properties are used to set the height and width of an element. This element has a height of 70 pixels and a width of 100%. Try it Yourself » CSS Set height and width The height and width properties are used to set the height and width of an element. The height and width do not include padding, borders, or margins. It sets the height and width of the area inside the padding, border, and margin of the element. CSS height and width Values The height and width properties can have the following values: auto - This is default. The browser calculates the height and width length - Defines the height or width in px, cm, em, etc. % - Defines the height or width in percent of the containing block initial - Sets the height or width to its default value inherit - The height or width will be inherited from its parent value CSS height and width Examples This element has a height of 200 pixels and a width of 50% Example Set the height and width of a <div> element: div { height: 200px; width: 50%; background-color: powderblue; } Try it Yourself » This element has a height of 100 pixels and a width of 500 pixels. Example Set the height and width of another <div> element: div { height: 100px; width: 500px; background-color: powderblue; } Try it Yourself » Note: Remember that the height and width properties do not include padding, borders, or margins! They set the height/width of the area inside the padding, border, and margin of the element! Try it Yourself - Examples Set the height and width of elements This example demonstrates how to set the height and width of different elements. Set the height and width of an image using percent This example demonstrates how to set the height and width of an image using a percent value. ★ +1 Sign in to track progress

CSS Padding This element has a padding of 70px. Try it Yourself » CSS Padding The CSS padding properties are used to generate space around an element's content, inside of any defined borders. With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left), and a shorthand property for setting all the padding properties in one declaration. Padding - Individual Sides CSS has properties for specifying the padding for each side of an element: padding-top - sets the top padding of an element padding-right - sets the right padding of an element padding-bottom - sets the bottom padding of an element padding-left - sets the left padding of an element All the padding properties can have the following values: length - specifies a padding in px, pt, cm, etc. % - specifies a padding in % of the width of the containing element inherit - specifies that the padding should be inherited from the parent element Note: Negative values are not allowed. Example Set different padding for all four sides of a <div> element: div { padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px; } Try it Yourself » Padding - Shorthand Property To shorten the code, it is possible to specify all the padding properties in one declaration. The padding property is a shorthand property for the following individual padding properties: padding-top padding-right padding-bottom padding-left Here is how it works: If the padding property has four values: padding: 25px 50px 75px 100px; top padding is 25px right padding is 50px bottom padding is 75px left padding is 100px Example Use the padding shorthand property with four values: div { padding: 25px 50px 75px 100px; } Try it Yourself » If the padding property has three values: padding: 25px 50px 75px; top padding is 25px right and left paddings are 50px bottom padding is 75px Example Use the padding shorthand property with three values: div { padding: 25px 50px 75px; } Try it Yourself » If the padding property has two values: padding: 25px 50px;top and bottom paddings are 25px right and left paddings are 50px Example Use the padding shorthand property with two values: div { padding: 25px 50px; } Try it Yourself » If the padding property has one value: padding: 25px;all four paddings are 25px Example Use the padding shorthand property with one value: div { padding: 25px; } Try it Yourself » More Examples Set the left-padding property This example demonstrates how to set the left padding of a <p> element. Set the right-padding property This example demonstrates how to set the right padding of a <p> element. Set the top-padding property This example demonstrates how to set the top padding of a <p> element. Set the bottom-padding property This example demonstrates how to set the bottom padding of a <p> element. ★ +1 Sign in to track progress

CSS Margins This element has a margin of 70px. Try it Yourself » CSS Margins The CSS margin properties are used to create space around elements, outside of any defined borders. Margins define the distance between an element's border and the surrounding elements. With CSS, you have full control over the margins. CSS has properties for setting the margin for each individual side of an element (top, right, bottom, and left), and a shorthand property for setting all the margin properties in one declaration. Margin - Individual Sides CSS has properties for specifying the margin for each side of an element: margin-top - sets the top margin of an element margin-right - sets the right margin of an element margin-bottom - sets the bottom margin of an element margin-left - sets the left margin of an element All the margin properties can have the following values: auto - the browser calculates the margin length - specifies a margin in px, pt, cm, etc. % - specifies a margin in % of the width of the containing element inherit - specifies that the margin should be inherited from the parent element Tip: Negative values are also allowed. Example Set different margins for all four sides of a <p> element: p { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; } Try it Yourself » Margin - Shorthand Property To shorten the code, it is possible to specify all the margin properties in one declaration. The margin property is a shorthand property for the following individual margin properties: margin-top margin-right margin-bottom margin-left Here is how it works: If the margin property has four values: margin: 25px 50px 75px 100px; top margin is 25px right margin is 50px bottom margin is 75px left margin is 100px Example Use the margin shorthand property with four values: p { margin: 25px 50px 75px 100px; } Try it Yourself » If the margin property has three values: margin: 25px 50px 75px; top margin is 25px right and left margins are 50px bottom margin is 75px Example Use the margin shorthand property with three values: p { margin: 25px 50px 75px; } Try it Yourself » If the margin property has two values: margin: 25px 50px;top and bottom margins are 25px right and left margins are 50px Example Use the margin shorthand property with two values: p { margin: 25px 50px; } Try it Yourself » If the margin property has one value: margin: 25px;all four margins are 25px Example Use the margin shorthand property with one value: p { margin: 25px; } Try it Yourself » The auto Value You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins. Example Use margin: auto: div { width: 300px; margin: auto; border: 1px solid red; } Try it Yourself » The inherit Value You can set the margin property to inherit to let the margin be inherited from the parent element. This example lets the left margin of the <p class="ex1"> element be inherited from the parent element (<div>): Example Use of the inherit value: div { border: 1px solid red; margin-left: 100px; } p.ex1 { margin-left: inherit; } Try it Yourself » All CSS Margin Properties Property Description margin A shorthand property for setting all the margin properties in one declaration margin-bottom Sets the bottom margin of an element margin-left Sets the left margin of an element margin-right Sets the right margin of an element margin-top Sets the top margin of an element ★ +1 Sign in to track progress

CSS Borders CSS Borders The CSS border properties allow you to specify the style, width, and color of an element's border. I have borders on all sides. I have a red, bottom border. I have rounded borders. I have a blue, left border. CSS Border Style The border-style property specifies what kind of border to display. The following values are allowed: dotted - Defines a dotted border dashed - Defines a dashed border solid - Defines a solid border double - Defines a double border groove - Defines a 3D grooved border. The effect depends on the border-color value ridge - Defines a 3D ridged border. The effect depends on the border-color value inset - Defines a 3D inset border. The effect depends on the border-color value outset - Defines a 3D outset border. The effect depends on the border-color value none - Defines no border hidden - Defines a hidden border The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border). Example Demonstration of the different border styles: p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;} Result: A dotted border. A dashed border. A solid border. A double border. A groove border. The effect depends on the border-color value. A ridge border. The effect depends on the border-color value. An inset border. The effect depends on the border-color value. An outset border. The effect depends on the border-color value. No border. A hidden border. A mixed border. Try it Yourself » Note: None of the OTHER CSS border properties (which you will learn more about in the next chapters) will have ANY effect unless the border-style property is set! ★ +1 Sign in to track progress

CSS Backgrounds CSS Backgrounds The CSS background properties are used to add background effects for elements. In these chapters, you will learn about the following CSS background properties: background-color background-image background-repeat background-attachment background-position background (shorthand property) CSS background-color The background-color property specifies the background color of an element. Example The background color of a page is set like this: body { background-color: lightblue; } Try it Yourself » With CSS, a color is most often specified by: a valid color name - like "red" a HEX value - like "#ff0000" an RGB value - like "rgb(255,0,0)" Look at CSS Color Values for a complete list of possible color values. Other Elements You can set the background color for any HTML elements: Example Here, the <h1>, <p>, and <div> elements will have different background colors: h1 { background-color: green; } div { background-color: lightblue; } p { background-color: yellow; } Try it Yourself » Opacity / Transparency The opacity property specifies the opacity/transparency of an element. It can take a value from 0.0 - 1.0. The lower value, the more transparent: opacity 1 opacity 0.6 opacity 0.3 opacity 0.1 Example div { background-color: green; opacity: 0.3; } Try it Yourself » Note: When using the opacity property to add transparency to the background of an element, all of its child elements inherit the same transparency. This can make the text inside a fully transparent element hard to read. Transparency using RGBA If you do not want to apply opacity to child elements, like in our example above, use RGBA color values. The following example sets the opacity for the background color and not the text: 100% opacity 60% opacity 30% opacity 10% opacity You learned from our CSS Colors Chapter, that you can use RGB as a color value. In addition to RGB, you can use an RGB color value with an alpha channel (RGBA) - which specifies the opacity for a color. An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). Tip: You will learn more about RGBA Colors in our CSS Colors Chapter. Example div { background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */ } Try it Yourself » The CSS Background Color Property Property Description background-color Sets the background color of an element Video: CSS Background Color ★ +1 Sign in to track progress

CSS Colors CSS Colors In CSS, colors are specified by using a predefined color name, or with a RGB, HEX, HSL, RGBA, HSLA value. CSS Color Names In CSS, a color can be specified by using a predefined color name: Tomato Orange DodgerBlue MediumSeaGreen Gray SlateBlue Violet LightGray Try it Yourself » CSS/HTML support 140 standard color names. CSS Background Color You can set the background color for HTML elements: Hello World Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Example <h1 style="background-color:DodgerBlue;">Hello World</h1> <p style="background-color:Tomato;">Lorem ipsum...</p> Try it Yourself » CSS Text Color You can set the color of text: Hello World Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Example <h1 style="color:Tomato;">Hello World</h1> <p style="color:DodgerBlue;">Lorem ipsum...</p> <p style="color:MediumSeaGreen;">Ut wisi enim...</p> Try it Yourself » CSS Border Color You can set the color of borders: Hello World Hello World Hello World Example <h1 style="border:2px solid Tomato;">Hello World</h1> <h1 style="border:2px solid DodgerBlue;">Hello World</h1> <h1 style="border:2px solid Violet;">Hello World</h1> Try it Yourself » CSS Color Values In CSS, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values: Same as color name "Tomato": rgb(255, 99, 71) #ff6347 hsl(9, 100%, 64%) Same as color name "Tomato", but 50% transparent: rgba(255, 99, 71, 0.5) hsla(9, 100%, 64%, 0.5) Example <h1 style="background-color:rgb(255, 99, 71);">...</h1> <h1 style="background-color:#ff6347;">...</h1> <h1 style="background-color:hsl(9, 100%, 64%);">...</h1> <h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1> Try it Yourself » Learn more about Color Values You will learn more about RGB, HEX and HSL in the next chapters. Video: CSS Colors Introduction ★ +1 Sign in to track progress

CSS Errors CSS Errors Errors in CSS can lead to unexpected behavior or styles not being applied correctly. This page shows common CSS mistakes and how to avoid them. Missing Semicolons Forgetting a semicolon at the end of a property declaration can break the style rule. Example .bad { color: red background-color: yellow; } Try it Yourself » Invalid Property Names Using a property name that does not exist will simply be ignored by the browser. Example .bad { colr: blue; font-size: 16px; } Try it Yourself » Invalid Values Correct properties but invalid values will also be ignored. Example .bad { width: -100px; color: green; } Try it Yourself » Unclosed Braces If you forget to close a brace }, the entire rule may be ignored. Example .bad { padding: 20px; margin: 10px; Try it Yourself » Extra Colons or Braces Typos like extra colons or misplaced braces can cause rules to break. Example .bad { color:: blue; } Try it Yourself » Tips to Avoid CSS Errors Use a code editor with syntax highlighting. Validate your CSS with a CSS linter or validator. Write CSS in small sections and test frequently. ★ +1 Sign in to track progress

CSS Comments CSS Comments Comments are used to explain the CSS code, and may help when you edit the source code at a later date. Comments are also used to temporarily disable sections of CSS code within a stylesheet. Comments are ignored by browsers! A CSS comment is placed inside the HTML <style> element, and starts with /* and ends with */: Example /* This is a single-line comment */ p { color: red; } Try it Yourself » You can add comments wherever you want in the code: Example p { color: red; /* Set text color to red */ } Try it Yourself » Even in the middle of a code line: Example p { color: /*red*/blue; } Try it Yourself » Comments can also span multiple lines: Example /* This is a multi-line comment */ p { color: red; } Try it Yourself » HTML and CSS Comments From the HTML tutorial, you learned that you can add comments to your HTML source by using the <!--...--> syntax. In the following example, we use a combination of HTML and CSS comments: Example <!DOCTYPE html> <html> <head> <style> p { color: red; /* Set text color to red */ } </style> </head> <body> <h2>My Heading</h2> <!-- These paragraphs will be red --> <p>Hello World!</p> <p>This paragraph is styled with CSS.</p> <p>HTML and CSS comments are not shown in the output.</p> </body> </html> Try it Yourself » Video: CSS Comments ★ +1 Sign in to track progress

How To Add CSS How to Add CSS When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet. There are three ways of inserting a style sheet: External CSS - link to an external .css file Internal CSS - use the <style> element in the head section Inline CSS - use the style attribute on HTML elements External CSS With an external style sheet, you can change the look of an entire website by changing just one file! Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section. Example External styles are defined within the <link> element, inside the <head> section of an HTML page: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="mystyle.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> Try it Yourself » An external style sheet can be written in any text editor, and must be saved with a .css extension. The external .css file should not contain any HTML tags. Here is how the "mystyle.css" file looks: "mystyle.css" body { background-color: lightblue; } h1 { color: navy; margin-left: 20px; } Note: Do not add a space between the property value (20) and the unit (px): Incorrect (space): margin-left: 20 px; Correct (no space): margin-left: 20px; Video: How to add CSS to HTML ★ +1 Sign in to track progress

CSS Selectors CSS Selectors CSS selectors are used to "find" (or select) the HTML elements you want to style. We can divide CSS selectors into five categories: Simple selectors (select elements based on name, id, class) Combinator selectors (select elements based on a specific relationship between them) Pseudo-class selectors (select elements based on a certain state) Pseudo-elements selectors (select and style a part of an element) Attribute selectors (select elements based on an attribute or attribute value) This page will explain the most basic CSS selectors. The CSS element Selector The element selector selects HTML elements based on the element name. Example Here, all <p> elements on the page will be center-aligned, with a red text color: p { text-align: center; color: red; } Try it Yourself » The CSS id Selector The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique within a page, so the id selector is used to select one unique element! To select an element with a specific id, write a hash (#) character, followed by the id of the element. Example The CSS rule below will be applied to the HTML element with id="para1": #para1 { text-align: center; color: red; } Try it Yourself » Note: An id name cannot start with a number! The CSS class Selector The class selector selects HTML elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the class name. Example In this example all HTML elements with class="center" will be red and center-aligned: .center { text-align: center; color: red; } Try it Yourself » You can also specify that only specific HTML elements should be affected by a class. Example In this example only <p> elements with class="center" will be red and center-aligned: p.center { text-align: center; color: red; } Try it Yourself » HTML elements can also refer to more than one class. Example In this example the <p> element will be styled according to class="center" and to class="large": <p class="center large">This paragraph refers to two classes.</p> Try it Yourself » Note: A class name cannot start with a number! ★ +1 Sign in to track progress

CSS Syntax CSS Syntax A CSS rule consists of a selector and a declaration block: The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon. Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces. Example In this example all <p> elements will be center-aligned, with a red text color: p { color: red; text-align: center; } Try it Yourself » Example Explained p is a selector in CSS (it points to the HTML element you want to style: <p>). color is a property, and red is the property value text-align is a property, and center is the property value You will learn much more about CSS selectors and CSS properties in the next chapters! Video: CSS Syntax ★ +1 Sign in to track progress

CSS Introduction What is CSS? CSS is the language we use to style a Web page. CSS stands for Cascading Style Sheets CSS describes how HTML elements are to be displayed on screen, paper, or in other media CSS saves a lot of work. It can control the layout of multiple web pages all at once External stylesheets are stored in CSS files CSS Demo - One HTML Page - Multiple Styles! Here we will show one HTML page displayed with four different stylesheets. Click on the "Stylesheet 1", "Stylesheet 2", "Stylesheet 3", "Stylesheet 4" links below to see the different styles: Why Use CSS? CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes. CSS Example body { background-color: lightblue; } h1 { color: white; text-align: center; } p { font-family: verdana; font-size: 20px; } Try it Yourself » CSS Saves a Lot of Work! The CSS definitions are normally saved in an external .css file. With an external stylesheet file, you can change the look of an entire website by changing just one file! Video: CSS Introduction ★ +1 Sign in to track progress

CSS Tutorial Learn CSS CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced. Start learning CSS now » 🏁 Tip: Sign in to track your progress. Examples in Each Chapter This CSS tutorial contains over 700 CSS examples. With our online editor, you can edit the CSS, and click on a button to view the result. CSS Example body { background-color: lightblue; } h1 { color: white; text-align: center; } p { font-family: verdana; font-size: 20px; } Try it Yourself » Click on the "Try it Yourself" button to see how it works. CSS Examples Learn from over 700 examples! With our editor, you can edit the CSS, and click on a button to view the result. Go to CSS Examples! Use the Menu We recommend reading this tutorial, in the sequence listed in the menu. If you have a large screen, the menu will always be present on the left. If you have a small screen, open the menu by clicking the top menu sign ☰. CSS Templates We have created some responsive W3.CSS templates for you to use. You are free to modify, save, share, and use them in all your projects. Free CSS Templates! CSS Exercises Many chapters in this tutorial end with an exercise where you can check your level of knowledge. See all CSS Exercises CSS Quiz Test your CSS skills with a quiz. Start CSS Quiz! Track Your Progress Create a W3Schools account and get access to more features and learning materials: View your completed tutorials, exercises, and quizzes Keep an eye on your progress and daily streaks Join the leaderboard and compete with others Get your own avatar and unlock new skins Create your own personal website Sign Up » Note: This is an optional feature. You can study at W3Schools without creating an account. CSS References At W3Schools you will find complete CSS references of all properties and selectors with syntax, examples, browser support, and more. CSS Properties CSS Browser Support CSS Selectors CSS Combinators CSS Pseudo-classes CSS Pseudo-elements CSS At-rules CSS Functions CSS Animatable CSS Web Safe Fonts CSS Units Px to Em Conversion CSS Colors CSS Default Values CSS Entities CSS Aural Kickstart your career Get certified by completing the course Get certified ★ +1 Sign in to track progress

HuoNiu AiBot - 多模型AI机器人 HuoNiu AI BOT — XenForo 智能 AI 自动回复机器人，论坛冷场、新帖无人回复、会员活跃度不足？HuoNiu AI BOT 为你的论坛增加一个真正的“AI 原住民”。它绑定真实 XenForo 用户账号，自动读取帖子内容，理解上下文并生成自然回复，24 小时在线，从第一天开始帮助社区提升活跃度。 一、核心特性 多机器人独立管理 支持创建多个机器人，每个机器人绑定不同的 XenForo 用户账号，并以对应账号身份发布回复。 可分别设定为技术答疑型、活泼互动型或专题科普型机器人，各自负责不同版块，互不干扰。 多家 AI 服务商接入 支持接入多家国际与国内 AI 服务商，包括 OpenAI、xAI、Google Gemini、Anthropic Claude、Mistral、Perplexity、DeepSeek、豆包、通义千问、腾讯混元、文心一言、Kimi、智谱 GLM、讯飞星火、百川 AI 等。 支持自定义兼容 OpenAI Chat Completions 格式的接口地址，可对接中转站、私有部署或本地模型服务。 每个机器人可单独选择模型，方便根据预算与需求灵活调整。 四种触发模式 新主题触发 有人发布新主题时自动回复，适合问答类社区。 主题内任意新回复触发 全程参与讨论，提高互动频率。 提及机器人账号触发 仅在被提及时才回复，减少打扰。 指定关键词触发 当帖子包含预设关键词时自动响应，实现精准互动。 上下文感知回复 可开启上下文模式，将主题内前若干楼层内容一并提交给 AI 生成回复。默认读取 8 楼内容，最多支持 20 楼，使回复更加连贯自然。 系统提示词定制 支持为每个机器人设置专属提示词，自定义身份设定、语气风格和回答逻辑，打造不同个性的 AI 角色。 版块白名单 可指定机器人仅在选定版块内活动，实现精细化管理。 冷却时间控制 可设置同一主题内的最小回复间隔时间，默认 120 秒，避免频繁刷屏。 回复署名 支持在回复末尾追加自定义说明文字，增强透明度。 安全机制 内置重复回复防护与自我屏蔽机制，避免机器人回复自己的帖子或重复回复同一内容。 异步后台执行 基于 XenForo Job Queue 机制，所有触发操作均在后台异步执行，不阻塞前端访问，不影响论坛性能。 二、适用场景 技术或问答社区 新帖自动提供初步解答，减轻版主与核心用户压力。 兴趣或内容社区 围绕关键词或讨论内容自动补充信息，提高帖子质量与讨论深度。 新论坛冷启动 在用户数量较少阶段帮助营造活跃氛围，增强新访客信任感。 多语言社区 支持选择不同地区的 AI 服务商，匹配不同语言与用户群体需求。 文件信息 提交者 Cavalry 提交于 02/28/26 类别 XenForo 查看文件

欢迎使用本站积分系统！积分是本站的虚拟货币，可以用来解锁付费内容、购买资源、以及转赠给其他会员。本文将详细介绍积分的所有获取方式与消耗方式。 一、如何获得积分1. 注册奖励只要你完成账户注册并通过验证，系统就会自动发放一笔注册欢迎积分。这是你在本站获得的第一笔积分，开门红！ 2. 每日签到每天登录后前往签到页面完成签到，即可随机获得一定数量的积分。每天只能签到一次，坚持每天签到积累更多积分！ 3. 发帖/发布内容每当你在论坛发布新帖子、写新文章、上传图片等内容时，系统会自动奖励你一定数量的积分。内容创作越多，积分越多。（管理员可设置每日发帖奖励上限） 4. 回复/评论每次回复他人帖子或发表评论，也可以获得积分奖励。积极参与讨论，既能帮助他人，又能积累积分！（管理员可设置每日回复奖励上限） 5. 内容被点赞当其他会员对你发布的内容点赞时，你将自动获得积分奖励。内容质量越高、获得的点赞越多，赚取的积分也就越多。注意：自己给自己点赞不会获得奖励，且每日有获奖上限。 6. 出售付费资源如果你在资源下载区上传了付费文件，每当有人购买你的文件，你将自动获得销售分成（平台会保留一小部分作为手续费）。上传优质资源，持续被动收入！ 7. 充值购买积分你可以通过站内充值中心直接购买积分套餐。部分套餐在基础积分之外还会额外赠送bonus积分，购买越多越划算。 8. 消费返积分在本站商城消费真实货币时，可按一定比例换算获得积分返还（是否开启以管理员设置为准）。 9. 其他会员转账其他会员可以直接将积分转给你，转账到账的积分会实时更新到你的余额中。 10. 管理员奖励管理员可能会因为举报违规、参加活动、贡献优质内容等原因，手动为你发放积分奖励。 二、积分可以用来做什么1. 解锁付费帖子/内容部分帖子或文章的作者设置了积分价格，需要支付一定积分才能查看完整内容。支付后即可永久查看，无需重复付费。若余额不足，系统会引导你前往充值中心补充积分。 2. 购买付费资源文件资源下载区的部分资源需要使用积分购买才能下载。购买后即永久拥有下载权限。 3. 转账给其他会员你可以将自己的积分转账给其他会员。转账时可能会产生少量手续费（具体比例以站内公告为准）。 4. 管理员扣除若有违规行为，管理员有权扣除你的积分，请遵守社区规范。 温馨提示所有积分变动（获得或消耗）都会收到站内通知，可在通知中心查看详情。 积分余额及历史记录可在个人中心的「积分」页面随时查看。 如有疑问，欢迎联系管理员。 祝大家在本站玩得开心，积分满满！🎉