


Serial number Chinese description mark syntax remarks
1 Background color {background-color: numerical value}
2 Background image {background-image: url(URL)|none}
3 Background repeat {background-repeat:inherit| no-repeat|repeat|repeat-x|repeat-y}
4 Background fixed {background-attachment:fixed|scroll}
5 Background positioning {background-position:value|top|bottom|left|right| center}
6 Back style {background: background color | background image | background repeat | background attachment | background position}
1. Background color: background-color
Syntax: {background-color:numeric}
Explanation: The parameter value is the same as the color attribute
Note: In HTML, a background must be added to an object There is only one way to change the color, and that is to make a table first, set the background color in the table, and then put the object into the cell. This is more troublesome. Not only does it require a lot of code, but it also takes some trouble with the size and positioning of the table. Now it's easy to do it directly with CSS, and the object range is very wide, it can be a piece of text, or just a word or a letter.
Example: Add a background color to some textAdd a background color to some text
Table back color: style="background-color:red"
2. Background image: background-image
Syntax: {background-image: url(URL)|none}
Explanation: URL is the storage path of the background image. If "none" is used instead of the background image storage path, nothing will be displayed.
Example: Add a background image to some text .imgbgstyle { background-image: url(logo.gif)}
3. Background repetition: background-repeat
Syntax: {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
Function: Background image repetition controls background image tiling Or not, that is to say, combined with the control of background positioning, a background image can be displayed separately somewhere on the web page
Note: Parameter value range:
·inherit inheritance
·no-repeat not repeated Tile the background image
·repeat
·repeat-x makes the image tile only in the horizontal direction
·repeat-y makes the image tile only in the vertical direction
Note: If you do not specify a background For the image repeating attribute, the browser default is for the background image to be tiled in both horizontal and vertical directions.
4. Background fixed: background-attachment
Syntax: {background-attachment:fixed|scroll}
Description: Parameter value range
·fixed: When the web page is scrolled, the background image is relative to the browser window Generally speaking, fixed
·scroll: When the web page is scrolled, the background image scrolls together relative to the browser window
Note: The background image fixed controls whether the background image scrolls with the scrolling of the web page. If you do not set the background image fixed attribute, the browser's default background image will scroll with the scrolling of the web page. In order to prevent overly fancy background images from damaging the viewer's eyesight when scrolling, you can unbundle the background image and text content, which should be bundled with the browser window.
Example: CSS that prevents the background pattern from "scrolling" with the text
BODY { background: purple url(bg.jpg); background-repeat:repeat-y; background-attachment:fixed }
5. Background positioning: background-position
Syntax: {background-position:numeric|top|bottom|left|right|center}
Function: Background positioning is used to control the position of the background image displayed on the web page.
Description: Parameter value range
·Numeric parameter with length unit
·top: top alignment relative to the foreground object
·bottom: bottom alignment relative to the foreground object
·left: relative to the foreground object Left alignment
·right: Right alignment relative to the foreground object
·center: Center alignment relative to the foreground object
·Proportion relationship
The keywords are explained as follows:
top left = left top = 0% 0 %
top = top center = center top = 50% 0%
right top = top right = 100% 0%
left = left center = center left = 0% 50%
center = center center = 50% 50%
right = right center = center right = 100% 50%
bottom left = left bottom = 0% 100%
bottom = bottom center = center bottom = 50% 100% bottom right = right bottom = 100% 100%
Note: If the center in the parameter is used in front of another parameter, it means horizontal centering; if it is used after another parameter, it means vertical centering.
6. Background style: background
Syntax: {background:background color|background image|background repeat|background attachment|background position}
Function: The background attribute is a clearer background— Shorthand for relationship attributes. Here are some background declarations:
Example:
BODY { background: white url(http://www.htmlhelp.com/foo.gif) }
BLOCKQUOTE { background: #7fffd4 }
P { background: url(../backgrounds/pawn.png) #f0f8ff fixed }
TABLE { background: #0c0 url(leaves.jpg) no-repeat bottom right }
Note: When a value is not When specified, its initial value will be accepted. For example, in the first three rules above, the background position property would be set to 0% 0%. To avoid conflicts with the user's style sheet, the background and color should be specified together.

在css中,可用list-style-type属性来去掉ul的圆点标记,语法为“ul{list-style-type:none}”;list-style-type属性可设置列表项标记的类型,当值为“none”可不定义标记,也可去除已有标记。

区别是:css是层叠样式表单,是将样式信息与网页内容分离的一种标记语言,主要用来设计网页的样式,还可以对网页各元素进行格式化;xml是可扩展标记语言,是一种数据存储语言,用于使用简单的标记描述数据,将文档分成许多部件并对这些部件加以标识。

在css中,可以利用cursor属性实现鼠标隐藏效果,该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状,当属性值设置为none时,就可以实现鼠标隐藏效果,语法为“元素{cursor:none}”。

在css中,rtl是“right-to-left”的缩写,是从右往左的意思,指的是内联内容从右往左依次排布,是direction属性的一个属性值;该属性规定了文本的方向和书写方向,语法为“元素{direction:rtl}”。

在css中,可以利用“font-style”属性设置i元素不是斜体样式,该属性用于指定文本的字体样式,当属性值设置为“normal”时,会显示元素的标准字体样式,语法为“i元素{font-style:normal}”。

转换方法:1、给英文元素添加“text-transform: uppercase;”样式,可将所有的英文字母都变成大写;2、给英文元素添加“text-transform:capitalize;”样式,可将英文文本中每个单词的首字母变为大写。

在css3中,可以用“transform-origin”属性设置rotate的旋转中心点,该属性可更改转换元素的位置,第一个参数设置x轴的旋转位置,第二个参数设置y轴旋转位置,语法为“transform-origin:x轴位置 y轴位置”。


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Dreamweaver CS6
Visual web development tools

Zend Studio 13.0.1
Powerful PHP integrated development environment

Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Atom editor mac version download
The most popular open source editor
