CSS 지식 포인트 편집

CSS는 Cascading Style Sheets의 약어로, 중국어로 Cascading Style Sheets라고 합니다. 웹 페이지 데이터의 성능을 제어하는 데 사용되며 웹 페이지의 성능을 데이터 콘텐츠와 분리할 수 있습니다.

1. CSS 소개

1. 인라인 스타일: 인라인 스타일은 태그의 스타일 속성에 CSS 스타일을 설정합니다. 이 방법은 CSS의 장점을 반영하지 않으므로 권장되지 않습니다.

2. 임베디드: 웹페이지의 태그 쌍에 CSS 스타일을 작성하는 것입니다. 형식은 다음과 같습니다.

.. 여기에 CSS 스타일을 작성하세요

3. 가져오기: HTML 파일에 독립적인 .css 파일을 삽입합니다. 가져오기에서는 CSS 규칙을 사용하여 외부 CSS 파일을 삽입합니다. 태그에도 사용됩니다. 다음과 같습니다:

@import"mystyle.css" 여기에서 .css 파일의 경로에 주의하세요. 4. 링크 유형: HTML 파일에 .css 파일도 삽입합니다. 참고: 가져오기 방법은 전체 웹페이지가 로드된 후 CSS 파일을 로드하므로 웹페이지가 상대적으로 크면 플래시 후 스타일이 지정되지 않은 페이지가 먼저 나타납니다. 스타일이 다시 나타납니다. 이 수입품 고유의 하자입니다. 링크형과 가져오기형의 차이점은 웹페이지 파일의 본문을 로딩하기 전에 CSS 파일을 로딩하기 때문에 표시되는 웹페이지가 처음부터 스타일 효과를 가지게 된다는 점입니다. 가져오기 유형 스타일이 지정되지 않은 웹페이지를 먼저 표시한 다음 스타일이 지정된 웹페이지를 표시하는 것이 링크 스타일의 장점입니다. 2. CSS 선택자 "선택기"는 {}에서 "스타일"의 개체, 즉 웹페이지에서 "스타일"이 작동하는 요소를 지정합니다. 1. 기본 선택기: *： > 일치 대상 E: > .info 및 E.info: . FOOTER와 동일한 모든 ID 속성의 요소와 일치하는 #Info 및 E#Info ID 선택기입니다. 2. 조합 선택기: E,F 다중 요소 선택기, E와 F 사이에 쉼표로 구분된 모든 E 요소 또는 F 요소를 동시에 일치시킵니다. p { color:#f00 } EF E > F 하위 요소 선택기, E 요소의 모든 하위 요소 F와 일치 E + F 인접 요소 선택기, E 요소 바로 다음에 오는 모든 형제 요소 F와 일치 p + p { color:#f00 } 注意嵌套规则： 块级元素可以包含内联元素或 某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。 块级元素不能放在p里面。 有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt li内可以包含div 块级元素与块级元素并列、内联元素与内联元素并列。（错误的： ）

