아이튠즈 오류 

HTML에서 CSS를 사용합니다. 스타일 속성(내장 CSS 스타일)을 사용하여 html 태그를 디자인합니다. CSS 스타일 만들기

안녕하세요, Anatomy of Business 프로젝트 독자 여러분. 웹마스터 알렉산더가 당신과 함께합니다! 지난 기사에서 우리는 CSS 스타일이 무엇인지, WEB 프로그래밍에서 얼마나 중요한지 살펴보았습니다.

CSS 스타일이 HTML 파일 표시에 중요한 영향을 미치는 경우 어떻게든 연결해야 한다는 것은 매우 분명합니다. 오늘은 CSS 스타일을 HTML에 연결하는 네 가지 주요 방법을 살펴보겠습니다.

문제를 미루지 말자 긴 상자그리고 시작해 봅시다!

별도의 CSS 파일을 포함합니다!

가장 편리하고 편리한 것 중 하나는 간단한 방법스타일 연결은 별도의 파일을 스타일과 연결하는 것입니다. 이렇게 하려면 텍스트를 사용해야 합니다. 메모장 편집기++(또는 기타) 확장자가 .css인 파일을 생성하고 이를 배치하려는 파일과 동일한 폴더에 배치합니다.

그런 다음 태그 사이의 HTML 파일에서 우편 다음 코드:

이제 이것이 무엇을 의미하는지 살펴보겠습니다.

링크 #은 영어로 번역되면 "링크"를 의미합니다. 이런 식으로 우리는 다음에 이야기할 것이 링크라는 것을 브라우저에 보여줍니다. rel= # 이 속성을 사용하면 CSS 파일이 HTML 파일과 어떻게 관련되는지 보여줍니다. "stylesheet" # 즉, CSS 파일은 계단식 스타일 시트입니다. type="text/css" # 여기에서는 모든 것이 간단합니다. 이는 파일이 다음 형식으로 작성되었음을 나타냅니다. 텍스트 형식확장자는 .css href="style.css"입니다. # 이것은 CSS 스타일이 있는 파일에 대한 링크입니다.

저로서는 이것이 가장 바람직한 연결 방법입니다 CSS 스타일.

HTML 파일에 직접 스타일을 작성합니다(첫 번째 방법)

CSS 스타일을 지정하는 다음 방법은 HTML 문서에 직접 작성하는 것입니다. 다음과 같습니다:

최고의 블로그



이 HTML 문서가 브라우저에 어떻게 표시되는지 살펴보면 태그 사이에 텍스트가 있음을 알 수 있습니다. 빨간색으로 변했습니다. 그리고 스타일 속성을 사용하여 다음으로 표시 스타일 매개변수가 있다고 말합니다. 색상색상을 담당하는 선택자입니다. 빨간색이 선택기의 값입니다. 이런 식으로 우리는 강조할 수 있습니다 특정 유형텍스트의 일부 개별 부분을 표시합니다.

HTML 내에 계단식 스타일 시트 배치(두 번째 방법)

CSS 스타일을 연결하는 또 다른 방법은 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 파일에 직접 배치할 수 있나요?

