전단 기초 내용 독서 노트(一)

1.em와strong원소는 모두 강조를 나타내는데 차이점은 후자가 전자보다 강조 정도가 더 깊다는 데 있다.대부분의 브라우저에서 em 요소의 문자는 사체로 표시되고 strong 요소의 문자는 굵은 글씨체로 표시됩니다.양자를 함께 사용하면 굵은 사체다.단위의%, 백분수는 일반적으로 다른 수치의 상대값을 나타낸다. 이 기본값은 같은 원소의 다른 속성에 있을 수도 있고 조상 원소에 있을 수도 있다.예:

p#text{
    font-size:12px;
}
p#text{
    line-height:150%;
}

위의 줄 간격은 같은 원소의 font-size 속성에 대한 것이다.행 간격은 12*150% = 18px입니다.행 간격: 한 줄의 맨 끝과 다음 줄의 맨 끝의 거리.
2. 그룹 선택: 여러 요소에 동일한 CSS 스타일 지정

h1, h2, h3, p#title {
    font-size:14px;
}

공백은 후대 선택기입니다.하위 선택기(div>p)와 인접 형제 선택기(dt+dd)는 IE6에서 인식되지 않습니다.IE6 및 이전 버전에서는 속성 선택기가 지원되지 않습니다.최대 호환성을 얻기 위해서는 후대 선택부호를 최대한 사용해야 한다.
3. 다중class는 두 개의 클래스 선택기를 연결하여 이 클래스 이름을 동시에 포함하는 요소만 선택할 수 있습니다(클래스 이름의 순서는 제한되지 않습니다).그 중의 하나나 부분만 일치할 수 없습니다.링크

a.class1.class2{
  color:red;
}

위와 같이 일치하지 않음및, 그러나 일치할 수 있음.
주의: IE6 및 이전 버전은 다중class 지원 효과가 좋지 않습니다. 상기 예시된 선택은div.class1에 지불합니다.class2는 "class1 class2"의 a 요소만 일치해야 하지만, IE에서는 "class2"의 a 요소도 일치합니다.
4. HTML 문서에서 ID 선택기는 한 번만 사용할 수 있습니다.클래스 선택기와 달리 ID 선택기는 공백으로 구분된 단어 목록을 허용하지 않기 때문에 함께 사용할 수 없습니다.
5. 위조 요소 위조 요소는 (X) HTML 태그에 실제로 존재하지 않는 추상적인 요소입니다.예를 들어 표기 언어는 어떤 요소의 첫 문자나 첫 줄 내용에 접근할 수 있는 메커니즘이 없다.CSS 위조 요소는 이러한 가상 요소를 만들었는데 이런 가상 요소를 통해 그 스타일을 접근하고 제어할 수 있다.(1):first-line과:first-letter 위조 요소 사용:first-line 위조 요소 추가는 원소의 첫 줄에만 적용됩니다.이 요소는 블록 레벨(block), 인라인 블록(inline-block), 테이블 제목(table caption) 또는 테이블 셀(table cell)이어야 하며 추가되는 스타일 속성도 제한적입니다.

글꼴 속성(font)

색상(color)

배경 속성(background)

단어 간격(word-spacing)

자 간격(letter-spacing)

텍스트 장식(text-decoration)

수직 정렬(vertical-align)

텍스트 변형(text-transform)

줄 간격(line-height): p:first-line {font-size:130%;}:first-letter, 요소의 첫 문자.적용:first-letter 요소는 블록급 요소, 내연 요소, 목록 항목, 표 제목 또는 표의 칸이어야 합니다.퍼스트-line에 규정된 속성을 제외하고:퍼스트-letter는 다음과 같은 속성을 사용할 수 있습니다.

부동(float)

clear

채우기(padding)

베젤(border)

간격 (margin): p.text:first-letter{color:red;} 주의: IE6 및 이전 버전은 지원하지 않습니다:first-line과:first-letter 위조 요소.IE7과 Firefox의 디스플레이 결과에도 미세한 차이가 있습니다.(2):before와:after 위조 요소는 생성할 내용을 어디에 두었는지, 원소의 시작이나 끝 위치에 놓을 수 있는지 확인하는 데 사용된다.예:

p:before{
     content:"    ！";
}
p:after{
     content:"    。";
}
     ，  。

효과: 중요 알림!오늘 오후에 회의가 있어서 참가합니다.지각 금지.참고: IE는 before 및:after 유사 요소를 지원하지 않습니다.

전단 기초 내용 독서 노트(一)

좋은 웹페이지 즐겨찾기