w3c编程教程

THE WORLD'S LARGEST WEB DEVELOPER SITE

×

HTML和CSS学习HTML学习CSS了解Bootstrap学习W3.CSS学习色彩学习图标学习图形Learn SVGLearn Canvas了解如何学习sass
            XML
            学习XML
            学习XML AJAX
            学习XML DOM
            学习XML DTD
            学习XML模式
            了解XSLT
            学习XPath
            学习XQuery
          
JavaScript学习JavaScript学习jQuery学习React学习AngularJS学习JSON学习AJAX学习W3.JS编程学习Python学习Java学习C ++学习C＃机器学习


          服务器端
          学习SQL
          学习PHP
          学习ASP
          学习Node.js
          学习Raspberry Pi          
          网站建设
          网页模板
          网络统计
          网络证书
          网页编辑器
          网站开发
          测试您的打字速度
        

          XML
          学习XML
          学习XML AJAX
          学习XML DOM
          学习XML DTD
          学习XML模式
          了解XSLT
          学习XPath
          学习XQuery
        

×

          HTML
          HTML Tag 参考
          HTML浏览器支持
          HTML Event 参考
          HTML Color 参考
          HTML Attribute 参考
          HTML画布 参考
          HTML SVG  参考
          HTML字符集
          谷歌地图 参考
          CSS
          CSS参考
          CSS浏览器支持
          CSS Selector 参考
          Bootstrap 3参考
          Bootstrap 4参考
          W3.CSS参考
          Icon 参考
          Sass参考
       

          JavaScript
          JavaScript 参考
          HTML DOM 参考
          jQuery参考
          AngularJS参考
          W3.JS参考
          编程
          Python参考
          Java参考
        

          服务器端
          SQL参考
          PHP参考
          ASP 参考
          XML
          XML 参考
          XML Http 参考
          XSLT 参考
          XML模式 参考
        

          Character Sets
          HTML字符集
          HTML ASCII码
          HTML ANSI
          HTML Windows-1252
          HTML ISO-8859-1
          HTML符号
          HTML UTF-8
        

×

CSS 示例

❮ Previous Next ❯

CSS语法

CSS syntax explained

CSS选择器

The element selector The id selector The class selector (for all elements) The class selector (for only <p> elements) An HTML element that refer to two classes The universal selector Grouping selectors

CSS selectors explained

CSS如何 / Where To

External CSS Internal CSS Inline CSS Multiple style sheets Cascading order

CSS how to explained

CSS注释

Single-line comment Multi-line comment

CSS comments explained

CSS颜色

Set the background color of an element Set the text color Set the border color Set different color values Set RGB values Set HEX values Set HSL values

CSS colors explained

CSS背景

Set the background color of a page Set the background color of different elements Set an image as the background of a page How to repeat a background image only horizontally How to position a background image A fixed background image (this image will not scroll with the rest of the page) All the background properties in one declaration 高级 background example

Background properties explained

CSS边框

Border properties explained

CSS边距

Specify different margins for each side of an element Use shorthand margin property with four values Use shorthand margin property with three values Use shorthand margin property with two values Use shorthand margin property with one value Set margin to auto to center the element within its container Let the left margin be inherited from the parent element Margin collapse

Margin properties explained

CSS填充

Specify different padding for each side of an element Use shorthand padding property with four values Use shorthand padding property with three values Use shorthand padding property with two values Use shorthand padding property with one value Padding and element width (without box-sizing) Padding and element width (with box-sizing) Set padding-left of an element Set padding-right of an element Set padding-top of an element Set padding-bottom of an element

Padding properties explained

CSS高度/宽度

Set the height and width of an element Set max-width of an element Set the height and width of different elements Set the height and width of an image using percent Set min-width and max-width of an element Set min-height and max-height of an element

Dimension properties explained

CSS Box模型

Demonstrating the box model Specify an element with a total width of 250px

Box model explained

CSS大纲

