태그에 CSS 스타일을 작성하는 방법
- 青灯夜游원래의
- 2020-12-16 17:02:258374검색
방법: 태그의 스타일 속성에 CSS 스타일을 직접 작성하면 됩니다. 스타일 속성은 요소의 인라인 스타일을 지정할 수 있습니다. 구문은 "
>입니다. ;".
이 튜토리얼의 운영 환경: windows7 시스템, css3+html5 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.
(추천 튜토리얼: html 튜토리얼, CSS 동영상 튜토리얼)
CSS 스타일 코드는 .css 형식의 텍스트 파일로 저장하거나 웹 페이지의
인라인 스타일은 CSS 스타일을 코드 줄 내의 태그, 일반적으로 태그의 스타일 속성에 직접 삽입하는 방식이므로 가장 직접적인 방법이며, 또한 최소한의 수정이 필요합니다.
【예제 1】문단,
태그, 태그, 태그에 각각 CSS 인라인 스타일을 적용합니다. <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>行内样式</title>
</head>
<body>
<p style="background-color: #999900">行内元素，控制段落-1</p>
<h2 style="background-color: #FF6633">行内元素，h2 标题元素</h2>
<p style="background-color: #999900">行内元素，控制段落-2</p>
<strong style="font-size:30px;">行内元素，strong 比 em 效果要强</strong>
<div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">行内元素，div 块级元素</div>
<em style="font-size:2em;">行内元素，em 强调</em>
</body>
</html>페이지 데모 효과는 아래와 같습니다.
위 예에서 인라인 스타일은 HTML 요소의 스타일 속성에 따라 결정됩니다. 즉, CSS 코드는 내에 배치될 수 있습니다. 따옴표 및 여러 CSS 속성 값은 예에서
태그 블록 수준 요소 <div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">行内元素，div 块级元素 </div>
를 작성하는 것과 같이 세미콜론으로 구분하여 HTML 구조와 스타일을 함께 작성하는 과거 방식을 포기합니다. , 즉
입니다. 문단
태그는 배경색을 갈색(배경색: #999900)으로 설정하고, 제목
태그는 배경색을 빨간색(배경색: #FF6633)으로 설정합니다.
라벨의 글꼴을 30픽셀(글꼴 크기:30px;)로 설정하고, 라벨의 높이와 줄 높이를 30픽셀로 설정하고, 배경색과 색상(배경- color: #66CC99; color: #993300; height: 30px; line-height: 30px;), 태그는 글꼴 크기를 상대 단위(font-size: 2em;)로 설정합니다. 두 개의 단락
태그는 내용은 다르지만 동일한 배경색 설정을 사용하지만 배경색 배경색을 설정하려면 CSS 인라인 속성을 두 번 추가합니다: #999900.
태그, 태그는 CSS 속성을 설정하며, 태그는 인라인 요소입니다. , 해당 CSS 속성이 브라우저에서 지원되도록 설정합니다. 따라서 CSS 인라인 스타일은 인라인 요소 또는 블록 수준 요소에 관계없이 유효합니다. 간단히 말하면 인라인 요소는 작성이 간단하지만 예제를 통해 다음과 같은 결함을 발견할 수 있습니다.
스타일 속성을 추가하려면 모든 태그에 스타일을 지정해야 합니다.
차이점은 과거에는 웹 페이지 제작자가 HTML 태그와 스타일을 함께 혼합했다는 것입니다. 이제 인라인 스타일은 CSS를 통해 작성되지만 과거에는 스타일 효과를 얻기 위해 HTML 태그 속성이 사용되었습니다. , 결과는 일관됩니다. 나중에 유지 관리 비용이 높습니다. 즉, 페이지를 수정할 때 웹 사이트의 각 페이지를 하나씩 열고 하나씩 수정해야 하며 CSS의 역할을 전혀 볼 수 없습니다. .
너무 많은 인라인 스타일을 추가하면 페이지가 커지게 됩니다. 이런 식으로 포털을 작성하면 서버 대역폭과 트래픽이 낭비됩니다.
인터넷의 일부 웹 페이지에서는 소스 파일을 보면 이러한 작성 방식을 볼 수 있습니다. 웹 페이지의 일부만 이렇게 작성되어 있지만 상황에 따라 구분할 필요가 있습니다.
만약 웹 페이지 작성자가 이러한 인라인 스타일을 작성하면 이전에 작성된 스타일의 충돌을 고려하지 않고 현재 스타일을 빠르게 변경할 수 있습니다.
웹 페이지에 이런 상황이 존재한다면 백그라운드 편집 중에 편집기에서 생성한 스타일입니다. 또는 배경이 완전히 개발되지 않았으며 편집자를 위해 개발해야 합니다. 색상, 두께, 배경색, 기울기 및 기타 효과를 편집기를 통해 직접 변경하는 대신 스타일 옵션을 선택하십시오.
더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 학습을 방문하세요! !
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>行内样式</title>
</head>
<body>
<p style="background-color: #999900">行内元素，控制段落-1</p>
<h2 style="background-color: #FF6633">行内元素，h2 标题元素</h2>
<p style="background-color: #999900">行内元素，控制段落-2</p>
<strong style="font-size:30px;">行内元素，strong 比 em 效果要强</strong>
<div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">行内元素，div 块级元素</div>
<em style="font-size:2em;">行内元素，em 强调</em>
</body>
</html>페이지 데모 효과는 아래와 같습니다.
위 예에서 인라인 스타일은 HTML 요소의 스타일 속성에 따라 결정됩니다. 즉, CSS 코드는 내에 배치될 수 있습니다. 따옴표 및 여러 CSS 속성 값은 예에서
<div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">行内元素，div 块级元素 </div>
를 작성하는 것과 같이 세미콜론으로 구분하여 HTML 구조와 스타일을 함께 작성하는 과거 방식을 포기합니다. , 즉
입니다.문단
태그는 배경색을 갈색(배경색: #999900)으로 설정하고, 제목
태그는 배경색을 빨간색(배경색: #FF6633)으로 설정합니다.
라벨의 글꼴을 30픽셀(글꼴 크기:30px;)로 설정하고, 두 개의 단락 태그는 내용은 다르지만 동일한 배경색 설정을 사용하지만 배경색 배경색을 설정하려면 CSS 인라인 속성을 두 번 추가합니다: #999900. 간단히 말하면 인라인 요소는 작성이 간단하지만 예제를 통해 다음과 같은 결함을 발견할 수 있습니다. 스타일 속성을 추가하려면 모든 태그에 스타일을 지정해야 합니다. 차이점은 과거에는 웹 페이지 제작자가 HTML 태그와 스타일을 함께 혼합했다는 것입니다. 이제 인라인 스타일은 CSS를 통해 작성되지만 과거에는 스타일 효과를 얻기 위해 HTML 태그 속성이 사용되었습니다. , 결과는 일관됩니다. 나중에 유지 관리 비용이 높습니다. 즉, 페이지를 수정할 때 웹 사이트의 각 페이지를 하나씩 열고 하나씩 수정해야 하며 CSS의 역할을 전혀 볼 수 없습니다. . 너무 많은 인라인 스타일을 추가하면 페이지가 커지게 됩니다. 이런 식으로 포털을 작성하면 서버 대역폭과 트래픽이 낭비됩니다. 인터넷의 일부 웹 페이지에서는 소스 파일을 보면 이러한 작성 방식을 볼 수 있습니다. 웹 페이지의 일부만 이렇게 작성되어 있지만 상황에 따라 구분할 필요가 있습니다. 만약 웹 페이지 작성자가 이러한 인라인 스타일을 작성하면 이전에 작성된 스타일의 충돌을 고려하지 않고 현재 스타일을 빠르게 변경할 수 있습니다. 웹 페이지에 이런 상황이 존재한다면 백그라운드 편집 중에 편집기에서 생성한 스타일입니다. 또는 배경이 완전히 개발되지 않았으며 편집자를 위해 개발해야 합니다. 색상, 두께, 배경색, 기울기 및 기타 효과를 편집기를 통해 직접 변경하는 대신 스타일 옵션을 선택하십시오. 더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 학습을 방문하세요! ! 태그,
위 내용은 태그에 CSS 스타일을 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!