Home > Web Front-end > CSS Tutorial > A complete collection of web design css style codes, come and collect it!

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

奋力向前
Release: 2021-07-09 18:26:15
forward
20740 people have browsed it

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

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

# 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: 参数
Copy after login

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: 参数
Copy after login

2. Background image

background-image: url(URL)
Copy after login

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

3. Background image repetition

background-repeat: 参数
Copy after login

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: 参数
Copy after login

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: 间隔距离
Copy after login

2. Letter spacing

letter-spacing: 字母间距
Copy after login
3. Text alignment

text-align: 参数
Copy after login

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: 缩进距离
Copy after login

12px is equivalent to a text distance of

6. Space

white-space: 参数
Copy after login

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

display: 参数
Copy after login
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 参数
Copy after login

边框样式的参数:

  • none:无边框

  • dotted:边框为点线

  • dashed:边框为长短线

  • solid:边框为实线

  • double:边框为双线

2、宽度

border-width:参数
Copy after login

3、颜色

border-color:参数
Copy after login

七、列表

list-style-type:列表样式
Copy after login

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

控制用户界面的样式

八、鼠标

cursor:鼠标形状参数
Copy after login

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"   左下箭头形
Copy after login

总结:

用常用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!

Related labels:
source:csdn.net
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
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template