CSS는 HTML(Standard Generalized Markup Language의 응용 프로그램) 또는 XML(Standard Generalized Markup Language의 하위 집합)과 같은 파일 스타일을 표현하는 데 사용되는 컴퓨터 언어입니다. CSS는 웹페이지를 정적으로 수정할 수 있을 뿐만 아니라 다양한 스크립트 언어와 협력하여 웹페이지의 다양한 요소의 형식을 동적으로 지정할 수도 있습니다. CSS는 웹 페이지의 요소 위치 레이아웃에 대해 픽셀 수준의 정밀한 제어를 수행할 수 있고 거의 모든 글꼴 크기와 스타일을 지원하며 웹 개체 및 모델 스타일을 편집할 수 있는 기능을 갖추고 있습니다.
name: 이름, 반복 가능, 동일할 수 있음
class: 클래스 이름, 반복 가능 또는 CSS의 경우; p class="one two"
;id: 고유 식별자, 반복할 수 없으며 일반적으로 JavaScript에서 사용되는 명명 규칙은 다른 언어의 명명 규칙과 동일합니다. : 제목, 태그에 추가할 수 있습니다(예: 
;
2. 태그 관계
형제 관계: 동부 관계;
3.CSS-Cascading Style Sheet
CSS 구문 규칙: 모든 기호는 영어 입력 모드로 입력해야 하며, 소문자로, 속성은 중괄호로 작성해야 하며, 각 속성 문은 세미콜론으로 끝나야 합니다. 및 속성 값에는 픽셀 단위(px)가 있어야 합니다. 형식: 속성: 속성 값
4. CSS 소개 방법
인라인 소개: 웹페이지 헤더에 을 추가하세요. 코드는 상대적으로 열악합니다. CSS 코드와 HTML 구조의 분리는 현재 페이지에만 적용됩니다.
외부 링크 소개: 웹 페이지 외부에서 xx.css 파일을 만들고 <를 사용합니다. ;link rel="stylesheet" type="text/css" href="xx.css"> 웹페이지 헤더에 ;참고: 코드는 유지 관리가 용이하며 CSS 코드는 HTML과 완전히 분리되어 있습니다. 구조이며 영향의 범위는 전체 웹사이트에 CSS 파일을 소개하는 모든 웹페이지에 있습니다.
5. CSS 핵심 구문:
범용 선택기: 스타일 시트 시작 부분에 작성된 웹 페이지의 기본 스타일을 초기화하는 데 사용됩니다. 0;margin:0;};
참고: 클래스 이름은 class="one"과 같이 태그에 정의되어 있습니다. 여러 블록의 콘텐츠 스타일이 동일한 경우에는 동일한 스타일을 지정하세요.
;
id와 클래스의 차이점: 이전 사항에 주의하세요. - ID는 고유하게 결정된 DOM 노드여야 합니다. 기사 전반에 걸쳐 ID 선택기를 사용하는 경우 두 개의 DOM 노드 스타일이 정확히 동일하더라도 노드 스타일을 두 번 작성해야 합니다. 나중에 유지하려면 두 위치 모두에서 코드를 유지해야 합니다! ! !
유사 클래스 선택기: 순차 LoVe HAte 원칙, 건너뛸 수 있지만 순서는 변경할 수 없습니다. 링크 상태(link), 방문 상태(visited), 활동 상태 (호버) 및 클릭 상태(활성)점 그리기 클래스: a:link{color:yellow;} a:visited{color:blue;} a:hover{color:red;} a:active{ color:pin;} 포커스를 받을 때의 스타일 a:focus{};
list 클래스 : li:link{color:yellow;};li:visited{color:blue;} li:hover{color:red;} li:active{color:pin;};
참고: 텍스트 시리즈 속성을 속성, 배경색 및 그림 등복합 선택기:
그룹 선택기(union 선택기, 다중 선택기): 여러 요소에 동일한 스타일을 추가하는 데 사용됩니다. 예: .one,#one,a,span{color:red;font-size:14px ;}는 클래스 1을 의미합니다. , #one, a 태그, span 태그에는 공통 속성이 있습니다.
하위 클래스 선택기: 하위 클래스 요소에 속성을 추가합니다. 예: .one a{text-꾸밈:none;}은 클래스의 a 태그로 수정된 콘텐츠를 의미합니다.
하위 요소 선택자(지정된 선택자): 지정된 하위 요소에 속성을 추가합니다. 예: #one>p{color:red;}는 id 선택자 one의 아들을 의미합니다. p 태그 나머지, 속성 추가
인접 요소 선택기:
1. 두 개의 인접한 형제 선택기는 속성을 추가하지만 다음 형제에만 속성을 추가하지 않습니다. p{배경:red;};
2.one~p{배경:녹색}은 상위 클래스가 있는 경우 하나의 선택기 뒤의 모든 p 태그 요소에 속성을 추가하는 것을 의미합니다.
속성 선택기:
1. 속성이 있는 요소에 속성 추가; img[id]{배경:red;}id가 있는 요소에 속성 추가;
지정된 속성 값이 있는 요소에 속성 추가: img[src="b.jpg "]{배경:red;}b.jpg;
3을 사용하여 요소에 속성을 추가합니다. 지정된 문자로 시작하는 속성 추가 요소에 속성 추가: img[src^="b"]{배경:red;} b;로 시작하는 모든 요소에 속성을 추가합니다.
4. 선택기에는 지정된 속성 값으로 끝나는 요소가 있습니다. img[src $="b"]{Background:red;}b;
5로 끝나는 모든 요소에 속성을 추가합니다. 선택기에는 지정된 속성 값을 포함하는 요소가 있습니다: img[src*="b"]{Background:red; }b;7을 포함하는 모든 요소에 속성을 추가합니다. 요소 포함(표시 방법 범주)
블록 요소: 조판에 사용되며 일반적인 구조는 다음과 같습니다: p, p, li, h1, dt
요소는 너비와 관계없이 자체 줄에 표시됩니다. height; 블록 수준 요소를 중첩할 때 하위 요소가 너비를 설정하지 않으면 하위 요소의 너비는 다음과 같습니다. 너비는 상위 요소의 너비입니다. : 스타일을 추가하는 데 사용됩니다.
참고: 인라인 요소에 위쪽 및 아래쪽 여백을 지정하지 마세요. 위쪽 및 아래쪽은 무시되고 왼쪽 및 오른쪽은 작동합니다.- 요소는 한 줄에 표시됩니다.
- 너비와 높이를 직접 설정할 수 없습니다.
요소는 한 줄에 표시됩니다.
너비와 높이를 설정할 수 있습니다.
Display: block 요소를 블록 요소로 변환- 인라인에는 블록 요소가 포함되고, 블록 요소에는 인라인 요소가 포함될 수 있습니다. : inline-block 요소를 인라인 블록 요소로 변환
8.CSS 속성
- 글꼴 관련 속성:
font -size: 글꼴 크기, 픽셀 수, px; font-weight: 글꼴 두께, 굵게(700-900), 보통, 100-900으로 쓸 수 있습니다.
참고: 글꼴 속성은 글꼴 크기 및 글꼴 계열과 결합되어야 합니다(다른 속성은 생략 가능). 글꼴 크기 및 글꼴 계열의 순서는 변경할 수 없습니다.- font-style: 글꼴 기울임꼴 기울임꼴, 일반
- font-family: 글꼴, Microsoft Yahei, 굵은 글씨
- 속성 연결: 글꼴: 글꼴 스타일 글꼴-가중 글꼴 크기/줄 높이 글꼴-가족;
- 텍스트:
- color: ;
- text-indent: 들여쓰기 [단위는 em];
- text-design: 텍스트 줄 [밑줄, 윗줄, 취소선 없음];
- word-spacing: 사이의 거리 단어;
- letter-spacing: 문자 키 거리;
text-align: 가로 정렬 [기본값 왼쪽, 가운데, 오른쪽]
line-height: 줄 높이, 줄 높이 텍스트가 위치합니다
[줄 높이가 요소의 높이와 같을 때 텍스트가 세로로 중앙에 위치합니다];
- 크기: 블록 요소의 크기입니다. 너비와 높이를 설정할 수 없습니다. 인라인 요소의 경우 변환해야 합니다.
- width: width;
- 기호, 사각형, 원, 디스크형 원을 제거하세요. 목록 스타일을 작성하지 않고도 사진을 추가할 수 있습니다. -유형:없음;
list ul, li: list-style-type ul에 추가할 수 있지만 li에 추가할 필요는 없습니다.
list-style-type:none;- list-style-image :url(1.jpg)
picture
border:1px 단색 빨간색;ul 전체에 대한 테두리 설정
list-style-position:outside;스타일 이미지 위치: 내부, 외부
배경:
배경 색상 background-color;
배경 이미지 background-image참고: 배경 이미지 설정 시 너비와 높이를 설정해야 합니다.
배경 타일 background-repeat: 반복(기본값) | no-repeat (타일링 아님) |repeat-x | (가로 타일링) Repeat-y (세로 타일링)
배경 위치 background-position: 왼쪽| 오른쪽| top| 특정 값 설정 순서는 구분되지 않습니다. 특정 숫자를 설정할 때 첫 번째 값은 가로 방향을 나타내고 두 번째 값은 세로 방향을 나타내며 전면 배경 이미지의 설정 형식이 배경 이미지로 변경됩니다. 배경 고정 여부 설정 배경 첨부: 스크롤(기본값) 스크롤; 고정(그림 고정)
속성 공동 작성: 수량 제한 및 주문 제한 없음: 배경:url("") 빨간색 no- 이탄 30px 40px;
- line-height:
Box 모델: 웹 페이지 레이아웃에 사용되며 너비를 설정해야 합니다.
Box 테두리 속성:
- 구성 요소:
- 테두리 너비 높이: 테두리 너비: 1px;
테두리 색상: 테두리 색상: 빨간색
- 속성 연결 쓰기: 테두리: 1px 단색 빨간색; 참고: 속성 연결 쓰기 시 순서 제한은 없습니다.
테두리 스타일: 단색/점선/점선/없음;
- 별도 쓰기 방법:
- border. 테두리:
- padding 내부 여백: 내용과 상자 테두리 사이의 거리 설정
- margin 외부 여백: 상자와 상자 사이의 거리 설정
p{ width:300px; height:200px; border-top:1px solid red; border-left:1px solid red; border-right:1px solid red; border-bottom:1px solid red; }로그인 후 복사6. 单独设置属性法：로그인 후 복사border-top-color:red; border-top-style:solid; border-top-width:1px;로그인 후 복사- 상자 크기:
- 상자 크기의 영향 장소:
상속된 상자는 상위 상자의 너비 범위 내에 있으며 패딩 값은 상자 크기에 영향을 미치지 않습니다.
상자 크기 계산: 너비 = 내용 너비 + 왼쪽 및 오른쪽 테두리 + 왼쪽 및 오른쪽 패딩
테두리는 상자의 크기에 영향을 미칠 수 있습니다
내부 여백은 상자의 크기에 영향을 줍니다
- 앞으로는 페이지 상자 레이아웃이 구현됩니다. 상자에 내부 여백이 설정된 경우 해당 값을 콘텐츠 너비 또는 높이에서 빼야 합니다.
- margin: 상자 사이의 거리를 설정합니다.
상자 중심 정렬:
속성 공동 작성:
표준 흐름 상자 중심 배치: 여백: 0 px 자동;
위치가 지정된 상자는 중심에 있습니다. 먼저 상위 상자의 절반을 가져온 다음 다시 절반으로 돌아갑니다. 자체 너비
참고:- 여백: 10px 진:10px 20px 10px 상하 20px 좌우
- 여백: 10px 20px 30px 위쪽 10px 왼쪽 및 오른쪽 20px 아래쪽 30px
- 여백: 10px 0px 30px 40px 오른쪽 상단 , 왼쪽 하단
one{ width: 100px; height:100px; border: solid red 1px; position: absolute; left: 50%; margin-left: -50px; }로그인 후 복사
속성 준수: 패딩: 10px 위, 오른쪽, 아래, 왼쪽 거리는 10px
pa 추가: 10px 20px; 아래쪽 10px 20px
- padding: 10px 20px 30px; 최대 10px 20px 아래쪽 30px
- Padding: 10px 20px 30px 40px; 위쪽, 오른쪽, 아래쪽, 왼쪽
- 두 개의 상자가 세로로 표시되는 경우 , 여백은 설정된 최대값에 따릅니다(여백이 병합됩니다. 첫 번째 경우), 두 개의 상자가 가로로 표시되면 여백이 겹칩니다.
- 여백이 무너집니다(어려운 문제) 해결 방법:
- padding inner 여백: 내용과 상자 테두리 사이의 거리를 설정합니다. Distance
상위 상자에 테두리를 설정합니다
- 상위 상자에 오버플로:숨김;
- 을 설정합니다.
清除边距：
方法1：*{padding：0；margin：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，font-size，font-weight，font-family
不可继承：text-decoration，border，display，margin，float，padding
继承性发生的前提是标签之间属于一种嵌套关系
文字颜色可以实现继承；文字大小可以实现继承；字体可以实现继承；与文字有关的属性都可以 实现继承
行高可以实现继承
特殊性：
不能继承父元素中的文字颜色（层叠掉了）
- 标题标签不能继承父元素中的文字大小
重叠性：层叠性是指样式的覆盖
样式的层叠性与样式的调用顺序没有关系，与样式的定义顺序有关。
层叠性发生的前提： 样式冲突
优先级：
权重：行内引入（1000）>id(100)>class(10)>标签（1）>通用(0)
把权重相加，值越大越有先
权重一样，后面的样式起作用
10.补充知识笔记
表单优化写法：
用户名： 格式化列表图标：list-style: none
表单合并：border-collapse:collapse(设置表格边框合并，适用于表格）
Bfc “格式化上下文”
overflow:
visible:默认值。内容不会被修剪，会呈现在元素框之外
hidden:内容会被修剪，并且其余内容是不可见的;当图片改变位置时带动父元素也改变位置，给父元素加此属性值可使父元素位置不变
scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
11.标准流：块级元素独占一行显示；标准流的显示方式：元素默认的显示方式
12.浮动：浮动用来解决文字图片环绕问题；用来制作导航栏，网页布局
用法： Float:left| right
特点：要浮动都浮动
设置了浮动的元素不占原来的位置（脱标）
可以让块级元素在一行上显示
浮动可以行内元素转化为行内块元素
模式转换的过程中，能用display就用display
清除浮动：
定义：清除浮动不是删除浮动；清除浮动指的是清除浮动的影响
注意使用时机：当子元素设置了浮动，父元素没有高度的时候，造成页面布局混乱；这种情况下进行清除浮动。
清除浮动方法：
[x]注意：在要清除浮动的元素后面添加一个空块元素（,标签），在添加的空元素中加clear:both | left |right.clearfix{ clrar:both; } <p class="content"> <p class="left"></p> <p class="right"></p> <p class="clearfix"></p> </p>로그인 후 복사[x]给父盒子设置overflow:hidden;**注意：如果父盒子中有定位的元素，一般不推荐使用该种方式清除浮动**로그인 후 복사.content{ width:500px； overflow:hidden; }로그인 후 복사[x]使用伪元素清除浮动로그인 후 복사.clearfix:after{ content:""; display:block; clear:both; height:0; visibility:hidden; } .clearfix { zoom:1; } <p class="content clearfix"> <p class="left"></p> <p class="right"></p> </p>로그인 후 복사13.定位：方位：left、right、top、bottom
静态定位：静态定位就是元素标准流的显示方式position:static;就是默认的定位
绝对定位：相对于定位元素的父元素或者祖先元素定位，如果父元素和祖先元素不存在定位，就会找到最初的包含层；不占有以前的位置；position：absolute；
当给一个单独的元素设置绝对定位，以浏览器左上角（body）为基准设置定位的。
当盒子发生嵌套关系的时候，如果父盒子没有设置定位，子盒子设置定位以浏览器左上角为基准设置定位。
当盒子发生嵌套关系的时候，如果父盒子设置定位，子盒子设置定位父盒子左上角为基准设置定位。
위치를 차지하지 않는 상자의 절대 위치 설정(오프 라벨)
인라인 요소의 절대 위치 설정 후 해당 요소는 인라인 블록 요소로 변환됩니다
참고: 요소가 절대 위치로 설정되어 있으면 특정 방향 이름을 통해 원하는 대로 요소의 위치를 설정할 수 있습니다.
상대 위치 지정: 요소의 원래 위치를 기준으로 이전 위치를 차지합니다. ;
요소가 상대 위치로 설정되면 원래 위치를 차지합니다.
위치는 자신의 위치를 기준으로 설정합니다.
하위 요소에는 상위 단계가 있어야 합니다(하위 요소는 절대 위치를 설정하고 상위 요소는 상대 위치를 설정함).
- 고정 위치: 전체 안정 위치에 상대적입니다. 고정 위치 지정은 위치를 차지하지 않습니다(오프 라벨). 인라인 요소를 인라인 블록 요소로 변환 위치: 고정
레벨 문제:
- 위치 지정이 설정된 경우에만 계층적 문제가 발생합니다
브라우저의 좌표계
형제 요소 사이에는 상대, 절대 및 기타 위치가 있습니다. HTML 문서 구조는 뒤쪽에 있고 가장 바깥쪽 레이어(상위 레벨)에 있습니다.
Z-index: 레벨을 설정하고 값은 숫자입니다. 포지셔닝이 있는 한 포지셔닝 설정이 사용됩니다
14. CSS Elf Rabbit: 투명 문서 선택
점은 올바른 방향으로 양수입니다. 점은 양수입니다
CSS 스프라이트는 웹페이지 배경 이미지를 처리하는 방법입니다. 스프라이트 맵도 일종의 배경 이미지입니다.
스프라이트 맵 사용
- 사용 시 반드시 열어두세요. fw 스프라이트 차트 열기
overflow: Hidden 초과 부분 숨기기
스프라이트 차트를 배경 이미지로 사용할 때 배경 위치와 함께 사용되는 경우가 많습니다
스프라이트 차트 요소의 좌표를 측정하려면 직사각형 선택기를 사용하세요
또는 단축키 키 문자 사용: k
15. CSS visible
모든 inlne-block 요소에는 기본 수직 정렬이 있습니다. 기준선
display: 없음 요소 직접 숨기기
display: block Display 요소(js로 업데이트) )
visibility:hidden 요소 숨기기
display: 없음; 요소를 숨기고 해당 위치를 차지하지 않음
visibility: 숨김; position
1 6. 그림 텍스트를 중앙에 배치합니다.
웹 페이지 레이아웃 중에 표준 흐름을 사용할 수 있다면 표준 흐름을 사용하세요
vertical-align: 중간 수직 정렬이 더 잘 일치합니다. inline-block;
17. 표준을 벗어난 흐름을 피하세요
p는 아래의 모든 라벨을 포함할 수 있습니다. 표준 흐름
표준 흐름은 부동을 해결할 수 없습니다
플로팅은 위치 지정을 해결할 수 없습니다.
margin-left 사용/ margin-right 값이 auto인 경우 상자가 자동으로 두 개의 바깥쪽 측면으로 플러시될 수 있습니다.
18 라벨 포함 사양
플로팅 후 요소는 너비와 높이를 설정할 수 있습니다
p 라벨에는 p와 제목 태그 및 목록 태그가 포함될 수 없습니다.
제목 메모에는 다른 태그가 포함될 수 있습니다.
인라인 요소에는 다른 태그가 포함되지 않는 것이 가장 좋습니다
19. 및 높이
CSS2로 업그레이드: CSS는 강력하고 간단한 코드
절대 위치 지정 후 요소는 너비와 높이를 설정할 수 있습니다
고정 위치 지정 후 요소는 너비와 높이를 설정할 수 있습니다
20. CSS3
의사 클래스 선택기:
- 첫 번째 하위 요소: first-child
최고의 요소: last-child
n번째 하위 요소: n번째-child 또는 (nth-child(2n))
- text-shadow: 수평, 수직, 그림자
- box-shaadow: box-shaadow: 수평, 수직, 그림자
- 배경: 배경
관련 권장 사항:
- CSS의 속성 값 상속 지식 종합 요약
위 내용은 가장 간결한 CSS 학습 노트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
