CSS 튜토리얼 (5) DW4를 사용하여 CSS를 만드는 방법
- 巴扎黑원래의
- 2017-04-01 14:03:142383검색
1. CSS 스타일 패널 위 내용은 CSS 튜토리얼 (5) DW4를 사용하여 CSS를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
이전 장을 학습한 후에는 누구나 CSS에 대해 어느 정도 이해하고 있다고 생각합니다. 이번 장에서는 CSS를 작성하기 위해 Dreamweaver4를 사용하는 방법을 설명하겠습니다. 먼저 Dreamweaver4를 실행한 후 메뉴에서 Windows->CSS 스타일을 선택합니다(또는 Shitf+F11을 누릅니다). 아래와 같이 CSS 스타일 관리 패널이 나타납니다.
가 CSS 스타일에 표시됩니다. 패널 모든 사용자 정의 CSS 스타일(즉, 위에서 언급한 점으로 시작하는 클래스 선택기, Dreamweaver4에서는 점으로 시작하는 클래스 선택기를 사용자 정의 스타일로 사용함), 적용 버튼을 사용하여 원하는 대로 이러한 CSS 스타일을 페이지에 적용할 수 있습니다. 의 텍스트 또는 문서 영역입니다.
참고: 적용 버튼 앞에 확인란이 있습니다. 선택하면 버튼이 회색으로 표시되어 사용할 수 없게 되며 마우스를 클릭하는 동안에는 사용자 정의된 CSS 스타일이 자동으로 적용됩니다. 페이지의 현재 요소. 확인란이 선택되어 있지 않고 적용 버튼을 사용할 수 있는 경우 적용 시 적용 버튼을 클릭해야 합니다. 사용자 정의 스타일을 객체에 적용하는 것은 현재 HTML 태그 뒤에 class="..."를 추가하는 것과 같습니다. 또한 스타일 앞에 "S" 모양의 기호가 있는데 이는 내부적으로 정의된 스타일을 나타내며, 기호인 경우 해당 스타일이 외부 스타일 시트 파일에 연결되어 있음을 나타냅니다.
참고: CSS 스타일 패널에는 사용자 정의(클래스) CSS 스타일만 표시되며, 기타 CSS 선택기 스타일은 HTML에 의해 제어되는 영역에 자동으로 적용될 수 있으므로 CSS 스타일 패널에 표시되지 않습니다. 태그. (HTML 태그 재정의는 선택자가 단일 HTML 태그인 CSS 스타일을 의미합니다. 원본 HTML 태그의 스타일을 재정의하고 변경하므로 재정의라고 합니다.)
오른쪽 하단에 작은 버튼 4개가 있습니다. Corner 에서 가장 일반적으로 사용되는 명령은 다음과 같습니다.
스타일 시트 첨부: (스타일 시트 링크) 클릭하면 이전에 생성된 외부 스타일 시트를 선택하고 확인을 클릭하면 스타일 시트 선택 대화 상자가 나타납니다. 이 외부 스타일 시트를 추가했습니다. 외부 스타일 시트를 추가할 때 가능하면 상대 경로를 사용하십시오. 새 스타일: (새 스타일) 일반적으로 이 버튼을 사용하여 CSS 스타일 시트를 만듭니다.
스타일 시트 편집: (스타일 시트 편집)을 클릭하면 스타일 시트 편집 대화 상자가 나타나 기존의 모든 내부 및 외부 스타일 시트를 표시합니다. 이 대화 상자에서 스타일을 생성, 편집, 삭제할 수 있습니다. .
삭제: (스타일 삭제) 먼저 삭제할 사용자 정의 CSS 스타일을 선택한 후 이 버튼을 클릭하면 스타일이 삭제됩니다.
위의 작은 삼각형을 클릭하거나 마우스 오른쪽 버튼을 클릭하면 메뉴가 나타납니다.
편집: (편집) 현재 선택한 사용자 정의를 편집합니다. CSS 스타일 이 CSS 클래스 스타일을 편집하려면 스타일 정의 대화 상자로 들어가려면 클릭하세요.
복제: (복사) 현재 선택된 사용자 정의 CSS 스타일 클래스를 복제합니다.
삭제: (삭제) 현재 선택된 사용자 정의 CSS 스타일을 삭제하며 버튼과 동일한 효과를 갖습니다.
적용: (응용 프로그램)은 선택한 CSS 클래스를 페이지의 현재 요소에 적용하는 것을 의미합니다. 적용 버튼과 동일합니다.
새 스타일: (새 스타일)은 버튼과 동일합니다.
스타일 시트 편집: (스타일 시트 편집)은 버튼과 같습니다.
스타일 시트 첨부: (외부 스타일 시트 링크) 버튼과 동일합니다.
스타일 시트 내보내기: (스타일 시트 내보내기) 이 페이지의 내부 스타일 시트를 외부 스타일 시트 파일로 내보냅니다. 참고: Dreamweaver4에서 스타일 시트를 내보내는 데 이 방법을 사용하는 것 외에도 기본 메뉴에서 파일->내보내기->CSS 스타일 내보내기를 사용할 수도 있습니다.
2. 스타일 시트를 만들기 전에 먼저 Dreamweaver4의 세 가지 스타일 시트 유형을 소개합니다(또는 CSS 스타일 패널 메뉴에서 새 스타일). 아래와 같이 새 스타일 대화 상자를 표시합니다.
정의에서 외부 스타일 시트 또는 내부 스타일 시트를 선택할 수 있습니다.
l 새 스타일 시트 파일(새 항목)을 선택합니다. 스타일 시트 파일) 시스템에서는 먼저 이 스타일 시트 파일을 저장한 다음 이 스타일 시트 파일을 정의할 수 있습니다. 전체 페이지의 스타일은 사용자가 만든 스타일 시트 파일을 따르며, 이 외부 스타일 시트 파일을 다른 페이지에 연결하여 하나의 스타일 시트 파일이 여러 페이지를 제어할 수 있습니다.
l 이 문서만(이 문서만 존재함)을 선택하면 내부 스타일 시트가 생성되고 Dreamweaver4에서는 생성된 스타일 시트의 내용을 < 헤드>
유형에서 선택할 수 있는 세 가지 스타일 시트 유형이 있습니다.
l 맞춤 스타일 만들기(클래스): (사용자 정의 스타일 만들기) 페이지에 다음과 같이 적용할 수 있는 스타일을 사용자 정의합니다. 클래스 속성 중간.
l HTML 태그 재정의: (HTML 태그 재정의) 지정된 HTML 태그의 기본 형식을 재정의합니다.
l CSS 선택기 사용: (CSS 선택기 사용) 특정 태그 조합 또는 지정된 ID 속성을 포함하는 모든 태그에 대한 형식 정의입니다.
CSS를 정의하기 전에 먼저 정의된 스타일이 어디에 사용될지 명확하게 고려해야 합니다. 어떤 효과를 얻을 수 있나요? 한 페이지에 정의되어 있습니까? 아니면 여러 페이지의 스타일을 제어합니까? 그런 다음 필요에 따라 적절한 스타일 시트를 정의하십시오.
3. 맞춤 스타일 만들기
페이지에서 중요한 텍스트나 콘텐츠를 눈길을 끌게 만들고 싶을 때가 있습니다. 이러한 중요한 텍스트나 콘텐츠에 대해 별도의 스타일을 정의하여 일반 텍스트를 구별하려면 사용자 정의를 생성하여 중요한 콘텐츠에 대해 별도로 CSS를 정의할 수 있습니다. 스타일. 눈길을 끄는 목적을 달성하기 위해 중요한 텍스트와 콘텐츠의 색상을 빨간색과 굵은 색으로 정의해야 한다고 가정해 보겠습니다.
새 스타일을 클릭하면 새 스타일 대화 상자가 나타나며, 스타일 시트 유형으로 Make Custon 스타일(클래스)을 선택하고 이 문서만을 선택합니다. , 그리고 위의 이름 드롭다운 상자에 정의한 스타일의 이름을 입력합니다. 아래와 같이 ".emphases"를 입력하고 확인을 누릅니다.
참고: 사용자 정의 스타일의 이름 일반적으로 스타일 효과에 따라 이름이 지정됩니다. 이름 앞에 마침표가 있어야 합니다. 이를 놓치면 시스템이 자동으로 채워줍니다.
스타일 정의 대화 상자가 나타나면 범주에 입력을 선택한 다음 그림과 같이 색상을 빨간색으로, 무게를 굵게 설정하고 확인을 누릅니다.
그런 다음 더 추가하세요. CSS 스타일 패널 emphases라는 사용자 정의 스타일이 생성되었습니다.
원본 코드 부분을 살펴보면 다음 스타일 시트가 추가된 것을 볼 수 있습니다. 코드:
이제 필요한 곳에 이 사용자 정의 스타일을 적용할 수 있습니다. 웹 페이지에서 텍스트를 선택하고 스타일 패널에서 강조 스타일을 클릭합니다. 원하는 효과인지 확인해 보세요.
참고: 선택한 콘텐츠가 표나 단락인 경우 전체 표나 단락의 텍스트는 강조 스타일로 정의됩니다. 원본 코드에서 해당 내용이
......
또는
……
선택한 텍스트에 스타일을 추가하면 텍스트 자체가 HTML 태그로 둘러싸이지 않으므로 태그가 자동으로 추가됩니다. 예:
……Key points…
참고: 스팬 태그 자체에는 스타일 시트의 선택 범위를 구체적으로 지정하고 p도 스타일 시트의 영역을 지정합니다.
4. 재정의 스타일 시트 만들기
재정의 스타일 시트는 HTML 태그의 형식을 재정의합니다. 예를 들어, 페이지의 단락 서식을 다시 지정하고, 각 단락 앞에 두 개의 공백을 두고, 단락 텍스트의 크기와 줄 간격을 설정하려고 합니다.
새 스타일을 클릭하여 새 스타일 대화 상자에서 스타일 시트 유형으로 HTML 태그 재정의를 선택하고 이 문서만을 선택합니다. 스타일 시트 유형이 HTML 태그 재정의를 선택하면 위의 드롭다운 상자 이름이 태그로 변경되어 입력 콘텐츠가 HTML 태그임을 나타냅니다. 드롭다운 버튼을 클릭하면 모든 HTML 태그가 포함된 것을 볼 수 있습니다. 태그 드롭다운 상자에서 단락 기호 P:
를 선택합니다. 확인 후 스타일 정의 대화 상자를 입력합니다. 유형에서 글꼴 크기를 12픽셀로 설정하고 줄 간격을 150%로 설정합니다. 텍스트 크기는 아래와 같습니다.
블록 섹션에서 텍스트 들여쓰기를 설정했습니다. 텍스트 크기가 12픽셀이므로 두 단어 사이의 간격은 24픽셀입니다.
누른 후 자, 스타일 재정의가 완료되었습니다. 이때 페이지의 각 단락 텍스트 크기는 12픽셀이고 줄 간격은 150%입니다. 그러나 Dreamweaver 편집기에서는 들여쓰기 효과를 볼 수 없습니다. 파일을 저장하고 열기만 하면 됩니다. 브라우저로 확인해 보세요. 이때 CSS 스타일 시트의 원본 코드는
5. 동적 링크 스타일 시트 만들기
다양한 상태의 링크 스타일 세트를 만들어 보겠습니다. 새 스타일을 클릭하여 새 스타일 대화 상자에서 스타일 시트 유형으로 CSS 선택기 사용을 선택하고 이 문서만을 선택합니다. 스타일 시트 유형으로 CSS 선택기 사용을 선택하면 위의 드롭다운 상자 이름이 선택기로 변경되어 입력 콘텐츠가 CSS 선택기임을 나타냅니다. 드롭다운 버튼을 클릭하면 4가지 상태를 볼 수 있습니다. 동적 링크:
l a :active 하이퍼링크 상태 선택
l a:hover 하이퍼링크 상태 위로 커서를 이동합니다
l a:link 하이퍼링크의 정상 상태, is no action
l a:visited Visited hyperlink status
다음으로 이러한 상태를 각각 설정합니다. 먼저 a:link를 선택하면 OK 후 스타일 정의 대화 상자가 나타납니다. 밑줄이 있고 색상은 다음과 같이 주황색입니다. 그림:
아래와 같이 a:visited, 밑줄 없음, 노란색을 설정하는 데 동일한 방법을 사용합니다.
다음으로 a:hover를 밑줄과 윗줄로 설정하고 색상은 주황색으로 설정하고 Background에서 배경을 노란색으로 설정합니다.
여기서는 계단식 규칙에 따라 a:active를 설정하지 않습니다. 스타일은 자동으로 a:hover를 따릅니다. 이런 식으로 모든 동적 링크의 효과를 설정했습니다. 설정 순서에 주의하세요. 브라우저에서 볼 수 있습니다. 이 페이지의 방문하지 않은 링크는 밑줄이 표시되지 않고 주황색입니다. 방문한 링크는 밑줄이 표시되지 않고 노란색입니다. 마우스가 링크를 가리키면 위쪽과 밑줄이 표시되고 배경이 노란색입니다. . 스타일 시트의 원래 코드는 다음과 같습니다.
이와 같이 동적 링크를 정의하면 전체 페이지의 링크 효과가 달라집니다. 두 개 이상의 링크 효과 그룹을 정의하는 방법은 무엇입니까? 4장에서 클래스와 의사 클래스를 혼합하면 동일한 페이지에서 서로 다른 링크 효과를 생성할 수 있다고 말하지 않았습니까? 새 스타일을 클릭하고 선택기 드롭다운 상자에 아래와 같이 a.link2:link를 입력합니다(물론 a:link를 먼저 선택한 다음 변경할 수 있음).
이런 식으로, 새로운 .link2 클래스를 생성하고 a.link2:link, 빨간색, 밑줄 스타일을 설정합니다.
위의 방법에 따라 a.link2:visited 및 a.link2:hover를 계속 정의합니다. , a.link2:visited를 빨간색에 밑줄이 그어진 것으로 정의하고, a.link2:hover는 밑줄이 없는 빨간색, 배경은 흰색으로 정의합니다. CSS 스타일 패널에는 link2라는 추가 사용자 정의 스타일이 있습니다. 그런 다음 이 스타일을 동적 링크에 적용합니다. 저장하고 브라우저로 열면 완전히 다른 두 가지 링크 스타일을 볼 수 있습니다. 모든 CSS 코드는 다음과 같습니다: