A complete collection of web design css style codes, come and collect it!

Reduce a lot of unnecessary code, html css can easily layout the web page. Friends, keep it in your collection~

# 1. Text settings

1,

font-size: font size parameter

2,

font-style: font format

3,

font-weight: font thickness

4, color attribute

color: parameter

Pay attention to using web security colors

2. Hyperlink settings

text-decoration: 参数

The main purpose is Change the underline when the browser displays text links.

Parameter value range:

• underline: underline the text

• overline: underline the text

• line-through: strikethrough the text

• blink: use Text flashing

• none: Do not display any of the above effects

3. Background

1. Background color

background-color: 参数

2. Background image

background-image: url(URL)

• URL is the background The storage path of the image, none means none.

3. Background image repetition

background-repeat: 参数

Parameter value range:

• no-repeat: Do not repeat the tiled background Picture

• repeat-x: Make the picture tile only in the horizontal direction

• repeat-y: Make the picture tile only in the vertical direction Paving

If you do not specify the background image repeat attribute, the browser defaults to the background image being tiled in both horizontal and vertical directions.

4. Background image fixed

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 avoid overly fancy background images from diverting the viewer's attention when scrolling, they are generally set to fixed

background-attachment: 参数

Parameter value range:

• fixed: Web page scrolling When the web page is scrolled, the background image remains fixed relative to the browser window

• scroll: When the web page is scrolled, the background image scrolls together relative to the browser window

##4. Block
1. Word spacing

word-spacing: 间隔距离

2. Letter spacing

letter-spacing: 字母间距

3. Text alignment

text-align: 参数

Parameter value:

left: left alignment
right：right alignment
center：center alignment
justify：relative left and right alignment
4. Vertical alignment

vertical-align: Parameters
top：Top alignment
bottom: bottom alignment
text-top: relative text top alignment
text-bottom: relative text bottom alignment
baseline: Baseline alignment
middle: Center alignment
sub: Display in the form of subscript
super: Display in the form of superscript
5. Text indentation

text-indent: 缩进距离

12px is equivalent to a text distance of

6. Space

white-space: 参数

normal normal
pre reserved
nowrap no line break
7. Display style

display: 参数

Parameter value range:

block: block-level element, both before and after the object Line break
inline: No line breaks before and after the object
list-item: Line breaks before and after the object, increase Bullets
none: No display

##5. Box

• height 高度

• width 宽度

• padding 内边距

• margin 外边距

• float（浮动）：可以让块级元素在一行中排列，例如横向菜单。 

• clear 清除浮动

六、边框   

1、样式

border-style 参数

边框样式的参数：

• none：无边框 

• dotted：边框为点线

• dashed：边框为长短线

• solid：边框为实线

• double：边框为双线

2、宽度

border-width:参数

3、颜色

border-color:参数

七、列表   

list-style-type:列表样式

不同浏览器的列表符可能不相同，可能会影响到网页，所以网页中的列表大多都是由背景图片显示。

控制用户界面的样式

八、鼠标

cursor:鼠标形状参数

CSS鼠标形状参数表： 

鼠标形状：CSS代码

style="cursor:hand" 　　　　　手形
style="cursor:crosshair" 　　十字形
style="cursor:text" 　　　　　文本形
style="cursor:wait" 　　　　　沙漏形
style="cursor:move" 　　　　十字箭头形：
style="cursor:help" 　　　　　问号形
style="cursor:e-resize" 　　　右箭头形
style="cursor:n-resize" 　　　上箭头形
style="cursor:nw-resize" 　　左上箭头形
style="cursor:w-resize" 　　　左箭头形
style="cursor:s-resize" 　　　下箭头形 
style="cursor:se-resize" 　　右下箭头形 
style="cursor:sw-resize" 　　左下箭头形

总结：

用常用HTML+CSS的代码做一个漂亮简单的个人网页，小伙伴来试试。

推荐学习：CSS视频教程

The above is the detailed content of A complete collection of web design css style codes, come and collect it!. For more information, please follow other related articles on the PHP Chinese website!