CSS 입문 강좌 편

2850 단어 CSS 입문 강좌 편
CSS 는 Cascading 입 니 다. Style Sheets 의 줄 임 말.웹 문서 에 스타일 을 추가 하 는 간단 한 메커니즘 으로 표현 층 에 속 하 는 레이아웃 언어 입 니 다.1.기본 문법 규범 은 전형 적 인 CSS 의 문 구 를 분석한다.p {COLOR:#FF0000;BACKGROUND:#FFFFFF}  그 중에서'p'는'선택 기'(selectors)라 고 부 르 며'p'에 스타일 을 정의 해 야 한 다 는 것 을 가 리 킵 니 다.스타일 설명 은 괄호'{}'에 적 혀 있 습 니 다.COLOR 와 BACKGROUND 는'속성'(property)이 라 고 부 르 며,서로 다른 속성 간 에 분점 을 사용한다".구분자FF 0000"과"\#FFFF"는 속성의 값(value)입 니 다.2.색상 값 색상 값 은 RGB 값 으로 쓸 수 있 습 니 다.예 를 들 어:color : rgb(255,0,0)도 16 진법 으로 쓸 수 있 습 니 다.위의 예 와 같이 color:\#FF 0000.16 진법 값 이 쌍 으로 중복 된다 면 간략하게 쓸 수 있 고 효과 가 같 습 니 다.예 를 들 어\#FF 0000 은\#F00 으로 쓸 수 있 습 니 다.그러나 중복 되 지 않 으 면 간략하게 쓸 수 없습니다.예 를 들 어\#FC1A1B 는 6 자 를 채 워 야 합 니 다.3.글꼴 웹 표준 을 정의 하려 면 다음 과 같은 글꼴 정의 방법 을 추천 합 니 다:body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 송 체,sans-serif; }  글꼴 은 열 거 된 순서에 따라 선택 합 니 다.사용자 의 컴퓨터 에 Lucida 가 포함 되 어 있다 면 Grande 글꼴,문 서 는 Lucida 로 지 정 됩 니 다. Grande。없 으 면 Verdana 글꼴 로 지 정 됩 니 다.Verdana 가 없 으 면 Lucida 글꼴 로 지 정 됩 니 다.  Lucida Grande 글꼴 은 Mac 에 적합 합 니 다. OS X;  Verdana 글꼴 은 모든 Windows 시스템 에 적합 합 니 다.  Lucida 는 UNIX 사용자 에 게 적합 합 니 다.  "송 체 는 중국어 간 체 사용자 에 게 적합 하 다.  열 거 된 글꼴 을 사용 할 수 없다 면 기본 sans-serif 글꼴 은 호출 을 보장 합 니 다.  4.그룹 선택 기 는 몇 개의 요소 스타일 속성 이 같 을 때 하나의 성명 을 공동으로 호출 할 수 있 습 니 다.요소 간 에 쉼표 로 구 분 됩 니 다.: p, td, li { font-size : 12px ; }  5.파생 선택 기 는 파생 선택 기 를 사용 하여 요소 의 하위 요소 에 스타일 을 정의 할 수 있 습 니 다.예 를 들 어:li strong { font-style : italic; font-weight : normal;}  바로 li 아래 의 하위 요소 인 strong 에 게 기울 임 꼴 이 굵 지 않 은 스타일 을 정의 하 는 것 입 니 다.6.id 선택 기 는 CSS 레이아웃 으로 주로 층'div'로 이 루어 지고 div 의 스타일 은'id 선택 기'로 정의 합 니 다.예 를 들 어 우 리 는 먼저 층 을 정의 합 니 다그리고 스타일 시트 에서 이렇게 정의 합 니 다:\#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}  그 중에서"menubar"는 당신 이 정의 한 id 이름 입 니 다.앞 에'\#'번 호 를 붙 이 는 것 을 주의 하 세 요.id 선택 기 역시 파생 을 지원 합 니 다.예 를 들 어\#menubar p { text-align : right; margin-top : 10px; }  이 방법 은 주로 층 과 비교적 복잡 하고 여러 파생 된 요 소 를 정의 하 는 데 쓰 인 다.6.카 테 고리 선택 기 는 CSS 에서 하나의 점 으로 시작 하여 카 테 고리 선택 기 정 의 를 표시 합 니 다.예 를 들 어:14px {color : #f60 ;font-size:14px ;}  페이지 에서 class="클래스 이름"방법 으로 호출:14px 크기 의 글꼴  이 방법 은 비교적 간단 하고 유연 하여 수시로 페이지 의 필요 에 따라 새로 만 들 고 삭제 할 수 있다.7.링크 를 정의 하 는 스타일 CSS 에서 네 개의 위조 클래스 로 링크 의 스타일 을 정의 합 니 다.각각 a:link,a:visited,a:hover 와 a 입 니 다. : active,예:a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;} a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;} a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;} a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}  상기 문 구 는'링크,방문 한 링크,마우스 가 위 에 멈 췄 을 때,마 우 스 를 눌 렀 을 때'스타일 을 정의 합 니 다.위 순서에 따라 써 야 합 니 다.그렇지 않 으 면 예상 한 것 과 다 를 수 있 습 니 다.그들의 순 서 는'LVHA'라 는 것 을 기억 해라.

좋은 웹페이지 즐겨찾기