HTML 문서의 스타일. 스타일 속성(내장 CSS 스타일)을 사용하여 html 태그를 디자인합니다. 여러 스타일이 하나로 결합되는 방법
CSS(Cascading Style Sheets) 또는 계단식 스타일 시트, 은 설명하는 데 사용됩니다. 모습마크업 언어로 작성된 문서. 일반적으로 CSS 스타일은 웹 페이지 요소의 스타일을 생성하고 변경하는 데 사용됩니다. 사용자 인터페이스쓰여진 HTML 언어및 XHTML을 포함하지만 XML, SVG 및 XUL을 포함한 모든 종류의 XML 문서에도 적용할 수 있습니다.
계단식 스타일 시트는 속성을 사용하여 요소의 형식을 지정하는 규칙을 설명하고 허용 가능한 값이러한 속성. 사용할 수 있는 각 요소에 대해 한정 세트속성, 다른 속성은 아무런 영향을 미치지 않습니다.
스타일 선언은 두 부분으로 구성됩니다: 웹 페이지 요소 - 선택자및 서식 지정 명령 - 광고 블록. 선택기는 형식을 지정할 요소와 선언 블록(코드의 코드)을 브라우저에 알려줍니다. 중괄호) 형식 지정 명령(속성 및 해당 값)이 나열됩니다.
쌀. 1. CSS 스타일 선언 구조 계단식 스타일 시트의 유형과 세부 사항
1. 스타일시트의 종류
1.1. 외부 스타일 시트
외부 스타일 시트요소에 대한 CSS 스타일 세트가 포함된 확장자가 .css인 텍스트 파일입니다. 파일은 HTML 페이지처럼 코드 편집기에서 생성됩니다. 파일에는 HTML 마크업 없이 스타일만 포함될 수 있습니다. 외부 스타일 시트는 태그를 사용하여 웹 페이지에 연결됩니다. , 섹션 내부에 위치
. 이러한 스타일은 사이트의 모든 페이지에 적용됩니다.여러 태그를 순차적으로 추가하여 각 웹 페이지에 여러 스타일 시트를 첨부할 수 있습니다. , 미디어 태그 속성에서 이 스타일 시트의 목적을 나타냅니다. rel="stylesheet"는 링크 유형(스타일 시트에 대한 링크)을 지정합니다.
type="text/css" 속성은 HTML5 표준에서 요구되지 않으므로 생략할 수 있습니다. 속성이 누락된 경우 기본값은 type="text/css" 입니다.
1.2. 내부 스타일
내부 스타일섹션에 포함됨
HTML 문서이며 태그 내부에 정의되어 있습니다.. 내부 스타일은 외부 스타일보다 우선하지만 인라인 스타일(style 속성을 통해 지정)보다 열등합니다....
1.3. 내장 스타일
우리가 글을 쓸 때 인라인 스타일, 다음을 사용하여 요소 태그 내부에 직접 CSS 코드를 HTML 파일에 작성합니다. 스타일 속성:
이 텍스트에 주목하세요.
이러한 스타일은 해당 스타일이 설정된 요소에만 영향을 미칩니다.
1.4. @import 규칙
@import 규칙외부 스타일 시트를 로드할 수 있습니다. @import 지시문이 작동하려면 스타일시트(외부 또는 내부)에서 다른 모든 규칙 앞에 나타나야 합니다.
@import 규칙은 웹 글꼴을 포함하는 데에도 사용됩니다.
@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);
2. 선택자의 종류
선택기웹페이지의 구조를 표현합니다. 웹 페이지 요소 형식 지정 규칙을 만드는 데 도움이 됩니다. 선택자는 요소, 해당 클래스 및 식별자뿐만 아니라 의사 클래스 및 의사 요소일 수 있습니다.
2.1. 범용 선택기
모든 HTML 요소와 일치합니다. 예를 들어 *(여백: 0;)은 모든 사이트 요소의 여백을 재설정합니다. 선택기는 의사 클래스 또는 의사 요소와 결합하여 사용할 수도 있습니다: *:after (CSS 스타일) , *:checked (CSS 스타일) .
2.2. 요소 선택기
요소 선택기를 사용하면 모든 요소의 형식을 지정할 수 있습니다. 이런 유형의사이트의 모든 페이지에서. 예를 들어, h1(글꼴군: Lobster, 필기체;)은 모든 h1 제목에 대한 전반적인 서식 스타일을 설정합니다.
2.3. 클래스 선택기
클래스 선택기를 사용하면 하나 이상의 요소에 대한 스타일을 지정할 수 있습니다. 같은 이름에 위치한 수업 다른 장소들페이지 또는 다른 페이지대지. 예를 들어, 헤드라인 클래스를 사용하여 제목을 만들려면 다음을 추가해야 합니다. 클래스 속성여는 태그에 값 제목이 있는 경우
스타일을 설정합니다. 지정된 클래스. 클래스를 사용하여 생성된 스타일은 반드시 해당 유형일 필요는 없지만 다른 요소에 적용될 수 있습니다.
사용 지침 개인용 컴퓨터
.headline ( 텍스트 변환: 대문자; 색상: 연한 파란색; )2.4. 아이디 선택기
ID 선택기를 사용하면 형식을 지정할 수 있습니다. 하나특정 요소. ID는 고유해야 하며 한 페이지에 한 번만 나타날 수 있습니다.
#sidebar(너비: 300px; 부동 소수점: 왼쪽; )
2.5. 하위 선택자
하위 선택기는 컨테이너 요소 내의 요소에 스타일을 적용합니다. 예를 들어, ul li(text-transform: uppercase;) - 모든 ul 요소의 하위인 모든 li 요소를 선택합니다.
하위 항목의 형식을 지정해야 하는 경우 특정 요소, 이 요소에는 스타일 클래스가 제공되어야 합니다.
p.first a (색상: 녹색;) - 이 스타일은 첫 번째 클래스가 있는 단락의 모든 링크 하위 항목에 적용됩니다.
p .first a (색상: 녹색;) - 공백을 추가하면 해당 요소의 하위 요소인 .first class 태그 내부에 있는 링크의 스타일이 지정됩니다.
첫 번째 a (색상: 녹색;) - 이 스타일은 class.first 로 지정된 다른 요소 내부에 있는 모든 링크에 적용됩니다.
2.6. 하위 선택기
하위 요소는 해당 요소를 포함하는 요소의 직접적인 하위 요소입니다. 하나의 요소가 여러 개를 가질 수 있음 하위 요소, 각 요소에는 상위 요소가 하나만 있을 수 있습니다. 하위 선택기를 사용하면 하위 요소가 상위 요소 바로 뒤에 오고 그 사이에 다른 요소가 없는 경우, 즉 하위 요소가 다른 요소 내에 중첩되지 않은 경우에만 스타일을 적용할 수 있습니다.
예를 들어, p > Strong은 p 요소의 하위 요소인 모든 Strong 요소를 선택합니다.
2.7. 자매 선택자
자매결연은 공통의 부모를 공유하는 요소들 사이에서 발생합니다. 형제 선택기를 사용하면 동일한 수준의 요소 그룹에서 요소를 선택할 수 있습니다.
h1 + p - 태그 바로 뒤에 있는 첫 번째 단락을 모두 선택합니다.
나머지 단락에 영향을 주지 않고;
h1 ~ p - h1 제목과 바로 뒤에 있는 모든 단락을 선택합니다.
2.8. 속성 선택자
속성 선택자는 속성 이름이나 속성 값을 기반으로 요소를 선택합니다.
[속성] - 지정된 속성을 포함하는 모든 요소 - alt 속성이 지정된 모든 요소
selector[속성] - 지정된 속성을 포함하는 이 유형의 요소, img - alt 속성이 지정된 이미지만;
selector[attribute="value"] - 지정된 속성을 포함하는 이 유형의 요소 구체적인 의미, img - 제목에 꽃이라는 단어가 포함된 모든 사진;
selector[attribute~="value"] - 부분적으로 다음을 포함하는 요소 주어진 값예를 들어 공백으로 구분된 요소에 대해 여러 클래스가 지정된 경우 p - 클래스 이름에 feature 가 포함된 단락;
selector[attribute|="value"] - 속성 값 목록이 지정된 단어로 시작하는 요소, p - 클래스 이름이 feature이거나으로 시작하는 단락 feature ;
selector[attribute^="value"] - 속성 값이 지정된 값으로 시작하는 요소, a - http:// 로 시작하는 모든 링크;
selector[attribute$="value"] - 속성 값이 지정된 값으로 끝나는 요소, img - png 형식의 모든 이미지;
selector[attribute*="value"] - 속성 값에 지정된 단어가 포함된 요소, a - 이름에 book 이 포함된 모든 링크.
2.9. 의사 클래스 선택자
의사 클래스는 실제로 HTML 태그에 첨부되지 않은 클래스입니다. 이벤트가 발생하거나 상황이 발생할 때 요소에 CSS 규칙을 적용할 수 있습니다. 특정 규칙. 의사 클래스는 다음 속성을 사용하여 요소의 특성을 지정합니다.
:hover - 마우스 커서가 올려져 있는 요소.
:집중하다 - 대화형 요소, 키보드를 사용하여 액세스하거나 마우스를 사용하여 활성화했습니다.
:active - 사용자가 활성화한 요소입니다.
:valid - 지정된 데이터 유형을 준수하는지 브라우저에서 내용이 확인된 양식 필드입니다.
:invalid — 내용이 지정된 데이터 유형과 일치하지 않는 양식 필드입니다.
:활성화 - 모두 활성 필드양식;
:disabled — 차단된 양식 필드, 즉 비활성 상태입니다.
:in-range - 값이 지정된 범위에 있는 양식 필드입니다.
:out-of-range - 값이 지정된 범위 내에 있지 않은 양식 필드입니다.
:lang() - 지정된 언어로 된 텍스트가 있는 요소입니다.
:not(selector) - 지정된 선택기를 포함하지 않는 요소 - 클래스, 식별자, 이름 또는 양식 필드 유형 - :not() ;
:target은 문서에서 참조되는 # 기호가 있는 요소입니다.
:checked — 선택된(사용자가 선택한) 양식 요소입니다.
2.10. 구조적 의사 클래스 선택자
구조적 의사 클래스는 괄호 안에 지정된 매개변수에 따라 하위 요소를 선택합니다.
:nth-child(odd) - 홀수 자식 요소;
:nth-child(even) - 심지어 자식 요소;
:nth-child(3n) - 자식 중 세 번째 요소마다;
:nth-child(3n+2) - 두 번째 자식(+2)부터 시작하여 세 번째 요소를 모두 선택합니다.
:nth-child(n+2) - 두 번째 요소부터 모든 요소를 선택합니다.
:nth-child(3) - 세 번째 하위 요소를 선택합니다.
:nth-last-child() - 하위 요소 목록에서 다음이 포함된 요소를 선택합니다. 지정된 위치, nth-child() 와 비슷하지만 마지막 것부터 시작하여 반대 방향입니다.
:first-child - 태그의 첫 번째 하위 요소에만 스타일을 지정할 수 있습니다.
:last-child - 태그의 마지막 하위 요소 형식을 지정할 수 있습니다.
:only-child - 유일한 자식 요소인 요소를 선택합니다.
:empty - 자식이 없는 요소를 선택합니다.
:root - 문서의 루트인 요소를 선택합니다. - HTML 요소.
2.11. 구조 유형 의사 클래스 선택기
특정 유형의 하위 태그를 나타냅니다.
:nth-of-type() - :nth-child() 와 유사한 요소를 선택하지만 요소의 유형만 고려합니다.
:first-of-type - 주어진 유형의 첫 번째 자식을 선택합니다.
:마지막 유형 - 선택 마지막 요소이런 종류의;
:nth-last-of-type() - 요소를 선택합니다. 주어진 유형지정된 위치에 따라 요소 목록에서 끝부터 시작합니다.
:only-of-type - 단일 요소를 선택합니다. 지정된 유형상위 요소의 하위 요소 중
2.12. 의사 요소 선택기
유사 요소는 콘텐츠 속성을 사용하여 생성된 콘텐츠를 추가하는 데 사용됩니다.
:first-letter - 각 단락의 첫 글자를 선택합니다. 블록 요소에만 적용됩니다.
:first-line - 요소 텍스트의 첫 번째 줄을 선택합니다. 블록 요소에만 적용됩니다.
:before - 요소 앞에 생성된 콘텐츠를 삽입합니다.
:after - 요소 뒤에 생성된 콘텐츠를 추가합니다.
3. 선택기 조합
서식을 지정할 요소를 보다 정확하게 선택하려면 선택기 조합을 사용할 수 있습니다.
img:nth-of-type(even) - 대체 텍스트에 다음이 포함된 모든 짝수 이미지를 선택합니다. 단어 CSS.
4. 그룹화 선택자
동일한 스타일을 여러 요소에 동시에 적용할 수 있습니다. 이렇게 하려면 선언 왼쪽에 필수 선택기를 쉼표로 구분하여 나열해야 합니다.
H1, h2, p, 스팬(색상: 토마토; 배경: 흰색; )
5. 상속과 캐스케이드
상속과 계단식 배열은 밀접하게 관련된 CSS의 두 가지 기본 개념입니다. 상속은 요소가 상위 요소(해당 요소를 포함하는 요소)로부터 속성을 상속하는 것입니다. 캐스케이드는 다음과 같이 나타납니다. 다른 유형스타일 시트가 문서에 적용되는 방법과 충돌하는 규칙이 서로 어떻게 재정의되는지를 알아보세요.
5.1. 계승
계승특정 속성이 조상에서 후손으로 전달되는 메커니즘입니다. CSS 사양색상, 글꼴, 문자 간격, 줄 높이, 목록 스타일, 텍스트 정렬, 텍스트 들여쓰기, 텍스트 변환, 가시성, 공백 및 등 페이지의 텍스트 내용과 관련된 속성의 상속이 제공됩니다. 단어 간격. 대부분의 경우 웹 페이지의 모든 요소에 대해 글꼴 크기와 글꼴 모음을 설정할 필요가 없기 때문에 편리합니다.
블록 형식과 관련된 속성은 상속되지 않습니다. 이들은 background , border , display , float 및clear , height 및 width , margin , min-max-height 및 -width , outlook ,overflow , padding , position , text-꾸밈 , 수직 정렬 및 z-index 입니다.
강제 상속
사용하여 예어상속은 요소가 상위 요소의 속성 값을 상속하도록 강제할 수 있습니다. 이는 기본적으로 상속되지 않는 속성에도 적용됩니다.
CSS 스타일이 설정되고 작동하는 방법
1) 스타일은 상위 요소에서 상속될 수 있습니다(상속된 속성 또는 상속 값 사용).
2) 아래 스타일 시트에 있는 스타일이 위 표에 있는 스타일보다 우선합니다.
3) 한 요소의 스타일을 적용할 수 있습니다. 다양한 소스. 브라우저 개발자 모드에서 어떤 스타일이 적용되었는지 확인할 수 있습니다. 이렇게 하려면 요소를 클릭하세요. 마우스 오른쪽 버튼으로 클릭마우스를 클릭하고 "코드 보기"(또는 이와 유사한 것)를 선택하십시오. 오른쪽 열에는 이 요소에 설정되거나 상위 요소에서 상속된 모든 속성이 지정된 스타일 파일 및 코드 순서 줄과 함께 나열됩니다.
쌀. 2. 개발자 모드 구글 브라우저크롬 4) 스타일을 정의할 때 요소 선택기, 요소 의사 클래스, 클래스 또는 요소 식별자 등 선택기의 모든 조합을 사용할 수 있습니다.
div(테두리: 1px 단색 #eee;) #wrap(너비: 500px;).box(부동: 왼쪽;).clear(지우기: 둘 다;)
5.2. 종속
계단식동일한 요소에 다른 CSS 규칙이 적용되는 상황에서 최종 결과를 제어하는 메커니즘입니다. 속성이 적용되는 순서를 결정하는 세 가지 기준, 즉 중요한 규칙, 특이성 및 스타일 시트가 포함되는 순서가 있습니다.
규칙!중요
규칙의 가중치는 속성 값 바로 뒤에 추가되는!important 키워드를 사용하여 지정할 수 있습니다(예: span (font-weight:bold!important;) ). 규칙은 공백 없이 닫는 괄호 앞 선언 끝 부분에 배치되어야 합니다. 이러한 발표는 다른 모든 규칙보다 우선합니다. 이 규칙을 사용하면 스타일 파일에 직접 액세스할 수 없는 경우 요소 그룹의 요소에 대해 속성 값을 취소하고 새 값을 설정할 수 있습니다.
특성
각 규칙에 대해 브라우저는 다음을 계산합니다. 선택기 특이성, 요소에 충돌하는 속성 선언이 있는 경우 가장 구체적인 규칙이 고려됩니다. 특이도 값은 0, 0, 0, 0의 네 부분으로 구성됩니다. 선택기 특이성은 다음과 같이 정의됩니다.
ID의 경우 0, 1, 0, 0이 추가됩니다.
클래스 0, 0, 1의 경우 0이 추가됩니다.
각 요소와 의사 요소에 대해 0, 0, 0, 1이 추가됩니다.
요소에 직접 추가된 인라인 스타일의 경우 - 1, 0, 0, 0 ;
범용 선택자에는 특이성이 없습니다.
H1 (색상: 연한 파란색;) /*특이성 0, 0, 0, 1*/ em (색상: 은색;) /*특이성 0, 0, 0, 1*/ h1 em (색상: 금색;) /*특이성: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (color: blue;) /*특이성: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .sidebar (색상: 회색;) /*특이성 0, 0, 1, 0 */ #sidebar (color: orange;) /*특이성 0, 1, 0, 0*/ li#sidebar (color: aqua;) /*특이성: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/
결과적으로 보다 구체적인 규칙이 요소에 적용됩니다. 예를 들어 요소에 0, 0, 0, 2 및 0, 1, 0, 1 값을 갖는 두 개의 특이성이 있는 경우 두 번째 규칙이 승리합니다.
연결된 테이블의 순서
여러 개의 외부 스타일 시트를 만들어 하나의 웹 페이지에 연결할 수 있습니다. 만약에 다른 테이블만날 것이다 다른 의미한 요소의 속성을 선택하면 결과적으로 아래 나열된 스타일 시트의 규칙이 해당 요소에 적용됩니다.
CSS(Cascading Style Sheets)는 웹 페이지의 스타일을 관리하기 위한 언어입니다.
CSS 적용특히 동일한 스타일의 페이지가 많은 경우 HTML 문서의 양을 크게 줄이는 동시에 새 문서 생성 및 추가 작업을 단순화합니다. 다양한 스타일에 대한 설명을 저장하여 별도의 파일, 스타일을 쉽게 조작할 수 있습니다.
CSS 설명
스타일 파일 - 일반 텍스트 파일, CSS 스타일 설명이 포함되어 있으며 웹 서버에 있습니다. 웹페이지에서 태그 내부의 스타일을 볼 수 있도록
예제에 표시된 대로 스타일 파일에 대한 참조가 작성됩니다.스타일.css 파일
Index.htm 파일
스타일 파일이 다른 서버에 있는 경우 전체 URL을 제공해야 합니다.
href="("http://...")" 태그 내부의 웹 페이지 코드에서 스타일을 설명할 수도 있습니다.
Index.htm 파일
이 경우 웹 페이지 내에 있는 요소에 이러한 스타일을 사용할 수 있습니다. 즉, 태그 안에 있는 모든 텍스트 요소는
, 이 페이지에서는 32픽셀의 문자 크기로 빨간색 기울임꼴로 표시됩니다.그리고 마지막 옵션- 스타일 설명은 이 스타일이 적용되는 요소의 태그 내부에 직접 위치합니다. 예:
이 스타일은 이 라벨에만 적용됩니다.
이 옵션은 페이지 코드의 크기가 증가하고 개별 스타일과 개별 페이지 데이터의 분리가 손실되므로 최선이 아닙니다.
이제 페이지의 모든 동일한 요소가 아닌 일부 요소에만 스타일을 할당해야 하는 경우를 고려해 보겠습니다. 이를 위해 매개변수를 사용합니다. CLASS = "클래스 이름"또는 모든 페이지 요소(단락, 표 등)에 할당할 수 있는 ID="요소 이름"입니다.
CLASS 매개변수는 모든 페이지 요소(동일하거나 다름)가 아닌 여러 페이지에 대해 동일한 스타일을 작성해야 할 때 사용됩니다.
예를 들어 스타일 설명에 다음을 지정하면 됩니다.
Bold_italic(글꼴 두께: 굵게, 글꼴 스타일: 기울임꼴)
일부 테이블 셀만 표시되는지 확인할 수 있습니다 굵은 이탤릭체. 이렇게 하려면 bi 클래스의 스타일을 할당하십시오.
주목! 클래스 이름은 대소문자를 구분합니다.
식별자를 사용하여 스타일을 할당하는 것은 페이지의 한 요소만 지정된 식별자와 일치하는 경우에 사용됩니다. 이 스타일을 할당해야 하는 요소가 여러 개 있는 경우 이는 이미 클래스입니다.
의사 클래스 및 의사 요소:
의사 클래스 및 의사 요소는 CSS에 고유한 특수 클래스 및 요소이며 CSS 지원 브라우저에서 자동으로 감지됩니다.
의사 클래스는 구별됩니다. 다른 유형요소 1개, 정의 시 생성 자신의 스타일그들 각각을 위해.
유사 요소는 다른 요소의 일부로, 해당 부분에 전체 요소와 다른 스타일을 부여합니다.
통사론:
선택기:의사 클래스(속성)
selector.class:의사 클래스(속성)
선택기:의사 요소(속성)
selector.class:의사 요소(속성)
의사 클래스 및 의사 요소 목록:
링크 의사 클래스는 요소의 의사 클래스입니다. , 링크를 나타냅니다.
활성(활성 링크)
방문함(이전에 방문한 URL)
hover(링크 위에 커서를 놓을 때 발생하는 의사 클래스는 NN에서 작동하지 않습니다).
첫 번째 줄의 의사 요소. 블록 수준 요소(p, h1 등)와 함께 사용할 수 있습니다. 이러한 요소의 첫 번째 줄 스타일을 변경합니다.
첫 글자의 의사 요소. 전체 줄에 영향을 주지 않고 첫 번째 문자에만 영향을 미칩니다.
CSS 언어에 대한 간략한 설명
글꼴 속성 Font-family 이 속성은 요소에 사용되는 글꼴을 지정합니다. URL을 지정하면 해당 글꼴이 사용자의 컴퓨터에 자동으로 설치됩니다.예:글꼴 계열:Arial Black URL("arialblack.ttf")글꼴 스타일(일반, 기울임꼴) 요소의 스타일입니다. 기울임꼴 또는 일반
예:글꼴 스타일:기울임체글꼴 변형(normal-normal, small-caps-모든 소문자를 대문자로 바꿉니다) 글꼴 표시 옵션입니다. Netscape는 이 속성을 지원하지 않습니다.
예:글꼴 변형:작은 대문자글꼴 두께(보통-보통, 굵게-굵게, 굵게-매우 굵게, 가벼움-얇게, 100-900 정밀도 설정)요소 강조 표시(가중치)
예:글꼴 두께:굵은 글꼴 크기(XX%, XXpt, XXpx)글꼴 크기
예: 글꼴 크기:30pt 글꼴(군, 스타일, 변형, 무게, 크기) 위의 모든 속성을 결합합니다.
예:글꼴: 기울임꼴 굵은 Arial 12pt텍스트 속성. 텍스트 장식(없음, 밑줄, 윗줄, 줄바꿈, 깜박임) 텍스트 스타일
예:텍스트 장식:라인 통과 letter-spacing (XX-숫자) 글자 사이의 거리
예:문자 간격:100수직 정렬(기준선, 하위, 슈퍼, 상단 텍스트, 상단, 중간, 하단, 하단 텍스트, 백분율) 동일한 행의 다른 요소와 관련된 요소 배열입니다.
예:세로 정렬:상단 텍스트 text-transform (대문자화 - 각 단어가 대문자로 시작되고, 대문자 - 텍스트의 각 문자가 대문자로 시작되고, 소문자 - 텍스트의 각 문자가 작아집니다.
예:텍스트 변환:대문자화 text-align(왼쪽, 오른쪽, 가운데, 양쪽 맞춤) 텍스트 정렬입니다.
예:text-align:right text-indent(길이 단위 또는 백분율)텍스트 들여쓰기.
예:텍스트 들여쓰기:30em line-height(길이 단위 또는 백분율) 위쪽 들여쓰기
예:줄 높이:100% 색상 속성. color (#RRGGBB)요소 색상
예:color:#f00000 backgroung-color (#RRGGBB)요소 배경색
예:배경색:#f00000배경 이미지(URL)배경 이미지
예:배경 이미지:URL("img.gif") background-repeat (repeat - 모든 방향으로 배경 이미지를 복제,peat-x - 배경 이미지를 가로로 복제,peat-y - 배경 이미지를 세로로 재생, no-repeat - 이미지를 반복하지 않음)배경 이미지를 반복
예:백그라운드 반복:반복 없음 background-attachment (문서와 함께 배경 이미지 스크롤, 배경 이미지 고정-고정) 배경 이미지의 스크롤 모드입니다.
예:배경 부착:고정배경 위치(너비 %+높이 %; 상단, 중간, 하단; 왼쪽, 중앙, 오른쪽; 왼쪽 가장자리로부터의 거리+상단 가장자리로부터의 거리) 배경 이미지의 위치
예: background-position:50%0% 배경(색상, 이미지, 위치, 첨부, 반복) 위의 모든 속성을 결합합니다.
예:배경:반복 없음 검정색 고정 50%0% 테두리 속성. margin-top(길이, 백분율, 자동) 위쪽 여백
예:margin-top:100 margin-right (길이, 백분율, 자동)오른쪽 여백
예:margin-right:100% margin-bottom (길이, 백분율, 자동) 아래쪽 여백
예:margin-bottom:100em 여백-왼쪽(길이, 백분율, 자동)왼쪽 여백
예:margin-left:100pt 여백(상단, 오른쪽, 왼쪽, 하단) 위의 모든 속성을 결합합니다.
예:배경:100pt padding-top (길이, 백분율)상단 테두리에서 들여쓰기"a
예: padding-top:100pt padding-right (길이, 백분율)오른쪽 테두리부터 들여쓰기"a
예: padding-right:100% padding-bottom (길이, 백분율) 아래쪽 테두리에서 들여쓰기"
예: padding-bottom:100em padding-left (길이, 백분율)왼쪽 테두리에서 들여쓰기"a
예:padding-top:100 padding (왼쪽, 오른쪽, 위쪽, 아래쪽) 위의 모든 속성을 결합합니다. 서로 다른 면에 대해 동시에 여러 값(최대 4개)을 설정할 수 있습니다. 값을 1개 설정하면 모든 면에 단일 들여쓰기가 설정되고, 2개이면 인접한 변에 서로 다른 들여쓰기가 설정되고, 4개이면 모든 면에 개별 들여쓰기가 설정됩니다.
예:패딩:100px 테두리-상단-상단 테두리의 너비(길이, 얇음, 중간, 두꺼운) 두께"
예:border-top-width:100pt border-right-width (길이, 얇음, 중간, 두께)오른쪽 테두리 두께"a
예:border-right-width:thick border-bottom-width (길이, 얇음, 중간, 두께)하단 테두리 두께"a
예:border-bottom-width:100em border-left-width (길이, 얇음, 중간, 두께)왼쪽 테두리 두께"a
예:border-left-width:medium border-width (상단 너비, 오른쪽 너비, 왼쪽 너비, 아래쪽 너비) 위의 모든 속성을 결합합니다. 서로 다른 테두리에 여러 값(최대 4개)을 동시에 설정할 수 있습니다. 하나의 값을 설정하면 모든 면에 단일 두께가 설정되고, 두 개이면 인접한 면에 서로 다른 두께가 설정되고, 4개이면 개별적으로 설정됩니다. 모든 면에 두께가 설정되어 있습니다.
예:border-width: 15pt border-color (color)테두리 색상입니다.
예:border-color:green border-style 테두리 스타일 다양한 테두리에 대해 동시에 여러 값(최대 4개)을 설정할 수 있습니다. 하나의 값을 설정하면 모든 면에 단일 스타일이 설정되고, 두 개이면 인접한 면에 서로 다른 스타일이 설정되고, 4개이면 모든 면에 개별 스타일이 설정됩니다.
예:border-style: 점선 홈 border-top (너비, 스타일, 색상) 상단 테두리에 대해 위의 모든 속성을 결합합니다.
예: border-top: 100em 빨간색 홈 border-right (너비, 스타일, 색상) 오른쪽 테두리에 대해 위의 모든 속성을 결합합니다.
예:border-right: 5pt 자홍색 실선 border-left(너비, 스타일, 색상) 왼쪽 테두리에 대해 위의 모든 속성을 결합합니다.
예:border-left: 15pc 산호 삽입 border-bottom (너비, 스타일, 색상) 왼쪽 테두리에 대해 위의 모든 속성을 결합합니다.
예:border-bottom: 30 주황색 바깥쪽 테두리(너비, 스타일, 색상) 위의 모든 속성을 결합합니다.
예:테두리: 검은색 이중 너비(길이, 백분율)요소 너비
예:너비:10% 높이(길이, 백분율)요소 높이
예: 높이:100pt float(왼쪽, 오른쪽)요소 위치
예:float:right clean (왼쪽, 오른쪽, 둘 다)이 주위에 다른 요소 배치
예:지우기:둘 다 분류. 표시(none-표시하지 않음, 요소 앞과 뒤의 줄을 블록 나누기, inline-줄을 끊지 않음, list-item-요소 앞과 뒤의 줄을 끊기 + 목록 항목과 같은 마커 추가) 목록이 어떻게 표시되는지 결정합니다. 항목이 표시됩니다
예: display:none white-space (normal - 여러 연속 공백을 하나로 "압축", pre - 여러 연속 공백 표시 허용, nowrap - 태그 없이 줄 바꿈을 허용하지 않음)
) 요소 사이의 공백이 표시되는 방법을 결정합니다.
예: 공백:nowrap 목록 스타일 유형(디스크, 원, 정사각형, 소수, 로로만, 상위 로마, 하위 알파 또는 상위 알파)은 목록 항목 마커의 모양을 지정합니다.
예: list-style-type:lower-alpha list-style-image(URL)는 목록 항목 마커의 모양을 이미지로 설정합니다.
예:list-style-image:URL(cool.gif) list-style-position (내부, 외부) 목록 항목에 따라 마커 위치를 정의합니다.
예:목록 스타일 위치:내부 목록 스타일(유형, 위치, 이미지) 위의 모든 속성을 결합합니다.
예:목록 스타일:내부
부가기능
길이 측정(구문: "+"/"-"XX 단위)예: -566pt em - 사용된 글꼴 요소의 ems 높이 ex - 글꼴 요소에 사용된 문자 "x"의 x 높이 너비 px 픽셀(인치) cm 센티미터 mm 밀리미터 pt 포인트(1pt = 1/72in) pc picas ( 1pc = 12pt) 백분율 측정
예: -566% -/+%XX 백분율 감소/증가. 색상 색상 이름 예: magenta #rrggbb RGB 색상. 여기서 rr,gg,bb는 16진수입니다.
예: #00cc00 rgb(x,x,x) RGB 색상. 여기서 "x"는 0부터 255까지의 십진수입니다.
예: rgb(0,204,0) #rgb RGB 색상. 여기서 r,g,b는 16진수입니다.
예: #0c0 rgb (x%,x%,x%) RGB 색상. 여기서 "x%"는 0.0에서 100.0 사이의 숫자입니다.
예: RGB(0%,80%,0%)
몇 가지 스타일 관리 요령
절대 글꼴 크기를 지정하면 페이지를 보는 사람들이 디스플레이 해상도와 비전에 따라 브라우저의 특수 버튼을 사용하여 글꼴 크기를 늘리거나 줄일 수 있는 기능을 박탈하게 됩니다. 글꼴은 페이지 작성 시 지정한 크기로만 표시됩니다.
따라서 이러한 목적으로 백분율 크기를 사용하는 것이 좋습니다. 이 경우 글꼴 크기는 표준 HTML 태그를 사용하여 형식을 지정할 때보다 지정한 비율만큼 작아집니다(커집니다).
이는 태그를 이해하지 못하는 오래된 브라우저가
이 트릭을 사용하면 한 텍스트 레이어를 다른 텍스트 레이어 위에 오버레이하여 매우 흥미롭고 특이한 결과를 얻을 수 있습니다.
다음 코드는 그래픽을 사용하지 않고 3D로 나타나는 헤더를 만듭니다.
스타일 설명에 지정
P( 텍스트 들여쓰기: 1cm; )이제 각각의 새 단락의 첫 번째 줄은 "빨간색" 줄부터 나타납니다.
안녕하세요, Anatomy of Business 프로젝트 독자 여러분. 웹마스터 알렉산더가 당신과 함께합니다! 지난 기사에서 우리는 CSS 스타일이 무엇인지, WEB 프로그래밍에서 얼마나 중요한지 살펴보았습니다.
CSS 스타일이 HTML 파일 표시에 중요한 영향을 미치는 경우 어떻게든 연결해야 한다는 것은 매우 분명합니다. 오늘은 CSS 스타일을 HTML에 연결하는 네 가지 주요 방법을 살펴보겠습니다.
미루지 말고 시작해보자!
별도의 CSS 파일을 포함합니다!
스타일을 연결하는 가장 편리하고 간단한 방법 중 하나는 별도의 파일을 스타일과 연결하는 것입니다. 이렇게 하려면 텍스트 편집기 notepad++(또는 기타)를 사용하여 확장자가 .css인 파일을 만들고 이를 배치하려는 파일과 동일한 폴더에 배치합니다.
그런 다음 태그 사이의 HTML 파일에서
다음 코드를 게시하십시오.
이제 이것이 무엇을 의미하는지 살펴보겠습니다.
링크 #은 영어로 번역되면 "링크"를 의미합니다. 이런 식으로 우리는 다음에 이야기할 것이 링크라는 것을 브라우저에 보여줍니다. rel= # 이 속성을 사용하면 CSS 파일이 HTML 파일과 어떻게 관련되는지 보여줍니다. "stylesheet" # 즉, CSS 파일은 계단식 스타일 시트입니다. type="text/css" # 여기에서는 모든 것이 간단합니다. 이는 파일이 텍스트 형식으로 작성되었으며 확장자가 .css href="style.css"임을 나타냅니다. # 이것은 CSS 스타일이 있는 파일에 대한 링크입니다.
내 생각에는 이것이 CSS 스타일을 포함하는 가장 선호되는 방법입니다.
HTML 파일에 직접 스타일을 작성합니다(첫 번째 방법)
CSS 스타일을 지정하는 다음 방법은 HTML 문서에 직접 작성하는 것입니다. 다음과 같습니다.
이 HTML 문서가 브라우저에 어떻게 표시되는지 살펴보면 태그 사이의 텍스트가 표시됩니다. 빨간색으로 변했습니다. 그리고 스타일 속성을 사용하여 다음으로 표시 스타일 매개변수가 있다고 말합니다. 색상색상을 담당하는 선택자입니다. 빨간색이 선택기의 값입니다. 이러한 방식으로 특정 유형의 표시로 텍스트의 특정 부분을 강조 표시할 수 있습니다.
HTML 내에 계단식 스타일 시트 배치(두 번째 방법)
CSS 스타일을 포함하는 또 다른 방법은 HTML 파일 자체 내에 계단식 테이블을 배치하는 것입니다. 제 생각에는 이 방법을 사용하면 사이트 코드를 분석하는 것이 그리 편리하지 않기 때문에 가장 편리하지 않습니다. CSS 스타일 작성을 시작하려면 HTML 파일에 태그를 삽입하기만 하면 됩니다. . 실제로는 다음과 같습니다.
예는 다음과 같습니다. HTML 문서에 CSS 스타일 표시
태그 내부에는 중괄호를 사용하여 CSS 규칙에 따라 코드도 작성합니다. 다음 기사에서는 CSS의 구문 규칙에 대해 더 자세히 설명하겠습니다.
여러 CSS 파일을 하나의 HTML 문서에 연결합니다.
HTML 규칙을 사용하면 여러 CSS 파일을 한 번에 포함할 수 있습니다. 많은 웹마스터가 이를 사용합니다. 즉, 텍스트와 이미지에 대해 별도의 CSS 파일을 만듭니다. 또는 페이지의 머리글, 바닥글, 본문을 별도의 파일로 만들 수도 있습니다. 이를 구현하는 방법을 알아 보겠습니다.
우리는 여러 CSS 스타일 파일을 생성하고 있습니다. 이름을 style-1.css 및 style-2.css로 지정합니다. 첫 번째 방법과 마찬가지로 HTML 파일과 동일한 폴더에 배치합니다.
예는 다음과 같습니다. HTML 문서에 CSS 스타일 표시
모든 것이 첫 번째 방법과 유사합니다. 이 경우에만 한 번에 두 파일에 대한 링크를 나타냅니다.
내부의 CSS 파일을 동일한 유형의 파일에 연결합니다.
위의 모든 방법 외에도 하나의 CSS 파일 안에 여러 링크를 배치할 수 있는 방법이 있습니다!
이는 다음과 같이 구현됩니다.
먼저 동일한 방식으로 하나 이상의 CSS 파일을 코드에 연결해야 합니다.
둘째, 이미 연결된 파일에 다음 코드를 입력합니다.
@import url("style-2.css");
이 줄에는 파일에 대한 추가 CSS 파일이 포함되어 있습니다. CSS 연결에 어려움이 있다면 댓글로 물어보세요.
이전 두 강의에서 배웠듯이 CSS 기술은 모든 웹마스터가 마스터해야 하는 강력한 도구입니다! 자료의 동화를 향상시키기 위해 각 수업이 끝날 때 교육 비디오 + 테스트를 추가하여 받은 정보를 통합하기로 결정했습니다.
재료 고정 테스트:
HTML 파일에 링크를 배치하여 CSS 파일을 포함해야 합니다. 다음 중 올바른 방법은 무엇입니까?
옵션 1:
옵션 2:
옵션 3:
옵션 4:
CSS 캐스케이드를 HTML 파일에 직접 배치할 수 있나요?
스타일 시트는 기능에 따라 세 가지 방법으로 웹 페이지에 추가될 수 있습니다.
관련 스타일시트
사이트의 스타일과 규칙을 정의하는 가장 강력하고 편리한 방법입니다. 스타일은 모든 웹페이지에 사용할 수 있는 별도의 파일에 저장됩니다. 관련 스타일의 표를 연결하려면 태그를 사용하십시오. 페이지 제목(예 1)
예 1: 연결된 스타일 시트 연결
안녕, 세계!
스타일 파일의 경로는 이 예에 표시된 것처럼 상대 경로이거나 절대 경로일 수 있습니다.
이 방법의 장점
- 하나의 스타일 파일은 여러 웹페이지에 사용되며 다른 사이트에서도 사용할 수 있습니다.
- 웹페이지를 수정하지 않고도 스타일 시트를 변경할 수 있습니다.
- 단일 파일의 스타일을 변경하면 해당 스타일에 대한 링크가 있는 모든 페이지에 스타일이 자동으로 적용됩니다. 의심할 여지없이 편리합니다. 우리는 한 곳에서만 글꼴 크기를 지정하고 우리 사이트의 수백 개 이상의 웹 페이지에서 글꼴 크기를 변경합니다.
- 스타일 파일이 처음 로드되면 웹 페이지와 별도로 로컬 컴퓨터에 캐시되므로 사이트가 더 빠르게 로드됩니다.
전역 스타일 시트
스타일은 문서 자체에 정의되며 일반적으로 웹페이지의 헤드에 위치합니다. 유연성과 기능 측면에서 이 스타일 사용 방법은 이전 방법보다 열등하지만 모든 스타일을 한 곳에 배치할 수 있습니다. 이 경우 문서 본문에 있습니다. 스타일 정의는 태그로 지정됩니다.
안녕, 세계!
이 예에서는 헤더 스타일을 변경하는 방법을 보여줍니다.
. 웹페이지에서는 이제 이 태그를 지정하기만 하면 스타일이 자동으로 추가됩니다.
내부 스타일
인라인 스타일은 기본적으로 웹페이지에 사용되는 단일 태그의 확장입니다. style 속성은 스타일을 정의하는 데 사용되며 해당 값은 스타일 시트 언어를 사용하여 지정됩니다(예 3).
예 3: 내부 스타일 사용
안녕, 세계!
여러 요소를 변경하면 문제가 발생하므로 단일 태그에는 내부 스타일을 사용하거나 전혀 사용하지 않는 것이 좋습니다. 내용과 디자인이 분리된 경우 내부 스타일은 구조 문서의 이데올로기와 일치하지 않습니다.
CSS를 사용하는 설명된 모든 방법은 독립적으로 또는 서로 조합하여 사용할 수 있습니다. 이 경우 해당 계층 구조를 기억할 필요가 있습니다. 내부 스타일이 항상 먼저 적용된 다음 전역 스타일 시트가 적용되고 마지막으로 관련 스타일 시트가 적용됩니다. 예제 4에서는 문서에 스타일 시트를 추가하기 위해 두 가지 방법을 사용합니다.
예 4. 다양한 스타일의 연결 방법 조합
안녕, 세계!
안녕, 세계!
위의 예에서 첫 번째 제목은 36px 빨간색으로 설정되고 다음 제목은 녹색과 다른 글꼴로 설정됩니다.
CSS는 "Cascading Style Sheets"의 약자로 "Cascading Style Sheets"를 의미합니다. 웹 페이지를 디자인하는 데 사용됩니다. HTML 코드에 콘텐츠(브라우저에 표시되는 내용)가 포함되어 있으면 CSS가 해당 디자인(브라우저에 표시되는 방법)을 결정합니다. CSS의 장점은 하나의 스타일을 사용하여 페이지 또는 전체 사이트의 모든 동일한 유형의 요소(모든 링크, 단락, 목록을 한 번에)를 디자인할 수 있다는 것입니다. CSS 스타일을 사용하면 그림과 같은 특정 요소의 모양을 한 번 정의하면 모든 문서의 디자인이 한 번에 변경됩니다. 사이트 전체에서 텍스트 형식을 변경하려면 CSS 코드를 한 번만 변경하면 됩니다.
기본 CSS 요소
HTML이 태그, 속성, 값으로 구성되는 것처럼 CSS는 자체 요소로 구성됩니다. CSS 구성의 본질은 다음과 같이 설명할 수 있습니다. "스타일을 지정할 페이지 요소를 지정하고 스타일을 지정하는 방법을 지정합니다." 다음은 CSS의 구성 요소입니다.
- 선택자. 디자인을 적용할 페이지 요소를 브라우저에 알려주는 식별자입니다. 덕분에 브라우저는 해당 스타일이 예를 들어 목록이나 테이블을 디자인하기 위한 것임을 "이해"합니다.
- 스타일 선언 블록. 선택자 뒤에 작성되며 중괄호로 묶입니다. 요소의 스타일(디자인)을 지정합니다. 스타일 선언 블록은 두 부분으로 구성됩니다.
- 재산. HTML의 속성과 유사합니다. 변경될 모양 속성을 결정합니다.
- 의미. 콜론을 통해 속성에 지정되며 속성이 변경되는 방식을 정확하게 결정합니다.
스타일 선언 블록에는 여러 속성과 값이 있을 수 있으며, 이 경우 세미콜론으로 구분하여 나열됩니다.
선택기 유형
정의하는 페이지 요소의 속성에 따라 선택기 유형이 달라집니다.
- 만능인. 다른 규칙이 설정되지 않은 모든 페이지 요소에 대한 규칙을 설정합니다.
코드 * (글꼴 크기: 14px;)다른 선택기를 사용하여 다른 규칙이 지정되지 않은 모든 문서 요소에 대해 글꼴 크기를 14픽셀로 설정합니다. - 테가. 이 유형의 선택기는 특정 HTML 태그의 콘텐츠에 대한 형식 지정 규칙을 지정합니다. 선택기 이름은 설명자 이름과 동일하며 꺾쇠 괄호 없이만 작성됩니다. 피, h1, 울.
예를 들어, 코드 h2 (색상: 빨간색;)모든 두 번째 수준 제목, 즉 태그 내용의 텍스트 색상을 녹색으로 설정합니다. . - 기인하다. 이 선택기 그룹을 사용하면 특정 속성이 지정된 모든 태그의 콘텐츠 스타일을 결정할 수 있습니다. 선택기는 속성의 이름뿐만 아니라 속성에 할당된 값, 속성을 포함하는 태그의 이름도 지정하여 보다 정확하게 지정할 수 있습니다. 이를 사용하여 디자인을 더욱 개성있게 만들 수 있습니다.
- 수업. 동일한 유형의 태그 내용을 다르게 포맷해야 할 때 사용하는 선택기 유형입니다. 예를 들어, 사이트 하단의 링크를 빨간색으로 만들고 나머지 링크는 모두 파란색으로 유지하려고 합니다. 사이트 요소에 클래스 규칙을 적용하려면 속성에 클래스 이름을 지정해야 합니다. 수업해당 태그.
클래스를 사용한다고 가정 해 봅시다 단계개별 요소에는 15픽셀의 왼쪽 여백이 제공되어야 합니다.
CSS 코드는 다음과 같습니다:
단계(왼쪽 여백: 15px;)
요소를 규칙에 바인딩하는 HTML 코드는 다음과 같습니다.
들여쓰기된 텍스트
- ID. 속성과 함께 사용됨 ID HTML 태그이며 단일 요소에 대한 속성을 설정해야 할 때 사용됩니다. 이름 앞에 점이 오는 클래스 선택기와 달리 해시를 사용하여 작성됩니다.
#독점(색상:주황색;)
- 상황에 맞는. HTML에서는 특정 태그가 다른 태그 내부에서 발견되는 경우가 많으며 상황별 선택기는 이러한 경우에 대한 규칙을 정의하는 데 도움이 됩니다. 예를 들어, 번호가 매겨진 목록 안의 항목이나 단락 안의 기울임꼴 텍스트에 서식을 지정하는 데 사용할 수 있습니다.
Pi (fint-family: 세기;)
나머지 선택기 그룹은 나열된 유형의 조합과 하위 요소가 상위 요소의 속성을 가져오는 상속 원칙을 기반으로 합니다.
선택자를 결합하고 그룹화하는 것은 많은 상황에서 편리합니다. 예를 들어 수업 규칙을 설정하려면 단계링크의 경우에만 두 선택기를 점으로 구분하여 지정해야 합니다(먼저 태그, 그 다음 클래스).
A.step(왼쪽 여백: 15px;)
HTML 페이지에 CSS를 포함하는 방법은 무엇입니까?
웹 사이트 제작 도구가 서로 상호 작용하도록 만드는 방법에는 여러 가지가 있습니다. 추가하는 방법에 따라 스타일은 다음과 같은 범주로 구분됩니다.
내장 스타일
속성을 사용하여 HTML 태그 내부에 직접 문서에 설정 스타일. 가장 높은 우선순위를 갖습니다. 즉, 동일한 요소에 대해 다른 디자인이 지정된 경우 태그 내부에 작성된 규칙이 우선 적용됩니다. 스타일과 태그 사이의 연결이 분명하므로 내장 스타일 선택기가 필요하지 않습니다. 즉, 태그 디자인이 여기에 지정되어 있습니다.
다음 코드는 태그 내부 텍스트의 글꼴 크기와 색상을 설정합니다.
내부 스타일을 사용하여 서식이 지정된 텍스트입니다.
글로벌 스타일
태그로 설정 …