CSS 스타일 학습의 기본 요약 및 공유

충분한 기본 지식 없이는 CSS 레이아웃을 수행할 수 없습니다. 이 글은 초보자에게 CSS 스타일 학습에 대한 기본 요약을 제공합니다. 일반적으로 사용되는 CSS 속성을 참조하면 도움이 될 수 있습니다. 1.

CSS 기본 소개

캐스케이딩 스타일시트(Cascading Style Sheet)는 "CSS"라고도 하며, 보통 "스타일시트(Style Sheet)"라고도 하는데, 웹스타일 디자인으로. 예를 들어 링크 단어를 클릭하지 않을 때 파란색으로 표시하고 마우스를 그 위로 이동하면 빨간색으로 바뀌고 밑줄이 표시되도록 하려면 이것이 스타일입니다. 스타일 시트를 설정하면 HTML의 각 마크 표시 속성을 균일하게 제어할 수 있습니다. 계단식 스타일 시트를 사용하면 사람들이 웹 페이지의 모양을 보다 효과적으로 제어할 수 있습니다. 캐스케이딩 스타일 시트를 사용하면 웹 페이지 요소의 위치와 모양을 정확하게 지정하고 특수 효과를 생성하는 기능을 확장할 수 있습니다.

CSS는 English Cascading Style Sheets(Cascading Style Sheets)의 약자로 HTML이나 XML 등의 파일 스타일을 표현하는 데 사용되는 컴퓨터 언어입니다. CSS의 최신 버전은 웹 페이지 성능과 콘텐츠를 완전히 분리할 수 있는 스타일 디자인 언어인 CSS3입니다. 전통적인 HTML의 성능과 비교하여 CSS는 웹 페이지에서 개체의 위치와 레이아웃에 대해 픽셀 수준의 정밀한 제어를 수행할 수 있고 거의 모든 글꼴 크기 스타일을 지원하며 웹 페이지 개체 및 모델 스타일을 편집할 수 있으며 예비 작업을 수행할 수 있습니다. 디자인은 현재 텍스트 디스플레이를 기반으로 하는 가장 표현력이 뛰어난 디자인 언어입니다. CSS는 다양한 사용자의 이해 능력에 따라 작성 방법을 단순화하거나 최적화하여 모든 유형의 사람들이 쉽게 읽을 수 있도록 만듭니다.

2. CSS 사용 방법

사이트 페이지에서 스타일 시트를 사용하는 방법에는 세 가지가 있습니다.

외부 스타일: 웹 페이지를 외부 스타일 시트에 연결합니다.

내부 페이지 스타일: 웹 페이지에 삽입된 스타일 시트를 만듭니다.

인라인 스타일: 개별 웹페이지 요소에 인라인 스타일을 적용합니다.

각 방법에는 장단점이 있습니다.

사이트의 전체 또는 일부 페이지에 동일한 스타일을 일관되게 적용하려면 외부 스타일 시트를 사용하세요. 하나 이상의 외부 스타일 시트에서 스타일을 정의하고 이를 모든 웹 페이지에 연결하면 모든 웹 페이지에서 일관된 모양이 보장됩니다. 스타일을 변경하기로 결정한 경우 외부 스타일 시트에서 한 번만 수정하면 되며 변경 사항은 스타일 시트에 연결된 모든 페이지에 반영됩니다. 일반적으로 외부 스타일 시트는 Brisket 보도 자료 시스템의 공통 스타일 Common.css와 같이 파일 확장자로 .css를 갖습니다. 그런 다음 다음과 같이 이 스타일이 필요한 페이지에 링크합니다.

>
단순히 현재 웹페이지의 스타일을 정의하고 싶을 때 내장된 스타일 시트를 사용할 수 있습니다. 포함된 스타일 시트는 웹페이지의 태그 내에 "포함된" 계단식 스타일 시트입니다. 내장된 스타일 시트의 스타일은 동일한 웹 페이지에서만 사용할 수 있습니다. 예:



인라인 스타일을 사용하여 웹 페이지 요소에 CSS 스타일 시트 속성을 적용합니다. 예:

CSS 문서

웹 페이지가 외부 스타일 시트에 링크되는 경우 웹 페이지용으로 생성된 인라인 또는 내장 스타일은 외부 스타일 시트의 지정된 속성을 확장하거나 재정의합니다.

