CSSWeb 노트

웹 표준의 구성(구조, 표현, 행위)
xhtml 표준은 세 가지 유형으로 나뉜다.
1. 보조 레이아웃 디자인 요소
2. 구조화 요소와 정보 요소
3.a meta
html의 3가지 문서 유형doctype
1. 과도 유형transitional 일반적인 사이트는 모두 이런 유형이다
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2. 엄격한 유형strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

3. 프레임 페이지 유형 frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml1-frameset.dtd">

css의 문법 구조는 세 부분으로 구성되어 있다(선택자, 속성과 값)
selector{property:value}

위류와 위대상
공통 CSS 약어 구문 요약
줄임말을 사용하면 CSS 파일의 크기를 줄이고 쉽게 읽을 수 있습니다.css 약어의 주요 규칙은 다음과 같습니다.
색상
16      ,         ,      ,  :
#000000     #000;#336699     #369;

박스 크기
일반적으로 다음과 같은 네 가지 쓰기 방법이 있습니다.
property:value1;           value1; 
property:value1 value2;   top bottom   value1,right left   value2 
property:value1 value2 value3;   top   value1,right left   value2,bottom   value3 
property:value1 value2 value3 value4;        top,right,bottom,left 
           ,    。     margin padding     :
margin:1em 0 2em 0.5em; 

경계
테두리의 속성은 다음과 같습니다.
border-width:1px; 
border-style:solid; 
border-color:#000; 

약어:
border:1px solid #000; 

문법은border:width style color;
배경(Backgrounds)
배경의 속성은 다음과 같습니다.
background-color:#f00; 
background-image:url(background.gif); 
background-repeat:no-repeat; 
background-attachment:fixed; 
background-position:0 0; 
는 한 마디로 요약할 수 있다. 백그라운드: #f00 url(background.gif) no-repeatfixed 0 0;
문법
background:color image repeat attachment position;

하나 이상의 속성 값을 생략할 수 있습니다. 생략하면 브라우저 기본값과 기본값은 다음과 같습니다.
color: transparent 
image: none 
repeat: repeat 
attachment: scroll 
position: 0% 0% 
글꼴(fonts)
글꼴의 속성은 다음과 같습니다.
font-style:italic; 
font-variant:small-caps; 
font-weight:bold; 
font-size:1em; 
line-height:140%; 
font-family:"Lucida Grande",sans-serif; 
는 한 문장으로 요약할 수 있다.
font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

줄임말로 글꼴을 정의하려면 최소한 font-size와 font-family 두 개의 값을 정의해야 합니다.
목록
기본 원점과 번호를 없애면list-style:none;,
list의 속성은 다음과 같습니다.

list-style-type:square; 
list-style-position:inside; 
list-style-image:url(image.gif); 
       :list-style:square inside url(image.gif);

좋은 웹페이지 즐겨찾기