CSS를 사용하여 텍스트 속성을 동적으로 제어_CSS/HTML

이 글에서는 CSS를 사용하여 텍스트 속성을 동적으로 제어하는 ​​주제를 자세히 소개합니다. CSS의 속성값을 동적으로 변경하는 기능을 사용하여 텍스트의 여러 속성값을 정의하고, 그런 다음 이벤트를 사용하여 이벤트를 트리거합니다. 이벤트가 발생하면 예상된 목적을 달성하기 위해 텍스트 속성 값을 변경합니다.

CSS를 사용하여 쉽게 텍스트 속성을 동적으로 변경할 수 있으므로 동적으로 확대, 축소, 텍스트 색상 변경, 텍스트 배경, 문자 간격, 줄 간격을 변경하는 텍스트를 만들 수 있습니다. 기타 웹페이지 효과는 모두 귀하가 제어할 수 있습니다. 좀 신비롭지 않나요? 그것이 바로 그 방법입니다. 좀 복잡할 것 같죠? 아니요! 이 기사를 읽고 나면 그것이 매우 간단하다는 것을 알게 될 것입니다.
다음 예를 참조하세요.

1. 텍스트 크기를 동적으로 변경합니다.
이 예의 효과는 다음과 같습니다. 마우스가 이 조각 위에 있을 때. 텍스트가 커지면 텍스트가 커지고 마우스가 떠나면 원래 위치로 돌아갑니다.
제작 방법:
1. Dreamweaver3에서 CSS 패널을 사용하여 두 개의 CSS 클래스를 정의합니다. 하나는 "style1"로 정의되고 다른 하나는 "style2"로 정의됩니다. 글꼴 크기(12px). 획득한 CSS 코드는 다음과 같습니다:

드림위버를 사용하지 않는 네티즌들은 웹페이지 코드의
와

사이에 위 코드를 직접 복사하면 됩니다. 2. 이 텍스트의 태그에 다음 코드를 추가합니다. onmouseover="this.className=''style1''" onmouseout="this.className=''style2''". 이 시점에서 제작이 완료되었으며, 효과를 낼 수 있는 텍스트의 소스코드는 다음과 같습니다.

이 텍스트 위에 마우스를 올리면 텍스트가 커지고, 마우스가 멀어지면 작아집니다.
드림위버를 사용하지 않는 네티즌들은 코드를 위와 같이 변경하기만 하면 실제 효과를 미리 볼 수 있습니다.

2. 텍스트의 크기, 색상, 굵기를 동시에 동적으로 변경
이 예제의 효과는 다음과 같습니다. 마우스를 텍스트 위에 놓으면 크기가 변경됩니다. , 색상 및 텍스트의 굵기가 변경된 경우 마우스를 멀리 이동하면 원래 상태로 돌아갑니다. 이 예제의 제작 방법은 예제 1과 동일합니다. 유일한 차이점은 CSS에서 서로 다른 텍스트 속성을 정의하므로 제작 방법을 반복하지 않습니다.
과
사이에 추가된 CSS 코드는 다음과 같습니다.

제작이 완료되었습니다.

이 텍스트 위로 마우스를 이동하면 텍스트의 크기, 색상, 굵기가 변경되며, 마우스가 떠나면 원래 상태로 돌아갑니다.
3. 텍스트 일부의 배경을 동적으로 변경합니다.

이 예의 효과는 다음과 같습니다. 마우스를 특정 텍스트 줄 위로 이동하면 배경이 변경됩니다. 줄의 텍스트 일부가 변경됩니다. 우리 사업의 다른 배경은 변경되지 않습니다.

이 예와 위 예 사이에는 생성 방법에 몇 가지 변경 사항이 있습니다. 위 예에서는 전체 텍스트의 속성이 변경되므로 트리거 이벤트가 "P" 표시에 로드됩니다. 텍스트 부분의 배경색이 변경되므로 먼저 "Span" 태그를 사용하여 배경을 변경하려는 텍스트를 묶은 다음 트리거 이벤트를 "Span" 태그에 로드해야 합니다. 이 예에서 과

사이에 추가된 CSS 코드는 다음과 같습니다.

제작이 완료된 후 효과를 낼 수 있는 텍스트의 소스코드는 다음과 같습니다. 🎜>

이 텍스트 위에 마우스를 올리면 배경이 바뀌지만
이 줄의 다른 문단의 배경은 그대로 유지됩니다.
4. 하이퍼링크에 아이콘을 동적으로 추가합니다.

이 예의 효과는 다음과 같습니다. 마우스를 하이퍼링크 위로 이동하면 이미지가 하이퍼링크 왼쪽에 나타납니다. 마우스가 멀어지고 이미지가 사라집니다. 이번 예시의 제작 방법은 앞선 예시와 동일하며, 둘 다 텍스트의 배경을 변경하는 것인데, 제작 시 주의할 점이 몇 가지 있습니다. 1. CSS 배경, 이미지 배경 선택 및 설정 이미지 배경의 "반복" 매개변수를 설정할 때 "반복 없음"(타일링되지 않음)을 선택하세요.
2. 하이퍼링크를 설정할 때 이미지 위치를 예약하세요.
3. 트리거 이벤트가 하이퍼링크에 로드됩니다.
이 예에서 과 사이에 추가된 CSS 코드는 다음과 같습니다. 제작이 완료되고, 효과를 낼 수 있는 하이퍼링크는 소스 코드는 다음과 같습니다. 마우스를 위로 이동 텍스트의 CSS 속성을 동적으로 변경하여 다양한 특수 효과를 만들 수도 있지만 방법은 기본적으로 동일합니다. , 그래서 하나씩 예를 들어주지 않겠습니다. 방법을 익히고 나면 상상력을 발휘하여 만들 수 있습니다.