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

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

零到壹度
零到壹度원래의
2018-03-19 10:41:171703검색

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

HTML 사용 방법

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

◆굵은 텍스트 코드: a4b561c25d9afb9ac8dc4d70affff419Hello0d36329ec37a2cc24d42c7229b69747a ◆이탤릭체 텍스트 코드: 5a8028ccc7a7e27417bff9f05adf5932Hello! 72ac96585ae54b6ae11f849d2649d9e6 ◆밑줄: 88f336217b3880082bb52d49b5de60a504e11139013d3ca73accef66348e2e58

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

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




다섯: 사진 링크 코드

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

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





6: 줄 바꿈 코드

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

Seven: 텍스트 이동을 위한 코드는
ed126914ed1419bab26abf7cf307b7b9Write text here7204e33a7a23f6efcc788532e245c31b

Eight: 사진 이동을 위한 코드
ed126914ed1419bab26abf7cf307b7b92b82ec4e0e7fae3886c96fb61ca8cb088a18fc35e9ede15d4bb8b3f744961cffefb0fdacd11a62eec252e69aeef9f0a7ed126914ed1419bab26abf7cf307b7b9
안에 있는 이미지 주소를 자신의 주소로 변경하세요. 이미지를 하나 더 추가하려면
8a18fc35e9ede15d4bb8b3f744961cff
이미지 주소를 직접 설정할 수 있습니다.

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

Ten: 웹사이트에 플래시 애니메이션을 삽입하는 코드는
ba557e97286b19d0ed2f6228691c5360 내부의 애니메이션 주소를 자신의 것으로 바꾸세요. 애니메이션 주소는 swf 형식으로 끝나야 합니다. 주의가 필요합니다.

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

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

Thirteen: 웹사이트를 열 때 팝업창 광고 만들기
e9dd83eff6e168a5619c7a596c9e4ead
var TimerID=1; .open('http://163.com'/;'','width=600,height=300,left=100,top=50')
2cacc6d41bbb37262a98f745aa00fbf0
http:// 163 내부 .com/ 미리 준비한 웹페이지입니다. 뒤에 있는 숫자는 크기와 위치를 조정하기 위한 것입니다. 직접 몇 번 시도해 볼 수 있습니다.

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


코드는 다음과 같습니다. 6c04bd5ca3fcae76e30b72ad730ca86d36cc49f0c466276486e50c850b7e4956


<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: 다른 사람이 웹페이지 코드를 복사하는 것을 금지합니다.

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

d88ff572ed3a5c81064d61404b99303f093fd97c861cbe789149c399ad2b038c



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

1. STYLE 속성을 사용합니다

개별 구성 요소 태그에 STYLE 속성을 직접 추가하고 d0685c07c9309dd8c2a20f19c827c6ea 이 사용법의 장점은 각 태그에 스타일을 유연하게 적용할 수 있다는 점이지만, 단점은 전체 문서에 "일치"가 없다는 것입니다.


2. STYLE 태그를 사용하세요

812f7be0e9ba70c6f2a66273c3c04692...a2d87b9af1e305217ec9648d1e8a0a47 태그에 스타일 규칙을 작성하세요.
5be912364e4d35410960d652a0dd27f8

b6a0a21aaf88ef04184b73eb796303b8
a2d87b9af1e305217ec9648d1e8a0a47
예:

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

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


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


4. @import를 사용하여 소개

는 LINK 사용법과 매우 유사하지만 812f7be0e9ba70c6f2a66273c3c04692...a2d87b9af1e305217ec9648d1e8a0a47에 배치해야 합니다.
5be912364e4d35410960d652a0dd27f8
4502d07bc6c156a3e256db2367048aba
a2d87b9af1e305217ec9648d1e8a0a47 예:
5be912364e4d35410960d652a0dd27f8
e7627d11454696159e6a5f645f025333
a2d87b9af1e305217ec9648d1e8a0a47
줄 끝의 세미콜론은 반드시 필요합니다!

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

예: b27bcdbe9c6b3472c34624b8a1021df3Webpage Teaching Network54bdf357c58b8a65c66d7c19c8e4d114

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.