CSS = 스타일 및 색상
CSS와 HTML을 스타일링
CSS는 캐스 케이 딩 스타일 시트의 약자
스타일링은 3 가지 방법으로 HTML 요소에 추가 할 수 있습니다 :
- 인라인 - HTML 요소의 스타일 속성을 사용하여
- 내부 - 사용하여 <style> HTML의 요소 <head> 섹션을
- 외부 - 하나 개 이상의 외부 CSS 파일을 사용하여
스타일을 추가하는 가장 일반적인 방법은, 별도의 CSS 파일에 스타일을 유지하는 것입니다. 당신이 그것을 자신을 시도하기가 보여 쉽게, 쉽게이기 때문에 그러나,이 튜토리얼에서, 우리는 내부 스타일을 사용합니다.
당신은 우리의 CSS에 대해 더 많은 것을 배울 수있는 CSS 자습서 .
인라인 스타일링 (Inline CSS)
인라인 스타일은 하나의 HTML 요소에 고유 한 스타일을 적용하는 데 사용됩니다 :
인라인 스타일은 사용 style 속성을.
이 예는 텍스트 색상 변경 <h1> 청색 소자 :
내부 스타일링 (Internal CSS)
내부 스타일은 하나의 HTML 페이지의 스타일을 정의하는 데 사용됩니다.
내부 스타일이 정의되어 <head> HTML 페이지의 섹션을하는 내 <style> 요소 :
예
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey;}
h1 {color:blue;}
p {color:green;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> »그것을 자신을 시도 외부 스타일링 (External CSS)
외부 스타일 시트는 여러 페이지의 스타일을 정의하는 데 사용됩니다.
외부 스타일 시트로, 당신은 하나 개의 파일을 변경하여 전체 웹 사이트의 모양을 변경할 수 있습니다!
외부 스타일 시트를 사용하려면에 대한 링크를 추가 <head> HTML 페이지의 섹션 :
예
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> »그것을 자신을 시도 외부 스타일 시트는 텍스트 편집기로 작성 할 수 있습니다. 이 파일은 HTML 태그를 포함 할 수 없습니다. 스타일 시트 파일이 함께 저장해야합니다 .css 확장.
여기에 "어떻게 styles.css "외모 :
body {
background-color: lightgrey;
}
h1 {
color: blue;
}
p {
color:green;
}CSS 글꼴
CSS의의 color 속성은 HTML 요소에 사용되는 텍스트 색상을 정의합니다.
하는 CSS font-family 속성은 HTML 요소에 사용되는 글꼴을 정의합니다.
CSS의의 font-size 속성은 HTML 요소에 사용되는 텍스트 크기를 정의합니다.
예
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> »그것을 자신을 시도 CSS의 박스 모델
당신이 그것을 볼 수없는 경우에도 모든 HTML 요소는 주위에 상자가 있습니다.
CSS의의 border 속성은 HTML 요소 주위에 보이는 경계를 정의한다 :
하는 CSS padding 속성은 패딩 정의 (space) 의 경계 내부를 :
CSS의의 margin 속성은 마진 정의 (space) 의 경계 외부 :
사용 위에 CSS 예 px 픽셀 크기를 정의한다.
id 특성
CSS를 사용 위의 모든 예제는 일반적인 방법으로 HTML 요소의 스타일을합니다.
하나 개의 특별한 요소에 대한 특별한 스타일을 정의하려면 먼저 요소에 id 속성을 추가합니다 :
<p id="p01">I am different</p>다음의 특정와 요소의 스타일 정의 id :
class 특성
특별한 유형의 스타일 정의하려면 ( class ) 요소를하는 추가 class 요소에 속성을 :
<p class="error">I am different</p>이제 특정 클래스 요소에 대한 다른 스타일을 정의 할 수 있습니다 :
사용 id 해결하기 위해 single 요소. 사용 class 해결하기 위해 groups 요소입니다.
장 요약
- 은 HTML 사용하여 style 인라인 스타일에 대한 속성을
- HTML 사용 <style> 요소는 내부 CSS를 정의
- HTML을 사용하여 <link> 요소는 외부 CSS 파일을 참조하는
- HTML을 사용하여 <head> 요소가 저장하는 <style> 과 <link> 요소
- CSS를 사용 color 텍스트 색상 속성을
- CSS를 사용 font-family 텍스트 글꼴 속성을
- CSS를 사용 font-size 텍스트 크기 속성을
- CSS를 사용 border 볼 요소 테두리에 대한 속성을
- CSS를 사용 padding 경계 내부 공간의 속성을
- CSS를 사용 margin 경계 외부 공간의 속성을
연습으로 자신을 테스트!
연습 1» 연습 2» 연습 3» 운동 4» 운동 5» 운동 6»
HTML 스타일 태그
| 꼬리표 | 기술 |
|---|---|
| <style> | HTML 문서에 대한 스타일 정보를 정의 |
| <link> | 문서 및 외부 리소스 사이에 링크를 정의 |