### CSS Box Model Sizing Example Source: https://www.runoob.com/css/css-boxmodel This example demonstrates how to set the width, border, padding, and margin for a div element. It illustrates the calculation of the total element width considering all box model components. ```css div { width: 300px; border: 25px solid green; padding: 25px; margin: 25px; } ``` -------------------------------- ### CSS All Filters Example Source: https://www.runoob.com/css/ref/css3-pr-filter Provides examples of how to apply each CSS filter function individually using classes. This showcases the variety of visual effects achievable with the filter property. Supports vendor prefixes. ```css .blur { -webkit-filter: blur(4px); filter: blur(4px); } .brightness { -webkit-filter: brightness(0.30); filter: brightness(0.30); } .contrast { -webkit-filter: contrast(180%); filter: contrast(180%); } .grayscale { -webkit-filter: grayscale(100%); filter: grayscale(100%); } .huerotate { -webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg); } .invert { -webkit-filter: invert(100%); filter: invert(100%); } .opacity { -webkit-filter: opacity(50%); filter: opacity(50%); } .saturate { -webkit-filter: saturate(7); filter: saturate(7); } .sepia { -webkit-filter: sepia(100%); filter: sepia(100%); } .shadow { -webkit-filter: drop-shadow(8px 8px 10px green); filter: drop-shadow(8px 8px 10px green); } ``` -------------------------------- ### CSS Grid Layout: Web Page Template Example Source: https://www.runoob.com/css/ref/pr-grid-area This comprehensive example demonstrates how to name all grid elements and create a full web page template using `grid-area` and `grid-template-areas`. It defines areas for header, menu, main content, right sidebar, and footer, showcasing a practical application of CSS Grid for responsive design. ```css .item1 { grid-area: header; } .item2 { grid-area: menu; } .item3 { grid-area: main; } .item4 { grid-area: right; } .item5 { grid-area: footer; } .grid-container { grid-template-areas: 'header header header header header header' 'menu main main main right right' 'menu footer footer footer footer footer'; } ``` -------------------------------- ### CSS Example Layout with Header, Menu, and Content Source: https://www.runoob.com/css/css-rwd-grid An example of a styled responsive layout including a header, a navigation menu, and main content area. It uses custom background colors, padding, and box-shadow for visual appeal. ```css html { font-family: "Lucida Sans", sans-serif; } .header { background-color: #9933cc; color: #ffffff; padding: 15px; } .menu ul { list-style-type: none; margin: 0; padding: 0; } .menu li { padding: 8px; margin-bottom: 7px; background-color :#33b5e5; color: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } .menu li:hover { background-color: #0099cc; } ``` -------------------------------- ### CSS minmax() Examples for Grid Track Sizing Source: https://www.runoob.com/css/ref/func-minmax Examples demonstrating the usage of the CSS minmax() function to define size ranges for grid tracks. It includes various combinations of length, percentage, flex, max-content, min-content, and auto values. ```css /* , values */ minmax(200px, 1fr) minmax(400px, 50%) minmax(30%, 300px) minmax(100px, max-content) minmax(min-content, 400px) minmax(max-content, auto) minmax(auto, 300px) minmax(min-content, auto) /* , values */ minmax(200px, 1fr) minmax(30%, 300px) minmax(400px, 50%) minmax(50%, min-content) minmax(300px, max-content) minmax(200px, auto) /* , values */ minmax(400px, 50%) minmax(30%, 300px) minmax(min-content, 200px) minmax(max-content, 200px) minmax(auto, 300px) ``` -------------------------------- ### CSS :visited Selector Example Source: https://www.runoob.com/css/ref/sel-visited Demonstrates how to apply specific styles to links that have already been visited by the user. This is achieved using the :visited pseudo-class in CSS. ```css a:visited { background-color: yellow; } ``` -------------------------------- ### CSS Composite Filter Example Source: https://www.runoob.com/css/ref/css3-pr-filter Demonstrates applying multiple CSS filter functions simultaneously by separating them with spaces. The order of filters is important for the final effect. Supports vendor prefixes. ```css img { -webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari, Opera */ filter: contrast(200%) brightness(150%); } ``` -------------------------------- ### CSS: Open New Tab Example Source: https://www.runoob.com/css/ref/css3-pr-target-new This CSS code snippet demonstrates how to configure a link to open in a new tab. It utilizes the 'target-name' and 'target-new' properties. Note that browser support for 'target-new' is limited. ```css a { target-name: new; target-new: tab; } ``` -------------------------------- ### Untitled No description -------------------------------- ### CSS grid-row-start Property Example Source: https://www.runoob.com/css/ref/pr-grid-row-start This snippet demonstrates how to use the `grid-row-start` property in CSS to specify the starting row for a grid item. It's a fundamental property for CSS Grid Layout. ```css .item1 { grid-row-start: 2; } ``` -------------------------------- ### Untitled No description -------------------------------- ### CSS grid-column property example Source: https://www.runoob.com/css/ref/pr-grid-column This CSS snippet demonstrates how to use the 'grid-column' property to set the starting and ending positions of a grid item. It shows how to specify the column lines for placement and how to use the 'span' keyword to define the number of columns an item should span. ```css .item1 { grid-column: 1 / 5; } ``` ```css .item1 { grid-column: 1 / span 3; } ``` ```css .item2 { grid-column: 2 / span 3; } ``` -------------------------------- ### CSS Attribute Value Starts With Prefix Selector Source: https://www.runoob.com/css/ref/css-selectors This selector targets elements whose attribute value starts with a specific prefix, including hyphenated values. '[lang|=en]' selects elements where the 'lang' attribute is exactly 'en' or starts with 'en-' (e.g., 'en-US'). ```css [lang|=en] { background-image: url('flags/en.png'); } ``` -------------------------------- ### CSS: 设置网格项的起始列 Source: https://www.runoob.com/css/ref/pr-grid-column-start 使用 CSS 的 grid-column-start 属性来指定一个网格项从哪一列开始。这对于创建复杂的网格布局非常有用。 ```css .item1 { grid-column-start: 2; } ``` -------------------------------- ### CSS Animation Timing Functions: Predefined Values Source: https://www.runoob.com/css/ref/css3-pr-animation-timing-function Demonstrates the use of predefined timing functions for CSS animations. These include 'linear' for constant speed, 'ease' for a slow start and end, 'ease-in' for a slow start, 'ease-out' for a slow end, and 'ease-in-out' for slow start and end. ```css #div1 { animation-timing-function: linear; } #div2 { animation-timing-function: ease; } #div3 { animation-timing-function: ease-in; } #div4 { animation-timing-function: ease-out; } #div5 { animation-timing-function: ease-in-out; } ``` -------------------------------- ### CSS Grid Align Content - Start Source: https://www.runoob.com/css/3/css-grid-container Applies 'align-content' with 'start' to align grid items to the top of the container along the column axis. ```css .grid-container { display: grid; height: 400px; align-content: start; } ``` -------------------------------- ### Untitled No description -------------------------------- ### CSS Grid Justify Content - Start Source: https://www.runoob.com/css/3/css-grid-container Applies 'justify-content' with 'start' to align grid items to the beginning of the row axis within the container. ```css .grid-container { display: grid; justify-content: start; } ``` -------------------------------- ### Untitled No description -------------------------------- ### CSS direction Property Example Source: https://www.runoob.com/css/ref/pr-text-direction This example demonstrates how to set the text direction to right-to-left using the CSS 'direction' property along with 'unicode-bidi' for overriding bidirectional algorithm. ```css div { direction:rtl; unicode-bidi: bidi-override; } ``` -------------------------------- ### Untitled No description -------------------------------- ### Untitled No description -------------------------------- ### CSS Element Selector Example Source: https://www.runoob.com/css/css-id-class Also known as the tag selector, this example shows how to style all instances of a specific HTML element (e.g., all 'p' tags) using its tag name. ```html

