> 웹 프론트엔드 > HTML 튜토리얼 > HTML과 CSS를 사용하는 여러 가지 방법

HTML과 CSS를 사용하는 여러 가지 방법

零到壹度
풀어 주다: 2018-03-19 10:41:17
원래의
1754명이 탐색했습니다.

이 글은 주로 HTML과 CSS를 사용하는 여러 가지 방법을 소개합니다. 편집자는 이것이 꽤 좋다고 생각합니다. 이제 여러분과 공유하고 참고할 것입니다. 편집자를 따라가서 모두에게 도움이 되기를 바랍니다.

HTML 사용 방법

1: 색상 코드
특정 색상을 사용하려면 해당 색상 값을 가져오세요. 예를 들어 일부 텍스트의 색상을 변경하려면 다음 코드를 사용할 수 있습니다. # 기호 뒤의 코드를 변경하여 색상을 변경하세요 : 텍스트 추가 굵은 이탤릭체 코드

◆굵은 텍스트 코드: Hello ◆이탤릭체 텍스트 코드: Hello! ◆밑줄:

3: 텍스트 링크 코드
특정 텍스트를 클릭하면 다른 웹페이지로 연결됩니다. . 코드는 다음과 같습니다. 공유 공간 이 텍스트를 클릭하고 창을 다시 열면 코드는 공유 공간

넷: 홈페이지에 사진을 올리는 코드
괜찮은 사진을 보고 홈페이지에 올리고 싶다면 코드는 이렇습니다.
다음 숫자는 이미지 크기를 조정합니다.




다섯: 사진 링크 코드

사진을 클릭하여 홈페이지를 열면 링크 코드는 다음과 같습니다.

사진을 클릭하시면 홈페이지 링크가 열립니다. 창을 다시 엽니다. 코드는 다음과 같습니다. 위의 숫자로 이미지 크기를 조정할 수 있습니다.





6: 줄 바꿈 코드

줄을 변경하려면 Enter 키를 사용하세요. 줄을 변경하려는 위치에
단락이 명확합니다.

Seven: 텍스트 이동을 위한 코드는
Write text here

Eight: 사진 이동을 위한 코드

안에 있는 이미지 주소를 자신의 주소로 변경하세요. 이미지를 하나 더 추가하려면

이미지 주소를 직접 설정할 수 있습니다.

Nine: 배경 음악 코드
웹사이트에 멋진 배경 음악을 넣으려면 코드는 다음과 같습니다: ;bgsound src="http://www.midifan.com/midi/music.ASP?id=3073";loop=30> 내부의 배경음악 주소를 직접 교체할 수 있습니다.
첫 번째는 음악 주소로 보통 mid나 mp3 형식으로 끝납니다. 두 번째 숫자는 재생 횟수입니다.
http://www.midifan.com/midi/
이 웹사이트는 배경음악이 좋습니다

Ten: 웹사이트에 플래시 애니메이션을 삽입하는 코드는
src=" http ://flash.shangdu.com/view/2/fff.swf";> 내부의 애니메이션 주소를 자신의 것으로 바꾸세요. 애니메이션 주소는 swf 형식으로 끝나야 합니다. 주의가 필요합니다.

Eleven: 웹사이트를 열 때 나타나는 웰컴 코드


Twelve: 웹사이트를 닫을 때 나타나는 코드


Thirteen: 웹사이트를 열 때 팝업창 광고 만들기

http:// 163 내부 .com/ 미리 준비한 웹페이지입니다. 뒤에 있는 숫자는 크기와 위치를 조정하기 위한 것입니다. 직접 몇 번 시도해 볼 수 있습니다.

Fourteen: 마우스 센서 글꼴이 빨간색으로 변합니다


코드는 다음과 같습니다.


<span style="font-size: 16px;"><STYLE type=text/css>TD { <br/>FONT-SIZE: 12px <br/>} <br/>BODY { <br/>FONT-SIZE: 12px <br/>} <br/>INPUT { <br/>FONT-SIZE: 12px <br/>} <br/>A:link { <br/>COLOR: #000000; TEXT-DECORATION: none <br/>} <br/>A:visited { <br/>COLOR: #000000; TEXT-DECORATION: none <br/>} <br/>A:active { <br/>COLOR: blue; TEXT-DECORATION: none <br/>} <br/>A:hover { <br/>COLOR: red; TEXT-DECORATION: underline <br/>} .so { <br/>BORDER-RIGHT: 1px ridge; BORDER-TOP: #ffffff 1px ridge; FONT-SIZE: 12px; BORDER-LEFT: #ffffff 1px ridge; BORDER-BOTTOM: 1px ridge; BACKGROUND-COLOR: #cccccc <br/>} <br/></STYLE> <br/></span>
로그인 후 복사

Fifteen: 다른 사람이 웹페이지 코드를 복사하는 것을 금지합니다.


Sixteen: 다른 웹 페이지를 자신의 웹 페이지에 삽입하는 코드:





CSS 사용 웹 페이지의 스타일시트 5가지 방법

1. STYLE 속성을 사용합니다

개별 구성 요소 태그에 STYLE 속성을 직접 추가하고

이 사용법의 장점은 각 태그에 스타일을 유연하게 적용할 수 있다는 점이지만, 단점은 전체 문서에 "일치"가 없다는 것입니다.


2. STYLE 태그를 사용하세요

태그에 스타일 규칙을 작성하세요.

예:

<STYLE TYPE="text/css">
<!--
BODY {
  color: BLUE;
  background: #FFFFCC;
  font-size: 9pt}
TD, P {
  COLOR: GREEN;
  font-size: 9pt}
-->
</STYLE>
로그인 후 복사

일반적으로 전체 구조는 웹페이지의 이 사용법의 장점은 선언된 구성 요소가 있는 한 전체 문서의 통일성에 있습니다. 단점은 개별 구성 요소의 유연성이 부족하다는 것입니다.

3. 링크 태그를 사용하세요


.css 스타일 파일에 스타일 규칙을 작성하고 태그를 사용하여 가져옵니다.
스타일 규칙을 example.css 파일로 저장한다고 가정하면, 웹페이지에

만 추가하면 됩니다. 스타일 파일에 지정된 스타일입니다. LINK 태그는 일반적으로 웹페이지의 섹션에 작성됩니다. 이 사용법의 장점은 동일한 스타일 규칙이 동일한 스타일 파일에 적용되는 여러 문서를 할당할 수 있다는 것입니다. 단점은 개별 파일이나 구성 요소의 유연성이 부족하다는 것입니다.


4. @import를 사용하여 소개

는 LINK 사용법과 매우 유사하지만 에 배치해야 합니다.
예:

줄 끝의 세미콜론은 반드시 필요합니다!

5. 태그를 사용하여 스타일을 소개하세요.

예: Webpage Teaching Network

위 내용은 HTML과 CSS를 사용하는 여러 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