css(2)-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

css(2)

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 26, 2016 am 10:13 AM

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>
Copy after login

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>
Copy after login

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>
Copy after login

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>
Copy after login

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>
Copy after login

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> 自定义光标实例
Copy after login

自定义光标实例

transform、transition 动画效果

transform 转换，变形

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

Statement of this Website

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

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

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Show More

Hot Article

Roblox: Grow A Garden - Complete Mutation Guide
3 weeks ago By DDD

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

How to fix KB5055612 fails to install in Windows 10?
3 weeks ago By DDD

Blue Prince: How To Get To The Basement
1 months ago By DDD

Nordhold: Fusion System, Explained
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Show More

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Java Tutorial

1664

14

CakePHP Tutorial

1423

52

Laravel Tutorial

1318

25

PHP Tutorial

1269

29

C# Tutorial

1248

24

Show More

Related knowledge

Understanding HTML, CSS, and JavaScript: A Beginner's Guide Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

HTML: The Structure, CSS: The Style, JavaScript: The Behavior Apr 18, 2025 am 12:09 AM
The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.

The Future of HTML, CSS, and JavaScript: Web Development Trends Apr 19, 2025 am 12:02 AM
The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.

The Future of HTML: Evolution and Trends in Web Design Apr 17, 2025 am 12:12 AM
The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.

HTML vs. CSS vs. JavaScript: A Comparative Overview Apr 16, 2025 am 12:04 AM
The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.

HTML: Building the Structure of Web Pages Apr 14, 2025 am 12:14 AM
HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

The Role of HTML: Structuring Web Content Apr 11, 2025 am 12:12 AM
The role of HTML is to define the structure and content of a web page through tags and attributes. 1. HTML organizes content through tags such as , making it easy to read and understand. 2. Use semantic tags such as, etc. to enhance accessibility and SEO. 3. Optimizing HTML code can improve web page loading speed and user experience.

HTML: Is It a Programming Language or Something Else? Apr 15, 2025 am 12:13 AM
HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.

See all articles