italic text

``` -------------------------------- ### CSS Height and Width Example Source: https://www.runoob.com/css/ref/pr-dim-height This example demonstrates how to set the height and width of a paragraph element using CSS. It sets a fixed height and width of 100 pixels for elements with the class 'ex'. ```css p.ex { height:100px; width:100px; } ``` -------------------------------- ### Untitled No description -------------------------------- ### Untitled No description -------------------------------- ### CSS :enabled Selector Example Source: https://www.runoob.com/css/ref/sel-enable This example demonstrates how to use the CSS :enabled selector to style enabled input elements. It targets input elements with type 'text' and applies a yellow background color. ```css input[type="text"]:enabled { background:#ffff00; } ``` ```css input:enabled { background:#ffff00; } ``` -------------------------------- ### CSS3 多媒体查询：小于 600px 视窗隐藏 div - CSS Source: https://www.runoob.com/css/3/css3-mediaqueries 该 CSS3 多媒体查询实例用于在屏幕可视窗口尺寸小于 600 像素时隐藏特定的 div 元素（class 为 'example'）。这常用于在小屏幕设备上简化界面，隐藏不必要的元素。 ```css @media screen and (max-width: 600px) { div.example { display: none; } } ``` -------------------------------- ### CSS :disabled Selector - General Example Source: https://www.runoob.com/css/ref/sel-disabled A general example of using the CSS :disabled selector to apply a background color to all disabled input elements. This selector is primarily used for form elements to indicate their non-interactive state. ```css input:disabled { background:#dddddd; } ``` -------------------------------- ### Untitled No description -------------------------------- ### JavaScript: 设置网格项的起始列 Source: https://www.runoob.com/css/ref/pr-grid-column-start 通过 JavaScript 动态设置 CSS 属性，可以修改网格项的起始列。这允许在运行时改变布局。 ```javascript object.style.gridColumnStart="3"; ``` -------------------------------- ### CSS :after Pseudo-element Example Source: https://www.runoob.com/css/ref/sel-after This example demonstrates how to use the :after pseudo-element in CSS to insert content after each

element. It shows basic content insertion and styling with background color, text color, and font weight. ```css p:after { content: "- Remember this"; background-color: yellow; color: red; font-weight: bold; } ``` -------------------------------- ### CSS Attribute Value Starts With Selector Source: https://www.runoob.com/css/ref/css-selectors This selector targets elements whose attribute value begins with a specific substring. 'a[src^="https"]' selects all elements where the 'src' attribute starts with 'https'. ```css a[src^="https"] { color: green; } ``` -------------------------------- ### Untitled No description -------------------------------- ### Untitled No description -------------------------------- ### CSS :target Selector Example Source: https://www.runoob.com/css/ref/sel-target This example demonstrates how to use the CSS :target selector to style an active HTML anchor element. The :target selector applies styles to the element whose ID matches the fragment identifier in the current URL. ```css :target { border: 2px solid #D4D4D4; background-color: #e5eecc; } ``` -------------------------------- ### CSS Outline Property Example Source: https://www.runoob.com/css/ref/pr-outline This example demonstrates how to set an outline around a paragraph element using CSS. The outline is a line drawn around the border of an element, located outside the border. It can be used to highlight elements. ```css p { outline: #00FF00 dotted thick; } ``` -------------------------------- ### Untitled No description -------------------------------- ### Untitled No description -------------------------------- ### Untitled No description -------------------------------- ### Untitled No description -------------------------------- ### CSS grid-rows Property Example Source: https://www.runoob.com/css/ref/css3-pr-grid-rows Demonstrates how to define row heights in a CSS grid layout using the `grid-rows` property. This example sets a 100px header row and additional 30px and 60px rows. Browser support for this property is currently limited. ```css div { grid-rows:100px (30px 60px); } ``` -------------------------------- ### CSS Box Model Sizing for Limited Space Example Source: https://www.runoob.com/css/css-boxmodel This example shows how to set CSS properties for a div to fit within a total width of 250 pixels. It adjusts the width property while keeping padding and border consistent, demonstrating how to manage total element size. ```css div { width: 220px; padding: 10px; border: 5px solid gray; margin: 0; } ``` -------------------------------- ### Untitled No description -------------------------------- ### CSS Overlapping Elements Example Source: https://www.runoob.com/css/css-positioning 演示了如何使用z-index属性来控制重叠元素的堆叠顺序。z-index值越高，元素越靠前。 ```css img { position:absolute; left:0px; top:0px; z-index:-1; } ``` -------------------------------- ### Untitled No description -------------------------------- ### CSS Sticky Positioning Example Source: https://www.runoob.com/css/css-positioning 演示了CSS的sticky定位属性，元素根据用户的滚动位置进行定位。在滚动到特定阈值前表现为relative，之后表现为fixed。 ```css div.sticky { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; background-color: green; border: 2px solid #4CAF50; } ``` -------------------------------- ### Untitled No description -------------------------------- ### CSS Relative Positioning Example Source: https://www.runoob.com/css/css-positioning 演示了CSS的relative定位属性，元素相对于其正常位置进行定位。移动相对定位元素时，其原本占据的空间不会改变。 ```css h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; } h2.pos_top { position:relative; top:-50px; } ``` -------------------------------- ### CSS Fixed Positioning Example Source: https://www.runoob.com/css/css-positioning 演示了CSS的fixed定位属性，使元素相对于浏览器窗口固定位置，即使窗口滚动也不会移动。需要DOCTYPE声明才能在旧版IE中支持。 ```css p.pos_fixed { position:fixed; top:30px; right:5px; } ``` -------------------------------- ### HTML 链接不同屏幕尺寸的 CSS 文件 Source: https://www.runoob.com/css/ref/css3-pr-mediaquery 通过 HTML 的 `` 标签，为不同屏幕尺寸的设备引入不同的 CSS 文件。使用 `media` 属性来指定条件，例如 `min-width` 和 `max-width`。 ```html ``` -------------------------------- ### CSS :focus Selector Example Source: https://www.runoob.com/css/ref/sel-focus This example demonstrates how to apply styles to an input field when it receives focus using the CSS :focus pseudo-class. It targets the input element and changes its background color to yellow when focused. Browser support details are also provided, noting a requirement for in IE8. ```css input:focus { background-color:yellow; } ``` -------------------------------- ### Untitled No description -------------------------------- ### CSS Grid Layout repeat() Function Examples Source: https://www.runoob.com/css/ref/func-repeat Demonstrates various ways to use the `repeat()` function in CSS Grid Layout to define repeating track patterns. This includes fixed repetitions, auto-filling, and auto-fitting, along with examples using named grid lines and different sizing functions. ```css /* values */ repeat(4, 1fr) repeat(4, [col-start] 250px [col-end]) repeat(4, [col-start] 60% [col-end]) repeat(4, [col-start] 1fr [col-end]) repeat(4, [col-start] min-content [col-end]) repeat(4, [col-start] max-content [col-end]) repeat(4, [col-start] auto [col-end]) repeat(4, [col-start] minmax(100px, 1fr) [col-end]) repeat(4, [col-start] fit-content(200px) [col-end]) repeat(4, 10px [col-start] 30% [col-middle] auto [col-end]) repeat(4, [col-start] min-content [col-middle] max-content [col-end]) /* values */ repeat(auto-fill, 250px) repeat(auto-fit, 250px) repeat(auto-fill, [col-start] 250px [col-end]) repeat(auto-fit, [col-start] 250px [col-end]) repeat(auto-fill, [col-start] minmax(100px, 1fr) [col-end]) repeat(auto-fill, 10px [col-start] 30% [col-middle] 400px [col-end]) /* values */ repeat(4, 250px) repeat(4, [col-start] 250px [col-end]) repeat(4, [col-start] 60% [col-end]) repeat(4, [col-start] minmax(100px, 1fr) [col-end]) repeat(4, [col-start] fit-content(200px) [col-end]) repeat(4, 10px [col-start] 30% [col-middle] 400px [col-end]) ``` -------------------------------- ### Untitled No description -------------------------------- ### CSS Attribute Selector Example Source: https://www.runoob.com/css/ref/sel-attribute Demonstrates how to select HTML elements based on their attributes using CSS. This example specifically targets anchor (a) elements that have a 'target' attribute, applying a yellow background color to them. It's widely supported by modern browsers, with a note for IE8 compatibility requiring a DOCTYPE declaration. ```css a[target] { background-color:yellow; } ``` -------------------------------- ### Untitled No description -------------------------------- ### CSS :nth-of-type() Selector Example Source: https://www.runoob.com/css/ref/sel-nth-of-type 演示了如何使用CSS :nth-of-type() 选择器来匹配特定类型的同级兄弟元素，并为其设置背景色。此选择器对于区分具有相同标签但不同位置的元素非常有用。 ```css p:nth-of-type(2) { background: #ff0000; } ``` -------------------------------- ### Untitled No description -------------------------------- ### Untitled No description -------------------------------- ### CSS Absolute Positioning Example Source: https://www.runoob.com/css/css-positioning 演示了CSS的absolute定位属性，元素相对于最近的已定位父元素进行定位。如果无已定位父元素，则相对于定位。 ```css h2 { position:absolute; left:100px; top:150px; } ``` -------------------------------- ### CSS background-color Property Example Source: https://www.runoob.com/css/ref/pr-background-color This snippet demonstrates how to set the background color of different HTML elements using the CSS 'background-color' property. It shows examples using named colors, hexadecimal values, and RGB color codes. The 'background-color' property defines the background color of an element and can be set to a color value, 'transparent', or 'inherit'. ```css body { background-color: yellow; } h1 { background-color: #00ff00; } p { background-color: rgb(255, 0, 255); } ``` -------------------------------- ### Untitled No description -------------------------------- ### Untitled No description -------------------------------- ### CSS Static Positioning Example Source: https://www.runoob.com/css/css-positioning 演示了CSS的static定位属性，这是HTML元素的默认值，遵循正常的文档流，不受top, bottom, left, right属性影响。 ```css div.static { position: static; border: 3px solid #73AD21; } ``` -------------------------------- ### CSS:enabled Selector Example Source: https://www.runoob.com/css/ref/sel-enabled 演示了如何使用CSS的:enabled选择器来选中并设置所有启用的input[type='text']元素的背景颜色。此选择器主要用于表单元素，以控制用户可交互的表单项的样式。 ```css input[type="text"]:enabled { background:#ffff00; } ``` -------------------------------- ### Untitled No description -------------------------------- ### Untitled No description -------------------------------- ### CSS :first-line Selector Example Source: https://www.runoob.com/css/ref/sel-firstline This example demonstrates how to apply styles to the first line of a paragraph element using the CSS :first-line pseudo-element. It targets all

elements and sets their first line's background color to yellow. This selector is applicable to block-level elements and supports font, color, background, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, and clear properties. ```css p:first-line { background-color:yellow; } ``` -------------------------------- ### Untitled No description -------------------------------- ### CSS Grid Layout with minmax() Function Example Source: https://www.runoob.com/css/ref/func-minmax This CSS code demonstrates the use of the minmax() function within a CSS Grid Layout to define flexible track sizes. It sets up a grid container with three columns, where the first column's width can range from its content's maximum size up to 300px, the second column can grow to fill available space but is at least 200px wide, and the third column is fixed at 150px. This example is useful for creating responsive grid layouts. ```css #container { display: grid; grid-template-columns: minmax(max-content, 300px) minmax(200px, 1fr) 150px; grid-gap: 5px; box-sizing: border-box; height: 200px; width: 100%; background-color: #8cffa0; padding: 10px; } #container > div { background-color: #8ca0ff; padding: 5px; } ```