CSS는 HTML(Standard Generalized Markup Language의 응용 프로그램) 또는 XML(Standard Generalized Markup Language의 하위 집합)과 같은 파일 스타일을 표현하는 데 사용되는 컴퓨터 언어입니다.
CSS는 웹페이지를 정적으로 수정할 수 있을 뿐만 아니라 다양한 스크립트 언어와 협력하여 웹페이지의 다양한 요소의 형식을 동적으로 지정할 수도 있습니다.
CSS는 웹 페이지의 요소 위치 레이아웃에 대해 픽셀 수준의 정밀한 제어를 수행할 수 있고, 거의 모든 글꼴 크기와 스타일을 지원하며, 웹 페이지 개체와 모델 스타일을 편집할 수 있는 기능을 갖추고 있습니다. 심층적인 학습을 원하시면 Baidu에서 "php 중국어 웹사이트 CSS 비디오 튜토리얼"을 검색하시고 온라인에서 무료로 학습하시기 바랍니다.
1. 공통 속성
name: 이름, 반복 가능, 동일할 수 있음, class: 클래스 이름, 반복 가능 또는 여러 개 가질 수 있음, <p class="one two"></p>와 같이 사용됨; 식별자, 불가능 반복은 일반적으로 JavaScript에서 사용됩니다. 명명 규칙은 다른 언어의 레이블 명명 규칙과 동일합니다.
제목: 태그에 추가할 수 있는 제목(예: <img src="1.jpg" /title="This is a picture">;/
2. 태그 관계
후손관계: 부모자식관계(관계를 포함한다)
형제 관계: 같은 부친 관계;
3.CSS-캐스케이딩 스타일 시트
CSS 주석: /주석 내용은 프로그래머가 볼 수 있도록 여기에 작성되며 페이지에는 표시되지 않습니다/;
CSS 문법 규칙: 모든 기호는 영어 입력 방식을 사용하여 소문자로 입력해야 하며, 속성은 중괄호 안에 작성해야 합니다. 각 속성 설명은 세미콜론으로 끝나야 하며, 속성 값은 픽셀 단위(px)여야 합니다. : 속성: 속성 값 ;
4. CSS 소개 방법
인라인 소개: 태그에 스타일을 추가하는 소개 방법 형식: <tag style="배경:red; 글꼴 크기:20px;">콘텐츠</tag> 참고: 코드의 유지 관리성이 매우 낮습니다. CSS 코드입니다. 및 html 구조는 분리되지 않습니다. 영향을 받는 범위는 현재 태그에만 있습니다. 웹 페이지 헤드에 <style type="text/css">CSS 스타일</style>을 추가하세요. 코드 유지 관리가 상대적으로 열악하고 CSS 코드와 HTML 구조의 분리를 실현하며 영향 범위는 현재 페이지에만 있습니다.
외부 링크 소개: 웹 페이지 외부에 xx.css 파일을 만들고 웹 페이지 헤더에 <link rel="stylesheet" type="text/css" href="xx.css">를 사용하세요. 코드는 유지 관리가 용이합니다. CSS 코드는 HTML 구조와 완전히 분리되어 전체 웹 사이트에 CSS 파일을 소개하는 모든 웹 페이지에 영향을 미칩니다.
5.CSS 핵심 구문:
구조 형식: 선택기 {속성: 속성 값; 속성: 속성 값;...}; 예: p{배경:red;color:gray;size:20px;};선택기: 페이지 요소를 선택하기 위한 도구.
중괄호: 스타일 내용은 중괄호 안에 작성됩니다.
6. 선택기
기본 선택기:
범용 선택기: 스타일 시트 시작 부분에 작성된 웹 페이지의 기본 스타일을 초기화하는 데 사용됩니다. 형식: *{padding:0;margin:0;}: 지정된 레이블에 스타일을 추가합니다. {color:green; }; 클래스 선택기: 클래스 선택기 스타일을 지정하려면 선택하세요. 형식: .class name {Background: pink;} 참고: 클래스 이름은 class="one"과 같이 정의됩니다. 여러 블록의 콘텐츠 스타일이 동일한 경우 동일한 스타일을 지정하면 됩니다.
id 선택기: 고유 식별자, 반복할 수 없습니다. 형식: #id name{backgound-image:url(1.jpg);} 참고: id 이름은 태그에 정의되어 있습니다. id는 테이블과 함께 추가될 수 없습니다. , 몇 번 각 블록의 내용 스타일이 동일한 경우 여러 블록의 ID 이름이 달라야 합니다.
ID와 클래스의 차이점: 이전 사항에 주의하세요. ID는 DOM 노드를 고유하게 결정할 수 있어야 합니다. 기사 전반에 걸쳐 ID 선택기를 사용하는 경우 두 DOM 노드 스타일이 정확히 동일하더라도 노드 스타일을 두 번 작성해야 합니다. 나중에 유지하려면 두 위치 모두에서 코드를 유지해야 합니다! ! ! 유지 관리 비용이 크게 증가합니다.
의사 클래스 선택기: 순차 LoVe HAte 원칙, 건너뛸 수 있지만 순서는 변경할 수 없습니다. 링크 상태(link), 방문 상태(visited), 활성 상태(hover) 및 클릭 상태(active)
포인트 드로잉 클래스: a:link{color:yellow;} a:visited{color:blue;} a:hover{color:red;} a:active{color:pin;} 포커스를 얻을 때 스타일 a:focus{}; 참고: 텍스트 특성, 배경색 및 그림을 a{} 및 a:link{} 특성에 추가하면 동일한 효과를 얻을 수 있습니다. li:link{color:yellow;};li:visited{color:blue ;} li:hover{color:red;} li:active{color:pin;};참고: 텍스트 시리즈 속성, 배경색 및 그림을 속성에 추가할 수 있습니다.
복합 선택기:
그룹 선택기(결합 선택기, 다중 선택기): 여러 요소에 동일한 스타일을 추가하는 데 사용됩니다. 예: .one, #one, a,span{color:red;font-size:14px;}는 클래스 1, #one을 의미합니다. , 태그 및 범위 태그에는 공통 속성이 있습니다. 하위 클래스 선택기: 하위 클래스 요소에 속성을 추가합니다. 예: .one a{text-꾸밈:none;}은 클래스 1의 하위 태그에 의해 수정된 내용을 의미합니다. 하위 요소 선택기(지정된 선택기): 지정된 하위 요소에 속성을 추가합니다. 예: #one>p{color:red;}는 id 선택기 하나 속성의 아들 p 태그에 있는 콘텐츠를 추가하는 것을 의미합니다.
인접 요소 선택기:
1. 인접한 두 형제 선택자는 자신에게 속성을 추가하지 않고 다음 형제에만 속성을 추가합니다. 2.one~p{Background:green}은 다음과 같습니다. 상위 클래스가 있는 경우 하나의 선택기 뒤의 모든 p 태그 요소에 속성을 추가합니다.
속성 선택기:
1. 속성이 있는 요소에 속성을 추가합니다. img[id]{Background:red;} ID가 있는 요소에 속성을 추가합니다.
지정된 속성 값을 사용하여 요소에 속성을 추가합니다. img[src="b.jpg"]{Background:red;}b.jpg를 사용하여 요소에 속성을 추가합니다.
3. 지정된 문자로 시작하는 요소에 속성을 추가합니다. img[src^="b"]{Background:red;} b로 시작하는 모든 요소에 속성을 추가합니다. 4. 선택기의 끝에 지정된 속성 값이 있습니다. : img[src$="b"]{배경:red;}b로 끝나는 모든 요소에 속성을 추가합니다. 5. 선택기에는 지정된 속성 값을 포함하는 요소가 있습니다: img[src*="b" ]{배경:red ;}b를 포함하는 모든 요소에 속성을 추가합니다.
7. 요소의 포함(표시방식의 분류)
블록 요소: 조판에 사용됩니다. 일반적인 구조에는 p, p, li, h1, dt가 있습니다.
요소는 너비와 상관없이 자체 줄에 표시됩니다. 너비와 높이를 설정할 수 있습니다.
블록 수준 요소가 중첩된 경우 하위 요소의 너비가 설정되지 않은 경우 하위 요소의 너비는 상위 요소의 너비가 됩니다.
인라인 요소: 스타일을 추가하는 데 사용됩니다. 참고: 인라인 요소에 위쪽 및 아래쪽 여백과 패딩을 지정하지 마세요. 위쪽과 아래쪽은 무시되고 왼쪽과 오른쪽은 작동합니다(일반적으로 사용되지 않음). );
요소는 한 줄에 표시됩니다.
너비와 높이는 직접 설정할 수 없습니다.
인라인 블록 요소: 이미지, 입력;
요소는 한 줄에 표시됩니다.
너비와 높이를 설정할 수 있습니다.
변환 관계: 인라인에는 인라인 요소가 포함되고, 블록 요소에는 블록 요소가 포함되며, 블록 요소에는 인라인 요소가 포함될 수 있습니다.
디스플레이: inline은 요소를 인라인 요소로 변환합니다. 디스플레이: inline-block은 요소를 인라인 블록 요소로 변환합니다.
표시: block 요소를 블록 요소로 변환합니다.
8.CSS 속성
글꼴 관련 속성:
글꼴 크기: 글꼴 크기, 픽셀 수, px; 글꼴 두께: 글꼴 두께, 굵게(700-900), 일반, 100-900으로 작성할 수 있습니다. 글꼴 스타일: 글꼴 기울기, 기울임꼴, 일반; : 글꼴, Microsoft YaHei, HeiTi;
속성 연결: 글꼴: 글꼴 스타일 글꼴 무게 글꼴 크기/줄 높이 글꼴 패밀리; 참고: 글꼴 속성 연결에는 글꼴 크기 및 글꼴 계열이 포함되어야 합니다(다른 속성은 생략 가능). -가족 순서는 변경할 수 없습니다.
텍스트:
color: 색상; text-indent: 들여쓰기 [단위는 em]; text-design: 텍스트 줄 [밑줄, 윗줄, 취소선 없음] word-spacing: 단어 사이의 거리 ;letter-spacing: 문자 키 distance; text-align: 가로 정렬 [기본값 왼쪽, 가운데, 오른쪽];
line-height: 줄 높이, 텍스트가 위치한 줄의 높이 [줄 높이가 요소의 높이와 같을 때 텍스트는 세로로 중앙에 위치함];
크기: 블록 요소의 크기입니다. 인라인 요소에서는 너비와 높이를 설정할 수 없습니다. 설정하려면 변환해야 합니다.
너비: 너비;
높이: 높이;
목록 ul 및 li의 속성: list-style-type은 ul에 추가할 수 있지만 li에는 추가할 필요가 없습니다.
list-style-type:none; 기호, 사각형, 원, 디스크형 원을 제거합니다. list-style-type:none;list-style-image:url(1.jpg) 이미지 테두리: 1px 단색 빨간색, 전체적으로 ul의 테두리를 설정합니다.
목록 스타일 위치:외부 스타일 이미지 위치 지정: 내부, 외부
배경:
배경색 background-color; 배경 이미지 background-image 참고: 배경 이미지를 설정할 때 배경 타일의 너비와 높이를 설정해야 합니다. background-repeat: 반복(기본값) | x | (가로 타일링) Repeat-y (세로 타일링) background-position: 특정 값을 설정할 때, top|cneter; 숫자, 첫 번째 값은 가로 방향을 나타내고 두 번째 값은 세로 방향을 나타냅니다. 전면 배경 이미지 설정 형식을 배경 이미지로 설정합니다. 배경 첨부: 스크롤(기본값) 스크롤 고정( 사진 고정);
속성 공동 작성: 수량이나 순서에 제한이 없습니다: background:url("") red no-peat 30px 40px;
line-height: 상자 모델: 웹 페이지 레이아웃에 사용되며 너비를 설정해야 합니다.
상자 테두리 속성: 구성 요소:
테두리 너비 및 높이: border-width: 1px; 테두리 색상: border-color: 빨간색; 테두리 스타일: 실선/점선/점선/없음 속성 연결 쓰기: 테두리: 1px 빨간색 ; 참고: 속성을 함께 쓸 때는 순서 제한이 없습니다. 테두리 색상은 쓸 필요가 없으며, 테두리 너비는 따로 쓸 필요가 없습니다. 테두리 테두리: 안쪽 여백: 테두리 사이의 간격을 설정합니다. 내용과 상자 테두리
여백: 상자 사이의 거리를 설정합니다.
p{width:300px;height:200px;border-top:1px 단색 빨간색;border-left:1px 단색 빨간색;border-right:1px 단색 빨간색;border-bottom:1px 단색 빨간색;}
속성을 개별적으로 설정하려면 다음을 수행합니다.
테두리 상단 색상:빨간색;테두리 상단 스타일:단색;테두리 상단 너비:1px;
상자 크기:
상자 크기가 영향을 미치는 경우: 상속된 상자는 상위 상자의 너비 범위 내에 있으며 패딩 값은 상자 크기에 영향을 미치지 않습니다. 너비 = 콘텐츠 너비 + 왼쪽 및 오른쪽 테두리 + 왼쪽 및 오른쪽 패딩
테두리는 상자 크기에 영향을 미칠 수 있고 패딩은 상자 크기에 영향을 미칠 수 있습니다.
앞으로 페이지 박스 레이아웃을 구현할 때 박스 내부 여백이 설정되면 콘텐츠 너비나 높이에서 해당 값을 빼야 합니다.
여백: 상자 사이의 거리를 설정합니다.
상자 중앙에 배치: 속성 공동 작성:
표준 흐름 아래의 상자는 중앙에 있습니다. 여백: 0px 자동; 위치가 지정된 상자는 중앙에 있습니다. 먼저 상위 상자의 절반을 가져온 다음 자체 너비의 절반으로 이동합니다. 여백: 10px, 위쪽, 오른쪽, 아래쪽, 왼쪽, 10pxMargin: 10px, 20px, 상단, 하단, 10px, 왼쪽 및 오른쪽, 20pxMargin: 10px 20px 30px 10px 상단, 20px 왼쪽 및 오른쪽, 30px 하단
여백: 10px 20px 30px 40px 오른쪽 위 왼쪽 아래
알아채다:
속성 공동 저술:
패딩: 10px, 상단, 오른쪽, 하단 및 왼쪽 사이의 거리는 10pxPadding: 10px 20px; 상단 및 하단 10px 왼쪽 및 오른쪽 20pxPadding: 10px 20px 30px 왼쪽 및 오른쪽 20px 하단 30px
패딩: 10px 20px 30px 40px 위쪽, 오른쪽, 아래쪽, 왼쪽
두 개의 상자가 세로로 표시되는 경우 여백은 설정된 최대값의 적용을 받습니다(여백 병합의 첫 번째 경우). 두 개의 상자가 가로로 표시되는 경우 여백이 겹쳐서 여백이 축소됩니다(어려운 문제).
패딩: 콘텐츠와 상자 테두리 사이의 거리를 설정합니다.
상위 상자의 테두리 설정
상위 상자에 대해 오버플로:숨김을 설정합니다.
여백 지우기:
방법 1: *{패딩: 0; 여백: 0;}
방법 2: Body,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,p,span{margin:0px;padding:0px;}
9.CSS의 세 가지 주요 특징
계승:
상속 가능: color, text-align, text-indent, 글꼴 크기, 글꼴 가중치, 글꼴 계열 상속 불가능: text-designation, border, display, margin, float, padding 상속이 발생하기 위한 전제는 태그 사이에 있습니다. 중첩 관계에서는 텍스트 색상을 상속할 수 있고, 글꼴 관련 속성은 상속할 수 있습니다.
특징:
상위 요소의 텍스트 색상은 상속될 수 없습니다(계단식).
<h1></h1> 제목 태그는 상위 요소에서 텍스트 크기를 상속받을 수 없습니다.
오버랩(Overlap): 오버랩은 스타일의 적용 범위를 나타냅니다.
스타일의 계단식 특성은 스타일이 호출되는 순서와 관련이 없지만 스타일이 정의되는 순서와 관련이 있습니다.
계단식 발생의 전제: 스타일 충돌
우선 사항:
가중치: 인라인 소개(1000) > id(100) > 클래스(10) > 라벨(1) > 일반(0) 값이 클수록 우선순위가 높아집니다.
가중치는 동일하며 다음 스타일이 작동합니다.
10. 보충 지식 노트
양식 최적화 쓰기: <lable for="one">사용자 이름:</lable><input type="text" id="one">형식 목록 아이콘: list-style: noneForm merge: border-collapse:collapse (Set 테이블 테두리 병합, 테이블에 적용 가능) Bfc "서식 지정 컨텍스트" 오버플로:
표시:기본값. 콘텐츠가 잘리지 않고 요소 상자 외부에 표시됩니다. 숨김: 콘텐츠가 잘리고 나머지 콘텐츠는 표시되지 않습니다. 그림의 위치가 변경되면 이 속성 값도 변경됩니다. 상위 요소는 상위 요소의 위치를 변경할 수 있습니다. 요소 위치는 변경되지 않은 상태로 유지됩니다. 스크롤: 콘텐츠는 잘리지만 브라우저에는 나머지 콘텐츠를 볼 수 있도록 스크롤 막대가 표시됩니다.
자동: 콘텐츠가 잘리면 브라우저에 스크롤 막대가 표시되어 나머지 콘텐츠를 볼 수 있습니다.
11. 표준 흐름: 블록 수준 요소가 한 줄에 표시됩니다. 표준 흐름 표시 모드: 요소의 기본 표시 모드입니다.
12. 플로팅: 플로팅은 탐색 표시줄 및 웹 페이지 레이아웃을 만드는 데 사용되는 텍스트 및 그림 배치 문제를 해결하는 데 사용됩니다.
사용법: 부동:왼쪽|오른쪽 특징: 원하는 대로 부동
부동으로 설정된 요소는 원래 위치(오프스크립트)를 차지하지 않으므로 블록 수준 요소가 한 줄에 부동으로 표시될 수 있습니다.
모드 변환 과정에서는 가능하면 디스플레이를 사용하세요.
플로트 지우기:
정의: 부동소수점 삭제는 부동소수점 삭제를 의미하지 않습니다. 부동소수점 삭제는 사용 시점에 주의하세요. 하위 요소가 부동소수점으로 설정되고 상위 요소에 높이가 없으면 페이지 레이아웃이 혼란스러워집니다. ; 이 경우 플로트를 지웁니다.
클리어 플로팅 방식: [x] 참고: 클리어할 요소 뒤에 빈 블록 요소(<p></p>, 태그)를 추가하고, 추가된 빈 요소에 Clear:both left |right를 추가합니다.
13. 위치 지정: 방향: 왼쪽, 오른쪽, 위쪽, 아래쪽(자세한 내용은 PHP 중국어 웹사이트의 CSS 튜토리얼 채널을 참조하세요.)
정적 위치 지정: 정적 위치 지정은 요소의 표준 흐름을 표시하는 방법입니다. 위치는 기본 위치 지정입니다.
절대 위치 지정: 위치가 지정된 요소의 상위 요소 또는 상위 요소를 기준으로 위치를 지정합니다. 상위 요소와 상위 요소가 존재하지 않으면 이전 위치를 차지하지 않는 원본 레이어가 검색됩니다.
단일 요소에 대해 절대 위치 지정을 설정할 경우 브라우저(본체)의 왼쪽 상단을 기준으로 위치 지정이 설정됩니다. 상자가 중첩된 경우 상위 상자가 위치를 설정하지 않으면 하위 상자는 브라우저의 왼쪽 상단을 기준으로 위치를 설정합니다. 상자가 중첩된 경우 상위 상자가 배치되면 하위 상자는 상위 상자의 왼쪽 위 모서리를 기준으로 배치됩니다. 상자에 대해 절대 위치가 설정되어 있으며 상자는 어떤 위치도 차지하지 않습니다(오프스크립트). 인라인 요소에 대해 절대 위치가 설정되면 해당 요소는 인라인 블록 요소로 변환됩니다.
참고: 요소를 절대 위치로 설정한 후 특정 방향 이름을 통해 요소의 위치를 임의로 설정할 수 있습니다.
상대 위치 지정: 요소의 원래 위치를 기준으로 이전 위치를 차지합니다.
요소가 상대 위치로 설정되면 원래 위치를 차지합니다. 상대 위치 설정은 요소의 모드 변환을 수행할 수 없습니다.
자식은 부모와 동일한 위치에 있어야 합니다. (자식 요소는 절대 위치로 설정되고, 부모 요소는 상대 위치로 설정됩니다.)
고정 위치 지정: 전체 안정 위치에 상대적입니다. 고정 위치 지정은 위치를 차지하지 않습니다(오프 라벨). 인라인 요소를 인라인 블록 요소로 변환합니다. 위치:고정
계층 문제:
위치가 설정된 경우에만 계층적 문제가 발생합니다. HTML 문서 구조가 가장 바깥쪽 레이어(상위 수준)에 있는 형제 요소 사이에는 상대 위치, 절대 위치 및 기타 위치가 있습니다.
Z-index: 레벨을 설정합니다. 값은 위치 지정이 있는 한 위치 지정 설정이 사용됩니다.
14. CSS Elf Rabbit: 투명 문서 선택
브라우저의 좌표계 점은 양의 방향으로 올바른 방향을 가지며 점 아래의 방향은 양의 방향입니다. CSS 스프라이트는 웹 페이지의 배경 이미지를 처리하는 방법이기도 합니다.
스프라이트 사용
fw를 사용할 때는 스프라이트 맵을 오픈 모드로 열어야 합니다. 스프라이트 맵을 배경 이미지로 사용할 때는 스프라이트 맵의 요소 좌표를 측정하기 위해 background-position과 함께 사용되는 경우가 많습니다. 선택자.
또는 단축 문자인 k를 사용하세요.
15. CSS 가시성
Overflow: Hidden 초과 부분 숨기기 표시: 없음 요소 직접 숨기기 display: block 요소 표시(js와 더 잘 일치) visible: 숨김 요소 숨기기 display: 없음 요소를 숨기고 위치를 차지하지 않습니다.
가시성: 요소를 숨기고 원래 위치를 차지합니다.
16. 중앙 이미지 및 텍스트
모든 inlne-block 요소에는 기본 수직 정렬:기준선이 있습니다.
수직 정렬:중간 수직 정렬, 수직 정렬과 인라인 블록이 더 잘 일치합니다.
17. 표준을 벗어난 흐름을 피하세요
웹 페이지 레이아웃 과정에서 가능하다면 표준 흐름을 사용하세요. 표준 흐름은 플로팅을 해결할 수 없습니다.
margin-left/margin-right를 사용하고 값을 auto로 설정하면 자동으로 상자를 두 개의 바깥쪽으로 밀어냅니다.
18. 라벨 포함 사양
p는 표준 스트림 아래의 모든 태그를 포함할 수 있습니다. p 태그는 p와 제목 태그 및 목록 태그를 포함할 수 없습니다. title note는 다른 태그를 포함할 수 있습니다.
인라인 요소에는 다른 태그가 포함되어서는 안 됩니다.
19. 너비와 높이 설정 요약
부동 후 요소는 너비와 높이를 설정할 수 있습니다. 절대 위치 지정 후 요소는 너비와 높이를 설정할 수 있습니다.
위치를 고정한 후 요소의 너비와 높이를 설정할 수 있습니다.
20. CSS3으로 업그레이드
CSS3 및 CSS2: CSS는 강력하고 코드는 간결합니다.
의사 클래스 선택기:
첫 번째 하위 요소: first-child 가장 좋은 요소: last-child n 번째 하위 요소: nth-child (n) n은 하위 요소에 대한 홀수입니다: nth-child (odd) 또는 (nth-child( 2n+1))
짝수 요소: n번째-자식(짝수) 또는 (n번째-자식(2n))
text-shadow: text-shadow: 수평, 수직, 그림자 box-shadow: box-shaadow: 수평, 수직, 그림자
배경: 배경