Home >Web Front-end >HTML Tutorial >css(2)

css(2)

WBOYOriginal: 2016-08-26 10:13:131271browse

This article is a summary of common css queries that some authors have summarized in long-term coding. They are written in this blog to facilitate future queries.

1. Color attribute:

color

HEX (Hex color: color: #FFFF00 --> Abbreviation: #FF0)
RGB (red, green and blue, usage: color:rgb(255,255,0) or color:rgb(100%,100%,0%))
RGBA (red, green and blue transparency, A is the transparency value between 0~1. Usage method: color:rgba(255,255,0,0.5))
HSL (CSS3 is valid, H represents hue, S represents saturation, L represents brightness, usage method: color:hsl(360,100%,50%))
HSLA (Similar to HSL, A represents Alpha transparency, ranging from 0 to 1.)

transparent

Fully transparent, use: color: transparent;

opacity

The transparency of the element, syntax: opacity: 0.5;
The attribute value is in the range of 0.0 to 1.0, 0 means transparent and 1 means opaque.
filter filter attribute (only applicable to early IE browsers, syntax: filter:alpha(opacity:20);).

2. Font attributes:

font-style: used to specify italic text

normal Text is displayed normally
italic text italics
oblique Text oblique display

font-weight: Set the thickness of the text

normal (default)
bold
bolder (equivalent to and tags)

lighter (regular)

100 ~ 900 a hundred (400=normal, 700=bold)

font-size: Set the font size

Default value: medium

Optional parameter values: xx-small, x-small, small, medium, large, x-large, xx-large

Adjust relative to the size of the font in the parent tag. Optional parameter values: smaller, larger

Percentage specifies the text size.

Use the length value to specify the text size, negative values are not allowed.

font-family: font name

Use commas to separate multiple fonts (the priority is from front to back, if the current font is not found in the system, search backward)

font：abbreviation attribute

Syntax: font: font size/line height font; (font should be at the end)

3. Text attribute:

white-space: Set how to handle white space in elements

normal: Default processing method.

pre: Keep spaces and do not wrap when the text exceeds the boundary

nowrap: Do not preserve spaces, force all text to be displayed on the same line until the end of the text or the br tag is encountered

pre-wrap: Keep spaces and wrap text when it hits the boundary

pre-line: Do not retain spaces, retain the line wrapping of text, and wrap when the text hits the boundary

direction: Specifies the direction of the text

ltr By default, the text direction is from left to right.

rtl text direction is from right to left.

text-align: Horizontal alignment of text

left

center

right

line-height: Text line height

normal default

vertical-align: The vertical alignment of the line height of the text

baseline default

sub vertically aligns the subscript of the text, the same effect as the _{tag
super vertically aligns the superscript of the text, the same effect as the ^{tag
The top of the top object is aligned with the top of the container
text-top The top of the object is aligned with the top of the text on the line
middle element objects are vertically aligned based on the baseline
The bottom of the bottom object is aligned with the bottom of the text in the line
The bottom of the text-bottom object is aligned with the bottom of the text in the line}}

text-indent: Text indent

letter-spacing: Add space between letters

word-spacing: Add space between each word

text-transform: Attribute controls the case of text

capitalize Every word in the text starts with a capital letter.

uppercase defines uppercase letters only.

lowercase definition only has lowercase letters.

text-overflow: Text overflow style

clip Trim text.

ellipsis displays ellipses... to represent trimmed text.

string Use the given string to represent the trimmed text.

text-decoration: Text decoration
🎜

none is the default.

underline underline.

overline Overline.

line-through center line.

text-shadow: text shadow

The first parameter is the left and right position

The second parameter is the up and down position

The third parameter is the blur effect

The fourth parameter is color

text-shadow: 5px 5px 5px #888;

word-wrap: automatic line wrapping

word-wrap: break-word;

4. Background properties

Background Color

background-image sets the image as the background

url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png"); Image address

background-image:linear-gradient(green,blue,yellow,red,black); color gradient effect

background-position sets the position coordinates of the background image

background-position: center center; The picture is centered, x-axis center, y-axis center

1px -195px intercept a certain part of the picture, representing the coordinates of the x and y axes respectively

background-repeat sets the background image to not be repeatedly tiled

no-repeat Set the image not to repeat, commonly used

round automatically scales until it fits and fills the entire container

space is tiled with the same spacing and fills the entire container

background-attachment Whether the background image is fixed or scrolls with the rest of the page

background abbreviation

background: url("o_ns.png") no-repeat 0 -196px;

background: url("o_ns.png") no-repeat center bottom 15px;

background: url("o_ns.png") no-repeat left 30px bottom 15px;

5. List attributes

list-style-type: The type of list item flag

none remove logo

decimal-leading-zero; 02.

square; box

circle; hollow circle

upper-alph; & disc; solid circle

list-style-image: Set the image as the list item logo

list-style-position: The position of the list item mark

inside

outside

list-style: abbreviation

1. Border

border-style: border style

solid Default, solid line

double double line

dotted dotted lines

dashed dashed line

border-color: border color

border-width: border width

border-radius: rounded corners

1 parameter: applied to all four corners

2 parameters: the first parameter is applied to the upper left and lower right; the second parameter is applied to the lower left and upper right

3 parameters: the first parameter is applied to the upper left; the second parameter is applied to the lower left and upper right; the third parameter is applied to the lower right

4 parameters: upper left, upper right, lower right, lower left (clockwise)

border: abbreviation

border: 2px yellow solid;

box-shadow: border shadow

The first parameter is the left and right positions

The second parameter is the up and down position

The third parameter is the blur effect

The fourth parameter is color

box-shadow: 10px 10px 5px #888;

Some border implementation examples:

Code:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .radius1 { display: inline-block; width: 100px; height: 100px; background-color: yellow; border-radius: 20px; } .radius2 { display: inline-block; width: 100px; height: 100px; background-color: red; border-radius: 20px 35px; } .radius3 { display: inline-block; width: 100px; height: 100px; background-color: blue; border-radius: 20px 35px 50px; } .radius4 { display: inline-block; width: 100px; height: 100px; background-color: green; border-radius: 20px 35px 50px 60px; } </style> </head> <body> <div> <span class="radius1"></span> <span class="radius2"></span> <span class="radius3"></span> <span class="radius4"></span> </div> </body> </html>

View Code

Border implements various triangle symbols:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .triangle-one { display: inline-block; border-top: 50px red solid; border-right: 50px green solid; border-bottom: 50px yellow solid; border-left: 50px blue solid; } .triangle-two { display: inline-block; border-top: 0 red solid; border-right: 50px green solid; border-bottom: 50px yellow solid; border-left: 50px blue solid; } .triangle-stree { display: inline-block; border-top: 50px red solid; border-right: 0 green solid; border-bottom: 50px yellow solid; border-left: 50px blue solid; } .triangle-four { display: inline-block; border-top: 50px red solid; border-right: 0 green solid; border-bottom: 0 yellow solid; border-left: 50px blue solid; } .triangle-five { display: inline-block; border: 50px transparent solid; border-top: 50px red solid; } .triangle-six { display: inline-block; border: 50px transparent solid; border-bottom: 50px yellow solid; } .triangle-seven { display: inline-block; border: 50px transparent solid; border-top: 60px red solid; border-right: 0; } .triangle-eight { display: inline-block; border: 50px transparent solid; border-left: 30px yellow solid; border-bottom: 0; } </style> </head> <body> <div class="triangle-one"></div> <div class="triangle-two"></div> <div class="triangle-stree"></div> <div class="triangle-four"></div> <div class="triangle-five"></div> <div class="triangle-six"></div> <div class="triangle-seven"></div> <div class="triangle-eight"></div> </body> </html>

View Code

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .back { width: 1000px; height: 1000px; margin: 0 auto; background-color: #ddd; position: relative; } .back-in { position: absolute; width: 1020px; height: 45px; left: -20px; top: 50px; background-color: #2F4F4F; } .back-img { border: 20px solid transparent; border-top: 10px solid dimgrey; border-right: 0; display: inline-block; position: absolute; top: 95px; left: -20px; } .back-font { line-height: 9px; margin-left: 30px; color: white; } </style> </head> <body> <div class="back"> <div class="back-in"><h3 class="back-font">妹子求关注 ^.^</h3></div> <div class="back-img"></div> </div> </body> </html>

View Code

z-index Element stacking order

z-index is only valid on positioned elements (example: position:absolute;)

You can specify negative attribute values (example: -1;)

Code:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .z-index1 { width: 100px; height: 100px; background-color: yellow; position: absolute; z-index: -1; } .z-index2 { width: 100px; height: 100px; background-color: red; position: absolute; top: 20px; left: 20px; z-index: 5; } </style> </head> <body> <div class="z-index1"></div> <div class="z-index2"></div> </body> </html>

View Code

outline border outline

outline-width outline width

outline-color outline color

outline-style outline style

zoom zoom ratio

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .zoom1 { zoom: 100%; } .zoom2 { zoom: 150%; } .zoom3 { zoom: 200%; } </style> </head> <body> <div class="zoom1">Nick 100%</div> <div class="zoom2">Nick 200%</div> <div class="zoom3">Nick 300%</div> </body> </html>

View Code

cursor 鼠标的类型形状

鼠标放在以下单词上，There will be a miracle：

url: 自定义光标

Auto: 默认
 Default: 默认
 e-resize
 ne-resize
 nw-resize
 n-resize
 se-resize
 sw-resize
 s-resize
 w-resize
 Crosshair
 Pointer
 Move
 text
 wait
 help

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>  <style> body { cursor: url("mouse.png"), auto; /*图片地址：http://images.cnblogs.com/cnblogs_com/suoning/845162/o_mouse.png*/ } </style> </head> <body> <div><img src="http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png" height="100%" width="100%"></div> </body> </html> 自定义光标实例

自定义光标实例

transform、transition 动画效果

transform 转换，变形

origin 定义旋转基点（left top center right bottom 坐标值） transform-origin: 50px 50px; transform-origin: left;。

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of CSS3 transition-Escape TornadoNext article：Detailed explanation of CSS3 transition-Escape Tornado

See more

Summary of Html knowledge
How to learn HTML quickly
The difference between html xhtml xml
The difference between src and href attributes
About HTML5 and CSS replacement use

css(2)

Related articles