css 스타일 예제

참고 – 글꼴 태그가 더 이상 사용되지 않으며 HTML의 향후 버전에서 제거되어야한다. 따라서 대신 사용해서는 안되며 CSS 스타일을 사용하여 글꼴을 조작하는 것이 좋습니다. 그러나 학습 목적을 위해 이 장에서는 글꼴 태그를 사용하는 예제와 함께 작동합니다. 페이지의 모든 스타일은 다음 규칙에 의해 새 “가상” 스타일 시트로 “계단식”됩니다. 이러한 종류의 스타일은 스타일 특성을 사용하여 HTML 태그 내에 지정됩니다. 스타일을 정해야 하는 단일 웹 페이지에 여러 요소가 있는 경우 클래스를 사용합니다. 예를 들어 페이지 헤더와 바닥글의 링크를 일관된 방식으로 스타일링할 수 있지만 페이지 본문에 있는 링크와 는 다른 방식으로 스타일을 지정하도록 할 수 있다고 가정해 보겠습니다. 이러한 링크를 정확히 파악하려면 각 링크또는 링크를 보유한 컨테이너에 클래스를 추가할 수 있습니다. 그런 다음 클래스를 사용하여 스타일을 지정하고 해당 클래스 특성이 있는 링크에만 적용할 수 있습니다. 외부 스타일 시트는 많은 HTML 페이지의 스타일을 정의하는 데 사용됩니다.

다시 한 번 위의 예를 다시 작성하자,하지만 여기에 우리는 태그를 사용하여 동일한 HTML 문서에 스타일 시트 규칙을 작성합니다 – 우리는 다음과 같이 스타일 시트의 도움으로 위의 예를 다시 쓸 수 있습니다 – 내부 스타일이 외부 스타일 시트에 대한 링크 후 정의된 경우 요소는

“주황색”이 됩니다: 일부 속성이 다른 스타일 시트에서 동일한 선택기(요소)에 대해 정의된 경우 마지막 읽기 스타일 시트의 값이 사용됩니다. 마지막 예는 img:hover 대신 img.hover 🙂 첫 번째 줄은 스타일 시트이며 CSS (“텍스트 / css”)로 작성되어 있다고 말합니다. 두 번째 줄은 “본문” 요소에 스타일을 추가한다고 말합니다. 세 번째 줄은 텍스트의 색상을 자주색으로 설정하고 다음 줄은 배경을 일종의 녹색 노란색으로 설정합니다. CSS로 스타일을 지정할 때 가장 멋진 점은 요소를 만들 때마다 스타일을 지정할 필요가 없다는 것입니다. “모든 단락은 이 특정 한 스타일을 가져야합니다”라고 말할 수 있으며 갈 수 있습니다. 다음은 이 작업을 수행하는 방법의 예입니다. 모든 HTML 문서에는 태그가 포함되어 있습니다.

이 헤드 섹션은 인라인 CSS 스타일시트가 있는 곳입니다. 다음과 같이 표시됩니다 .