집 >웹 프론트엔드 >HTML 튜토리얼 >CSS(2)

CSS(2)

WBOY원래의: 2016-08-26 10:13:131258검색

이 글은 일부 작성자가 장기 코딩에서 요약한 일반적인 CSS 쿼리를 요약한 것입니다. 향후 쿼리를 용이하게 하기 위해 이 블로그에 작성되었습니다.

1. 색상 속성:

색상

HEX(16진수 색상: 색상: #FFFF00 --> 약어: #FF0)
RGB(빨간색, 녹색 및 파란색, 사용법: 색상:rgb(255,255,0) 또는 색상:rgb(100%,100%,0%))
RGBA(빨간색, 녹색 및 파란색 투명도, A는 0~1 사이의 투명도 값입니다. 사용 방법: 색상:rgba(255,255,0,0.5))
HSL(CSS3이 유효함, H는 색상, S는 채도, L은 밝기, 사용 방법: 색상:hsl(360,100%,50%))
HSLA(HSL과 유사하며 A는 0에서 1까지의 알파 투명도를 나타냅니다.)

투명

완전 투명, 사용법: 색상: 투명;

불투명도

요소의 투명도, 구문: 불투명도: 0.5;
속성 값의 범위는 0.0~1.0이며, 0은 투명, 1은 불투명을 의미합니다.
필터 필터 속성(초기 IE 브라우저에만 적용 가능, 구문: 필터:알파(불투명도:20);).

2. 글꼴 속성:

글꼴 스타일: 기울임꼴 텍스트를 지정하는 데 사용됩니다.

일반 텍스트가 정상적으로 표시됩니다
기울임꼴 텍스트는 기울임꼴로 표시됩니다
비스듬한 텍스트 경사 표시

font-weight: 텍스트의 두께를 설정합니다.

일반(기본값)
굵게
굵게( 및 태그와 동일)

라이터(일반)

100~900 백(400=보통, 700=굵게)

font-size: 글꼴 크기를 설정합니다.

기본값: 중간

<절대 크기> 선택적 매개변수 값: xx-소형, x-소형, 소형, 중형, 대형, x-대형, xx-대형

상위 태그의 글꼴 크기를 기준으로 조정합니다. 선택적 매개변수 값: 더 작음, 더 큼

백분율은 텍스트 크기를 지정합니다.

길이 값으로 텍스트 크기를 지정하며, 음수 값은 허용되지 않습니다.

font-family: 글꼴 이름

여러 글꼴을 구분하려면 쉼표를 사용하세요(우선순위는 앞에서 뒤로, 현재 글꼴이 시스템에 없으면 뒤로 검색됩니다)

글꼴: 약어 속성

구문: 글꼴: 글꼴 크기/줄 높이 글꼴(글꼴은 끝에 있어야 함)

3. 텍스트 속성:

white-space: 요소의 공백을 처리하는 방법을 설정합니다.

normal: 기본 처리 방법입니다.

pre: 공백을 유지하고 텍스트가 경계를 초과할 때 줄바꿈하지 않음

nowrap: 공백을 유지하지 않고 텍스트 끝이나 br 태그가 나타날 때까지 모든 텍스트가 같은 줄에 표시되도록 합니다.

사전 줄 바꿈: 공백을 유지하고 경계에 닿으면 텍스트 줄 바꿈

pre-line: 공백을 유지하지 않고 텍스트의 줄 바꿈을 유지하며 텍스트가 경계에 닿으면 줄바꿈합니다.

방향: 텍스트의 방향을 지정합니다.

ltr 기본적으로 텍스트 방향은 왼쪽에서 오른쪽입니다.

rtl 텍스트 방향은 오른쪽에서 왼쪽입니다.

text-align: 텍스트 가로 정렬

왼쪽

센터

그렇습니다

줄 높이: 텍스트 줄 높이

일반 기본값

vertical-align: 텍스트 줄 높이의 수직 정렬

기본 기본값

sub는 텍스트의 아래 첨자를 수직으로 정렬합니다. 이는 _{태그와 동일한 효과입니다.}

super는 텍스트의 위 첨자를 수직으로 정렬합니다. 이는 ^{태그와 동일한 효과입니다.}

상단 개체의 상단이 컨테이너 상단과 정렬됩니다.

텍스트 상단 개체의 상단이 해당 줄의 텍스트 상단과 정렬됩니다

중간 요소 개체는 기준선을 기준으로 수직으로 정렬됩니다

하단 개체의 하단이 해당 줄의 텍스트 하단과 정렬됩니다.

텍스트 하단 개체의 하단이 텍스트 줄의 하단과 정렬됩니다

텍스트 들여쓰기: 텍스트 들여쓰기

letter-spacing: 글자 사이에 공백을 추가합니다.

단어 간격: 각 단어 사이에 공백 추가

text-transform: 속성이 텍스트의 대소문자를 제어합니다.

capitalize 텍스트의 각 단어는 대문자로 시작됩니다.

대문자는 대문자만 정의합니다.

소문자는 소문자만 정의합니다.

텍스트 오버플로: 텍스트 오버플로 스타일

클립은 텍스트를 자릅니다.

줄임표는 잘린 텍스트를 나타내기 위해 줄임표를 표시합니다.

string 주어진 문자열을 사용하여 잘린 텍스트를 나타냅니다.

텍스트 장식: 텍스트 장식

기본값은 없습니다.

밑줄을 긋습니다.

윗줄 윗줄.

중앙선을 통과하는 라인.

text-shadow: 텍스트 그림자

첫 번째 매개변수는 왼쪽과 오른쪽 위치입니다

두 번째 매개변수는 상하 위치입니다

세 번째 매개변수는 흐림 효과

네 번째 매개변수는 색상

텍스트 그림자: 5px 5px 5px #888;

word-wrap: 자동 줄 바꿈

word-wrap: break-word;

4. 배경 속성

배경색

background-image는 이미지를 배경으로 설정합니다.

url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png") 이미지 주소

배경 이미지:선형 그라데이션(녹색, 파란색, 노란색, 빨간색, 검정색) 색상 그라데이션 효과

background-position은 배경 이미지의 위치 좌표를 설정합니다.

배경 위치: 중앙 중앙, 사진 중앙, x축 중앙, y축 중앙

1px -195px는 각각 x축과 y축 좌표를 나타내는 그림의 특정 부분을 가로챕니다.

background-repeat 배경 이미지를 타일을 반복하지 않도록 설정

no-repeat 이미지를 반복하지 않도록 설정, 흔히 사용되는

라운드는 전체 컨테이너에 맞고 채울 때까지 자동으로 크기가 조정됩니다.

공간이 같은 간격으로 타일링되어 전체 컨테이너를 채웁니다.

background-attachment 배경 이미지를 고정할지 아니면 페이지의 나머지 부분과 함께 스크롤할지 여부

배경약어

배경: url("o_ns.png") 반복 없음 0 -196px;

배경: url("o_ns.png") 반복 없음 중앙 하단 15px;

배경: url("o_ns.png") 반복 없음 왼쪽 30px 하단 15px;

5. 속성 나열

list-style-type: 목록 항목 플래그의 유형

없음 플래그 제거

소수점 앞자리 02.

사각형 상자

원; 속이 빈 원

상부알프&디스크

list-style-image: 이미지를 목록 항목 로고로 설정

list-style-position: 목록 항목 표시의 위치

내부

외부

목록 스타일: 약어

1. 테두리

border-style: 테두리 스타일

실선 기본값, 실선

더블 더블라인

점선 점선

점선

border-color : 테두리 색상

border-width: 테두리 너비

테두리 반경: 둥근 모서리

1개 매개변수: 네 모서리 모두에 적용

2개의 매개변수: 첫 번째 매개변수는 왼쪽 상단과 오른쪽 하단에 적용되고, 두 번째 매개변수는 왼쪽 하단과 오른쪽 상단에 적용됩니다.

3개의 매개변수: 첫 번째 매개변수는 왼쪽 상단에 적용되고, 두 번째 매개변수는 왼쪽 하단에 적용되고, 세 번째 매개변수는 오른쪽 하단에 적용됩니다.

4개 매개변수: 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래(시계 방향)

테두리: 약어

테두리: 2px 노란색 단색

box-shadow: 테두리 그림자

첫 번째 매개변수는 왼쪽과 오른쪽 위치입니다

두 번째 매개변수는 상하 위치

세 번째 매개변수는 흐림 효과

네 번째 매개변수는 색상

상자 그림자: 10px 10px 5px #888;

몇 가지 테두리 구현 예:

코드:

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

코드 보기

Border는 다양한 삼각형 기호를 구현합니다.

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

코드 보기

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

코드 보기

z-index 요소 스택 순서

z-index는 위치가 지정된 요소에만 유효합니다(예: position:absolute;)

음수 속성 값을 지정할 수 있습니다(예: -1;)

코드:

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

코드 보기

개요 테두리 윤곽

윤곽선-너비 윤곽선 너비

윤곽선-색상 외곽선 색상

윤곽선 스타일 외곽선 스타일

확대/축소 비율

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

코드 보기

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

自定义光标实例

transform、transition 动画效果

transform 转换，变形

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

이전 기사：CSS3 전환 - Escape Tornado에 대한 자세한 설명다음 기사：CSS3 전환 - Escape Tornado에 대한 자세한 설명

CSS(2)

관련 기사