계단식 스타일 시트가 있습니다. 세 가지 유형따라서 세 가지 방식으로 html 코드에 포함됩니다.

  1. 내부 스타일 시트. 속성을 사용하여 요소 내부에 설정 회전식 문, 예를 들어:

    파란색 헤더

    이 모든 결과는 다음과 같습니다.

    파란색 헤더

    이러한 방식으로 각 제목과 단락에 스타일 시트를 할당할 수 있습니다. 이 방법의 단점은 테이블이 하나의 요소(예: 헤더)에 대해서만 설정된다는 것입니다. 다른 모든 제목의 경우 자신만의 스타일 시트를 만들어야 하며 이는 이미 잃어버린 시간. 또한 이 방법을 사용하여 사이트 전체에 새로운 스타일 시트를 설정하려면 많은 노력이 필요합니다.

  2. 내장 스타일 시트. 이런 식으로 태그 사이에 전체 HTML 문서에 대한 스타일 시트가 설정됩니다. ... . 예를 들어, 웹페이지의 모든 헤더를 만들고 싶다면 파란색의, 태그 사이에 필요합니다 ... 다음을 작성하세요:

    태그 사이에 이 코드를 작성하면 ... , 모든 첫 번째 수준 제목이 파란색이 됩니다. 이 방법을 사용하면 태그를 사용하여 스타일이 지정됩니다. . 태그도 추가 , 그러나 사이트 전체는 아닙니다.

  3. 외부 스타일 시트. 설정 별도의 파일태그를 사용하여 html 문서에 연결합니다. , 태그 사이에 위치 ... . 이 경우를 더 자세히 고려해 봅시다. 메모장에 다음 코드를 입력하고 html 파일로 저장합니다.



    HTML 문서의 제목.



    첫 번째 수준 헤더


    HTML 문서 중앙에 위치한 세 번째 수준 제목


    웹페이지 오른쪽 가장자리에 정렬된 여섯 번째 수준 제목




    이 후에 우리는 새로운 파일다음 내용으로:

    H1 (색상: 파란색;)
    H3 (색상:빨간색;)
    H6(색상:녹색;)

    그리고 다른 이름으로 저장하세요. 스타일확장 기능 포함 *CSS. 결과를 확인하세요. 이것은 헤더가 포함된 HTML 파일입니다. 이제 이 디자인이 어떻게 작동하는지 살펴보겠습니다. 제목이 있는 HTML 문서에서는 태그 사이에 있습니다. ... 다음 줄을 썼습니다.

    여기서는 태그를 사용하여 스타일 시트를 html 문서에 연결합니다. 기인하다 href스타일 파일이 있는 위치를 나타냅니다. 이는 필수 속성입니다. 기인하다 유형우리는 그것이 스타일시트 유형을 지정한다는 것을 이미 알고 있습니다. 기인하다 상대포함된 파일과 이 HTML 문서의 관계를 나타냅니다. 우리의 경우 속성 값은 rel="스타일시트"추가했음을 나타냅니다. 기본스타일 시트. 스타일 시트를 지정하는 이 방법의 장점은 사이트 전체의 디자인을 변경하려는 경우 스타일 시트가 있는 파일 하나만 변경하면 된다는 것입니다.

그것이 무엇인지 알아보자 계단식 테이블스타일, CSS 스타일이 무엇인지, 어떻게 설정하는지 HTML 요소.

이 글을 통해 당신은 이미 하이퍼텍스트 마크업 언어가 웹 페이지의 콘텐츠를 설명하는 데 사용된다는 점을 분명히 이해했습니다. 인터넷을 통해 여행하는 동안 우리는 페이지가 색상, 글꼴, 색상 등 다르게 보이는 것을 발견합니다. 줄 간격, 배경 이미지심지어 애니메이션까지. 미뤄두지 않고 이 페이지의 모양이 사용된 페이지의 영향을 받는다는 점을 즉시 설명하고 싶습니다. 계단식 스타일 시트 (계단식 스타일 시트 - CSS). 이내에 HTML 튜토리얼캐스케이딩 스타일 시트의 사용에 대해 간략하게 살펴보겠습니다. 이 과정이 끝난 후 CSS 튜토리얼 섹션에서 자세히 학습할 수 있습니다.

스타일이란 무엇입니까? 스타일은 모든 페이지 요소의 모양을 설정합니다. 대략적으로 말하면 이는 브라우저에 형식 지정 방법을 알려주는 규칙입니다. 특정 요소(예: 배경색이나 글꼴 색상 변경)

각 HTML 요소에는 기본 스타일. HTML 요소의 기본 스타일 변경은 다음을 사용하여 수행할 수 있습니다. 전역 속성스타일. 속성은 다음을 지정합니다. 내장 (인라인) 요소의 CSS 스타일. 인라인 CSS는 단일 HTML 요소에 고유한 스타일을 적용하는 데 사용됩니다. 이내에 HTML 학습인라인 CSS를 사용하는 방법만 살펴보겠습니다.

힌트: 이 예에서는 다음 색상을 사용합니다. 하얀색(하얀색), 카키색 옷감(카키색 옷감), 회색(회색). 시의 텍스트에 사용된 글꼴은 Verdana입니다.

작업을 완료하는 데 어려움이 있는 경우 이미지를 클릭하여 별도의 창에서 예제를 열어 페이지 코드를 검사하세요.

이 장에서는 CSS를 HTML 문서에 구현하는 방법, 즉 요소의 스타일 설명을 요소 자체, 일부 HTML 태그에 직접 연결하는 방법에 대해 설명합니다.

