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 스타일은 내장된 스타일시트를 사용하여 지정할 수 있습니다.
Where.someclass는 클래스를 나타내고 #someID는 ID를 나타냅니다. 클래스와 ID는 요소 태그와 함께 사용될 수도 있습니다. 예를 들어,
p.bigFont {...}
는 스타일 시트가 bigFont 클래스의 P 태그(
)에서 실행되어야 함을 의미합니다. 아이디에도 적합합니다.
특정 반복 속성을 선언하는 태그를 단순화하기 위해 ","를 사용하여 서로 다른 선택기를 구분하여 모두 동일한 속성을 나타냄을 나타낼 수 있습니다.
H1,H2 {color:red}
Div, p.mytext {……} 때때로 특정 범위에서 스타일 시트를 효과적으로 적용하고 싶을 수도 있습니다. pe em {color:red} 요소 태그는 다음으로 구분됩니다. 및 에 표시되는 공백과 사이는 빨간색으로 표시되어 있습니다. 또한 "~"를 사용하여 하나의 선택기 뒤에 다른 선택기가 오고 양쪽이 "/"로 둘러싸여 있음을 나타낼 수도 있습니다.
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의 필수 요소입니다. 페이지를 방문해 보면 정말 편리하다는 것을 알게 될 것입니다. 제 노력이 여러분이 스타일 시트를 능숙하게 익히는 데 도움이 되기를 바랍니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