웹 페이지에서 외부 스타일 시트의 스타일을 사용하려면 서식 메뉴의 스타일 시트 링크 명령을 사용하여 웹 페이지를 스타일 시트에 연결하세요. 하나 이상의 스타일 시트를 웹 페이지 보기 모드의 현재 웹 페이지, 폴더 목록에서 선택한 웹 페이지 또는 사이트의 모든 웹 페이지에 연결할 수 있습니다.

스타일 상자에는 제목

1과 같은 표준 HTML 태그와 웹 페이지에 연결된 내장 스타일 시트 또는 외부 스타일 시트에 포함된 클래스 또는 ID 선택 사항이 나열됩니다. 웹 페이지 요소에 스타일을 적용하려면 스타일을 선택하고 스타일 상자에서 스타일 또는 선택기를 클릭합니다.

Microsoft FrontPage 2000에서는 특정 서식 기능이 인라인 스타일로 자동 적용됩니다. 예: 서식 메뉴의 테두리 및 그림자 명령을 사용하여 일반 단락 주위에 상자를 적용하면 FrontPage는 서식 정보를 단락 표시의 인라인 스타일 속성으로 기록합니다(예: ). 그러나 일부 속성을 적용하려면 CSS를 사용해야 하고 다른 속성을 적용하려면 HTML을 사용해야 합니다. CSS를 사용하여 인라인 스타일만 적용하려는 경우 스타일 버튼(웹 요소의 속성 대화 상자에 있음)을 사용하여 클래스 또는 ID 선택기 또는 인라인 스타일을 적용할 수 있습니다.


3. CSS 텍스트 속성:
색상: #999999 /*텍스트 색상*/

글꼴군: 송나라, sans- serif ; /*텍스트 글꼴*/

font-size: 9pt; /*텍스트 크기*/

font-style:itelic;/*텍스트 기울임꼴*/

글꼴 -variant:small-caps;/*작은 글꼴*/

letter-spacing: 1pt; /*단어 사이의 공백*/

line-height: 200%; 높이 */

font-weight:bold;/*텍스트 굵게*/

vertical-align:sub;/*subscript*/

수직 정렬:super;/*위 첨자*/

text-꾸밈:line-through;/*취소선 추가*/

text-장식:overline;/*윗줄 추가*/

텍스트 장식:밑줄;/*밑줄 추가*/

텍스트 장식:없음;/*링크 밑줄 제거*/

text-transform: 대문자화; *첫 번째 단어를 대문자로 표시*/

text-transform: 대문자; /*영어 대문자*/

text-transform: 소문자; /*영어 소문자*/

text -align:right;/*텍스트를 오른쪽으로 정렬*/

text-align:left;/*텍스트를 왼쪽으로 정렬*/

text-align:center;/ *텍스트를 가운데로 정렬 */

text-align:justify;/*텍스트 정렬*/

vertical-align 속성

vertical-align:top;/ *위로 수직 정렬*/

vertical-align:bottom;/*아래로 수직 정렬*/

vertical-align:middle;/*가운데에 수직 정렬*/

vertical-align:text -top;/*텍스트를 수직으로 위쪽으로 정렬*/

vertical-align:text-bottom;/*텍스트를 수직으로 아래쪽으로 정렬*/

4 . CSS 기호 속성:

list-style-type:none;/*숫자 없음*/

list-style-type:decimal;/*아라비아 숫자*/

list- style-type:lower-roman;/*소문자 로마 숫자*/

list-style-type:upper-roman;/*대문자 로마 숫자*/

list-style-type: lower-alpha;/*영문 소문자*/

list-style-type:upper-alpha;/*영문 대문자*/

list- style-type:disc;/* 속이 찬 원 기호*/

list-style-type:circle;/*빈 원 기호*/

list-style-type:square;/* 채워진 사각형 기호*/

list-style-image:url(/dot.gif);/*그림 기호*/

list-style-position:outside;/*볼록한 행* /

목록 스타일 위치:inside;/*indent*/

5. CSS 배경 스타일:

배경색: #F5E2EC ;/*배경 색상*/

배경:투명;/*원근감 있는 배경*/

배경 이미지: url(/image/bg.gif) /*배경 이미지*/

배경 첨부: 고정; /*워터마크 고정 배경*/

배경 반복: 반복 /*반복 정렬 - 웹 페이지 기본*/

배경 반복: no-repeat; /*배열을 반복하지 않음*/

background-repeat:peat-x /*x축으로 배열을 반복*/

background-repeat:repeat; -y; /*y축에서 반복 정렬*/

배경 위치 지정

background-position: 90% 90% /*x 및 y축 위치 배경 이미지*/

배경 위치: top ; /*정렬*/

배경 위치: buttom; /*아래 정렬*/

배경 위치 : 왼쪽; /*왼쪽 정렬*/

배경 위치: 오른쪽 /*오른쪽 정렬*/

배경 위치: 중앙 정렬*/

6. CSS 연결 속성:

a/*모든 하이퍼링크*/

a:link/*하이퍼링크 텍스트 형식*/

a: 방문함/*방문한 링크 텍스트 형식*/

a:active/*눌린 링크의 형식*/

a:hover/*링크할 마우스*/

마우스 커서 스타일:

링크 핑거 CURSOR: 손

크로스 바디 커서:crosshair

아래쪽 화살표 커서:s-resize

크로스 화살표 커서:이동

위를 가리키는 화살표 오른쪽 커서:이동

물음표 커서 추가:help

왼쪽 커서 화살표:w-resize

위쪽 커서 화살표 :n-resize

화살표는 오른쪽 상단 커서를 가리킵니다.ne-resize

화살표는 왼쪽 상단 커서를 가리킵니다.nw-resize

텍스트 I 유형 커서 :text

화살표가 오른쪽 아래 커서를 가리킵니다:se-resize

왼쪽 아래 대각선 커서:sw-resize

깔때기 커서:기다림

커서 패턴(IE6) p {cursor:url("cursor file name.cur"), text ;}

7. CSS 테두리 목록:

border -상단: 1px 실선 #6699cc; /*상단 테두리*/

테두리 -하단: 1px 실선 #6699cc; /*하단 테두리*/

테두리-왼쪽: 1px 실선 #6699cc; /*왼쪽 테두리*/

border-right: 1px solid # 6699cc; /*오른쪽 테두리선*/

위는 권장 작성 방법이지만 기존 방법을 사용할 수도 있습니다.

border-top-color: #369 /*상단 테두리선 상단 색상 설정*/

border-top-width:1px /*상단의 상단 너비 설정 border*/

border-top-style: solid/*상단 테두리의 상단 스타일 설정*/

기타 프레임 스타일

solid/*solid 프레임*/

점선/*점선 프레임*/

이중/*이중 프레임* /

홈/*3차원 내부 볼록 프레임*/

능선 /*3차원 입체 프레임*/

삽입/*오목 프레임*/

아웃셋 /*볼록 프레임*/

8. CSS 양식 적용:

텍스트 상자

버튼

체크박스

선택 버튼

여러 줄 텍스트 상자

드롭다운 메뉴옵션 1

옵션 2 🎜>

9. CSS 테두리 스타일:
margin-top:10px;/*상단 테두리*/

margin-right:10px;/*right 여백 값*/

margin-bottom:10px;/*하한 여백 값*/

margin-left:10px;/*왼쪽 여백 값*/


10. CSS 테두리를 비워 둡니다
padding-top:10px;/*상단 테두리를 비워 둡니다*/

padding-right:10px;/*오른쪽 테두리를 비워 둡니다*/

padding-bottom:10px;/*하단 테두리를 비워 둡니다*/

padding-left:10px;/*왼쪽 테두리를 비워 둡니다*/


Eleven , 스크롤 막대 스타일
Scrollbar-face-color:#f3f3f3;/*스크롤 막대 돌출 부분의 색상*/

Scrollbar-highlight-color:#f1f1f1 /*바의 그림자 부분 스크롤 색상*/

Scrollbar-shadow-color:#fcfcfc/*3차원 스크롤 바 그림자 색상*/

Scrollbar-3dlight-color: #fcfcfc/*스크롤 막대 밝은 가장자리 색상*/

Scrollbar-arrow-color:#34837/*위쪽 및 아래쪽 버튼의 삼각형 화살표 색상*/

Scrollbar-track- color:#fcfcfc/*스크롤 막대의 배경색 */

Scrollbar-darkshadow-color:#66c0f4/*3차원 스크롤 막대 강한 그림자 색상*/

Scrollbar-base- color:#fcfcfc/*스크롤 막대의 기본 색상*/

위는 CSS 스타일에 대한 기본 연구입니다. 불일치하는 경우 양해해 주시기 바랍니다.

위 내용은 CSS 스타일 학습의 기본 요약 및 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!