웹 디자인 CSS 스타일 코드의 전체 컬렉션을 모아보세요!

불필요한 코드를 많이 줄이고 html+css를 사용하면 웹페이지 레이아웃을 쉽게 만들 수 있습니다. 모아보세요 친구들~

1. 텍스트 설정

1, font-size: 글꼴 크기 매개변수 font-size: 字号参数 

2、font-style: 字体格式

3、font-weight: 字体粗细

4、颜色属性

color

2, 글꼴 스타일: 글꼴 형식

3, 글꼴 두께: 글꼴 두께4, 색상 속성color: 매개변수
참고 사용 웹 안전 색상

2. 하이퍼링크 설정

• text-decoration: 参数

  주요 목적은 브라우저가 텍스트 링크를 표시할 때 밑줄을 변경하는 것입니다.

• 매개변수 값 범위:

• underline: 텍스트에 밑줄

• overline: 텍스트에 밑줄

• line-through: 텍스트에 취소선 추가

깜박임: 텍스트 만들기 깜박임 없음: 위의 효과를 표시하지 않습니다.

3. 배경

1. 배경색

background-color: 参数

2. 리

URL 배경 이미지의 저장 경로입니다. none은 없음을 의미합니다.
3. 배경 이미지 반복

• background-image: url(URL)

  매개변수 값 범위:

• no-repeat: 타일링된 배경 이미지를 반복하지 않음

repeat-x: 이미지를 가로 방향으로만 타일링합니다

repeat-y: 이미지 타일을 세로 방향으로만 만듭니다

배경 이미지 반복 속성을 지정하지 않으면 브라우저는 기본적으로 가로 및 세로 방향으로 타일링되는 배경 이미지를 사용합니다.

• 4. 배경 이미지 고정

배경 이미지 고정은 웹 페이지 스크롤에 따라 배경 이미지가 스크롤되는지 여부를 제어합니다. 배경 이미지 고정 속성을 설정하지 않으면 웹 페이지 스크롤에 따라 브라우저의 기본 배경 이미지도 함께 스크롤됩니다. 스크롤할 때 지나치게 화려한 배경 이미지가 시청자의 주의를 돌리는 것을 피하기 위해 일반적으로 고정

• background-repeat: 参数

  으로 설정됩니다. 매개변수 값 범위:

fixed: 웹 페이지가 스크롤될 때 배경 이미지는 브라우저를 기준으로 합니다. 창, 고정 스크롤: 웹 페이지를 스크롤할 때 배경 이미지가 브라우저 창을 기준으로 함께 스크롤됩니다.

4. 차단

1 단어 간격

background-attachment: 参数

• 2 . 간격

  word-spacing: 间隔距离

3. 텍스트 정렬

• letter-spacing: 字母间距

  매개변수 값:

• 왼쪽: 왼쪽 정렬

• 오른쪽: 오른쪽 정렬

center: 가운데 정렬

• justify: 상대적인 왼쪽 및 오른쪽 정렬

• 4, 수직 정렬

• Vertical-Align: 매개변수

• Top: 상단 페어링 Qi

• bottom: 하단 정렬

• Text-top: 상대 텍스트 상단 정렬

text-bottom: 상대 텍스트 하단 정렬

baseline: 기준선 정렬

• middle: 가운데 정렬

sub: 아래 첨자 형태로 표시

• super: 위 첨자 형태로 표시

• 5. 텍스트 들여쓰기

  text-align: 参数

12px는 텍스트 1개 거리

• 6에 해당합니다. Spaces

  text-indent: 缩进距离

normal Normalpre Reserved

🎜🎜nowrap 줄바꿈 없음🎜🎜🎜🎜7. 표시 스타일 🎜🎜

white-space: 参数

🎜매개변수 값 범위: 🎜🎜🎜🎜block: block -레벨 요소, 라인 개체 앞뒤에 줄 바꿈 🎜🎜🎜🎜🎜inline: 개체 앞뒤에 줄 바꿈 없음 🎜🎜🎜🎜🎜list-item: 개체 앞뒤에 줄 바꿈, 글머리 기호 증가 🎜🎜🎜🎜🎜none: 표시 없음 🎜 🎜🎜🎜🎜🎜 5. 상자 🎜🎜 🎜🎜

• 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视频教程

위 내용은 웹 디자인 CSS 스타일 코드의 전체 컬렉션을 모아보세요!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!