Draw a line around an element (outline) Set the style of an outline Set the color of an outline Use outline-color: invert on an outline Set the width of an outline Use the shorthand outline property Add space between an outline and the edge/border of an element

大纲 properties explained

CSS文字

Set the text color of different elements Align the text Remove the line under links Decorate the text Control the letters in a text Indent text Specify the space between characters Specify the space between lines Set the text direction of an element Increase the white space between words Specify a text shadow for an element Disable text wrapping inside an element Vertical alignment of an image inside text

Text properties explained

CSS字体

Set the font of a text Set the size of the font Set the size of the font in px Set the size of the font in em Set the size of the font in percent and em Set the style of the font Set the variant of the font Set the boldness of the font All the font properties in one declaration

Font properties explained

CSS图标

Font Awesome icons Bootstrap icons Google icons

Icons explained

CSS链接

Add different colors to visited/unvisited links Use of text-decoration on links Specify a background color for links Add other styles to hyperlinks Different types of cursors 高级 - Create link boxes 高级 - Create link boxes with borders

Link properties explained

CSS列表

All the different list item markers in lists Set an image as the list-item marker Position the list-item marker Remove default list settings All list properties in one declaration Style lists with colors Full-width bordered list

List properties explained

CSS表

Specify a black border for table, th, and td elements Use of border-collapse Single border around the table Specify the width and height of a table Set the horizontal alignment of content (text-align) Set the vertical alignment of content (vertical-align) Specify the padding for th and td elements Horizontal dividers Hoverable table Striped tables Specify the color of the table borders Set the position of the table caption Responsive Table Create a fancy table

Table properties explained

CSS显示

How to hide an element (visibility:hidden) How to not display an element (display:none) How to display a block-level element as an inline element How to display an inline element as a block-level element How to to use CSS together with JavaScript to show hidden content

Display properties explained

CSS位置ing

Position an element relative to the browser window Position an element relative to its normal position Position an element with an absolute value Sticky positioning Overlapping elements Set the shape of an element Set the top edge of an image using a pixel value Set the bottom edge of an image using a pixel value Set the left edge of an image using a pixel value Set the right edge of an image using a pixel value Position image text (top left corner) Position image text (top right corner) Position image text (bottom left corner) Position image text (bottom right corner) Position image text (centered)

Positioning properties explained

CSS溢出

Using overflow: visible - The overflow is not clipped. It renders outside the element's box. Using overflow: hidden - The overflow is clipped, and the rest of the content is hidden. Using overflow: scroll - The overflow is clipped, but a scrollbar is added to see the rest of the content. Using overflow: auto - If overflow is clipped, a scrollbar should be added to see the rest of the content. Using overflow-x and overflow-y.

Overflow properties explained

CSS浮动ing

A simple use of the float property An image with border and margins that floats to the right in a paragraph An image with a caption that floats to the right Let the first letter of a paragraph float to the left Turning off float (using the clear property) Turning off float (using the "clearfix" hack) Create floating boxes Create side-by-side images Create equal-height boxes (with flexbox) Creating a horizontal menu Create a web layout example

浮动 properties explained

CSS内联块

Show the differences between inline, inline-block and block Using inline-block to create navigation links

Inline-block explained

CSS对齐ing Elements

Center aligning with margin Center aligning text Center an image Left/Right aligning with position Left/Right aligning with position - Crossbrowser solution Left/Right aligning with float Left/Right aligning with float - Crossbrowser solution Center vertically with padding Center vertically and horizontally Center vertically with line-height Center vertically and horizontally with position

Align properties explained

CSS组合器

Descendant selector Child selector Adjacent Sibling selector General Sibling selector

Combinator selectors explained

CSS伪类es

Add different colors to a hyperlink Add other styles to hyperlinks Use of :focus :first-child - match the first p element :first-child - match the first i element in all p elements :first-child - Match all i elements in all first child p elements Use of :lang

Pseudo-classes explained

CSS伪元素s