3、属性选择器 E[att] 匹配所有具有att属性的E元素，不考虑它的值。 （注意：E在此处可以省略，比如“[cheacked]”。以下同。） p[title] { color:#f00; } E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; } E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 td[class~=”name”] { color:#f00; } E[att|=val] 匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以“val”开头的E元素，主要用于lang属性， 比如“en”、“en-us”、“en-gb”等等 p[lang|=en] { color:#f00; } E[attr^=val] 匹配属性值以指定值开头的每个元素 div[class^="test"]{background:#ffff00;} E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;} E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;} p:before 在每个 元素的内容之前插入内容 p : before {content : "hello" ;color : red } p:after 在每个 元素的内容之前插入内容 p:after{ content:"hello"；color:red} 4、伪类选择器 伪类选择器： 专用于控制链接的显示效果，伪类选择器： a:link（没有接触过的链接）,用于定义了链接的常规状态。 a:hover（鼠标放在链接上的状态）,用于产生视觉效果。 a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。 a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。 伪类选择器 : 伪类指的是标签的不同状态: a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态 a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; } 三、css常用属性 1、颜色属性 ppppp ppppp ppppp ppppp 2. 글꼴 속성 글꼴 크기: 20px/50%/더 크게 글꼴 계열:'Lucida Bright' font-weight: 더 가벼움/굵게/테두리/ 올드보이 3. 배경 속성 배경색: cornflowerblue 배경 이미지: url('1.jpg'); background-repeat: 반복하지 않음 (반복: 전체) 배경 위치: 오른쪽 위(20px 20px)(가로: 왼쪽 가운데 오른쪽)(세로: 위 가운데 아래) 약어: ~ 참고: 본문에 배경 속성을 추가하는 경우 본문에 높이를 추가해야 합니다. 그렇지 않으면 본문이 비어 있어 배경 이미지를 지원할 수 없기 때문입니다. 을 설정하고 싶습니다. Width=100px, html을 설정하지 않으면 효과를 볼 수 없습니다. 1 2 " en "> 3 4 " UTF-8 "> 5 Title 6 7 html{ 8 background- color: antiquewhite; 9 10 } 11 body{ 12 width: 100px; 13 height: 600px; 14 background- color: deeppink; 15 background-image: url(1 .jpg); 16 background-repeat: no- repeat; 17 background- position: center center; 18 } 19 20 21 코드 보기 4. 텍스트 속성

white-space: 요소의 공백을 처리하는 방법을 설정합니다.

normal: 기본 처리 방법입니다. pre: 공백을 유지하고 텍스트가 경계를 초과할 때 줄바꿈하지 않음 nowrap: 공백을 유지하지 않고 텍스트 끝이나 br 태그가 나타날 때까지 모든 텍스트가 같은 줄에 표시되도록 합니다. 사전 줄 바꿈: 공백을 유지하고 경계에 닿으면 텍스트 줄 바꿈 pre-line: 공백을 유지하지 않고 텍스트의 줄 바꿈을 유지하며 텍스트가 경계에 닿으면 줄바꿈합니다. 방향: 텍스트의 방향을 지정합니다.

ltr 기본적으로 텍스트 방향은 왼쪽에서 오른쪽입니다. rtl 텍스트 방향은 오른쪽에서 왼쪽입니다. text-align: 텍스트 가로 정렬

왼쪽 센터 그렇습니다 줄 높이: 텍스트 줄 높이

일반 기본값 vertical-align: 텍스트 줄 높이의 수직 정렬

기본 기본값 sub는 텍스트의 아래 첨자를 수직으로 정렬합니다. 이는 태그와 동일한 효과입니다. super는 텍스트의 위 첨자를 수직으로 정렬합니다. 이는 태그와 동일한 효과입니다. 상단 개체의 상단이 컨테이너 상단과 정렬됩니다. 텍스트 상단 개체의 상단이 해당 줄의 텍스트 상단과 정렬됩니다 중간 요소 개체는 기준선을 기준으로 수직으로 정렬됩니다 하단 개체의 하단이 해당 줄의 텍스트 하단과 정렬됩니다. 텍스트 하단 개체의 하단이 텍스트 줄의 하단과 정렬됩니다 텍스트 들여쓰기: 텍스트 들여쓰기

letter-spacing: 글자 사이에 공백을 추가합니다.

단어 간격: 각 단어 사이에 공백 추가

text-transform: 속성이 텍스트의 대소문자를 제어합니다

capitalize 텍스트의 각 단어는 대문자로 시작됩니다. 대문자는 대문자만 정의합니다. 소문자는 소문자만 정의합니다. 텍스트 오버플로: 텍스트 오버플로 스타일

클립은 텍스트를 자릅니다. 줄임표는 잘린 텍스트를 나타내기 위해 줄임표를 표시합니다. string 주어진 문자열을 사용하여 잘린 텍스트를 나타냅니다. 텍스트 장식: 텍스트 장식 기본값은 없습니다. 밑줄을 긋습니다. 윗줄 윗줄. 중앙선을 통과하는 라인. text-shadow: 텍스트 그림자

첫 번째 매개변수는 왼쪽과 오른쪽 위치입니다 두 번째 매개변수는 상하 위치 세 번째 매개변수는 흐림 효과 네 번째 매개변수는 색상 텍스트 그림자: 5px 5px 5px #888; word-wrap: 자동 줄 바꿈

word-wrap: break-word;

5. 속성 나열

list-style-type: 목록 항목 표시 유형

없음 플래그 제거 소수점 앞자리 02. 사각형; 원; 속이 빈 원 상부 알파 & 디스크 list-style-image : 이미지를 목록 항목 로고로 설정

List-style-position : 목록 항목 표시의 위치

내부 외부 목록 스타일: 약어

6. 테두리

테두리 스타일: 테두리 스타일

실선 기본값, 실선 더블 더블라인 점선 점선 점선 border-color : 테두리 색상

border-width: 테두리 너비

border-radius: 둥근 모서리

1개 매개변수: 네 모서리 모두에 적용 2개의 매개변수: 첫 번째 매개변수는 왼쪽 상단과 오른쪽 하단에 적용되고, 두 번째 매개변수는 왼쪽 하단과 오른쪽 상단에 적용됩니다. 3개의 매개변수: 첫 번째 매개변수는 왼쪽 상단에 적용되고, 두 번째 매개변수는 왼쪽 하단에 적용되고, 세 번째 매개변수는 오른쪽 하단에 적용됩니다. 4개 매개변수: 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래(시계 방향) 테두리 : 약어

테두리: 2px 노란색 단색 box-shadow: 테두리 그림자

첫 번째 매개변수는 왼쪽과 오른쪽 위치입니다 두 번째 매개변수는 상하 위치 세 번째 매개변수는 흐림 효과 네 번째 매개변수는 색상 상자 그림자: 10px 10px 5px #888;

7、display

none 不显示。 block 显示为块级元素。 inline 显示为内联元素。 inline-block 行内块元素（会保持块元素的高宽）。 list-item 显示为列表元素。

8、盒子模型

什么是盒子模型？

padding:用于控制内容与边框之间的距离;

margin: 用于控制元素与元素之间的距离;

一个参数，应用于四边。

两个参数，第一个用于上、下，第二个用于左、右。

三个参数，第一个用于上，第二个用于左、右，第三个用于下

边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子（外层还有html），解决办法

1 body { 2 margin : 0 ; 3 } View Code 9. 플로트

한 줄에 두 개의 블록 수준 태그를 표시하면 문서 흐름이 깨집니다

없음 왼쪽 부동 왼쪽 오른쪽 플로트 오른쪽 클리어 클리어 플로트:

없음 : 기본값입니다. 양쪽에 떠 있는 물체 허용 왼쪽 : 왼쪽에 떠 있는 물체는 허용되지 않습니다 right : 오른쪽에 떠 있는 물체는 허용되지 않습니다 모두 : 양쪽에 떠 있는 물체는 허용되지 않습니다 10. 포지션

1 정적, 기본값 정적: 특별한 위치 지정이 없으며 개체는 일반적인 문서 흐름을 따릅니다.

상단, 오른쪽, 하단, 왼쪽 및 기타 속성은 적용되지 않습니다. 이에 관해 정의를 언급해야 합니다. 문서 흐름은 실제로 문서의 출력 순서로, 일반적으로

에서 왼쪽에서 오른쪽으로 표시됩니다. 하향식 출력 형식에서는 웹 페이지의 각 요소가 이 순서대로 정렬되어 표시되며, float 및 position 속성을 사용하여 문서 흐름에서 요소를 분리하여 표시할 수 있습니다. 기본값은 요소가

을 계속 따르도록 하는 것입니다. 문서 흐름은 변경 없이 표시됩니다.

2 위치:상대

상대: 개체는 일반 문서 흐름을 따르지만 위쪽, 오른쪽, 아래쪽, 왼쪽 및 기타 속성을 기반으로 일반 문서 흐름에서 오프셋됩니다. 그리고 계단식은 z-index 속성을 통해 정의됩니다.

절대: 개체는 일반적인 문서 흐름과 분리되어 있으며 절대 위치 지정을 위해 위쪽, 오른쪽, 아래쪽, 왼쪽 및 기타 속성을 사용합니다. 그리고 계단식은 z-index 속성을 통해 정의됩니다. position:relative를 설정하면

을 사용할 수 있습니다. 문서에 표시되어야 하는 위치를 기준으로 요소를 위쪽, 아래쪽, 왼쪽 및 오른쪽으로 이동합니다. [즉, 요소는 실제로 여전히 문서의 원래 위치를 차지하고 있지만 시각적으로는 문서의 원래 위치에 상대적일 뿐입니다.

Moved] position:absolute를 지정하면 요소가 문서 밖으로[즉, 더 이상 문서 내 위치를 차지하지 않음] 설정된 상하좌우에 따라 정확하게 위치 지정이 가능합니다. 요소가 절대적으로

인 경우 위치 지정 후 참조는 자신과 가장 가까운 요소가 상대 위치를 설정했는지 여부를 기반으로 합니다. 설정되어 있으면 자신과 가장 가까운 요소를 배치합니다. 그렇지 않은 경우 조상에서 상대 위치 지정 요소를 찾습니다. HTML을 찾을 때까지 요소입니다.

3위치:고정

이론적으로 고정으로 설정된 요소는 브라우저 창의 지정된 좌표에 위치하게 되며, 창 스크롤 여부에 관계없이 이 위치에 고정됩니다.

수정됨: 개체가 일반적인 문서 흐름에서 분리되었습니다. 위쪽, 오른쪽, 아래쪽, 왼쪽 및 기타 속성을 사용하여 창을 참조 지점으로 배치하면 스크롤 막대가 나타날 때 개체가 함께 스크롤되지 않습니다. 그리고 계단식 배열은 z-index 속성에 의해 결정됩니다

의미. 참고

참고: 요소가 position:absolute |fixed;로 설정된 경우 해당 요소는 부동으로 설정할 수 없습니다. 이것은 서로 다른 두 개의 스트림으로, 하나는 플로팅 스트림이고 다른 하나는 "포지셔닝

이기 때문에 상식적인 점입니다. "흐름". 그러나 원래 차지했던 공간이 여전히 문서 흐름을 차지하기 때문에 가능합니다.

위치 지정은 다음 네 가지 속성을 통해 수행됩니다.

왼쪽 상단 그렇습니다 하단 z-색인