>웹 프론트엔드 >CSS 튜토리얼 >웹 디자인 CSS 스타일 코드의 전체 컬렉션을 모아보세요!

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

奋力向前
奋力向前앞으로
2021-07-09 17:13:0420768검색

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

웹 디자인 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제