CSS(Cascading Styel Sheet)는 웹 페이지의 모양을 제어하는 일련의 서식 규칙으로, 웹 디자인에 필수적인 도구 중 하나입니다. 다음으로 CSS의 기본 구문 형식을 배우기 시작합니다.
1. CSS 정의 규칙
계단식 스타일 시트는 일반적으로 "css" 확장자를 가진 별도의 파일로 사용되는 완전한 일반 텍스트 파일입니다. 해당 콘텐츠에는 특정 CSS 정의 규칙에서 콘텐츠를 정렬하고 표시하는 방법을 브라우저에 알려주는 규칙 세트가 포함되어 있습니다. 선택자, 속성, 속성 값의 세 부분으로 구성됩니다. 구문은 다음과 같습니다.
구문: 선택기 { 속성: 값 }
↑ ↑ ↑
선택기 {속성: 값}
CSS 스타일은 웹 브라우저에서 구문 분석한 후 HTML 문서의 해당 요소에 적용되는 일련의 규칙으로 구성됩니다. CSS 스타일 규칙은 선택기, 속성, 값이라는 세 부분으로 구성됩니다.
1. 선택기: 선택기는 스타일을 정의하는 html 태그입니다. html 태그를 선택기로 정의한 후 html 페이지에서 태그 아래의 내용이 CSS에서 정의한 규칙에 따라 변경됩니다.
2. 속성: HTML 요소에 설정하려는 스타일 이름은 선택기에서 변경되는 내용을 나타냅니다. 일반적인 이름으로는 글꼴 속성, 색상 속성, 텍스트 속성 등이 있습니다. 아래는 우리가 정의한 스타일 시트입니다.
3. 값(Value): 수치와 단위 또는 키워드로 구성된 속성의 값은 특정 속성의 표시 효과를 제어하는 데 사용됩니다.
@charsetgb2312;body{font-family:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}이 스타일시트에서:
1. @charsetgb2312;는 중국 국가 표준 문자 집합을 사용함을 의미합니다.
2. body와 p는 html의 두 태그이며, 이 두 태그에 세 가지 스타일이 설정됩니다.
글꼴 계열: 글꼴의 글꼴 유형을 지정합니다.
"> 2. 스타일 시트 삽입
HTML 페이지 내부에 정의된 CSS 스타일 시트를 임베디드 CSS 스타일 시트라고 합니다. 즉, HTML 문서의 헤드 부분에는 스타일 태그가 사용되고 태그에는 일련의 CSS 규칙이 정의됩니다.
구문: <head><styletype=text/css><!--......--></style></head>
설명하다:
<style>은 CSS 스타일 시트의 시작을 나타내며 끝 표시는 </style>입니다. 시작 표시 <style>에는 위의 type=text/css 속성과 같이 필요에 따라 몇 가지 속성을 추가할 수 있습니다. 열은 CSS 스타일 시트가 MIME 유형을 채택함을 나타냅니다. 이 유형의 특징은 브라우저가 CSS 코드를 지원하지 않을 때 CSS 코드가 브라우저에서 다음과 같은 형식으로 표시되지 않도록 필터링된다는 것입니다. 소스 코드. 신뢰성을 높이려면 스타일 시트에 주석 식별자 <!--...-->를 다시 추가하세요. CSS 규칙은 이 주석 식별자에 정의됩니다.
예 1: t1.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>내장된 CSS 스타일 시트</title><styletype=text/css><!--@charsetgb2312; {font-family:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}--></style></head > <body>수천마리의 새가 수천개의 산을 날아가며 사람의 흔적도 없이 사라진다<p>수천마리의 새가 수천개의 산을 날아가며 사람의 흔적도 없이 사라진다</p></body></html>3. 외부 스타일 시트에 대한 링크
외부 CSS 스타일 시트는 .css 접미사가 붙은 외부 파일입니다. 외부 스타일 시트 정의는 여러 페이지에 적용될 수 있습니다. HTML 페이지에서 링크 태그를 사용하여 외부 CSS 스타일 시트를 연결할 수 있습니다. 구문은 다음과 같습니다.
문법:
<linkrel=stylesheethref=*.css” 유형=텍스트/css>
매개변수:
1. rel 속성은 스타일 시트가 HTML 문서와 결합되는 방식을 나타냅니다. rel 값: 스타일시트, 외부 스타일 시트 지정을 나타냅니다.
2. *.css는 별도로 저장된 스타일시트 파일입니다.
예제 2 외부 CSS 파일 p2.css를 정의한 다음 해당 파일을 t2.htm 파일에 연결합니다.
예 2: t2.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>외부 스타일 시트 링크</title><styletype=text/css><!--@charsetgb2312; 본문 {font-family:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}--></style></head > <body>아가야 천천히 날아라 앞의 가시장미를 조심해라<p>아가야 입을 벌려라 바람에 실려오는 꽃향기에 취하게 될 것이다</p></body>< /html>4. 인라인 스타일 시트
인라인 스타일은 HTML 관련 태그에 정의된 CSS 스타일 시트를 나타냅니다. 일반적으로 사용되는 HTML 태그는 주로 <p>, <h2>, <ul>, <div> 등과 같은 BODY의 일부 요소입니다. 다음은 인라인 스타일의 예입니다.
예 3: t3.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>제목 없는 문서</title></head><body><divstyle=color:blue;font-size :30px;>바람에 흔들리는 꽃향기에 취하게 됩니다</div><pstyle=color:#ff0000;font-style:italic;>바람에 흔들리는 꽃향기에 취하게 됩니다</p>< /본문></html>
5. 외부 스타일 시트 가져오기
외부 스타일 시트를 가져오는 것은 HTML 파일에 포함된 스타일 시트가 생성되었음을 의미하지만 외부 스타일 시트의 일부 설정을 사용해야 합니다. 이 경우 <style>에서 외부 스타일 시트를 가져오고 @를 사용할 수 있습니다. 아래 예와 같이 가져옵니다.
<html><head><styletype=text/css><!--@importurl(mystyle.css);다른 스타일 시트 선언--></style></head></body>..... .</body></html>
그 중 @import url(mystyle.css);는 mystyle.css 스타일 시트를 가져오는 것을 의미합니다. 가져온 외부 스타일 시트는 스타일 시트의 시작 부분, 내부 스타일 시트 위에 있어야 합니다.
실시예 4
외부 CSS 파일 p4.css를 정의한 다음 t4.htm 파일에서 파일을 가져옵니다.
예 4: t4.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>외부 스타일 시트 가져오기</title><styletype=text/css><!--@importurl(p4 .css);@charsetgb2312;body{font-family:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}--> </style></head><body>수천 마리의 새가 수천 개의 산을 날아가는데 인간의 흔적은 모두 사라진다<p>수천 마리의 새가 수천 개의 산을 날아다니는데 인간의 흔적은 전혀 보이지 않는다</p>< /본문></html>6. CSS 스타일 시트의 상속
CSS 스타일 시트에서 하위 태그의 일부 속성은 상위 태그의 속성을 상속합니다. 예를 들어 태그 p가 글꼴 색상 속성을 설정하지 않으면 콘텐츠가 태그 본문의 하위 요소가 됩니다. p에서는 본문 값의 색상을 사용합니다. 다음 예에서는 이러한 상황을 보여줍니다.
예 5: t5.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>내장된 CSS 스타일 시트</title><styletype=text/css><!--@charsetgb2312; {font-family:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;}--></style></head><body>千Mountain 새들은 수천 길을 날아 인간의 흔적 없이 사라진다<p>수천 마리의 산새가 수천 길을 날아 인간의 흔적 없이 사라진다</p></body></html>7. 여러 요소 설정
CSS를 사용하면 단일 형식을 여러 태그에 적용할 수 있습니다. 다음 예와 같이 선택기로 사용될 때 각 태그는 쉼표로 구분됩니다.
예 6: t6.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>내장된 CSS 스타일 시트</title><styletype=text/css><!--@charsetgb2312; ,h2,h3,p,{font-family:宋体;color:#FF0000;}--></style></head><body><h1>수천 마리의 새가 수천 개의 산을 날아가고 수천 명의 사람들이 사라집니다. </ h1><h2>수천 마리의 새가 수천 개의 산을 날아가며 흔적도 없이 사라진다</h2><h3>수천 마리의 새가 수천 개의 길을 날아가며 사람의 흔적도 없이 사라진다</h3><p>수천마리 수많은 새들이 수천 개의 길을 가로질러 날아가다가 사람의 흔적도 없이 사라집니다.</p></body></html>