CSS 구문 소개

CSS의 정의는

selector,

properties

속성 값의 세 부분으로 구성됩니다.

구문: ​​선택기 {속성: 값} (선택기 {속성: 값})

1. 설명

선택기는 다양한 형식이 될 수 있으며 일반적으로 스타일 HTML 태그를 정의하려고 합니다. , BODY, P, TABLE과 같은 속성과 값은 이 방법을 통해 정의할 수 있습니다. 속성과 값은 콜론으로 구분되어야 합니다:

예: body {color: black}, 효과 이 예는 The text on the page is black을 사용하는 것입니다.

속성 값이 여러 단어로 구성된 경우 값에 따옴표를 추가해야 합니다. 예를 들어 글꼴 이름은 여러 단어의 조합인 경우가 많습니다.

예: p {font -family: "sans serif"} (단락 글꼴을 sans serif로 정의)

선택기에 여러 속성을 지정해야 하는 경우 세미콜론을 사용하여 모든 속성과 값을 구분합니다.

예: p {text -align: center; color : red} (문단은 중앙에 배열되어 있고, 문단 안의 텍스트는 빨간색입니다)

2. 선택자 그룹

같은 속성과 값을 지정하고 선택기를 쉼표로 구분하면 반복되는 스타일 정의를 줄일 수 있습니다.

h1, h2, h3, h4, h5, h6 { color: green } (이 그룹에는 모든 제목 요소와 각 요소의 텍스트가 포함됩니다. 제목 요소는 녹색입니다)

p, table{ 글꼴 크기: 9pt } (문단과 표의 텍스트 크기는 9입니다.)

효과는 다음과 완전히 동일합니다.

p { 글꼴- size: 9pt }

table {font-size: 9pt }

3. 클래스 선택기

클래스 선택기를 사용하면 클래스 선택기를 정의할 때 동일한 요소를 분류하고 스타일을 다르게 정의할 수 있습니다. , 사용자 정의 클래스에서 이름 앞에 마침표를 추가합니다. 두 개의 서로 다른 단락(하나는 오른쪽에 정렬되고 다른 하나는 가운데에 정렬)을 원하는 경우 먼저 두 개의 클래스를 정의할 수 있습니다:

p.right {text-align: right}

p.center { text-align: center }

그런 다음 HTML 태그에 정의한 클래스 매개변수를 추가하면 됩니다.

right 이 단락은 오른쪽으로 정렬됩니다.

center 이 단락은 가운데 정렬됩니다.

클래스 선택기를 사용하는 또 다른 방법이 있습니다. 선택기에서 HTML 태그 이름을 생략하면 여러 다른 요소를 동일한 스타일로 정의할 수 있습니다.

center {text-align: center} (define .center 클래스 선택기는 중앙 정렬된 텍스트입니다. 이러한 클래스는 모든 요소에 적용될 수 있습니다. 다음은 h1 요소(제목 1)와 p 요소(단락)를 모두 "center" 클래스로 분류하여 두 요소의 스타일이 ".center" 클래스 선택기를 따르도록 합니다.

이 제목은 중앙에 배치됩니다.

이 단락도 중앙에 있습니다.

HTML 태그를 생략하는 이 클래스 선택기는 앞으로 가장 일반적으로 사용되는 CSS 방법입니다. 이 방법을 사용하면 어떤 클래스 스타일에도 미리 정의된 요소를 쉽게 적용할 수 있습니다.

4. ID 선택기

HTML 페이지에서 ID 매개변수는 단일 요소를 지정하고 ID 선택기는 이 단일 요소에 대해 별도의 스타일을 정의하는 데 사용됩니다. ID 선택기의 적용은 클래스 선택기의 적용과 유사합니다. 단지 CLASS를 ID로 바꾸면 됩니다. 위 예제의 클래스를 ID로 바꿉니다. 이 단락을 오른쪽으로 정렬하고 ID 이름 앞에 "#" 기호를 사용하여 ID 선택기를 정의합니다. 클래스 선택기와 마찬가지로 ID 선택기의 속성을 정의하는 방법에는 두 가지가 있습니다. 다음 예에서 ID 속성은 id="intro"인 모든 요소와 일치합니다.

#intro

{

font-size:110%;

font-weight:bold ;

color:#0000ff;

background-color:transparent

} (글꼴 크기는 기본 크기의 110%, 굵게, 파란색, 배경색은 투명)

다음 예, ID 속성은 id="intro"인 단락 요소에만 일치합니다:

{

font-size:

font-weight:

color: #0000ff;

background-color: transparent

}

ID 선택기는 매우 제한적이며 특정 요소의 스타일만 개별적으로 정의할 수 있습니다. 특별한 상황.

CSS Album

5. 선택기 포함

요소 1에 요소 2가 포함되어 있는 스타일 시트를 개별적으로 포함할 수 있습니다. 이 방법은 요소 1에만 적용됩니다. 요소 2가 정의되어 있으며 개별 요소 1이나 요소 2에 대한 정의는 없습니다. 예:

table a

{

font-size: 12px

}

테이블 안의 링크 스타일이 변경되었으며 텍스트 크기는 12픽셀이며 링크의 텍스트는 테이블 외부는 여전히 기본 크기입니다.

6. 스타일 시트의 계단식 특성

계단식 특성은 상속입니다. 스타일 시트의 상속 규칙은 외부 요소 스타일이 유지되고 이 요소에 포함된 다른 요소에 의해 상속된다는 것입니다. 실제로 요소 내에 중첩된 모든 요소는 외부 요소에서 지정한 속성 값을 상속하며, 달리 변경하지 않는 한 중첩된 스타일의 여러 레이어를 함께 쌓는 경우도 있습니다. 예를 들어 DIV 태그에 P 태그를 중첩합니다.

div { color: red;font-size: 9pt}

이 단락의 텍스트는 빨간색 9포인트 글꼴입니다(P 요소의 내용). DIV 정의 속성을 상속합니다.)

