CSS의 전체 이름은 Cascading Style Sheet입니다. 계단식 스타일 시트.
1. CSS의 네 가지 구현 방법:
1. 삽입 유형:
2. 외부 링크 유형:
3. 가져온 유형
4. 속성 유형:
2. CSS 정의:
개체 선택 {속성 1: 값 1, 속성 2: 값 3, 속성 n: 값 n...}
좋다:
td{글꼴 크기:12px;색상:#FFFF00}
.내 이름{글꼴 크기:12px;색상:#FFFF00}
a:hover{font-size:12px;color:#FFFF00;text-꾸밈: underline;}
3개. 선택 개체 4개.
1.HTML 선택기(태그 이름)
2.클래스 선택기(.NAME)
3.ID 선택기(#ID이름)
4. 특수 개체(a:호버 a:링크 a:방문 a:활성)
1.HTML 선택기
HTML 선택기는 DIV, TD, H1과 같은 HTML의 마크업 문자입니다. HTML 선택기의 범위는 스타일이 적용되는 모든 페이지의 모든 태그입니다.
예:
TD
{
색상: #FF0000;
}
-->
참고: 코드의 기능은 표 셀의 텍스트를 자동으로 빨간색으로 바꾸는 것입니다.
2. 클래스 선택기
클래스 선택기를 정의하려면 이름에 점 "."을 추가해야 합니다. ".classname"과 같은 것입니다. 클래스 선택기의 범위는 "class="classname""을 포함하는 모든 태그입니다.
예:
.fontRed
{
색상: #FF0000;
}
-->
참고: 두 번째에는 "class="fontRed""가 없으므로 텍스트가 빨간색으로 변하지 않습니다.
3.ID 선택기
ID 선택기를 정의하려면 이름에 점 "#"을 추가해야 합니다. "#ID이름"과 같은 것입니다. ID 선택기의 범위는 "ID="classname""을 포함하는 모든 태그입니다.
예:
#fontRed
{
색상: #FF0000;
}
-->
참고: 두 번째 항목에는 "ID="fontRed""가 없으므로 텍스트가 빨간색으로 변하지 않습니다.
4. 특수 개체 연결된 개체에 대해 설정되는 특수 개체에는 네 가지 유형이 있습니다.
a:마우스를 위로 이동할 때 하이퍼링크 표시
a:link 일반, 접근할 수 없는 하이퍼링크
a:방문함 방문함 하이퍼링크
마우스를 클릭할 때 a:active 하이퍼링크 특수 개체의 범위는 모두 마커입니다("all"이라는 단어를 뒤집는 방법이 곧 나올 것이기 때문에 이 문장은 논의 대상입니다).
예:
a:호버
{
색상: #0000FF;
텍스트 장식: 밑줄;
}
-->
다음 사항에 주의하세요. 매우 유용합니다! ! !
a.클래스명:호버
a#ID이름:호버
이 두 가지 쓰기 방법은 각각 .classname 및 #IDname과 함께 사용됩니다. 해당 범위는 "class="classname"" 또는 "ID="IDname""을 포함하는 모든 태그가 됩니다. 이 작성 방법을 사용하면 동일한 페이지에서 여러 개의 a:hover 효과를 얻을 수 있습니다. 이왕 홈페이지의 탐색 표시줄 텍스트와 일반 기사 제목 위에 마우스를 올리면 차이를 확인할 수 있습니다.
4. 신청:
1. 마커 자동 적용
2. 특수 클래스 class="NAME"
3.ID ID="ID이름"
4. 특수 객체 자동 적용 5. CSS 속성
위에서 가장 많이 사용되는 color와 같이 텍스트의 색상을 나타내는 CSS 속성이 많이 있습니다. background-color는 배경색을 나타냅니다. 이게 가장 중요한데 어렵지 않으니 관련 매뉴얼을 참고하시면 됩니다.
CSS 태그 속성/속성 참조 다음은 현재 지원되는 스타일시트(CSS) 태그 속성 목록입니다.
CSS 태그 속성/속성
동작 속성 동작
글꼴 및 텍스트 속성 방향
방향 [di?rek??n] 안내
세례반
글꼴 모음
글꼴 크기
글꼴 스타일
글꼴 변형 [?v??ri?nt] 변형
글꼴 무게 [weit] 무게
ime-mode [m?ud] 모드
layout-grid [?leiaut] 레이아웃 조판 [ɡrid] 그리드
레이아웃 그리드 문자 [t?ɑ:](굽기..)
레이아웃 그리드 라인
레이아웃 그리드 모드
레이아웃 그리드 유형
문자 간격 [?let?] 문자 [?speisi?] 간격
line-break [breik] 중단
line-height [Hait] 높이
최소 높이
ruby-align [?ru:bi] 루비
루비 오버행 [??uv??hæ?] 돌출
루비 위치 [p??zi??n] 위치 지정
텍스트 정렬
text-autospace [speis] 자동 간격
텍스트 장식 [?dek??rei??n] 장식
text-indent [in?dent] 들여쓰기 조판
텍스트 양쪽 정렬 [?d??stifai] 정렬
텍스트-카시다-공간
텍스트 오버플로 [??uv??fl?u] 오버플로
텍스트 변환 [træns?f?:m] 변경
텍스트 밑줄 위치
유니코드 비디 [?bi:di]
수직 정렬
공백
단어 나누기
줄 바꿈
쓰기 모드
색상 및 배경 첨부
배경색
배경 이미지
배경 위치
배경 위치-x
배경 위치-y
배경 반복
색상
레이아웃 속성 테두리
국경 바닥
테두리 하단 색상
테두리 하단 스타일
테두리 하단 너비
국경 붕괴*
테두리 색상
국경 왼쪽
테두리 왼쪽 색상
국경 왼쪽 스타일
테두리 왼쪽 너비
국경 오른쪽
테두리 오른쪽 색상
국경 오른쪽 스타일
테두리 오른쪽 너비
테두리 스타일
국경 정상
테두리 상단 색상
테두리 상단 스타일
테두리 상단 너비
테두리 너비
분명한
뜨다
레이아웃 흐름
여유
여백-하단
여백 왼쪽
여백 오른쪽
여백 상단
심
패딩 바닥
패딩 왼쪽
패딩 오른쪽
패딩탑
스크롤바-3dlight-color
스크롤바 화살표 색상
스크롤바 기본 색상
스크롤바-어두운 그림자-색상
스크롤바 얼굴 색상
스크롤바 강조 색상
스크롤바 그림자 색상
테이블 레이아웃
확대/축소
분류 속성 표시
목록 스타일
목록 스타일 이미지
목록 스타일 위치
목록 스타일 유형
위치 지정 속성 하단
클립
키
왼쪽
과다
오버플로-x
오버플로-y
위치
오른쪽
맨 위
시계
너비
Z-색인
인쇄 속성 페이지
pageBreakAfter
pageBreakBefore
필터 속성 필터
의사 클래스 및 기타 속성: active
@charset
커서
:첫 글자
:첫 번째 줄
@글꼴-얼굴
:호버
@수입
!중요한
:링크
@메디아
@페이지
:방문하다
CSS 이미지 테두리 효과를 얻는 방법에는
. 더 간단한 방법은 CSS 파일에서 img에 대한 테두리(border)를 직접 정의하는 것입니다.
img.framed {
패딩: 6px;
테두리: 1px 실선 #CCCCCC;
배경색: #FFFFFF }
그런 다음 HTML 파일에서 또는 웹 페이지가 업데이트될 때 포함된 이미지 정의에 class="framed"를 사용하면 해당 테두리 효과가 나타납니다.
위 방법의 장점은 상대적으로 간단하다는 것입니다. 그러나 달성된 효과는 상대적으로 단조롭고 반드시 만족스러운 결과를 얻지 못할 수도 있으며 그림자, 색상 변경 등과 같은 일부 특수 효과를 얻을 수도 있습니다. 이는 이미지 대체 및 위치 지정 변환을 사용하여 매우 잘 수행할 수 있습니다. 여기서는 자세히 설명하지 않겠습니다. 일단 기본 CSS를 배우면 고급 CSS 효과에 도전하는 것이 어렵지 않을 것입니다.
표 테두리에 대한 CSS 구문 정렬
우리는 Dreamweaver가 표를 만드는 데 훌륭한 역할을 한다는 것을 알고 있지만 특정 효과를 얻으려면 여전히 CSS와 결합해야 합니다. 먼저 표 테두리에 대한 CSS 구문을 정렬해 보겠습니다. 그런 다음 CSS를 사용하여 테이블 테두리를 아름답게 만드는 방법을 별도로 소개합니다.
테이블 테두리에 대한 특정 CSS
구문에는 위쪽 테두리 너비, 오른쪽 테두리 너비, 아래쪽 테두리 너비, 왼쪽 테두리 너비, 테두리 너비, 테두리 색상, 테두리 스타일, 위쪽 테두리, 아래쪽 테두리, 왼쪽 테두리, 오른쪽 테두리, 테두리, 너비, 높이, 관련 라벨 등
1.위쪽
테두리 너비
구문: border-top-width: <value>
허용
되는
값: 가늘게 | 중간 굵게
|
a 요소의 위쪽 테두리 너비입니다. 값은 세 가지 키워드 중 하나일 수 있으며 어느 것도 글꼴 크기나 길이에 영향을 받지 않으며 비례적인 너비를 구현하는 데 사용할 수 있습니다. 음수 값은 허용되지 않습니다. 상단 테두리, 테두리 너비 또는 테두리 속성을 축약하는 데에도 사용할 수 있습니다.
2.오른쪽
테두리 너비
구문: border-right-width: <value>
허용
되는 값: 얇음 | 중간
두꺼움
|
요소 오른쪽 테두리의 너비입니다. 값은 세 가지 키워드 중 하나일 수 있으며 어느 것도 글꼴 크기나 길이에 영향을 받지 않으며 비례 너비를 구현하는 데 사용할 수 있습니다. 음수 값은 허용되지 않습니다. 오른쪽 테두리, 테두리 너비 또는 테두리 속성을 축약하는 데에도 사용할 수 있습니다.
3. 아래쪽 테두리 너비
구문: border-bottom-width: <값>
허용
되는
값: 얇음 | 중간
두꺼움
|
요소 아래쪽 테두리의 너비입니다. 값은 세 가지 키워드 중 하나일 수 있으며 어느 것도 글꼴 크기나 길이에 영향을 받지 않으며 비례적인 너비를 구현하는 데 사용할 수 있습니다. 음수 값은 허용되지 않습니다. 하단 테두리, 테두리 너비 또는 테두리 속성을 축약하는 데에도 사용할 수 있습니다.
4.왼쪽
테두리 너비
구문: border-left-width: <value>
허용
되는
값: 가늘게 |중간
굵게 |
요소 왼쪽 테두리의 너비입니다. 값은 세 가지 키워드 중 하나일 수 있으며 어느 것도 글꼴 크기나 길이에 영향을 받지 않으며 비례적인 너비를 구현하는 데 사용할 수 있습니다. 음수 값은 허용되지 않습니다. 왼쪽 테두리, 테두리 너비 또는 테두리 속성을 축약하는 데에도 사용할 수 있습니다.
5.
테두리 너비
구문: border-width: <value>
허용
되는
값
: [ 얇은 | 중간 두꺼운 |
1~4개의 값을 갖는 요소의 경계. 여기서 값은 키워드 또는 길이입니다. 음수 길이는 허용되지 않습니다. 네 가지 값이 모두 주어지면 위쪽, 오른쪽, 아래쪽, 왼쪽 테두리 스타일에 각각 적용됩니다. 값이 주어지면 각 모서리에 적용됩니다. 2개 또는 3개의 값이 주어지면 생략된 값은 반대쪽과 같습니다. 이 속성은 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성의 약어입니다. 약식 테두리 속성을 사용할 수도 있습니다.
6. 테두리 색상
구문: border-color: <값>
허용되는 값: <color>{1,4}
초기 값: 색상 속성의 값
적용 대상: 모든 객체
이전 버전과의 호환성: 아니요
테두리 색상 속성은 테두리를 설정합니다. 요소의 색상입니다. 1~4개의 키워드를 사용할 수 있습니다. 네 가지 값이 모두 주어지면 위쪽, 오른쪽, 아래쪽, 왼쪽 테두리 스타일에 각각 적용됩니다. 값이 주어지면 각 모서리에 적용됩니다. 2개 또는 3개의 값이 주어지면 생략된 값은 반대쪽과 같습니다. 약식 테두리 속성을 사용할 수도 있습니다.
7.
테두리 스타일 구문
: <value>
허용
되는 값: [ 없음 | 점선 | 이중 홈 | 시작 |
with: 아니요
border-style 속성은 요소의 테두리 스타일을 설정하는 데 사용됩니다. 이 속성은 보이는 테두리를 지정하는 데 사용해야 합니다. 1~4개의 키워드를 사용할 수 있습니다. 네 가지 값이 모두 주어지면 위쪽, 오른쪽, 아래쪽, 왼쪽 테두리 스타일에 각각 적용됩니다. 값이 주어지면 각 모서리에 적용됩니다. 2개 또는 3개의 값이 주어지면 생략된 값은 반대쪽과 같습니다. 약식 테두리 속성을 사용할 수도 있습니다.
없음: 스타일 없음;
점선: 점선;
점선: 점선;
실선: 실선;
이중: 이중선;
그루브: 그루브 라인;
능선: 능선;
삽입: 오목함;
시작: 볼록하다.
8. 위쪽 테두리
구문: border-top: <값>
허용되는 값: <상단 테두리 너비> || <테두리 스타일> || <색상>
초기 값: 정의되지 않음
적용 대상: 모든 개체
이전 버전과의 호환성: 아니요
위쪽 테두리 특성은 요소 테두리의 너비, 스타일, 색상을 설정하는 약어입니다. 테두리 스타일은 하나만 지정할 수 있습니다. 약식 테두리 속성을 사용할 수도 있습니다.
9. 오른쪽 테두리
구문: border-right: <값>
허용되는 값: <오른쪽 테두리 너비> || <테두리 스타일> || <색상>
초기 값: 정의되지 않음
적용 대상: 모든 개체
이전 버전과의 호환성: 아니요
오른쪽 테두리 속성은 요소 오른쪽 테두리의 너비, 스타일, 색상을 설정하는 약어입니다. 테두리 스타일은 하나만 지정할 수 있습니다. 약식 테두리 속성을 사용할 수도 있습니다.
10. 하단 테두리
구문: border-bottom: <값>
허용되는 값: <하단 테두리 너비> || <테두리 스타일> || <색상>
초기 값: 정의되지 않음
적용 대상: 모든 개체
하위 호환성: 아니요
하단 테두리 속성은 요소 하단 테두리의 너비, 스타일, 색상을 설정하는 약어입니다. 테두리 스타일은 하나만 지정할 수 있습니다. 약식 테두리 속성을 사용할 수도 있습니다.
11. 왼쪽 테두리
구문: border-left: <값>
허용되는 값: <왼쪽 테두리 너비> || <테두리 스타일> || <색상>
초기 값: 정의되지 않음
적용 대상: 모든 개체
이전 버전과의 호환성: 아니요
왼쪽 테두리 속성은 요소 왼쪽 테두리의 너비, 스타일, 색상을 설정하는 약어입니다. 테두리 스타일은 하나만 지정할 수 있습니다. 약식 테두리 속성을 사용할 수도 있습니다.
12. 테두리
구문: 테두리: <값>
허용되는 값: <테두리 너비> || <테두리 스타일> || <색상>
초기 값: 정의되지 않음
적용 대상: 모든 객체
이전 버전과의 호환성: 아니요
테두리 속성은 다음의 설정입니다. 요소 테두리의 너비, 스타일 및 색상.
테두리 선언의 예는 다음과 같습니다.
H2 { border: Groove 3em }
A:링크 { 테두리: 단색 파란색 }
A:방문함 { 테두리: 얇은 점선 #800080 }
A:active { border: Thick double red }
border 속성은 네 가지 종류의 테두리만 설정할 수 있으며 한 세트의 테두리 너비와 스타일만 제공할 수 있습니다. 요소의 네 가지 테두리에 서로 다른 값을 제공하려면 웹 페이지 작성자는 위쪽 테두리, 오른쪽 테두리, 아래쪽 테두리, 왼쪽 테두리, 테두리 색상, 테두리 너비, 테두리 스타일과 같은 하나 이상의 속성을 사용해야 합니다. 위쪽 테두리 너비, 오른쪽 테두리 너비, 아래쪽 테두리 너비 또는 왼쪽 테두리 너비입니다.
13. 너비
구문: 너비: <값>
허용되는 값: <길이> | <퍼센트> | 자동
초기 값: 자동
적용 대상: 블록 수준 및 대체 요소
이전 버전과의 호환성: 아니요
너비 속성의 초기 값은 "auto"입니다. 즉, 요소의 원래 너비입니다(요소 자체의 너비가 있습니다). 백분율은 상위 요소의 너비를 나타냅니다. 음수 길이 값은 허용되지 않습니다.
14. 높이
구문: height: <value>
허용되는 값: <length> | auto
초기 값: auto
적용 대상: 블록 수준 및 대체 요소
이전 버전과의 호환성: 아니요
높이 속성의 초기 값은 요소의 "auto"입니다. 원래 높이(요소 자체의 높이가 있음) 백분율은 상위 요소의 너비를 나타냅니다. 음수 길이 값은 허용되지 않습니다.
15. 라벨
테이블 라벨과 관련하여 전체 테이블 스타일의 정의는 테이블에 배치되어야 합니다.
td 셀 라벨, 셀 스타일 정의는 td에 배치되어야 합니다.
BODY는 웹 문서의 주요 요소입니다. 모든 가시 범위는 <BODY> 요소 내에 있습니다.
버튼 양식 필드의 버튼은 "제출", "재설정" 등의 형태일 수 있습니다.
DIV는 웹페이지의 영역을 정의합니다. 이 영역의 높이, 너비 또는 절대 위치는 다음과 같습니다.
IMG 이미지 요소, "src" 속성을 지정하여 이미지 소스를 지정합니다.
INPUT 입력 양식 필드
MARQUEE 움직이는 자막 효과
SPAN은 웹 페이지의 영역을 정의합니다. 이 영역의 높이, 너비 또는 절대 위치는 다음과 같습니다.
TEXTAREA 텍스트 영역
TFOOT 여러 줄 입력 텍스트 상자
TH 테이블 헤더 셀
THEAD 테이블 제목
TR 테이블 행