CSS 스타일 우선 순위
높은 -----------------> 낮은
CSS는 콘텐츠 속성
일반적으로 콘텐츠 속성 : 전 : 의사 요소 선택기는 상기 생성 된 콘텐츠를 삽입와 함께 사용 후
| 재산 | 의미 |
|---|---|
| :전에 | 전면 삽입 |
| :후 | 다음에 삽입되어 |
예 :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Framaeset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<title>Web技术社区</title>
<style>
h1:before{
content: "Hello";
}
h2:after{
content: url("https://www.w3school.com.cn/i/html5_new_note.png");
}
</style>
</head>
<body>
<h1>World</h1>
<h2>HTML</h2>
</body>
</html>
결과
를 사용하여 오버 플로우 속성
| 값 | 의미 |
|---|---|
| 명백한 | 기본 값 |
| 자동차 | 내용이 트리밍되어있는 경우 자동으로 스크롤 막대를 추가 |
| 숨겨진 | 그것은 자동으로 여분의 콘텐츠를 차단하고, 클리핑 내용이 표시되지 않습니다 |
| 스크롤 | 스크롤 막대를 표시하도록 설정되어 있습니다 |
<p class="abc" style="width:200px;height:50px ;overflow:visible">
较高级复杂的劳动，<br>是这样一种劳动力的表现，这种劳动力比较普通。。。。。。
</p>
<br>
<hr>
<p class="abc" style="width:200px;height:50px ;overflow:auto">
较高级复杂的劳动，<br>是这样一种劳动力的表现，这种劳动力比较普通。。。。。。
</p>
<br>
<hr>
<p class="abc" style="width:200px;height:50px ;overflow:hidden">
较高级复杂的劳动，<br>是这样一种劳动力的表现，这种劳动力比较普通。。。。。。
</p>
<br>
<hr>
<p class="abc" style="width:200px;height:50px ;overflow:scroll">
较高级复杂的劳动，<br>是这样一种劳动力的表现，这种劳动力比较普通。。。。。。
</p>
<hr>
결과 :
디스플레이 등록
어떻게 디스플레이 요소는 세트 표시하는 데 사용됩니다
- 이 값은 일반적으로 미리 만들어진 동적 표시에 이용 닫기 요소에 없음을 확인하는 데 사용되지
- 이 값은 블록의 블록 레벨 요소 전과 줄 바꿈이 폭 ,,되고 높이가 낮은 오른쪽에 제공하고 내측 및 외측 여유를 둘 수있다 후에 소자로서 도시
- 이 값은 세트 높지 않을 수 인라인 인라인 요소 전과 후의 소자 줄 바꿈을 표시하고, 내부 및 외부 가장자리 폭
- 특성을 유지하는 라인 피드 값 인라인 아니지만 인라인 블록 행의 값은 속성 설정 될 수 블록 값, 폭과 높이 특성의 양쪽의 값을 가지는 블록 요소 내에있는 것으로 간주
- 상속은 디스플레이 설정의 부모 요소를 상속
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Framaeset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
<title>Web技术社区</title>
<style>
span.inline_box{
border: solid 1px #1fa8b4;
display: inline-block;
width: 100px;
text-align: center;
}
.inline{
display: inline;
}
</style>
</head>
<body>
<p style="display: none" id="demo">大家好。。。。。</p>
<button onclick="document.getElementById('demo').style.display=''">显示</button>
<button onclick="document.getElementById('demo').style.display='none'">隐藏</button>
<p><span style="display: block">hello</span> word</p>
<div class="inline">hello </div>
<div class="inline">world</div>
<br>
<span class="inline_box"> HTML</span>
<span class="inline_box"> CSS</span>
<span class="inline_box"> JQuery</span>
</body>
</html>
결과 :