내부 선택자가 주변 선택자의 값을 상속하지 않는 경우가 있지만 이론적으로 이는 특별합니다. 예를 들어, 상위 경계 속성 값은 상속되지 않습니다. 직관적으로 단락은 문서 BODY와 동일한 상위 경계 값을 갖지 않습니다. 또한 스타일 시트 상속이 충돌하는 경우 마지막으로 정의된 스타일이 항상 우선합니다. 위의 예에서 P의 색상이 정의된 경우:

div { color: red;font-size:9pt}

p {color: blue}

CSS album

텍스트는 파란색 9포인트 글꼴로 되어 있습니다. 문단 내 텍스트의 크기는 9로 div 속성을 상속받았으며, color 속성은 마지막 정의를 따릅니다. 서로 다른 선택기가 동일한 요소를 정의하는 경우 서로 다른 선택기 간의 우선 순위를 고려해야 합니다. ID 선택자, 클래스 선택자, HTML 태그 선택자 ID 선택자는 요소에 마지막에 추가되므로 우선순위가 가장 높고 그 다음이 클래스 선택자입니다. 이 세 가지 관계를 초월하려면 !important를 사용하여 스타일 시트의 우선순위를 높일 수 있습니다. 예:

7. 댓글

CSS에 주석을 삽입하여 코드의 의미를 설명하세요. 주석은 나중에 코드를 편집하고 변경할 때 코드의 의미를 이해하는 데 도움이 됩니다. 브라우저에는 주석이 표시되지 않습니다. CSS 주석은 다음과 같이 "/*"로 시작하고 "*/"로 끝납니다.

/* 단락 스타일 시트 정의*/

p

{

text-align: center ; /* 텍스트는 가로로 가운데 정렬됩니다. */

color: black; /* 텍스트는 검정색입니다.*/

font-family: arial /* 글꼴은 arial입니다. */

}

CSS 이미지 북

css는 텍스트 도구, 드림위버 개발 등 모든 텍스트 작성 도구로 개발할 수 있습니다. CSS도 언어입니다. 이 언어는 HTML이나 포럼과 결합되어야 합니다. 현재 페이지의 표현 형식은 세로 목록이므로 CSS를 사용하여 이 목록을 가로 탐색 모음으로 개선할 수 있습니다. 및 하이퍼링크:

css 부분:

ul{

list-style:none;

margin:0px;/*IE 브라우저의 들여쓰기 설정*/

padding: 0px;/*표준 브라우저의 들여쓰기 설정*/

}

ul li{margin:0px;padding:0px;float:left;}

ul li a{display:block;width :100px;높이:30px;배경:#efefef;색상:# 333;텍스트 장식:없음;텍스트 정렬:중심}

ul li a:hover{배경:#333;색상:#fff;}

CSS를 추가하면 이 목록은 가로가 됩니다. 탐색 모음, 하이퍼링크는 밝은 배경, 회색 글꼴, 밑줄 없음, 높이가 30픽셀, 너비가 100픽셀입니다. 마우스가 이 하이퍼링크 위로 지나갈 때, 회색 배경과 흰색 글꼴로 변경됩니다. 홈페이지 제작 시 CSS 기술이 사용되므로 페이지 레이아웃, 글꼴, 색상, 배경 및 기타 효과를 더욱 정밀하게 제어할 수 있습니다. 해당 코드를 약간만 수정하면 동일한 페이지의 다른 부분이나 다른 페이지가 있는 웹페이지의 모양과 형식을 변경할 수 있습니다.

다음을 달성할 수 있습니다.

(1) 거의 모든 브라우저에서 사용할 수 있습니다.

(2) 기존에는 이미지 변환을 통해 구현해야 했던 일부 기능을 CSS를 사용하여 쉽게 구현할 수 있어 페이지 다운로드 속도가 빨라졌습니다.

(3) 페이지의 글꼴을 더욱 아름답고 정렬하기 쉽게 만들어 페이지를 정말 보기 좋게 만듭니다.

(4) 페이지 레이아웃을 쉽게 제어할 수 있습니다.

(5) 여러 웹페이지의 스타일과 형식을 동시에 업데이트할 수 있으므로 더 이상 페이지별로 업데이트할 필요가 없습니다. CSS 파일을 사용하여 사이트의 모든 웹페이지 스타일을 제어할 수 있습니다. CSS 파일의 해당 행이 수정되면 전체 사이트의 모든 페이지가 그에 따라 변경됩니다.

CSS를 사용하기 전에 사용된 글꼴과 글꼴의 색상 및 크기를 어떻게 제어하나요? 일반적으로 HTML 태그를 사용하여 구현되며 코드가 매우 번거롭습니다. 페이지에서 글꼴 색상과 크기를 자주 변경해야 한다면 생성되는 HTML 코드의 길이가 너무 길어질 것이라고는 상상하기 어렵습니다. CSS는 이러한 작업을 단순화하기 위해 탄생했지만, 물론 그 기능은 결코 그렇게 간단하지 않습니다. CSS는 페이지 구조의 스타일 제어 아이디어를 통해 전체 페이지의 스타일을 제어합니다. 스타일 시트는 페이지에 배치되며 브라우저에 의해 해석되고 실행됩니다. 이는 완전한 텍스트이며 HTML을 이해하는 사람이라면 누구나 마스터할 수 있습니다. 아주 오래된 일부 브라우저의 경우에도 페이지 혼란이 발생하지 않습니다. CSS의 가장 큰 장점 중 하나는 전체 HTML 웹페이지보다 이미지 전송 속도가 빠르다는 것입니다.