CSS에서 상속이란 무엇입니까? CSS를 사용하는 방법?
- 青灯夜游앞으로
- 2018-10-20 16:43:262658검색
이 글의 내용은 CSS 상속이 무엇인지 소개하는 것입니다. CSS를 사용하는 방법? 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
CSS의 상속
CSS의 상속은 태그가 중첩 관계를 가질 때 내부 태그가 자동으로 외부 태그와 충돌하지 않는 스타일을 갖는 속성을 나타냅니다.
CSS의 일부 속성은 상속이 허용되지 않습니다. 예를 들어 테두리 속성에는 상속이 없습니다. 패딩, 여백, 배경 등과 같은 다중 테두리 클래스의 속성은 상속되지 않습니다.
예:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta content="text/css" charset="GB2312">
<title>css使用实例</title>
<style type="text/css" >
div{
color: red;
font-size: 10pt;
font-weight: bold;
font-family: 黑体;
border: 1px solid #000;
}
p{
color: blue;
font-size: 12pt;
font-style: italic;
}
em{
color: green;
}
</style>
</head>
<body>
<p>这是蓝色，12pt，斜体，默认宋体</p>
<div>
<p>这是蓝色，12pt，斜体加粗，黑体</p>
</div>
<br>
<div>这是红色，10pt，加粗，黑体，有边框</div><br>
<div>
这是红色，10pt，黑体<br>
<em>我是em元素的文字，绿色文字周边无边框</em>
</div>
</body>
</html>
CSS 사용 방법
HTML 페이지에서 CSS를 사용하는 세 가지 주요 방법은 인라인, 내부 스타일 시트, 그리고 태그를 사용하여 외부 스타일 시트에 연결하는 것입니다.
1. 인라인 방식(CSS 코드는 HTML 태그로 작성됩니다.)
예:
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>内嵌方式</title> </head> <body> <p align="center" style="color: red;">内嵌方式</p> </body></html>
2. 내부 스타일 시트
CSS 코드는 HTML 문서로 작성됩니다. 내부 스타일 시트는 태그에 기록되지 않지만 특정 형식을 갖습니다.
예:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>内部样式表示例</title>
<style type="text/css">
p{
width: 100px;
height: 40px;
color: yellow;
background-color: red;
text-align: center;
}
</style>
</head>
<body>
<p>内部样式表</p>
</body>
</html>
3. 외부 스타일 시트를 연결하려면 태그를 사용하세요.
특정 형식이 있다는 점에서 내부 스타일 시트와 동일하지만 차이점은 CSS 코드가 HTML 문서 외부에 작성된다는 것입니다. .css 파일이며, 사용 시 인용이 필요합니다.
예:
html1.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>外部样式表示例</title> <link rel="stylesheet" href="css/css1.css" /> </head> <body> <p>外部样式表</p> </body> </html>
CSS1.css
p {
width: 100px;
height: 40px;
color: yellow;
background-color: red;
text-align: center;
}
요약: 위 내용은 이 글의 전체 내용입니다. 모든 사람의 학습에 도움이 되기를 바랍니다. 더 많은 관련 튜토리얼을 보려면 CSS 기본 비디오 튜토리얼 , CSS3 비디오 튜토리얼 , bootstrap 비디오 튜토리얼 을 방문하세요!
위 내용은 CSS에서 상속이란 무엇입니까? CSS를 사용하는 방법?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!