추가 스타일 (CSS). 처음 파트 II에서 웹 사이트를 구축.
우리는 무엇을 할 것 인
우리는 것이 장의 내용 :
- 사이트에 대한 CSS 스타일 시트 만들기
- 우리의 페이지에서 스타일 시트에 대한 링크를 추가
CSS 스타일 시트 만들기
demoweb 폴더에서 site.css라는 새 파일을 만듭니다.
CSS 파일 내부에 다음 코드를 입력 :
site.css
body {
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: 16px;
background-color: dimgrey;
color: #696969;
padding: 3px;
}
#main {
padding: 5px;
padding-left: 15px;
padding-right: 15px;
background-color: #ffffff;
border-radius:
0 0 5px 5px;
}
h1 {
font-family: Georgia, serif;
border-bottom: 3px
solid #cc9900;
color: #996600;
font-size: 30px;
}CSS 파일 위에서 사용될 수있는 스타일 정의
- HTML 본문 요소 <몸>
- id를 가진 HTML 요소 = "주"
- 은 HTML 제목 요소 <H1>
홈 페이지를 편집
demoweb 폴더에서 파일 index.html을 편집 할 수 있습니다.
다음에 파일의 콘텐츠를 변경 :
index.html을
<!DOCTYPE html>
<html>
<head>
<title>Our Company</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<div id="main">
<h1>Welcome to Our Company</h1>
<h2>Web Site Main Ingredients</h2>
<p>Pages (HTML)</p>
<p>Style Sheets (CSS)</p>
<p>Computer Code (JavaScript)</p>
<p>Live Data (Files and
Databases)</p>
</div>
</body>
</html>
»그것을 자신을 시도상기 한 홈 페이지는 앞 장에서 홈 페이지의 사본이다.
우리는 스타일 시트에 대한 링크를 추가하고, 요소은 <= "주"사업부 ID는> 내용에 "절"를 정의 할 수 있습니다.
변경 사항은 빨간색으로 표시됩니다.
[정보 페이지를 편집
작업을 완료하려면 about.html 기본에서 동일하게 변경을한다.
1. 스타일 시트에 대한 링크를 추가합니다.
2. <사업부 아이디 = "주"> 요소를 추가합니다.
about.html 기본
<!DOCTYPE html>
<html>
<head>
<title>About</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<div id="main">
<h1>About Us</h1>
<p>Lorem Ipsum Porem Lorem Ipsum Porem</p>
</div>
</body>
</html>
»그것을 자신을 시도자세히보기
우리의 CSS에 대한 자세한 읽기 CSS 자습서 .