가장 간결한 CSS 학습 노트

CSS는 HTML(Standard Generalized Markup Language의 응용 프로그램) 또는 XML(Standard Generalized Markup Language의 하위 집합)과 같은 파일 스타일을 표현하는 데 사용되는 컴퓨터 언어입니다. CSS는 웹페이지를 정적으로 수정할 수 있을 뿐만 아니라 다양한 스크립트 언어와 협력하여 웹페이지의 다양한 요소의 형식을 동적으로 지정할 수도 있습니다. CSS는 웹 페이지의 요소 위치 레이아웃에 대해 픽셀 수준의 정밀한 제어를 수행할 수 있고 거의 모든 글꼴 크기와 스타일을 지원하며 웹 개체 및 모델 스타일을 편집할 수 있는 기능을 갖추고 있습니다.

1. 공통 속성

---

1. name: 이름, 반복 가능, 동일할 수 있음

2. class: 클래스 이름, 반복 가능 또는 CSS의 경우; p class="one two"

   ;

3. id: 고유 식별자, 반복할 수 없으며 일반적으로 JavaScript에서 사용되는 명명 규칙은 다른 언어의 명명 규칙과 동일합니다. : 제목, 태그에 추가할 수 있습니다(예: ;

4. 2. 태그 관계

하위 관계: 부모) -자녀 관계(관계 포함);

---

1. 형제 관계: 동부 관계;

2. 3.CSS-Cascading Style Sheet

CSS 주석: /

---

주석 내용은 프로그래머를 위해 여기에 작성되었습니다.

/;

1. CSS 구문 규칙: 모든 기호는 영어 입력 모드로 입력해야 하며, 소문자로, 속성은 중괄호로 작성해야 하며, 각 속성 문은 세미콜론으로 끝나야 합니다. 및 속성 값에는 픽셀 단위(px)가 있어야 합니다. 형식: 속성: 속성 값

2. 4. CSS 소개 방법

태그에 스타일을 추가하는 방법 형식; : Content;

---

참고: 코드 유지 관리가 매우 열악하며 CSS 코드와 HTML 구조는 범위가 분리되지 않습니다. 영향은 현재 태그에만 있습니다.

1. 인라인 소개: 웹페이지 헤더에 을 추가하세요. 코드는 상대적으로 열악합니다. CSS 코드와 HTML 구조의 분리는 현재 페이지에만 적용됩니다.

2. 외부 링크 소개: 웹 페이지 외부에서 xx.css 파일을 만들고 <를 사용합니다. ;link rel="stylesheet" type="text/css" href="xx.css"> 웹페이지 헤더에 ;참고: 코드는 유지 관리가 용이하며 CSS 코드는 HTML과 완전히 분리되어 있습니다. 구조이며 영향의 범위는 전체 웹사이트에 CSS 파일을 소개하는 모든 웹페이지에 있습니다.

3. 5. CSS 핵심 구문:

구조 형식: selector {속성: 속성 값; value;...}; 예: p{배경:red;color:gray;size:20px;};

---

1. Selector: 페이지 요소 선택 도구;

2. Braces: 중괄호 안에 스타일 내용을 씁니다. ;

3. 6. 선택기

기본 선택기:

---

1. 범용 선택기: 스타일 시트 시작 부분에 작성된 웹 페이지의 기본 스타일을 초기화하는 데 사용됩니다. 0;margin:0;};

• 레이블 선택기: 지정된 레이블에 스타일 추가; 형식: p{color:green;};

• 클래스 선택기: 지정된 클래스 선택 선택기 형식: .class; name {Background: pink;}

  참고: 클래스 이름은 class="one"과 같이 태그에 정의되어 있습니다. 여러 블록의 콘텐츠 스타일이 동일한 경우에는 동일한 스타일을 지정하세요.

id 선택기: 고유 식별자, 반복해서 나타날 수 없습니다. 형식: #id name{backgound-image:url(1.jpg);}
• 참고: id 이름은 id="one";id 태그에 정의되어 있습니다. 여러 블록의 콘텐츠 스타일이 동일한 경우 여러 블록의 ID 이름이 달라야 합니다.

  ;

• 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{};

참고: a{} 및 a:link{}에 텍스트 특성, 배경색 및 그림을 추가하면 동일한 효과를 얻을 수 있습니다.

• 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가 있는 요소에 속성 추가;

1. 지정된 속성 값이 있는 요소에 속성 추가: 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을 포함하는 모든 요소에 속성을 추가합니다. 요소 포함(표시 방법 범주)

---

1. 블록 요소: 조판에 사용되며 일반적인 구조는 다음과 같습니다: p, p, li, h1, dt

• 요소는 너비와 관계없이 자체 줄에 표시됩니다. height; 블록 수준 요소를 중첩할 때 하위 요소가 너비를 설정하지 않으면 하위 요소의 너비는 다음과 같습니다. 너비는 상위 요소의 너비입니다. : 스타일을 추가하는 데 사용됩니다.

  참고: 인라인 요소에 위쪽 및 아래쪽 여백을 지정하지 마세요. 위쪽 및 아래쪽은 무시되고 왼쪽 및 오른쪽은 작동합니다.