구현하다 이 작업세 가지 방법으로 가능합니다:

  • 요소 자체에 스타일 설명을 직접 작성합니다. 이 방법은 해당 요소가 하나만 있는 경우에만 적합합니다. HTML 문서 e에는 별도의 스타일 설명이 필요합니다.
  • HTML 문서의 모든 동일한 요소에 대한 스타일 설명을 작성합니다. 이 방법은 페이지 스타일이 사이트의 전체 디자인(상호 연결된 페이지 그룹)과 근본적으로 다른 경우에 적합합니다.
  • HTML 요소의 스타일 설명을 별도의 CSS 파일로 추출합니다. 이를 통해 전체 사이트, CSS 파일에 대한 참조가 표시된 사이트의 각 페이지의 디자인을 관리할 수 있습니다. 이 방법이 가장 효과적인 사용계단식 스타일 시트.

각 옵션을 자세히 살펴보고 동시에 CSS 작성 구문 규칙에 대해 알아 보겠습니다.

스타일 속성입니다.

거의 모든 HTML 태그에는 속성이 있습니다. 스타일, 이는 특정 스타일 설명이 이 태그에 적용됨을 나타냅니다.

다음과 같이 작성되었습니다.

스타일="">

속성 따옴표 사이에 쓰여질 모든 것 스타일스타일 설명이 될 것입니다. 이 요소의, 이 경우 요소

예를 들면 다음과 같습니다.

스타일="색상: #ff0000; 글꼴 크기:12px"> 개인 스타일이 담긴 문단입니다.

이 경우 이 단락은 빨간색으로 표시되고 글꼴 크기는 12픽셀로 지정되었습니다. 다음 장에서는 인용문으로 쓰여진 내용에 대해 자세히 설명하겠습니다. 우리 얘기 중이야 CSS를 HTML 태그에 적용하는 방법에 대해 알아보세요.

동일한 원칙을 사용하여 거의 모든 HTML 요소에 대해 개별 스타일을 지정할 수 있습니다.




스타일 속성

style="배경색: #c5ffa0">

스타일="색상: #0000ff; 글꼴 크기:18px">코끼리에 관한 모든 것



코끼리를 사세요


스타일="색상: #ff0000; 글꼴 크기:14px">


스타일="색상: #0000ff; 글꼴 크기:16px">코끼리를 빌려주세요


스타일="색상: #ff0000; 글꼴 크기:14px">






하지만 이 방법을 다시 반복하겠습니다. CSS 구현소수의 HTML 요소에 특정 스타일을 설정해야 하는 경우에만 좋습니다.

꼬리표 (동일한 이름의 속성과 혼동하지 마십시오) 필요한 요소가 설명되어 있습니다.

예제를 살펴보면 아래에 설명이 있습니다.




스타일 태그



코끼리에 관한 모든 것


이 사이트에서는 코끼리에 관한 모든 정보를 찾을 수 있습니다.


코끼리를 사세요


우리와 함께라면 당신은 할 수 있습니다 유리한 가격최고의 코끼리를 사세요!!


코끼리를 빌리세요


여기서만 코끼리를 빌릴 수 있어요!!






예제에서 볼 수 있듯이 첫 번째 경우와 똑같은 결과를 얻었습니다. 이제는 각 요소에 개별적으로 스타일을 할당하지 않고 문서의 "헤드"에 배치하여 모든 제목이

,

- 단락은 파란색으로 표시됩니다.

- 빨간색. 페이지에 그러한 단락이 100개 있고 제목이 약 15개 있고 각 개별 요소에 대해 반복되는 모든 스타일 설명을 "제거"하여 문서 자체의 무게가 줄어들면 작업이 얼마나 쉬울지 상상해 보십시오.

이제 약속된 코멘트는 다음과 같습니다.

꼬리표 특정 HTML 요소의 스타일은 다음 구문에 따라 직접 선언됩니다.

스타일 선언 블록에 요소의 여러 속성이 지정된 경우 세미콜론으로 구분됩니다.

별도의 외부 파일에 CSS가 있습니다.

시간이 얼마나 걸리나요? 제 생각에는 CSS의 장점, 즉 사이트 디자인과 관련된 모든 정보를 별도의 외부 파일에 저장하는 기능에 대해 설명하겠습니다.

따라서 메모장(또는 다른 편집기)을 열고 다음 텍스트를 작성하세요.

