01 of 10
CSS 스타일 시트 만들기
HTML 용으로 별도의 텍스트 파일을 만든 것과 같은 방법으로 CSS 용 텍스트 파일을 만듭니다. 이 프로세스에 대한 비주얼이 필요한 경우 첫 번째 자습서를 참조하십시오. 다음은 메모장에서 CSS 스타일 시트를 만드는 단계입니다.
- 빈 창을 만들려면 파일> 메모장에서 새로 만들기를 선택하십시오.
- 파일 <다른 이름으로 저장 ...을 클릭하여 파일을 CSS로 저장하십시오.
- 하드 드라이브의 my_website 폴더로 이동하십시오.
- "파일 형식 :"을 "모든 파일"로 변경하십시오.
- 파일 이름을 "styles.css"로 지정하고 (따옴표는 사용 안 함) 저장을 클릭하십시오.
02 중 10
CSS 스타일 시트를 HTML에 연결하십시오.
웹 사이트 용 스타일 시트가 있으면 웹 페이지 자체에 스타일 시트를 연결해야합니다. 이렇게하려면 link 태그를 사용하십시오. pets.htm 문서의
태그 내에 다음 링크 태그를 삽입하십시오.03 / 10
페이지 여백 수정
서로 다른 브라우저에서 XHTML을 작성할 때, 배울 점 하나는 모든 것들이 어떻게 표시되는지에 대해 서로 다른 여백과 규칙을 갖는 것처럼 보일 것입니다. 대부분의 브라우저에서 사이트가 동일하게 보이게하는 가장 좋은 방법은 여백과 같은 것을 브라우저 선택 항목으로 기본 설정하지 않는 것입니다.
왼쪽 상단 구석에서 텍스트를 둘러싼 여백이나 여백없이 페이지를 시작하는 것이 좋습니다. 내용을 채울지라도 여백을 0으로 설정하여 동일한 빈 슬레이트로 시작합니다. 이렇게하려면 styles.css 문서에 다음을 추가하십시오.
html, body {
여백 : 0px;
패딩 : 0px;
border : 0px;
왼쪽 : 0px;
상단 : 0 픽셀;
}
04 중 10
페이지의 글꼴 변경
글꼴은 종종 웹 페이지에서 변경하려는 첫 번째 것입니다. 웹 페이지의 기본 글꼴은 추악 할 수 있으며 실제로 웹 브라우저 자체가 작동하므로 글꼴을 정의하지 않으면 실제로 페이지가 어떤 모양인지 알 수 없습니다.
일반적으로 단락의 글꼴을 변경하거나 경우에 따라 전체 문서 자체에서 글꼴을 변경합니다. 이 사이트에서는 헤더와 단락 수준에서 글꼴을 정의합니다. styles.css 문서에 다음을 추가하십시오.
p, li {
글꼴 : 1em Arial, Helvetica, sans-serif;
}
h1 {
글꼴 : 2em Arial, Helvetica, sans-serif;
}
h2 {
글꼴 : 1.5em Arial, Helvetica, sans-serif;
}
h3 {
글꼴 : 1.25em Arial, Helvetica, sans-serif;
}
단락과 목록 항목의 기본 크기로 1em을 시작한 다음이를 사용하여 헤드 라인의 크기를 설정했습니다. 나는 h4보다 더 깊이있는 헤드 라인을 사용하지 않을 것이라고 기대하지만 계획을 세울 경우 스타일을 지정하기를 원할 것입니다.
05 중 10
귀하의 링크를 더 흥미롭게 만들기
링크의 기본 색상은 방문하지 않은 링크와 방문한 링크 각각에 대해 파란색과 자주색입니다. 이것이 표준이지만, 페이지의 색 구성표에 맞지 않을 수 있으므로 변경하십시오. styles.css 파일에 다음을 추가하십시오.
링크 {
font-family : Arial, Helvetica, sans-serif;
color : # FF9900;
텍스트 장식 : 밑줄;
}
a : 방문한 {
색상 : # FFCC66;
}
a : hover {
배경 : #FFFFCC;
font-weight : bold;
}
저는 링크 스타일을 세 가지로 설정합니다 : a : link는 기본값으로, a : 방문했을 때 방문한 것, 색상을 변경하고 a : hover입니다. 마우스를 가져 가면 링크에 배경색이 표시되고 클릭 할 링크임을 강조하기 위해 굵게 표시됩니다.
06 중 10
탐색 섹션 스타일 지정하기
먼저 네비게이션 (id = "nav") 섹션을 HTML에 넣으므로 먼저 스타일을 지정합시다. 우리는 그것이 얼마나 넓은지를 지적하고 오른쪽에 더 큰 여백을 두어 주 본문이 그것에 대해 부딪치지 않도록해야합니다. 나는 또한 경계선을 그 주변에 두었다.
styles.css 문서에 다음 CSS를 추가하십시오.
#nav {
너비 : 225px;
margin-right : 15px;
국경 : 중간의 고체 # 000000;
}
#nav li {
목록 스타일 : 없음;
}
.footer {
font-size : .75em;
명확 : 둘 다;
너비 : 100 %;
텍스트 정렬 : 가운데;
}
list-style 속성은 네비게이션 섹션의 목록을 글 머리 기호 나 숫자가 없도록 설정하고 .footer는 저작권 섹션을 섹션 내에서 작고 가운데에 배치합니다.
07 중 10
메인 섹션 배치
메인 섹션을 절대 위치로 배치함으로써 웹 페이지에 머무르기를 원하는 위치에 정확하게 머무를 수 있습니다. 큰 모니터를 수용하기 위해 800px 광산을 만들었지 만 작은 모니터를 사용하는 경우 더 좁게 만들 수 있습니다.
styles.css 문서에 다음을 추가하십시오.
#main {
너비 : 800px;
상단 : 0 픽셀;
위치 : 절대;
왼쪽 : 250px;
}
08 중 10
단락 스타일 지정하기
위의 단락 글꼴을 이미 설정 했으므로 각 단락에 약간의 "킥"을 추가하여 더 잘 표현할 수있게하려고했습니다. 저는이 단락을 단지 이미지 이상으로 강조한 상단에 경계선을 넣음으로써 이것을했습니다.
styles.css 문서에 다음을 추가하십시오.
.topline {
border-top : 두꺼운 솔리드 # FFCC00;
}
나는 그런 식으로 모든 단락을 정의하는 것보다는 "topline"이라고 부르는 수업으로하기로 결정했습니다. 이렇게하면, 노란색 선이없는 단락을 원한다고 결정하면 단락 태그의 class = "topline"을 그대로두고 상위 경계선을 갖지 않게됩니다.
09/10
이미지 스타일 지정하기
일반적으로 이미지는 그 주위에 테두리가 있습니다. 이미지가 링크가 아니라면 항상 표시되는 것은 아니지만 테두리를 자동으로 해제하는 CSS 스타일 시트 내에 클래스를 갖고 싶습니다. 이 스타일 시트에서는 "noborder"클래스를 만들었고 문서의 대부분의 이미지는이 클래스의 일부입니다.
이 이미지의 다른 특별한 부분은 페이지의 위치입니다. 나는 그 (것)들을 배열하기 위하여 테이블을 사용하지 않고있는 단락의 일부가되기를 원했습니다. 가장 간단한 방법은 float CSS 속성을 사용하는 것입니다.
styles.css 문서에 다음을 추가하십시오.
#main img {
왼쪽으로 뜨다;
margin-right : 5px;
margin-bottom : 15px;
}
.noborder {
border : 0px none;
}
보시다시피, 이미지에 여백 속성이 설정되어 단락의 옆에있는 떠 다니는 텍스트와 비교해 보지 않을 수 있습니다.
10/10
이제 완성 된 페이지를보십시오.
CSS를 저장했으면 웹 브라우저에서 pets.htm 페이지를 다시로드 할 수 있습니다. 귀하의 페이지는이 그림에 표시된 것과 유사하게 보이며, 이미지는 정렬되고 탐색은 페이지의 왼쪽에 올바르게 배치되어야합니다.
이 사이트의 모든 내부 페이지에 대해 동일한 단계를 수행하십시오. 네비게이션의 모든 페이지에 대해 하나의 페이지가 있어야합니다.