요소는 한 줄에 표시됩니다.
너비와 높이를 직접 설정할 수 없습니다.

요소는 한 줄에 표시됩니다.

너비와 높이를 설정할 수 있습니다.
• 인라인에는 블록 요소가 포함되고, 블록 요소에는 인라인 요소가 포함될 수 있습니다. : inline-block 요소를 인라인 블록 요소로 변환

Display: block 요소를 블록 요소로 변환

8.CSS 속성
• 글꼴 관련 속성:

font -size: 글꼴 크기, 픽셀 수, px;

font-weight: 글꼴 두께, 굵게(700-900), 보통, 100-900으로 쓸 수 있습니다.
font-style: 글꼴 기울임꼴 기울임꼴, 일반
font-family: 글꼴, Microsoft Yahei, 굵은 글씨
속성 연결: 글꼴: 글꼴 스타일 글꼴-가중 글꼴 크기/줄 높이 글꼴-가족;

참고: 글꼴 속성은 글꼴 크기 및 글꼴 계열과 결합되어야 합니다(다른 속성은 생략 가능). 글꼴 크기 및 글꼴 계열의 순서는 변경할 수 없습니다.

---

1. 텍스트:

• 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;

1. 테두리 색상: 테두리 색상: 빨간색

2. 테두리 스타일: 단색/점선/점선/없음;

속성 연결 쓰기: 테두리: 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;

8. 상자 크기:

1. 상자 크기의 영향 장소:

   상속된 상자는 상위 상자의 너비 범위 내에 있으며 패딩 값은 상자 크기에 영향을 미치지 않습니다.

• 상자 크기 계산: 너비 = 내용 너비 + 왼쪽 및 오른쪽 테두리 + 왼쪽 및 오른쪽 패딩

• 테두리는 상자의 크기에 영향을 미칠 수 있습니다

내부 여백은 상자의 크기에 영향을 줍니다
앞으로는 페이지 상자 레이아웃이 구현됩니다. 상자에 내부 여백이 설정된 경우 해당 값을 콘텐츠 너비 또는 높이에서 빼야 합니다.
3. 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

상위 상자에 테두리를 설정합니다
상위 상자에 오버플로:숨김;
2. 을 설정합니다.

1. 清除边距：

1. 方法1：*{padding：0；margin：0；}

2. 方法2: Body,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,p,span{margin:0px;padding:0px;}

9.CSS的三大特性

---

1. 继承性：

• 可继承性：color，text-align，text-indent，font-size，font-weight，font-family

• 不可继承：text-decoration，border，display，margin，float，padding

• 继承性发生的前提是标签之间属于一种嵌套关系

• 文字颜色可以实现继承；文字大小可以实现继承；字体可以实现继承；与文字有关的属性都可以 实现继承

• 行高可以实现继承

• 特殊性：

1. 不能继承父元素中的文字颜色（层叠掉了）

2.         标题标签不能继承父元素中的文字大小

重叠性：层叠性是指样式的覆盖

• 样式的层叠性与样式的调用顺序没有关系，与样式的定义顺序有关。

• 层叠性发生的前提： 样式冲突

优先级：

• 权重：行内引入（1000）>id(100)>class(10)>标签（1）>通用(0)

• 把权重相加，值越大越有先

• 权重一样，后面的样式起作用

10.补充知识笔记

---

1. 表单优化写法：用户名：

2. 格式化列表图标：list-style: none