본문(배경색: #c5ffa0)
a (색상:#000060; 글꼴 두께: 굵은 글씨;)
a:hover (색상:#ff0000; 글꼴 두께: 굵게; 텍스트 장식:없음)
h1(색상: #0000ff; 글꼴 크기:18px)
h2(색상: #ff00ff; 글꼴 크기:16px)
p(색상: #600000; 글꼴 크기:14px)

나는 이 교과서의 다음 장에서 이 이상한 것에 대해 우리가 쓴 내용에 대해 자세히 설명하려고 노력할 것입니다.

모두! 스타일 설명 파일이 생성되었습니다! 이제 남은 것은 조금, 즉 강제로 필수 페이지이 파일에서 정보를 얻으려면 당사 웹사이트를 방문하세요.

이는 태그를 사용하여 수행됩니다. (연결). 꼬리표 다목적이며 적절한 작동을 보장하는 추가 외부 파일과 HTML 문서를 "링크"하는 역할을 합니다. 꼬리표 사용자를 위한 것이 아니라 브라우저 프로그램(브라우저)을 위한 일종의 링크입니다. 왜냐하면 서비스 정보만 전달하며 태그 사이의 HTML 문서 헤드에 위치합니다. 브라우저에서는 화면에 표시되지 않습니다.

꼬리표 다음과 같은 속성이 있습니다.

href- 파일의 경로입니다.
상대- 사이의 관계를 정의합니다. 현재 문서그리고 참조되는 파일.
  • 바로가기 아이콘 - 포함된 파일이 .
  • 스타일시트- 포함된 파일에 스타일 시트가 포함되어 있음을 지정합니다.
  • application/rss+xml - 파일 위치 XML 형식뉴스피드를 설명합니다.
유형 - MIME 유형연결 파일 데이터.

우리는 다음과 같이 연결하기 때문에 외부 파일계단식 스타일 시트를 사용하는 경우 서비스 링크는 다음 형식을 취합니다.

나는 가능한 오해를 확실히 없애기 위해 반복합니다. 기인하다 상대값을 할당하다 스타일시트계단식 스타일 시트를 외부 파일로 연결하므로 CSS 파일의 경로를 나타냅니다(이 예에서는 파일 이름이 마이스타일.css작성된 HTML 문서 옆에 있습니다. 이 링크) 우리는 또한 이 파일텍스트와 스타일 설명이 포함되어 있습니다. 유형="텍스트/css"

이제 이 줄을 사이트의 페이지 헤더에 삽입하고 결과를 즐기세요..

mystyle.css 파일
본문(배경색: #c5ffa0)
a (색상:#000060; 글꼴 두께: 굵은 글씨;)
a:hover (색상:#ff0000; 글꼴 두께: 굵게; 텍스트 장식:없음)
h1(색상: #0000ff; 글꼴 크기:18px)
h2(색상: #ff00ff; 글꼴 크기:16px)
p(색상: #600000; 글꼴 크기:14px)
Index.html 파일



계단식 스타일 시트



메뉴:


코끼리에 관한 모든 것.
코끼리를 사세요.
코끼리를 빌려보세요.

코끼리에 관한 모든 것


이 사이트에서는 코끼리에 관한 모든 정보를 찾을 수 있습니다.






파일 Elephant.html



계단식 스타일 시트



메뉴:


코끼리에 관한 모든 것.
코끼리를 사세요.
코끼리를 빌려보세요.

코끼리를 사세요


우리와 함께 당신은 경쟁력 있는 가격으로 최고의 코끼리를 구입할 수 있습니다!!






파일 Elephant1.html



계단식 스타일 시트



메뉴:


코끼리에 관한 모든 것.
코끼리를 사세요.
코끼리를 빌려보세요.

코끼리를 빌리세요


여기서만 코끼리를 빌릴 수 있어요!!






위의 예에서 "코끼리에 관한 사이트"는 이 순간, 세 개의 페이지가 있으며 각 페이지는 하나의 단일 페이지와 연결되어 있습니다. 외부 CSS파일-mystyle.css. 따라서 우리는 이를 크게 "언로드"하고 전체 사이트의 디자인을 "모바일 친화적"으로 만들었습니다. 이 사이트가 100개의 완전한 페이지를 가지고 있다면 우리가 얼마나 많은 킬로바이트를 얻을 수 있을지 상상해 보십시오!? 또한 디자인을 변경해야 할 경우 얼마나 많은 시간을 절약할 수 있을까요?

이번 장에서는 HTML 문서에 CSS를 삽입하는 세 가지 방법을 살펴보았습니다. 어느 것을 사용하는 것이 더 낫습니까?

  • 속성 사용 스타일모든 요소에 대해 다른 요소와 스타일이 다른 이 요소가 전체 사이트에서 유일한 요소인 경우.
  • 태그 사용