텍스트 링크는 웹 페이지에서 가장 일반적인 페이지 요소라고 할 수 있습니다. 기본 텍스트 링크 스타일에는 밑줄이 그어져 있습니다. 결과적으로 스타일 시트에 맞게 변경하려는 친구들이 많을 것입니다. 널리 사용되었기 때문에 이제 이 소망은 매우 쉽게 실현될 수 있습니다. 오늘은 스타일 시트를 사용하여 다채로운 텍스트 링크 효과를 만드는 방법을 소개하겠습니다. 초급, 고급, 고급 장에서 모두에게 소개하겠습니다. 모든 링크 스타일 효과는 드림위버의 스타일 편집기에서 완성됩니다. 드림위버의 스타일 편집기 사용법은 이전 소개를 참조하세요. 특정 페이지 탐색에 대한 링크 스타일 탐색 효과는 아래와 같습니다. 여기를 참조하세요 .
1. 준비
먼저 기본 링크 스타일을 만들고, 다른 스타일에서는 이를 기반으로 사용자 정의 클래스 클래스를 추가합니다.
1. 그림 1과 같이 Shift+F11을 눌러 스타일 패널을 열고 새 스타일 버튼을 클릭합니다.
2. 유형 옵션에서 CSS 선택기 사용을 선택하여 그림 2와 같이 기본 링크 스타일을 만듭니다.
3. 그림 3과 같이 기본 링크 스타일을 밑줄 없음, 글꼴은 송나라 9pt, 다른 색상 없음 등으로 설정합니다. 나중에 클래스별로 별도로 설정하겠습니다.
4. 스타일 클래스 Class를 정의합니다. 아래의 각 스타일은 별도의 클래스를 정의하고 이를 링크 텍스트에 할당합니다. 단계는 다음과 같습니다. 추가를 클릭하여 새 정의 스타일 패널을 열고, 사용자 정의 스타일 만들기(클래스)를 선택하여 고유한 스타일 클래스를 정의합니다. 그림 4에 표시된 대로;
5. 링크 텍스트에 스타일 클래스를 추가합니다. 그림 5와 같이 Dreamweaver에서 링크 텍스트를 선택하고 창 하단에 있는 빠른 레이블 선택 막대에서 레이블을 선택한 다음 레이블을 마우스 오른쪽 버튼으로 클릭하고 클래스 설정을 선택하여 링크 텍스트에 사용자 정의 스타일을 할당합니다.
6. 다른 링크 텍스트 스타일에 대한 방법도 동일하므로 추후 다시 소개하지 않겠습니다. 이 튜토리얼에서 친구들은 호버 상태를 정의하기 위한 자신만의 링크 스타일을 만들 수 있습니다. 더 이상 소개하지 않겠습니다. 정의하라는 메시지가 표시되면 [.t1:hover]를 직접 입력하면 됩니다.
2. 기본 링크 스타일
이 부분은 스타일 에디터의 Type 카테고리에서 완전히 완성하도록 하겠습니다. 자세한 생성 및 설정 방법은 생략하고 완성된 패널 다이어그램만 보여드리겠습니다.
1. 일반 링크. 그림 6에 표시된 대로;
일반 링크는 스타일 편집기의 카테고리 카테고리의 첫 번째 항목 유형에 설정됩니다. 색상은 링크 글꼴의 색상을 정의하고 장식은 링크의 밑줄 스타일을 정의하며 다음 카테고리로 구분됩니다.
밑줄: 밑줄 overline: 윗줄 통과: 취소선 깜박임: 깜박이는 선 없음: 밑줄 없음
이 섹션의 다른 여러 링크 스타일은 스트로크 조합을 변경하여 구현됩니다.
2. 그림 7과 같이 밑줄 친 링크가 없습니다.
3. 그림 8에 표시된 이중 밑줄 링크;
4. 그림 9에 표시된 취소선 링크
3. 고급 링크 스타일
다음으로 대체 링크 스타일 정의 방법을 소개하겠습니다. 이 방법은 주로 스타일 시트의 Border 속성을 사용하여 일반 링크의 밑줄을 대체합니다. Border에는 더 많은 제어 매개변수와 스타일이 있으므로 일부 특수 기능을 구현할 수 있습니다. 그림 10과 같이 아래 패널을 살펴보겠습니다.
테두리 옵션은 Width(선 너비), Color(선 색상), Style(선 유형)의 세 부분으로 구성되며, 각 부분은 서로 다른 테두리에 대해 서로 다른 매개 변수를 설정할 수 있습니다. 이는 일반적인 연결 선입니다.
링크 스타일을 정의하기 위해 이 방법을 사용하려면 필수 조건이 있다는 점을 모든 사람에게 상기시켜야 합니다. 그림 11에 표시된 대로 스타일의 Box 속성을 정의해야 합니다.
이는 Border가 스타일의 블록 요소이기 때문에 Border가 작동하려면 먼저 블록 요소를 정의해야 하기 때문입니다. 상자 옵션에서 너비 또는 높이를 임의로 정의하면 효과를 확인할 수 있습니다. 여기서는 높이를 0으로 정의했습니다. 어떤 종류의 효과를 얻을 수 있는지 살펴보겠습니다.
1. 대체 링크 스타일. 설정은 그림 12와 같습니다.
2. 밑줄 색상을 사용자 정의합니다. 밑줄과 텍스트에 대해 다른 색상을 정의할 수 있습니다. 이는 테두리 색상과 텍스트 색상이 정의되어 있는 한 일반 링크 텍스트에서는 얻을 수 없는 효과입니다. 그림 13과 같이 다르게 표시됩니다.
3. 밑줄 간격을 사용자 정의합니다. Padding 값을 변경하여 Box 카테고리에서 이러한 종류의 선의 거리를 설정할 수 있습니다. 이 예에서는 그림 14와 같이 Padding—Bottom을 5pix로 설정했습니다.
4. 스크라이빙 길이와 정렬을 사용자 정의합니다. 또한 그림 15와 같이 Box 범주를 열고 Width를 200으로 설정하고, Block 범주의 Text Align을 가운데 정렬로 설정합니다. 그림 16에서;
5. 이중 밑줄 효과를 사용자 정의합니다. 테두리의 스타일을 변경하여 밑줄 모양을 변경합니다. 스타일을 이중으로, 하단을 3pix로 설정하여 이중 밑줄 효과를 얻습니다. 도 17에 도시된 바와 같이;
4. 고급 링크 스타일
위에 소개된 기술을 결합하여 더 복잡한 텍스트 링크 스타일을 만들 수도 있습니다. 아래에서는 세 가지 예를 소개합니다.
1. 블록 링크를 정의합니다. 먼저 그림 18과 같이 링크에 배경색을 추가합니다.
그런 다음 그림 19와 같이 텍스트 링크에 네 개의 테두리를 추가하여 플랫 블록 텍스트 링크를 만듭니다.
2. 버튼과 같은 텍스트 링크를 정의하십시오. 그림 20과 같이 테두리 스타일을 변경하고 Border-Style을 시작으로 정의합니다.
버튼의 너비와 높이를 정의하려면 상자의 너비와 높이를 정의하세요. 그림 21과 같이 링크 텍스트와 버튼 사이에 2픽스 간격을 만들려면 패딩을 2픽스로 정의하세요.
3. 특수 효과 텍스트 링크를 정의합니다. CSS 스타일 시트에는 특수 효과 필터 세트도 포함되어 있으며 필터를 이전 매개변수와 결합하여 특수 링크 스타일을 만들 수 있습니다. 이 예에서는 테두리 효과와 함께 흐림 필터를 사용하여 텍스트 링크를 만들었습니다. 도 22에 도시된 바와 같이;
4. 정적 배경 전환 효과를 정의합니다. 이 예제는 링크 텍스트의 일반 상태와 호버 상태에 대해 서로 다른 배경 이미지를 설정하여 배경 전환 효과를 구현하는 것입니다. 아래 그림을 참조하세요:
5. 동적 배경 전환의 효과. 이 효과는 동적 Gif 이미지 배경이 호버 상태에 정의된다는 점을 제외하면 기본적으로 위의 예와 동일합니다. 그리고 이 그림에는 루프를 한 번으로 설정하고 마지막에 프레임을 추가하고 프레임 시간을 10000과 같이 더 큰 값으로 설정하는 약간의 기술이 필요합니다. 이를 통해 애니메이션이 한쪽에 대해 실행된 다음 중지될 수 있습니다. 효과 실행 속도를 향상시키려면 Dreamweaver에 /doc/webpage/images/images 미리 로드 비헤이비어를 추가해야 합니다. 이를 위해서는 그림과 같이 동작 패널을 열고 Preload /doc/webpage/images/images 동작을 추가해야 합니다.
아래와 같이 마지막 두 개의 링크 스타일에 필요한 네 개의 이미지를 모두 미리 로드할 수 있습니다.
5. 요약
다양한 링크 스타일을 소개할 것이며 링크 텍스트의 호버 상태 설정과 함께 매우 아름다운 효과를 얻을 수 있습니다. 특정 페이지 탐색은 여기를 참조하세요 . 친구들이 위 내용을 기반으로 더 많은 링크 텍스트를 만들 수 있기를 바랍니다. 아이디어. 스타일 시트는 웹 페이지 제작에 있어 보물이 있는 빙산과 같습니다. 오늘날 우리는 빙산의 작은 구석만 발견했을 뿐이며 여러분이 발견하기를 기다리고 있습니다.