CSS2 빠른 참조_CSS/HTML
- WBOY원래의
- 2016-05-16 12:12:121693검색
W3C(The World Wide Web Consortium)가 HTML 코드명 Cougar의 버전 4.0을 공식화한 이후 처음으로 웹 페이지에 존재하는 동적 효과가 공식적으로 인정되었습니다. 세 가지 섹션: 스크립트, 동적 효과를 지원하는 브라우저, CSS. 처음 두 가지는 자주 사용하겠지만 CSS가 무엇인지는 모를 수도 있습니다. 웹페이지를 만들어 본 경험이 있다면 스타일시트나 스타일시트를 들어본 적이 없더라도 상관없습니다. . 더 많은 새로운 기능을 갖춘 웹 페이지를 만들고 싶다면 이 기사도 적합할 것입니다.
1. CSS란 무엇인가요?
CSS는 Cascading Style Sheet의 약어입니다. 일부 책에서는 이를 "Cascading Style Sheet" 또는 "Cascading Style Sheet"(이하 "스타일 시트"라고 함)로 번역합니다. 1997년에 W3C가 HTML4 표준을 동시에 발표했습니다. 스타일 시트의 첫 번째 표준인 CSS1입니다. 스타일 시트는 이전 HTML(3.2 이전 HTML 버전) 구문의 주요 혁신입니다. 이전 HTML 버전에서는 마크업 요소를 통해 다양한 기능이 구현되었으며 이로 인해 다양한 브라우저 제조업체가 의도적으로 새로운 콘텐츠를 표준화할 수 있습니다. 다양한 태그를 서로 중첩하여 다양한 효과를 얻을 수 있습니다. 예를 들어 단락에서 텍스트의 일부를 빨간색으로 바꾸려면 HTML3.2에서 다음과 같아야 합니다. 🎜>
여기에 빨간색 텍스트가 표시됩니다
스타일 시트에는 일부 태그(예: 위 예의 "font" 태그)가 스타일 시트를 사용하여 표시됩니다. 위의 예는 변경될 수 있습니다. Cheng:여기에 빨간색 텍스트가 표시됩니다
이게 스타일시트의 기능이 전부인가요? 그것과는 거리가 멀다! 앞서 언급했듯이 스타일 시트는 DHTML의 일부입니다. 스타일 시트 설정의 실제 의미는 객체를 HTML에 도입하여 스크립트 프로그램(예: javascript 및 VBScript)을 사용하여 객체 속성을 호출하고 객체 속성을 변경할 수 있다는 것입니다. 이전 HTML에서는 불가능했습니다. VB와 같은 객체 지향 프로그래밍 도구를 사용해 본 적이 있다면 스타일 시트를 사용하여 DHTML을 만드는 것이 얼마나 쉬운지 금방 알게 될 것입니다. 스타일 시트의 또 다른 기여는 HTML의 여러 번거로운 태그를 단순화하여 각 태그의 속성을 보다 일반적이고 다양하게 만드는 것입니다. 스타일 시트는 원래 태그 기능을 확장하고 더 많은 효과를 얻을 수 있습니다. 심지어 웹의 표시 기능을 뛰어넘습니다. 페이지 자체를 넘어 다양한 매체로 스타일을 확장해 거부할 수 없는 매력을 보여주고 있다.
CSS1 버전 이후 1998년 5월 CSS2 버전이 출시되면서 스타일시트가 더욱 풍성해졌습니다. Internet Explorer 4와 Netscape Navigator 4는 모두 스타일 시트 지원을 광고하지만 모든 측면에서 IE4가 NE4보다 더 효과적입니다. 이는 표면적으로 IE4와 NE4의 JavaScript 문서 모델(DOM)이 다르기 때문입니다. 둘의 차이점은 모델이 크게 다르지는 않지만 본질적으로 상당히 다릅니다. IE4 모델은 현재 Microsoft 자체에서만 지원되지만 명확하게 작성되었습니다. W3C의 DHTML 표준에 포함되었습니다. NE4의 스타일 시트는 스크립트를 통해 개체의 속성을 호출할 수 없습니다. (Netscape에서는 javascript를 사용하여 스타일을 정의하는 J SSS라는 스타일 시트를 개발했지만 W3C에서는 인정하지 않습니다.)
2. 스타일 시트에 대해 자세히 알아보기
Cascading Style Sheet의 Cascading은 "Cascading"입니다. 이는 동일한 웹 문서에 여러 스타일 시트가 있을 수 있음을 의미합니다. 이러한 스타일 시트는 위치에 따라 서로 다른 우선순위를 갖습니다. 우선순위가 높을수록 더 많은 스타일 시트가 표시됩니다. 스타일 시트 삽입 형태로 보면 세 가지로 나눌 수 있습니다.
인라인 스타일 시트: 기존 HTML 태그를 활용하고 방금 예시와 같이 태그가 제어하는 정보에 특수한 스타일을 추가합니다.
내장된 스타일 시트: JavaScript와 마찬가지로 HTML 파일의 헤더( 및
태그에 적용됩니다.
외부 스타일 시트는 외부에 저장되는 스타일 시트 파일입니다. 외부 파일의 확장자는 ""과 같습니다.
위의 세 가지 방법을 적용 시 필요에 따라 사용할 수 있으나 실제로는 인라인 스타일시트와 임베디드 스타일시트를 더 많이 사용합니다.
3. 스타일 시트의 문법적 특징
스타일 시트에는 고유한 작성 방법이 있습니다. 문법적 특징을 익히고 다양한 속성을 이해하면 웹 페이지에서 스타일 시트를 사용하는 것이 얼마나 편안할 것입니다. 예를 들어, 가장 간단한 HTML 문서가 있습니다:
Text goes here…
us 스타일은 내장된 스타일시트를 사용하여 지정할 수 있습니다.
클래스를 사용하고
ID콘텐츠를 표시합니다.
Where.someclass는 클래스를 나타내고 #someID는 ID를 나타냅니다. 클래스와 ID는 요소 태그와 함께 사용될 수도 있습니다. 예를 들어,
p.bigFont {...}
는 스타일 시트가 bigFont 클래스의 P 태그(
)에서 실행되어야 함을 의미합니다. 아이디에도 적합합니다.
특정 반복 속성을 선언하는 태그를 단순화하기 위해 ","를 사용하여 서로 다른 선택기를 구분하여 모두 동일한 속성을 나타냄을 나타낼 수 있습니다.
H1,H2 {color:red}
Div, p.mytext {……} 때때로 특정 범위에서 스타일 시트를 효과적으로 적용하고 싶을 수도 있습니다. pe em {color:red} 요소 태그는 다음으로 구분됩니다. 및 에 표시되는 공백과 사이는 빨간색으로 표시되어 있습니다. 또한 "~"를 사용하여 하나의 선택기 뒤에 다른 선택기가 오고 양쪽이 "/"로 둘러싸여 있음을 나타낼 수도 있습니다./ Selector1 ~ Selector2/ {...}
는 다음을 나타냅니다. Selector2가 Selector1을 따르는 경우 이 스타일 시트를 사용하십시오.
2. 속성 값의 단위
스타일 시트에서 속성의 단위는 px(픽셀), pt(파운드), em(조판상의 단위, 1em=12pt) 등 대부분 길이 단위입니다. mm(밀리미터), cm(센티미터), pc(1pc=12pt), in(인치), 이러한 단위는 정수(예: px) 또는 실수(예: em)로 표현될 수 있으며 요소의 로그 값 다음과 같은 상속 관계도 있습니다.
body {font-size:12pt;
text-indent:3em
}
H1 {font-size:15pt}
-디스플레이에서 H1의 들여쓰기 속성은 36pt가 아니라 45pt입니다.
일부 속성의 단위는 여백과 같은 음수 값일 수도 있으며, 이는 요소 간의 중첩과 같은 일부 특수 효과를 얻을 수 있습니다.
deg(도), grad(그라데이션), rad(라디안) 등의 단위가 있는 각도와 같은 다른 단위도 있으며, 주파수 단위인 Hz 및 kHz는 우리에게 매우 친숙합니다.
3. 주석 및 공백
스타일 시트에도 주석문이 있습니다. 주석 태그로 "/*...*/"를 사용할 수 있습니다. 브라우저에는 분석을 담당하는 스타일 시트용 분석기가 있습니다. 분석기가 주석 태그 사이의 내용을 무시하는지 확인하십시오. 스타일 시트에서는 공백이 유효합니다. 문자 사이에 공백이 두 개 이상 있으면 나머지 공백은 생략하고 하나만 유지합니다. 특히 특정 글꼴을 선언하는 경우 공백을 생략하면 안 됩니다.
참고 사항
우선, 스타일 시트는 대소문자를 구분하므로 철자법에 주의하세요. 둘째, CSS2에서 선언되지 않은 속성과 메서드의 경우 스타일 시트의 파서는 다음과 같은 존재를 무시합니다. :
H1 ,H2 {color:green}
H3 ,H4 & H5 {color:red}
P {color:blue ;font-variant:small-caps}
여기서 "&"는 스타일시트 전체 두 번째 줄은 포함되지 않은 레이블에 대해 파서에서 건너뜁니다. 세 번째 줄의 글꼴 변형은 유효한 속성이 아니며 또한 건너뜁니다("color:blue"가 유효함).
위의 규칙을 이해하셨다면 이미 스타일시트에 대해 잘 알고 계실 것입니다. 아래에서는 스타일시트의 다양한 속성과 속성값에 대해 자세히 소개하겠습니다.
CSS2 빠른 참조 2
키워드: 기타
4. CSS 속성:
1. 미디어(Media) 유형
스타일 시트의 가장 중요한 기능 중 하나는 페이지, 스크린, 전자 신디사이저 등과 같은 다양한 미디어에서 작업할 수 있습니다. 특정 속성은 특정 미디어에서만 작동할 수 있습니다. 예를 들어, "font-size" 속성은 스크롤 가능한 미디어 유형(화면)에서만 유효합니다.
미디어 속성 선언은 @import 또는 @media를 사용하여 도입할 수 있습니다.
@import url(loudvoice.css) speech;
@media print {
/* 인쇄용 스타일 시트는 여기에 있습니다 */
}
문서 태그에 미디어를 도입할 수도 있습니다.
보시다시피 @import와 @media의 차이점은 전자가 미디어 유형에 대한 외부 스타일 시트를 도입한다는 것입니다. , 후자는 미디어 속성을 직접 도입합니다. @import를 사용하는 방법은 @import에 스타일 시트 파일의 URL 주소를 추가한 후 미디어 유형을 추가하는 것입니다. 여러 미디어가 스타일 시트를 공유할 수 있으며 미디어 유형은 "," 구분 기호로 구분됩니다. @ 미디어 사용법은 미디어 타입을 우선으로 하는 것이며, 그 외의 규칙은 기본적으로 rule-set과 동일합니다. 다양한 미디어 유형이 아래에 나열되어 있습니다.
SCREEN: 컴퓨터 화면을 나타냅니다.
PRINT: 프린터에 사용되는 불투명 매체를 말합니다.
PROJECTION: 디스플레이에 사용되는 프로젝트를 말합니다.
BRAILLE: 점자 시스템은 촉각 효과가 있는 인쇄물을 말합니다.
AURAL: 음성 전자 합성기를 의미합니다.
TV : 텔레비전 형태의 미디어를 말합니다.
HANDHELD: 휴대용 디스플레이 장치(소형 화면, 흑백)를 말합니다.
ALL: 모든 미디어에 적합합니다.
2. BOX 모델(BOX Model) 속성
BOX란? CSS는 HTML에서
여백 속성:
여백 속성은 margin-top, margin-right, margin-bottom, margin-left, margin의 5가지 속성으로 구분되며 각각 BOX의 내용과 테두리 사이의 거리를 나타냅니다. 해당 속성 값은 숫자 값입니다. 단위는 길이, 백분율 또는 자동일 수 있습니다. 여백은 음수 값으로 설정되어 B OX와 BOX 간에 중복 표시가 발생할 수 있습니다. 여백 속성에 대한 자세한 내용은
속성을 참조하세요. 이름: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left'
속성 값:
초기 값: 0
적합 개체: 모든 요소
상속 여부: 아니요
백분율 참고: BOX 너비 기준
예:
H1 { margin-top: 2em }
H2 { margin-right: 12.3% }
Margin에는 이를 빠르게 작성하는 방법도 있습니다. 즉, margin 속성을 직접 사용하는 것입니다. 예를 들면 다음과 같습니다.
BODY { margin: 1em 2em 3em 2em}
은 다음과 같습니다.
BODY {
margin-top:1em;
margin-right:2em;
margin-bottom:3em;
margin-left:2em;
}
여백 뒤에는 4개의 값이 있을 수 있습니다. 공백으로 구분된 속성(쉼표 아님 기억), 순서는 "상단, 오른쪽, 하단 "왼쪽"입니다. 물론 여백 뒤에 4개 미만의 값이 있을 수 있습니다. 예:
BODY { 여백: 2em } /* 모든 여백은 2em으로 설정됨 */
BODY { margin: 1em 2em } /* 상하 여백은 1em, 오른쪽 및 왼쪽 여백은 2em */
BODY { margin: 1em 2em 3em } /* 위쪽 여백은 1em, 오른쪽 및 왼쪽 여백은 2em, 아래쪽 여백은 3em입니다*/
Padding 속성:
Padding 속성은 테두리와 테두리 사이에 얼마만큼의 공백이 삽입되는지 설명하는 데 사용됩니다. BOX의 내용은 여백 속성과 유사하며 위쪽, 오른쪽, 아래쪽, 왼쪽 및 단축키 패딩으로 구분됩니다. 여백 속성에 대한 자세한 내용은 아래 표를 참조하세요.
속성 이름: 'padding-top' ' , 'padding-right', 'padding-bottom', 'padding-left', 'padding'
속성값:
초기값: 0
적합 객체: 모든 요소
상속 여부: 아니요
백분율 참고: BOX 너비에 상대적
예:
BLOCKQUOTE { padding-top: 0.3em }
padding 속성은 여백과 유사하며 여기서는 생략됩니다.
테두리 속성:
보통 HTML 문서를 볼 때 텍스트 한 조각을 볼 때 실제로 BOX에는 테두리가 있지만 정상적으로 표시되지는 않습니다. attribute BOX 테두리를 설명하는 데 사용됩니다. 테두리 속성은 테두리 너비, 테두리 색상, 테두리 스타일로 구분되며 이러한 속성 아래에 분기가 있습니다.
border-width 속성:
border-width 속성은 border-top-width, border-right-width, border-bottom-width, border-left-width 및 border-width 속성으로 구분됩니다. 너비는 "얇음/중간/두꺼움" 또는 길이 단위로 길이로 표시됩니다. 다음은 b order-width 속성의 세부 목록입니다:
속성 이름: 'border-top-width', 'border-right-width ', 'border-bottom-width', 'border-left-width', 'border-width'
속성 값:
초기 값: 중간
적합 개체: 모든 요소
상속 여부 : 없음
백분율 참고: 금지
border-width는 단축키이며 순서는 위쪽, 오른쪽, 아래쪽, 왼쪽이며 값은 공백으로 구분됩니다.
border-color 속성:
border-color 속성은 BOX 테두리 색상을 표시하는 데 사용되며, border-top-color, border-right-color, border-bottom-color, border-right-로 구분됩니다. color 및 border- color 속성에서 속성 값은 color이며 16진수 또는 rg b()로 표현될 수 있습니다.
속성 이름: 'border-top-color', 'border-right- color', 'border-bottom-color', 'border-left-color',
'border-color'
속성값:
초기값: 요소 색상의 초기값
적합 객체 : 모든 요소
상속 여부 : 없음
백분율 참고 : 금지
border-color는 단축키이며 순서는 위쪽, 오른쪽, 아래쪽, 왼쪽이며 값은 공백으로 구분됩니다. .
border-style 속성:
border-style 속성은 BOX 개체 테두리의 스타일을 설정하는 데 사용되며 해당 속성 값은 CSS에서 지정한 키워드입니다. 일반적으로 초기 값은 none이므로 테두리를 볼 수 없습니다.아래 속성을 참조하세요.
속성 이름: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style', 'border-style'
속성 값 :
초기값 : 없음
적용 객체 : 모든 요소
상속 여부 : 없음
비율 비고 : 금지
border-color는 단축키, 순서는 오른쪽 상단 왼쪽 하단, 값은 공백으로 구분됩니다.
속성값의 명칭과 의미는 다음과 같습니다.
없음: 테두리가 없습니다.
점선: 테두리가 점선입니다.
점선: 테두리가 길고 짧은 선입니다.
solid: 테두리가 실선입니다.
double: 테두리가 이중선입니다.
홈, 능선, 삽입 및 시작: 색상 속성에 따라 다양한 효과로 3D 테두리를 표시합니다.
테두리 속성:
테두리 속성은 테두리에 대한 바로가기입니다. 속성 값은 공백으로 구분됩니다. 예를 들면 다음과 같습니다.
안녕하세요!
order-top, border-right, border-bottom, border-left를 각각 위쪽, 오른쪽, 아래쪽, 왼쪽에 대한 단축키로 사용할 수도 있습니다. 속성 값의 순서는 와 동일합니다. 테두리 속성의 것입니다.
CSS2 빠른 참조 3개
키워드: 기타
3. 레이아웃(Layout) 속성:
이전 HTML에서는 요소의 순서 배열로만 요소의 위치를 결정할 수 있었지만 여기 CSS에서는 요소를 보다 정확하게 배치할 수 있습니다. Netscape는 정밀한 레이아웃에 매우 유용한 Layer 태그를 제안한 적이 있지만 W3C에서는 이를 인정하지 않았습니다. W3C는 CSS의 Layer 태그와 유사한 기능을 제안했습니다.
위치 속성:
위치 속성은 요소의 위치 유형을 결정하는 데 사용됩니다. 자세한 내용은 속성을 참조하세요.
속성 이름: '위치'
속성 값: 절대 상대 정적 | 🎜>초기값: static
적합 객체: 모든 요소
상속 여부: 없음
비율 설명: 금지
속성 값은 각각 다음을 나타냅니다.
absolute: 화면에서의 절대 위치 .
relative: 화면에서의 상대적인 위치입니다.
정적: 고유한 위치.
direction 속성:
direction 속성은 BOX의 배열 방향을 결정합니다. 자세한 내용은 속성을 참조하세요.
속성 이름: 'direction'
속성 값: ltr|rtl
초기 값: ltr
적합 개체: 모든 요소
상속 여부: 예
백분율 참고: 금지
부동 및 지우기 속성:
HTML에서는 그림의 부동 위치를 선택할 수 있습니다. BOX 개체는 CSS 위치를 통해 부동하도록 선택할 수도 있습니다.改变BOX的float属性，BOX将飘浮在其他元素的左或右方：
属性名称: 'float'
属性值: left| right|none
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止
例如：
Some sample text that has no other...
相反的，使用clear属性将禁止元素在BOX的左方或右方飘浮：
属性名称: 'clear'
属性值: left| right|both|none
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止
绝对位置属性：
绝对位置属性有四个属性：top、right、bottom和left，属性值为长度单位或百分数：
属性名称: 'top'、'right'、'bottom'、'left'
属性值:
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止
利用以上属性，用户就可以精确定义元素的位置，如：
I used two red hyphens to serve as a change bar. They
will "float" to the left of the line containing THIS
--
word.
z-index 속성:
CSS에서 요소의 중첩 표시를 허용하므로 표시 순서에 문제가 있습니다. z-index 속성은 컴퓨터 화면을 기준으로 요소의 앞, 뒤 위치를 설명합니다. X-Y 평면, 그러면 Z 축은 화면에 수직이고 z-index는 정수를 사용하여 요소의 앞뒤 위치를 나타냅니다. 값이 클수록 상대적으로 앞쪽 위치에 표시되며 CSS가 동의합니다. Z-색인에 음수를 사용하려면
속성 이름: 'z-index'
속성 값: auto|
초기값: auto
적합 객체: position 속성을 사용하는 요소
상속 여부: no
백분율 설명: 금지됨
너비 속성:
BOX의 너비가 포함된 내용에 따라 달라지지 않도록 BOX의 너비 속성을 지정합니다.
속성 이름: '너비'
속성 value:
속성 값:
|
초기 값: 0
적합 개체: 모두
상속 여부: 없음
백분율 비고 : 상위 요소의 너비에 따라 다름
|
초기 값: 100%
적합 개체: 모두
상속 여부: 없음
백분율 참고: 상위 요소의 너비에 따라 다름
속성 이름: 'height'
속성값:
|
| auto
초기값: auto
적합 객체: 블록 요소
상속 여부: no
백분율 참고: 상위 요소의 높이
속성 값:
|
초기 값: 0
적합 개체: all
상속 여부: 없음
백분율 비고 : 상위 요소의 높이에 따라 다름
|
초기값 : 100%
적합객체 : all
상속 여부: 없음
백분율 참고: 상위 요소의 높이에 따라 다름
속성 이름: 'overflow'
속성 값: visible 스크롤 | attribute
상속 여부: no
Percentage 참고: 금지
속성 값의 의미는 다음과 같습니다.
visible: 영역을 확장하여 모든 콘텐츠를 표시합니다.
hidden: 범위를 벗어난 콘텐츠를 숨깁니다.
스크롤: 요소 오른쪽에 스크롤 막대를 표시합니다.
auto: 콘텐츠가 요소의 영역을 초과하면 스크롤바가 표시됩니다.
clip 속성:
CSS는 요소 영역을 다양한 모양으로 자를 수 있는 클립 속성도 제공하지만 현재는 사각형만 제공됩니다.
속성 이름: 'clip'
속성 값:
| auto
초기값: auto
적합 요소: 요소의 위치 속성을 절대값으로 설정
상속 여부: no
백분율 참고: 금지
값은 직사각형(오른쪽 상단 왼쪽 하단)입니다.
line-height 및 수직 정렬 속성:
line-height 속성은 길이 단위 또는 백분율을 사용하여 요소 내부의 줄 간격을 지정할 수 있습니다.
속성 이름: 'line-height'
속성 value: Normal |
DIV { line-height: 1.2em; 글꼴 크기: 10pt }
DIV { line-height: 120%; 글꼴 크기: 10pt }
vertical-align 속성은 요소의 표시를 결정합니다. 세로 위치:
속성 값: 기준선 | 상위 | 하위 | 텍스트 하위
🎜>초기값: 기준선
적합 객체: 인라인 요소
상속 가능: 없음
퍼센트 참고: 요소의 line-height 속성에 따라 다릅니다.
속성 값의 의미는 다음과 같습니다. 다음:
기준선: 요소의 기준선에 맞춰 정렬됩니다.
middle: 요소의 중앙에 정렬됩니다.
text-top: 텍스트를 상단에 정렬합니다.
text-bottom: 텍스트 하단 정렬.
위쪽: 이 행의 가장 높은 요소에 맞춰 정렬됩니다.
하단: 이 행의 가장 낮은 요소에 맞춰 정렬됩니다.
가시성 속성:
이 속성은 요소의 표시 또는 숨기기를 제어하는 데 사용됩니다.
속성 이름: 'visibility'
속성 값: 상속 | 표시 숨김
초기 값: 상속
적합한 개체: 모든 요소
상속 여부: 값이 상속인 경우 상위 요소 속성이 상속됩니다.
백분율 참고: 금지
4. 색상 및 배경(Color 및 Background) 속성:
CSS에서 전경색, 배경색, 그림을 설정하는 방법에 대해 소개합니다.
color 속성:
color 속성은 요소의 전경색을 설정하는 데 사용됩니다.
속성 이름: 'color'
속성 값:
초기 값: 사용자의 색상 기준 초기값 정의됨
적합한 개체: 모든 요소
상속 여부: 예
백분율 참고: 금지됨
색상 속성의 값은 16진수 값, rgb() 함수 또는 색상 이름일 수 있습니다. CSS로 인식됩니다. 예:
EM { color: red }
EM { color: rgb(255,0,0)}
Background 속성:
속성 이름: 'Background-color'
속성 값:
| transparent
초기 값: transparent
적합 개체: 모든 요소
상속 여부: 아니요
백분율 참고: 금지됨
backgroud-image 속성은 배경 이미지를 설정하는 데 사용됩니다.
속성 이름: 'Background-image'
속성 값:
| 없음
적합 개체: 모든 요소
상속 여부: 아니요
백분율 설명: 금지
URL은 절대 주소 또는 상대 주소일 수 있습니다. 예:
BODY { background- image: url( Marble.gif) }
P { background-image: none }
위의 두 속성은 일반 HTML 속성을 사용하여 구현할 수도 있습니다. 다음 속성은 원본 HTML에 대한 CSS 확장입니다.
속성 이름: 'Background-repeat'
속성 값:peat | 🎜> 초기 값: 반복
적합 개체: 모든 요소
상속 여부: 아니요
비율 설명: 금지
속성 값의 의미:
반복: X축을 따라 2개 Y 축 방향은 이미지를 반복합니다.
repeat-x: X축 방향을 따라 이미지를 반복합니다.
repeat-y: Y축 방향을 따라 이미지를 반복합니다.
없음: 중복된 이미지가 없습니다.
예:
BODY {
background: red url(pendant.gif);
background-repeat:peat-y
}
/*는 이미지를 따라 반복한다는 의미입니다. Y축 "pendant.gif", 나머지는 빨간색을 배경색으로 사용*/
background-attachment 속성은 문서 전체를 스크롤할 때 배경 이미지가 어떻게 표시되는지를 나타냅니다. 여기에는 두 가지 속성 값(고정 및 스크롤)이 있습니다. 고정은 IE4의 워터마크 효과와 동일합니다. 즉, 문서를 드래그할 때 배경은 비교적 정적인 반면 스크롤은 문서와 함께 스크롤됩니다.
배경 위치 속성은 배경 이미지가 표시되는 위치를 지정하는 데 사용됩니다.
속성 이름: '배경 위치'
속성 값: [
초기값: 0%
상속 여부: 없음
: 요소 자체의 크기 참조
속성 값 의미:
"top left" 및 "left top"은 "0% 0%"를 의미합니다.
"top", "top center", "center top"은 "50% 0%"를 의미합니다.
"오른쪽 상단"과 "오른쪽 상단"은 모두 "100% 0%"를 의미합니다.
"왼쪽", "왼쪽 중앙" 및 "중앙 왼쪽"은 "0% 50%"를 의미합니다.
"센터"와 "센터 센터"는 "50% 50%"를 의미합니다.
'오른쪽', '오른쪽 중앙', '중앙 오른쪽'은 모두 '100% 50%'를 의미합니다.
"왼쪽 아래"와 "왼쪽 아래"는 "0% 100%"를 의미합니다.
'하단', '하단 중앙', '중앙 하단'은 모두 '50% 100%'를 의미합니다.
'하단 오른쪽', '오른쪽 하단'은 '100% 100%'를 의미합니다.
예:
BODY { background: url(banner.jpeg) right top } /* 100% 0% */
BODY { background: url(banner.jpeg) top center } /* 50% 0 % */
BODY { 배경: url(banner.jpeg) 센터 } /* 50% 50% */
BODY { 배경: url(banner.jpeg) 하단 } /* 50% 100% */
배경 속성은 위의 배경 속성에 대한 바로가기입니다.
속성 이름: '배경'
속성 값: | > | | 적합 개체: 모든 요소 상속 여부: 아니요
백분율 참고: 배경 위치에서만 허용됩니다.
CSS2 빠른 참조 4번
키워드: 기타
5. 글꼴(Font) 속성:
글꼴에 관한 다양한 속성을 정의합니다.
font-family 속성은 글꼴 이름 또는 글꼴 유형 이름일 수 있는 글꼴 이름을 정의합니다. 글꼴 이름은 컴퓨터 시스템의 이름과 정확히 동일해야 합니다.
속성 이름: 'font- family'
속성 값: [[
|
],]* [
상속 여부: 예
백분율 참고: 금지
일부 컴퓨터 시스템의 스타일 시트에서 요구하는 글꼴이 없는 경우에 대비하여 보조 글꼴을 설정할 수 있습니다. 예:
BODY {font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }
family-name은 Heisi Mincho W3와 같은 특정 글꼴을 나타내고, generic-family는 특정 유형을 나타냅니다. 세리프와 같은 글꼴.
font-style 속성은 글꼴의 기울어짐 정도를 나타냅니다.
속성 이름: 'font-style'
속성 값: Normal | italic | oblique
초기 값: Normal
적합 객체: 모든 요소
상속 여부: 예
백분율 설명: 금지됨: 일반
적합 대상: 모든 요소
상속 여부: 예
백분율 참고: 금지됨
소문자 small-caps 속성을 사용하는 요소는 일반 대문자 Some보다 작게 표시됩니다.
font-weight 속성은 글꼴 두께를 설명하는 데 사용됩니다.
속성 이름: 'font-weight'
기본값: 보통 | 굵게 | 🎜>적합한 객체: 모든 요소
상속 여부: 예
백분율 설명: 금지
100~900은 9가지 글꼴 두께를 나타내고, 400은 보통, 700은 굵게, 900은 가장 무거운 글꼴, 더 굵게 또는 더 가벼움은 글꼴 두께가 상위 요소보다 한 수준 높거나 낮음을 나타냅니다. 예를 들어 상위 요소의 글꼴 두께가 400인 경우 굵은 글씨는 500의 글꼴 두께를 나타냅니다. 상위 요소 자체에 글꼴 두께가 있는 경우 9 00의 경우 굵은 글꼴 이후에도 글꼴 두께는 여전히 900이며 더 밝은 경우에도 동일합니다. 일부 글꼴에는 100에서 900, 어쩌면 300에서 700까지의 전체 가중치 범위가 없으며 최소 및 최대 가중치도 300에서 700입니다. 예:
P {font-weight: Normal } /* 400 */
H1 {font-weight: 700 } /*bold */
font-size 속성은 글꼴 크기를 설명합니다.
속성 이름: 'font-size'
속성 값:
|
|
백분율 참고: 상위 요소의 글꼴 크기 기준
이 속성은 절대 크기를 사용할 수 있습니다. 또는 다음 키워드에 표시된 대로 절대 크기를 사용할 수 있습니다.
xx-소형 | 소형 |
상대적 크기는 더 크다 또는 더 작다를 사용하여 설명할 수 있습니다.
예:
P { 글꼴 크기: 12pt; 1.5 em }
Font 속성은 다음과 같습니다.
속성 이름: 'font'
속성 값: [
|
]?
[/ 글꼴: 12pt/14pt sans-serif } P { 글꼴: 80% sans-serif } P { 글꼴: x-large/110% "새 세기 교과서", serif } P { 글꼴: 굵은 기울임꼴 대형 Palatino, serif } P { 글꼴: 일반 작은 대문자 120%/120% 판타지 } 6. 텍스트(텍스트) 속성: 여기의 속성은 다음과 같습니다. 웹 문서의 텍스트 표시에 영향을 줍니다. text-indent 속성은 텍스트의 들여쓰기 정도를 나타냅니다.
속성 이름: 'text-indent'
속성 값:
|
초기 값: 0
적합 for object : 컨테이너 요소
상속 여부: yes
백분율 참고: 상위 요소의 너비에 따라 다름
다음 예에서는 단락의 들여쓰기 값이 3em임을 보여줍니다.
P { text -indent: 3em }
Align 속성은 텍스트 정렬을 나타냅니다.
속성 이름: 'alignment'
속성 값: left | right | center | justify
상속 여부: 예
백분율 참고: 금지
text-designation 속성은 텍스트 수정 방법을 설명합니다.
속성 이름: 'text-꾸밈'
속성 값: 없음 | 밑줄 | | 깜박임 ]
초기값: 없음
상속 여부: 아니오
백분율 비고: 금지
속성 값의 의미는 다음과 같습니다.
밑줄: 밑줄.
윗줄: 밑줄.
line-through: 줄을 삭제합니다.
blink: 깜박임(Navigator의 깜박임 태그 기능과 유사)
text-shadow 속성은 텍스트에 그림자 효과를 추가할 수 있습니다.
속성 이름: 'text-shadow'
속성 값 : 없음 |
[,
]*
초기값: 없음
적합 객체: 모두
상속 여부: 없음
백분율 참고: 투명도를 설명할 때만 유효합니다.
예:
P { text-shadow: black }
위 예에서는 텍스트 오른쪽 하단에 검은색 그림자가 표시되고, 그림자는 BOX의 영역을 늘려줍니다.
letter-spacing 속성은 텍스트의 단어 간격을 나타냅니다. 속성 이름: 'letter-spacing'
속성 값: Normal
초기 값: Normal
적합한 개체: 모든 요소
상속 여부: 예
백분율 참고: '단어 간격' 금지
속성 값: 일반 |
초기 값: 일반
적합 개체: 모든 요소
상속 여부: 예
예:
H1 { word-spacing: 1em }
text-transform 속성은 지정된 대문자 또는 소문자로 BOX의 텍스트를 표시할 수 있습니다. 형식:
속성 이름: 'text-transform'
속성 값: 대문자 | 소문자 | 없음
초기 값: 없음
적합 개체: 모든 요소
상속 여부: 예
백분율 참고: 금지됨
속성 값의 의미는 다음과 같습니다.
capitalize : BOX에 있는 각 문장의 첫 글자를 대문자로 표시합니다.
대문자: BOX의 모든 문자를 대문자로 변경합니다.
소문자: BOX의 모든 문자를 소문자로 변경합니다.
White-space 속성은 텍스트에 공백을 표시하는 방법을 설명합니다. HTML에서는 공백이 생략됩니다. 즉, 단락 기호 시작 부분에 공백을 아무리 입력해도 유효하지 않습니다. 공백을 입력하는 방법에는 두 가지가 있습니다. 하나는 공백 " "의 코드를 직접 입력하거나 태그를 사용하는 것입니다. CSS의 pre와 유사한 속성도 있습니다:
속성 이름: 'white- space'
속성 값: Normal | pre | nowrap
초기 값: Normal
적합 개체: 컨테이너 요소
상속 여부: yes
백분율 참고: 금지
예:
PRE { 공백: pre }
P { 공백: 일반 }
CSS2 빠른 참조 5
키워드: 기타
7. 속성 나열:
여기서는 일련의 속성 목록(list)을 설명하는 데 사용됩니다.
list-style-type 속성은 목록의 각 항목 앞에 사용되는 기호를 설명합니다.
속성 이름: 'list-style-type'
속성 값: disc Circle | | upper-roman | lower-alpha | none
초기값: disc
적합 객체: 목록 요소
상속 여부: yes
비율 설명: 금지됨
속성 값 의미는
디스크: 둥근 케이크 모양.
원: 속이 빈 원.
사각형: 정사각형.
십진수: 십진수 값.
lower-roman: 소문자 로마 숫자.
upper-roman: 대문자 로마 숫자.
lower-alpha: 그리스 소문자입니다.
상위 알파: 대문자 그리스 문자입니다.
예:
첫 번째 항목입니다.
속성 값:
두 번째 항목입니다.
세 번째 항목입니다.
속성 이름: 'list-style-image'
| 없음 초기 값: 없음
적합 객체: 목록 요소
상속 여부: 예
백분율 참고: 금지됨
은 절대 주소 또는 상대 주소일 수 있습니다.
list-style-position 속성은 목록의 위치 표시를 설명하는 데 사용됩니다.
속성 이름: 'list-style-position'
속성 값: inside 외부
초기 값: external
적합한 개체: 목록 요소
상속 여부: 예
백분율 참고: 금지
외부 및 내부 속성 값은 각각 BOX 외부 또는 내부 디스플레이를 나타냅니다. 예:
UL { list-style: external } UL.compact { list-style: inside }
첫 번째 목록 항목이 옵니다. 첫 번째
두 번째 목록 항목이 두 번째로 옴
첫 번째 목록 항목이 먼저 옴
두 번째 목록 항목이 두 번째로 옴
list- 스타일 속성은 위 속성에 대한 단축형입니다.
속성 이름: 'list-style' 속성 값: | >초기값: no 적합 객체: List 요소
상속 여부: yes
백분율 참고: 금지
예:
UL { list-style: upper-roman inside } /* 모든 UL에 유효함*/
UL ~ UL { list-style: Circle Outside } /* UL 내부의 모든 UL 마크에 유효함*/
8. 테이블 속성:
테이블의 대부분의 속성은 위의 다양한 속성에서 논의되었으므로 여기에는 두 가지 속성만 소개됩니다.
row-span 속성은 테이블에 걸쳐 있는 행 수를 설명합니다.
속성 이름: 'row-span'
속성 값:
초기 값: 1
상속 여부: 아니요
백분율 설명: 금지
column-span 속성은 테이블 요소에 걸쳐 있는 열 수를 설명합니다. 테이블:
속성 이름: 'column-span'
속성 값:
초기값: 1
상속 여부: 없음
백분율 참고 : 금지됨
9. 사용자 인터페이스 속성:
커서 속성, 사용자는 요소에 사용할 커서 모양을 지정할 수 있습니다:
속성 이름: 'cursor'
속성 값: auto | 기본 | 포인터 | ne-크기 조정 | s-크기 조정 | 텍스트 | 초기값: auto
적합 객체: 모든 요소
상속 여부: yes
이제 CSS의 기존 속성이 모두 도입되었습니다(다시 소개되지 않는 일부 청각 스타일 시트도 있습니다). 현재 스타일을 지원하는 브라우저 유형이 있지만 이 기사는 끝나야 합니다. 시트는 여전히 제한되어 있지만 대부분을 차지합니다. 스타일 시트는 조만간 브라우저의 통합 표준이 될 것입니다. 1. 스타일 시트는 W3C에서 허용하는 유일한 스타일 표준입니다. W3C가 JavaScript 스타일 시트를 표준으로 사용할 것이라는 징후는 없습니다. 둘째, CSS는 요소에 이벤트를 도입하는 문제를 효과적으로 해결합니다. 이는 동적 HTML의 필수 요소입니다. 페이지를 방문해 보면 정말 편리하다는 것을 알게 될 것입니다. 제 노력이 여러분이 스타일 시트를 능숙하게 익히는 데 도움이 되기를 바랍니다.