Make the first letter special in a text Make the first line special in a text Make the first letter and first line special Use :before to insert some content before an element Use :after to insert some content after an element

Pseudo-elements explained

CSS Generated Content

Insert the URL in parenthesis after each link with the content property Numbering sections and sub-sections with "Section 1", "1.1", "1.2", etc. Specify the quotation marks with the quotes property

CSS计数器 explained

CSS不透明度

Creating transparent images Creating transparent images - mouseover effect Reversed mouseover effect for transparent images Transparent box/div Transparent box/div with RGBA values Creating a transparent box with text on a background image

Image opacity explained

CSS导航栏s

Fully styled vertical navigation bar Fully styled horizontal navigation bar Full-height fixed vertical navigation bar Fixed horizontal navigation bar Sticky navigation bar (does not work in IE or Edge 15 and earlier) Responsive top navigation Responsive side navigation

Navigation bars explained

CSS下拉列表

Dropdown text Dropdown menu Right-aligned dropdown menu Dropdown image Dropdown navigation bar

Dropdowns explained

CSS图片库

Image gallery Responsive Image gallery

Image gallery explained

CSS图像精灵

An image sprite An image sprite - a navigation list An image sprite with hover effect

Image sprites explained

CSS Attribute Selectors

Selects all <a> elements with a target attribute Selects all <a> elements with a target="_blank" attribute Selects all elements with a title attribute that contains a space-separated list of words, one of which is "flower"Selects all elements with a class attribute value that begins with "top" (must be whole word) Selects all elements with a class attribute value that begins with "top" (must not be whole word) Selects all elements with a class attribute value that ends with "test" Selects all elements with a class attribute value that contains "te"

Attribute selectors explained

CSS表格

Full-width input field Padded input field Bordered input field Bottom bordered input field Colored input fields Focused input fields Focused input fields 2 Input with icon/image Animated search input Styling textareas Styling select menus Styling input buttons Responsive form

Forms explained

CSS计数器

Create a counter Nested counters 1 Nested counters 2

Counters explained

CSS网站布局

Simple, responsive website layout A website example

Website Layout explained

CSS圆角

Add rounded corners to elements Round each corner separately Create elliptical corners

CSS rounded corners explained

CSS边框图片

Create an image border around an element, using the round keyword Create an image border around an element, using the stretch keyword Image border - Different slice values

CSS border images explained

CSS背景

Add multiple background images for an element Specify the size of a background image 规模 a background image using "contain" and "cover" Define sizes of multiple background images Full-size background image (completely fill the content area) Use background-origin to specify where the background image is positioned Use background-clip to specify the painting area of the background

CSS backgrounds explained

CSS渐变

Linear Gradient - top to bottom Linear Gradient - left to right Linear Gradient - diagonal Linear Gradient - with a specified angle Linear Gradient - with multiple color stops Linear Gradient - color of a rainbow + text Linear Gradient - with transparency Linear Gradient - a repeating linear gradient Radial Gradient - evenly spaced color stops Radial Gradient - differently spaced color stops Radial Gradient - set shape Radial Gradient - different size keywords Radial Gradient - a repeating radial gradient

CSS gradients explained

CSS 阴影效果

Simple shadow effect Add a color to the shadow Add a blur effect to the shadow White text with black shadow A red neon glow shadow A red and blue neon glow shadow White text with black, blue, and darkblue shadow Add a simple box-shadow to an element Add color to box-shadow Add color and blur effect to box-shadow Create paper-like cards (text) Create paper-like cards (polaroid images)

CSS shadow effects explained

CSS文字 Effects

Specify how hidden, overflowed content should be signaled to the user How to display the overflowed content when hover over the element Allow long words to be able to be broken and wrap onto the next line Specify line breaking rules

CSS text explained

CSS Web字体

Use your "own" fonts in @font-face rule Use your "own" fonts in @font-face rule (bold)

CSS web fonts explained

CSS 2D转换

