CSS Links

粉丝

1小时前1小时

行政经理

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

引用

参与讨论

你可立刻发布并稍后注册。如果你有帐户，立刻登录发布帖子。

粉丝

转到主题列表

CSS 12-Column Grid Layout
CSS 12-Column Grid Layout

Cavalry发布主题在教程

CSS 12-Column Grid Layout CSS 12-Column Grid Layout A 12-column grid is a common and flexible method for structuring web page content, particularly for responsive web design. The 12-column grid system divides the available horizontal space into 12 equal-width columns, allowing for precise placement and sizing of elements within the layout. Benefits of a 12-Column Grid Flexibility: The number 12 is highly divisible. Designers can easily create designs with halves, thirds, and quarters (2 columns of 6, 3 columns of 4, 4 columns of 3). Responsiveness: A 12-column grid is ideal for building responsive websites that adapt to different screen sizes (desktop, tablet, or mobile) with mediaqueries. This provides a consistent user experience across all platforms. Efficiency: Having a pre-defined structure speeds up the design process. Here is how to create a basic 12-column CSS Grid layout: Define the Grid Container Apply display: grid; to the grid container. Create the 12 Columns Use the grid-template-columns property to define the 12 columns. The code repeat(12, [col-start] 1fr); creates a 12-column grid with equal-width, and names the start line of each column track col-start. repeat(12,..): Tells the grid to repeat the following track definition 12 times, resulting in 12 columns. [col-start]: This creates a named grid line. Because it is repeated 12 times, you will have 12 lines named col-start. This is useful for placing grid items at specific start points within the grid. 1fr: A fractional unit that represents one fraction of the total available space in the grid container. By using 1fr, each of the 12 columns will be an equal, fluid width. Place the Grid Items Grid items can then be placed and sized across these 12 columns using grid-column. To make a grid item span a certain number of columns, use grid-column: span <number>; or grid-column: <start-line> / span <number>;. You can also define the start and end grid lines for an item using grid-column: <start-line> / <end-line>;. Use Mediaqueries to Add Breakpoints Always design for mobile first: Here we display the sections in the source order (from top to bottom) for screens less than 576 pixels wide. Then, we go to a two-column layout for screens between 576 and 767 pixels wide. Then, we go to a three-column layout for screens over 767 pixels wide. Example Complete example of a 12-column grid layout: * { box-sizing: border-box; } .container { display: grid; grid-template-columns: repeat(12, [col-start] 1fr); gap: 20px; } nav ul { list-style: none; margin: 0; padding: 0; } /* Mobile first */ .container > * { border: 1px solid green; background-color: beige; padding: 10px; grid-column: col-start / span 12; } @media (min-width: 576px) { .sidebar { grid-column: col-start / span 3; grid-row: 3; } .ads { grid-column: col-start / span 3; } .content, .footer { grid-column: col-start 4 / span 9; } nav ul { display: flex; justify-content: space-between; } } @media (min-width: 768px) { .nav { grid-column: col-start / span 2; grid-row: 2 / 4; } .content { grid-column: col-start 3 / span 8; grid-row: 2 / 4; } .sidebar { grid-column: col-start 11 / span 2; } .ads { grid-column: col-start 11 / span 2; } .footer { grid-column: col-start / span 12; } nav ul { flex-direction: column; } } Try it Yourself » ★ +1 Sign in to track progress
- 11分钟前11分钟
- 0篇回复
CSS Grid Layout
CSS Grid Layout

Cavalry发布主题在教程

