CSS: Cascading Style Sheet의 약자로 [Cascading Style Sheet]로 번역되며 서식 규칙의 집합입니다. 웹 페이지 스타일을 (향상된) 제어하고 웹 콘텐츠에서 스타일 정보를 분리하는 데 사용되는 마크업 언어입니다.
CSS의 구성: CSS의 정의는 선택기(Selector), 속성(properties), 속성 값(value)의 세 부분으로 구성됩니다. 구문: selector{proprety:value} (selector{property:property value})
참고 사항:
1. CSS 선언 블록은 선택기 + "{" + 하나 이상의 CSS 속성 + "}"로 구성됩니다.
2. CSS는 대소문자를 구분하지 않으며 CSS 구문에서는 소문자를 사용하는 것이 좋습니다.
1. CSS 선택자
CSS 스타일의 이름입니다. HTML 문서에 CSS 스타일이 표시될 때 CSS가 사용됩니다. 그것을 사용하는 방법? 이때 CSS 선택자(CSS 이름)는 이 HTML 태그가 이 CSS 스타일을 사용하도록 지정하는 데 사용됩니다.
2. 선택기 구문
CSS 선택기는 스타일을 정의합니다.
선택자 이름 {선언;}
예를 들어:
p{font-size:12px;}.dreamdublue{color:blue;}.dreamdu18px{font-size:18px;}#dreamdured{color:red;}P, dreamdublue 및 dreamduring은 모두 선택자입니다.
3. 선택기 명명 규칙
CSS 선택자는 대문자 및 소문자 영문자, 숫자, 하이픈, 밑줄, 콜론 및 마침표를 사용할 수 있습니다.
(1) 영문 대문자와 소문자 AZ az
(2) 민수기 0~9
(3) 하이픈 -
(4) 밑줄_
(5) 결장:
(6) 기간.
참고: CSS 선택자는 문자로만 시작할 수 있습니다.
4. 선택자 분류
CSS 선택기는 유형 선택기, ID 선택기, 클래스 선택기, 범용 선택기, 그룹 선택기, 포함 선택기, 요소별 선택기, 하위 개체 선택기, 속성 선택기, 관련 선택기, 이웃 선택기 등과 같은 여러 범주로 나눌 수 있습니다. 아래에서 하나씩 소개하고 분석해 보겠습니다.
1. 타입 셀렉터 : 타입 셀렉터는 웹페이지 요소 그 자체이며 정의 시 요소명을 직접 사용합니다.
본문{/*페이지 속성 정의*/}Div{Width:774px;/*모든 div 요소의 너비가 774픽셀이 되도록 정의*/}2. ID 선택기: 서로 다른 요소의 ID 값은 반복될 수 없습니다. ID 선택기는 각 요소의 특정 개체에 대해 서로 다른 스타일을 정의하므로 사용자가 페이지를 보다 정확하게 제어할 수 있습니다. ID 선택기를 사용할 때 먼저 각 요소에 대한 ID 속성을 정의해야 합니다.
<divid="top"></div>id 선택기를 사용할 때 식별을 위해 #을 사용해야 합니다: #top{Width:774px;/*모든 div 요소의 너비가 774픽셀이 되도록 정의*/}3. 클래스 선택기: 문서의 다양한 유형의 요소에 대해 동일한 클래스 이름을 정의할 수 있습니다. 클래스는 동일한 스타일의 요소를 하나의 카테고리로 통합할 수 있습니다. 클래스 선택기를 사용할 때는 먼저 각 요소에 대한 클래스 속성을 정의해야 합니다. :
<divclass="red"></div><spanclass="red"></span><pclass="red"></p>클래스 선택기 사용 시 식별을 위해 영어(점)를 사용해야 합니다. : .빨간색{색상:빨간색;}4. 유니버셜 선택자(Universal selector) : *로 표시되는 특별한 선택자로서 사용되지만 무시하기 쉬운 선택자이다.
*{font-size:12pt;/*문서의 모든 글꼴 크기를 12pt로 정의*/}5. 그룹 선택기: 그룹 선택기는 선택기 유형이 아니라 선택기 방식입니다. 여러 개체가 동일한 스타일을 정의하는 경우 개체를 그룹으로 그룹화할 수 있습니다. 이를 통해 다음과 같은 코드 읽기 및 쓰기를 단순화할 수 있습니다.
.class1{font-size:13px;color:red;text-decraotian:underline;}.class2{font-size:13px;color:blue;text-decroation:underline;}다음과 같이 그룹화할 수 있습니다.
.class1,class2{font-size:13px;text-decroation:underline;}.class1{color:red;}.class2{color:blue;}그룹화 사용에는 두 가지 원칙이 있습니다. 1. 측면 원칙 2. 근접성 원칙(여러 요소가 인접해 있는 경우 모듈 내에서 그룹화 선택기 사용을 고려할 수 있음)
6. 선택기 포함: 코드를 단순화하고 광범위한 스타일 제어를 달성할 수 있는 가장 유용한 유형의 선택기입니다. 예를 들어:
.div1h2{/*div1 레이어 클래스에 있는 모든 h2의 제목 스타일 정의*/font-size:18px;}.div1p{/*div1 레이어 클래스에 있는 모든 p의 제목 스타일 정의*/font-size:12px ;}7. 요소 지정 선택자: 때때로 특정 범위 내에서 특정 요소의 스타일을 제어하고 싶을 때가 있습니다. 이 경우 클래스 또는 ID 선택자를 조합하여 사용할 수 있습니다. 예를 들어:
span.red{/*span 요소에서 red 클래스를 갖는 요소의 색상을 red*/color:red;}div#top{/*div 요소에서 id가 top인 요소의 너비를 100으로 정의 %*/width:100% ;}예:<div><h2><h2><p></p><span></span></div>위 코드에서 뉴스 선택기를 사용하는 것은 당연히 불가능합니다. P를 직접 사용하는 것도 좋지 않습니다. 그런 다음 요소를 사용하여 선택기를 지정할 수 있습니다.
p.news{} h2.news{}span.news{}
8. 하위 개체 선택기: 요소 선택기와 마찬가지로 제한 조건을 충족하는 요소 스타일이 특정 요소 범위 내에서 정의되는 반면 요소별 선택기는 클래스 및 ID 속성을 제한으로 사용합니다. -객체 선택기 선택기는 ID와 하위 객체를 제약 조건으로 사용합니다.
#main>table{/*id가 main*/width:788px;font-size:12px;}#main>.title{/*하위 개체를 정의하는 기본 모듈에서 하위 개체 테이블의 스타일을 정의합니다. id가 기본인 메인 모듈에서 객체의 클래스는 title*/color:red;font-style:italic;} 스타일입니다.9. 속성 선택자: 속성 선택자는 요소 뒤에 대괄호를 추가하는 것이며, 대괄호 안에는 다양한 속성이나 표현식이 나열됩니다. 속성 선택자에는 7가지 특정 형태가 있습니다.
(1) 존재 속성 매칭: 기존 속성을 매칭하여 요소의 스타일을 제어합니다. 일반적으로 일치하는 속성은 괄호 안에 포함되어야 하며, 값을 할당하지 않고 이름만 나열되어야 합니다.
h1[class]{color:red;/*class 값에 관계없이 class 속성을 가진 모든 h1 요소에 적용*/}img[alt]{border:none;/*alt에 관계없이 alt 속성을 가진 모든 img 요소에 적용 값은 무엇입니까*/}a[href][title]{font-weight:bold;/*href 및 title 속성을 모두 포함하는 요소로 기능합니다*/}(2) 정확한 속성 매칭: 속성 값이 지정된 속성 값과 완전히 일치하는 경우에만 스타일이 적용됩니다. id 및 클래스 선택자는 실제로 정확한 속성 선택입니다.
a[href=www.163.com][title=NetEase]{font-size:12px;/*함수 주소는 www.163.com을 가리키고 제목 프롬프트는 NetEase의 a 요소입니다*/}(3) 공백은 개별적으로 일치합니다. 속성에 대한 문자열 목록을 정의하면 문자열 중 하나와 일치하는 한 요소 스타일을 제어할 수 있습니다.
<spanclass=abc>내 스타일을 관리하는 사람</span> 다음 스타일을 사용하여 제어할 수 있습니다: [class^=a]{color:red;} 또는: [class^=b]{color:red;} 또는: [class^=c]{color:red;} 또는:span[class^=c]{color:red;}(4) 하이픈 매칭: 기능 및 사용법은 공백 매칭과 동일하지만, 하이픈 매칭의 문자열 목록은 하이픈으로 구분됩니다.
<span>내 스타일을 누가 통제할 것인가</span>
이는 다음 스타일을 사용하여 제어할 수 있습니다.
[class|=a]{color:red;} 또는: [class|=a]{color:red;} 또는: [class|=b]{color:red;} 또는: [class|=c]{color :red;} 또는: 범위[class|=c]{color:red;}(5) 접두사 선택자: 속성 값의 시작 문자가 지정된 문자열과 일치하면 해당 요소에 스타일을 적용할 수 있습니다. 접두사 일치는 [^=] 형식을 사용하여 구현됩니다.
<div>접두사 일치</div>
다음 스타일 컨트롤을 사용할 수 있습니다.
[class^=내]{색상:빨간색;}(6) 접미사 일치: 접두사와 달리 속성의 끝 문자가 지정된 문자와 일치하는 한 [$=] 형식 제어를 사용합니다.
<div>접미사 일치</div>
다음 스타일 컨트롤을 사용할 수 있습니다.
[class$=테스트]{color:red;}(7) 하위 문자열 매칭: 속성에 지정된 문자열이 존재하는 한 스타일이 적용되며, [*=] 형식으로 제어됩니다.
<div>하위 문자열 일치</div>
다음 스타일 컨트롤을 사용할 수 있습니다.
[클래스*=est]{색상:빨간색;}10. 인접 선택자: 해당 요소에 인접한 다음 요소를 말한다.
div+p{font-size:24px;/*div 요소 바로 뒤의 모든 p 요소에 적용되어 p 요소의 글꼴 크기를 14px로 정의합니다*/}예:<divid=wrap><divid=sub_wrap><h1 >< /h1><p></p></div><p></p></div>class 및 id 속성을 정의하지 않는 한 하단 p 요소를 별도로 제어하려면 인접한 선택기를 사용하면 됩니다.
#sub_wrap+p{글꼴 크기:14px;}