translate() - move an element from its current position rotate() - rotate an element clockwise rotate() - rotate an element counter-clockwise scale() - increase an element scale() - decrease an element skewX() - skews an element along the X-axis skewY() - skews an element along the Y-axis skew() - skews an element along the X and Y-axis matrix() - rotate, scale, move, and skew an element

CSS 2D transforms explained

CSS 3D变形

rotateX() - rotate an element around its X-axis at a given degree rotateY() - rotate an element around its Y-axis at a given degree rotateZ() - rotate an element around its Z-axis at a given degree

CSS 3D transforms explained

CSS过渡

Transition - change width of an element Transition - change width and height of an element Specify different speed curves for a transition Specify a delay for a transition effect Add a transformation to a transition effect Specify all transition properties in one shorthand property

CSS transitions explained

CSS动画

Bind an animation to an element Animation - change background-color of an element Animation - change background-color and position of an element Delay an animation Run animation 3 times before it stops Run animation for ever Run animation in reverse direction Run animation in alternate cycles Speed curves for animations Animation shorthand property

CSS animations explained

CSS工具提示

Right tooltip Left tooltip Top tooltip Bottom tooltip Tooltip with arrow Animated tooltip

工具提示 explained

CSS样式图片

Rounded image Circled image Thumbnail image Thumbnail image as link Responsive image Image text (top left corner) Image text (top right corner) Image text (bottom left corner) Image text (bottom right corner) Image text (centered) Polaroid images Grayscale image filter 高级 - Image Modal with CSS and JavaScript

CSS图像 explained

CSS Object-fit

Cut off the sides of an image, preveserving the aspect ratio, and fill in the space An example of all object-fit property values

Object-fit explained

CSS按钮

Basic CSS buttons Button colors Button sizes Rounded buttons Colored button borders Hoverable buttons Shadow buttons Disabled buttons Button width Button groups Bordered button group Animated Button (Hover Effect) Animated Button (Ripple Effect) Animated Button (Pressed Effect)

CSS buttons explained

CSS分页

Simple pagination Active and hoverable pagination Rounded active and hoverable pagination Hoverable transition effect Bordered pagination Rounded bordered pagination 分页 with space between links 分页 size 分页 with space between links Centered pagination 面包屑

CSS pagination explained

CSS多列

Create multiple columns Specify the gap between columns Specify the style of the rule between columns Specify the width of the rule between columns Specify the color of the rule between columns Specify the width, style and color of the rule between columns Specify how many columns an element should span across Specify a suggested, optimal width for the columns

CSS multiple columns explained

CSS用户界面

Let a user resize the width of an element Let a user resize the height of an element Let a user resize both the width and height of an element Add space between an outline and the border of an element

CSS user interface explained

CSS变量

Using the var() function Using the var() function to insert several custom property values

CSS variables explained

CSS Box大小

Width of elements without box-sizing Width of elements with box-sizing Form elements + box-sizing

CSS box sizing explained

CSS Flexbox

CSS flexbox explained

CSS媒体查询

Change the background-color to lightgreen if the viewport is 480px wide or wider Show a menu that will float to the left of the page if the viewport is 480px wide or wider

CSS media queries explained

CSS媒体查询 - More 示例

Set different background colors depending on screen width Responsive navigation menu Responsive columns using float Responsive columns using flexbox Hide elements with media queries Responsive font size Responsive image gallery Responsive website Change layout of a page depending on the orientation of the browser Min width to max width

CSS media queries examples explained

CSS Responsive Webdesign

Responsive grid view Add breakpoints for desktops, laptops and phones Typical breakpoints Responsive image Responsive video Responsive framework: W3.CSS Responsive framework: Bootstrap

CSS responsive webdesign explained

CSS Grid

Grid layout Grid elements Grid column gaps Grid lines Grid container Grid items

CSS grid explained

❮ Previous Next ❯

W3Schools is optimized for learning, testing, and training. 示例 might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2020 by Refsnes Data. All Rights Reserved.
Powered by W3.CSS.