CSS Grid Layout CSS Grid Layout Module The Grid Layout Module offers a grid-based layout system, with rows and columns. The Grid Layout Module allows developers to easily create complex web layouts. The Grid Layout Module makes it easy to design a responsive layout structure, without using float or positioning. My Header Link 1 Link 2 Link 3 Lorem IpsumLorem ipsum odor amet, consectetuer adipiscing elit. Ridiculus sit nisl laoreet facilisis aliquet. Potenti dignissim litora eget montes rhoncus sapien neque urna. Cursus libero sapien integer magnis ligula lobortis quam ut. Footer Try it Yourself » Grid vs. Flexbox CSS Grid is used for two-dimensional layout, with rows AND columns. CSS Flexbox is used for one-dimensional layout, with rows OR columns. CSS Grid Components A grid always consists of: A Grid Container - The parent (container) element, where the display property is set to grid or inline-grid One or more Grid Items - The direct children of the grid container automatically becomes grid items A Grid Container with Five Grid Items The element below represents a grid container (the blue area) with five grid items. 1 2 3 4 5 Example A grid container with five grid items: <html> <head> <style> .container { display: grid; grid-template-columns: auto auto auto; background-color: dodgerblue; padding: 10px; } .container div { background-color: #f1f1f1; border: 1px solid black; padding: 10px; font-size: 30px; text-align: center; } </style> </head> <body> <div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </body> </html> Try it Yourself » Note: You will learn more about grid containers and grid items in the next chapters. All CSS Grid Properties Property Description align-content Vertically aligns the whole grid inside the container (when total grid size is smaller than container) align-items Specifies the default alignment for items inside a flexbox or grid container align-self Aligns the content for a specific grid item along the column axis display Specifies the display behavior (the type of rendering box) of an element column-gap Specifies the gap between the columns gap A shorthand property for the row-gap and the column-gap properties grid A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties grid-area Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties grid-auto-columns Specifies a default column size grid-auto-flow Specifies how auto-placed items are inserted in the grid grid-auto-rows Specifies a default row size grid-column A shorthand property for the grid-column-start and the grid-column-end properties grid-column-end Specifies where to end the grid item grid-column-start Specifies where to start the grid item grid-row A shorthand property for the grid-row-start and the grid-row-end properties grid-row-end Specifies where to end the grid item grid-row-start Specifies where to start the grid item grid-template A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties grid-template-areas Specifies how to display columns and rows, using named grid items grid-template-columns Specifies the size of the columns, and how many columns in a grid layout grid-template-rows Specifies the size of the rows in a grid layout justify-content Horizontally aligns the whole grid inside the container (when total grid size is smaller than container) justify-self Aligns the content for a specific grid item along the row axis place-self A shorthand property for the align-self and the justify-self properties place-content A shorthand property for the align-content and the justify-content properties row-gap Specifies the gap between the grid rows ★ +1 Sign in to track progress
- 11分钟前11分钟
- 0篇回复
CSS Responsive Flexbox
CSS Responsive Flexbox

Cavalry发布主题在教程

CSS Responsive Flexbox Responsive Flexbox You learned from the CSS Media Queries chapter that you can use media queries to create different layouts for different screen sizes and devices. For example, if you want to create a three-column layout for large screen sizes, and a one-column layout for small screen sizes (such as phones), you can change the flex-direction from row to column at a specific breakpoint (600px in the example below): 1 2 3 Resize the browser window to see the effect. Example .flex-container { display: flex; flex-direction: row; } .flex-item { background-color: #f1f1f1; padding: 10px; font-size: 30px; text-align: center; width: 100%; } /* Make a one column-layout instead of three-column layout */ @media (max-width: 600px) { .flex-container { flex-direction: column; } } Try it Yourself » Another way is to change the percentage of the flex property of the flex items to create different layouts for different screen sizes. Note that we also have to include flex-wrap: wrap; on the flex container for this example to work: Example .flex-container { display: flex; flex-wrap: wrap; } .flex-item { background-color: #f1f1f1; padding: 10px; text-align: center; font-size: 30px; flex: 33.3%; } /* Make a one column-layout instead of a three-column layout */ @media (max-width: 600px) { .flex-item { flex: 100%; } } Try it Yourself » Responsive Image Gallery using Flexbox Here, we use media queries together with flexbox to create a responsive image gallery: Try it Yourself » Responsive Website using Flexbox Use flexbox to create a responsive website, containing a flexible navigation bar and flexible content: Try it Yourself » ★ +1 Sign in to track progress
- 11分钟前11分钟
- 0篇回复

CSS Links

推荐的帖子

CSS Links

CSS Styling Links

Example

Styling Links Depending on State

Example

CSS Links - Text Decoration

Example

CSS Links - Background Color

Example

More Examples

Example

Example

参与讨论

动态

CSS 12-Column Grid Layout

CSS Grid Layout

CSS Responsive Flexbox

24 小时内在线的用户 1

帐户

导航

搜索

配置浏览器推送通知

Chrome (安卓)

Chrome (台式电脑)

Safari (iOS 16.4+)

Safari (macOS)

Edge (安卓)

Edge (台式电脑)

Firefox (安卓)

Firefox (台式电脑)