CSS 사용법 학습 요약_경험 교류

다음과 같이 계단식 인식이 가능하므로 클래스를 최대한 적게 사용하십시오. .News h3 h3에 클래스를 추가하지 않고

3. 기존에 구별할 요소가 없으면 div

• Home

회사소개

는

Home
으로 변경 가능
회사 소개

4. 선택기
p a h1 유형 선택기
Li a {text-꾸밈:none} 하위 선택기
*{ padding:0; } 범용 선택기, 페이지의 모든 요소.
5. 위치 지정
상대 위치 지정은 표시되어야 하는 위치를 기준으로 합니다.
절대 위치 지정은 가장 가까운 위치에 있는 조상 요소를 기준으로 합니다(실험 결과 조상 요소를 상대 위치 지정으로 설정해야 한다는 사실이 밝혀졌습니다).
부동 상자는 가장자리가 포함 상자 또는 다른 포함 상자의 가장자리에 닿을 때까지 왼쪽 및 오른쪽으로 이동할 수 있습니다. 부동 상자는 문서의 일반적인 흐름에 있지 않기 때문에 문서의 일반적인 흐름에 있는 상자는 마치 플로팅박스가 존재하지 않습니다.
요약: div가 플로팅되면 다음 div는 첫 번째 div가 존재하지 않는 것처럼 처리됩니다. 떠다니는 상자나 컨테이너가 있는 상자를 만났을 때를 알아보세요.
Clear: right 플로팅 박스의 오른쪽이 사용 가능
Clear: left 플로팅 박스의 왼쪽이 사용 가능
Clear: 양쪽 플로팅 박스의 양쪽이 사용 불가능
overflow 적용 값이 Hidden 또는 auto인 속성은 포함된 모든 부동 요소를 자동으로 정리합니다.
6. 그라데이션 배경
가로 타일로 된 길지만 좁은 그라데이션 이미지 만들기
Body
{
배경: #ccc url (gradient.gif)peat-x; 🎜>하지만 이미지 페이지의 높이가 얼마나 될지 예측하기 어렵기 때문에 배경색과 조합하면 됩니다. 둘 사이의 색상 차이가 매우 가까우면 색상이 나옵니다. 보이지 않을 것입니다.
예: 각 제목에 아이콘 추가
H1
{
Padding-left:30px
배경: url(/images/bullet.gif) no-repeat left center; >}
7.
외부 사이트 링크, 이메일, 다운로드 등
.external
{
배경: URL(/images/externalLink. gif) no-repeat right top;
Padding-right:10px;}
8. 테이블별 요소
1) 요약 및 캡션
요약 속성은 테이블 라벨에 적용할 수 있습니다. 테이블 내용 설명
Caption 테이블 제목
2) thead tbody tfoot
즉, thead 요소에 모든 열 헤더를 넣을 수 있습니다. 하나 이상의 tbody 요소는 하나의 thead와 tfoot만 사용할 수 있지만 여러 개의 tbody를 사용할 수 있습니다.
9. 테이블의 테두리 모델
1) 개별 모델: 각 셀 주위에 테두리가 있습니다. 2) 오버레이 모델: Cell Grid 공유 테두리
10. 양식 레이아웃
Fieldset은 테두리를 닫습니다. 하위 버전에서는 지원하지 않지만
Filedset
{
Border: solid 0을 사용할 수 있습니다. transparent;
}
11 . 양식 레이블 레이블
암시적 모드:
이메일


표시 모드:

이메일
형식에 있든 문단을 사용하는 것이 논란의 여지가 있습니다.
12. 드라마를 디자인해보자 방법 1:




#wrapper
{

너비: 720px;

Margin:0 auto;
} 그러나 이 방법은 IE6 이하에서는 일반적이지 않습니다
방법 2(두 요소를 기준으로 결합 필요): 자동 공백 사용
Body
{
텍스트 정렬:center;
최소 너비:
}
#wrapper
{
폭: 720px
여백: 0
텍스트 정렬: 왼쪽;
}
방법 3: 위치 지정 및 음수 공백을 사용하여 변경
#wrapper
{
Width:720px
위치: 상대
왼쪽: 50%;
여백-왼쪽: -360;
}
13: 유동적 레이아웃: 모든 크기가 픽셀이 아닌 백분율로 설정됩니다.
장점: 브라우저 크기에 따라 너비가 변경됩니다. .
단점: 작아질수록 행이 좁아집니다.
해결책: 최소 너비를 픽셀 및 em으로 설정
14: 유연한 레이아웃: 글꼴 크기가 변경되면 줄도 변경됩니다(단위는 em)
유연한 레이아웃은 글꼴을 기준으로 요소의 너비를 설정합니다. 크기.
1em=10px;
대부분의 브라우저의 기본 글꼴 크기는 16px이며, 10은 16픽셀의 62.5%에 해당합니다.
Body
{
Font-size:62.5%; >}
#wrapper
{
너비:72em;
여백:0 자동
텍스트 정렬: 왼쪽
}
#mainNav
>너비: 18em;
Float:right;
}
15. 탄력적 유동 레이아웃: 너비를 em으로 설정하고 최대 너비를 백분율로 설정합니다.
#wrapper
{
너비:72em;
최대 너비: 100%;
여백:0
텍스트 정렬:
}
16: 유동적이고 탄력있는 이미지
이미지 변형 문제: 배경에 넣어보세요
17. Asterisk HTML 트릭
* html a:hover
{
Body-style: solid
}
IE6 이하에만 유용함
18: !import 및 밑줄 트릭
# nav
{
위치: 고정 !중요;
위치: 정적
}
또는
#nav
{
위치:
_위치: static;
}
19개, 여러 열

Nav 필요 구분 색상과 디스플레이 높이를 100%로 설정하면 Nav와 같은 너비로 그림을 만들고, 메인에 배경 이미지를 설정하고, 세로 방향으로 타일을 붙일 수 있습니다.