3. 表单合并：border-collapse:collapse(设置表格边框合并，适用于表格）

4. Bfc   “格式化上下文”

5. overflow:

• visible:默认值。内容不会被修剪，会呈现在元素框之外

• hidden:内容会被修剪，并且其余内容是不可见的;当图片改变位置时带动父元素也改变位置，给父元素加此属性值可使父元素位置不变

• scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容

• auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

11.标准流：块级元素独占一行显示；标准流的显示方式：元素默认的显示方式

---

12.浮动：浮动用来解决文字图片环绕问题；用来制作导航栏，网页布局

---

• 用法： Float:left| right

• 特点：要浮动都浮动

1. 设置了浮动的元素不占原来的位置（脱标）

2. 可以让块级元素在一行上显示

3. 浮动可以行内元素转化为行内块元素

4. 模式转换的过程中，能用display就用display

清除浮动：

1. 定义：清除浮动不是删除浮动；清除浮动指的是清除浮动的影响

2. 注意使用时机：当子元素设置了浮动，父元素没有高度的时候，造成页面布局混乱；这种情况下进行清除浮动。

3. 清除浮动方法：
    [x]注意：在要清除浮动的元素后面添加一个空块元素（

   ,标签），在添加的空元素中加clear:both | left |right

     .clearfix{
            clrar:both;
      }
     <p>
           </p><p></p>
           <p></p>
           <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>
     </p><p></p>
     <p></p>
     

13.定位：方位：left、right、top、bottom

---

• 静态定位：静态定位就是元素标准流的显示方式position:static;就是默认的定位

• 绝对定位：相对于定位元素的父元素或者祖先元素定位，如果父元素和祖先元素不存在定位，就会找到最初的包含层；不占有以前的位置；position：absolute；

1. 当给一个单独的元素设置绝对定位，以浏览器左上角（body）为基准设置定位的。

2. 当盒子发生嵌套关系的时候，如果父盒子没有设置定位，子盒子设置定位以浏览器左上角为基准设置定位。

3. 当盒子发生嵌套关系的时候，如果父盒子设置定位，子盒子设置定位父盒子左上角为基准设置定位。

4. 위치를 차지하지 않는 상자의 절대 위치 설정(오프 라벨)

5. 인라인 요소의 절대 위치 설정 후 해당 요소는 인라인 블록 요소로 변환됩니다

6. 참고: 요소가 절대 위치로 설정되어 있으면 특정 방향 이름을 통해 원하는 대로 요소의 위치를 ​​설정할 수 있습니다.

• 상대 위치 지정: 요소의 원래 위치를 기준으로 이전 위치를 차지합니다. ;

1. 요소가 상대 위치로 설정되면 원래 위치를 차지합니다.

2. 위치는 자신의 위치를 ​​기준으로 설정합니다.

3. 하위 요소에는 상위 단계가 있어야 합니다(하위 요소는 절대 위치를 설정하고 상위 요소는 상대 위치를 설정함).

고정 위치: 전체 안정 위치에 상대적입니다. 고정 위치 지정은 위치를 차지하지 않습니다(오프 라벨). 인라인 요소를 인라인 블록 요소로 변환 위치: 고정

• 레벨 문제:

위치 지정이 설정된 경우에만 계층적 문제가 발생합니다

1. 형제 요소 사이에는 상대, 절대 및 기타 위치가 있습니다. HTML 문서 구조는 뒤쪽에 있고 가장 바깥쪽 레이어(상위 레벨)에 있습니다.

2. Z-index: 레벨을 설정하고 값은 숫자입니다. 포지셔닝이 있는 한 포지셔닝 설정이 사용됩니다

3. 14. CSS Elf Rabbit: 투명 문서 선택

브라우저의 좌표계

---

• 점은 올바른 방향으로 양수입니다. 점은 양수입니다

• CSS 스프라이트는 웹페이지 배경 이미지를 처리하는 방법입니다. 스프라이트 맵도 일종의 배경 이미지입니다.

• 스프라이트 맵 사용

사용 시 반드시 열어두세요. fw 스프라이트 차트 열기

1. 스프라이트 차트를 배경 이미지로 사용할 때 배경 위치와 함께 사용되는 경우가 많습니다

2. 스프라이트 차트 요소의 좌표를 측정하려면 직사각형 선택기를 사용하세요

3. 또는 단축키 키 문자 사용: k

4. 15. CSS visible

overflow: Hidden 초과 부분 숨기기

---

• display: 없음 요소 직접 숨기기

• display: block Display 요소(js로 업데이트) )

• visibility:hidden 요소 숨기기

• display: 없음; 요소를 숨기고 해당 위치를 차지하지 않음

• visibility: 숨김; position

• 1 6. 그림 텍스트를 중앙에 배치합니다.

모든 inlne-block 요소에는 기본 수직 정렬이 있습니다. 기준선

---

• vertical-align: 중간 수직 정렬이 더 잘 일치합니다. inline-block;

• 17. 표준을 벗어난 흐름을 피하세요

웹 페이지 레이아웃 중에 표준 흐름을 사용할 수 있다면 표준 흐름을 사용하세요

---

• 표준 흐름은 부동을 해결할 수 없습니다

• 플로팅은 위치 지정을 해결할 수 없습니다.

• margin-left 사용/ margin-right 값이 auto인 경우 상자가 자동으로 두 개의 바깥쪽 측면으로 플러시될 수 있습니다.

• 18 라벨 포함 사양

p는 아래의 모든 라벨을 포함할 수 있습니다. 표준 흐름

---

• p 라벨에는 p와 제목 태그 및 목록 태그가 포함될 수 없습니다.

• 제목 메모에는 다른 태그가 포함될 수 있습니다.

• 인라인 요소에는 다른 태그가 포함되지 않는 것이 가장 좋습니다

• 19. 및 높이

플로팅 후 요소는 너비와 높이를 설정할 수 있습니다

---

• 절대 위치 지정 후 요소는 너비와 높이를 설정할 수 있습니다

• 고정 위치 지정 후 요소는 너비와 높이를 설정할 수 있습니다

• 20. CSS3

CSS2로 업그레이드: CSS는 강력하고 간단한 코드

---

• 의사 클래스 선택기:

첫 번째 하위 요소: first-child

1. 최고의 요소: last-child

2. n번째 하위 요소: n번째-child 또는 (nth-child(2n))

text-shadow: 수평, 수직, 그림자
box-shaadow: box-shaadow: 수평, 수직, 그림자
배경: 배경

• 관련 권장 사항:

• CSS의 속성 값 상속 지식 종합 요약

  CSS 단락 속성에 대한 자세한 설명

  20가지 고급 CSS 기술 요약

위 내용은 가장 간결한 CSS 학습 노트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!