"프론트 엔드 삼총사": CSS 공통 속성

기사 디렉토리

1. CSS 공통 요소 속성

1.1 글꼴 패밀리 및 글꼴 크기

설정된 글꼴은 Windows와 함께 제공되는 글꼴이어야 하며 시스템에 설치된 글꼴이 필요합니다.

css를 사용하여 글꼴을 Microsoft Yahei 및 Arial로 설정하고 글꼴 크기를 30px 및 40px로 설정합니다.

글꼴 - 크기는 글꼴의 문자 상자 높이를 설정합니다.

<body>

    <style>
        .fontfamily .one{
      
      
            font-family: '微软雅黑';
            font-size: 30px;
        }
        .fontfamily .two{
      
      
            font-family: '宋体';
            font-size: 40px;
        }
    </style>

       <div class="fontfamily">
        <div class = "one">
            这是微软雅黑字体
        </div> 
        <div class="two">
            这是宋体
        </div>   
    </div>
</body>

설정 효과는 다음과 같습니다

이미지-20230310144108750

1.2 글꼴 두께 설정 font-weight

글꼴 두께 값을 설정할 때 두 가지 설정 스타일이 있습니다.

단어 설정 사용: 보통(보통 굵기 400) , 굵게(굵게 700 )

숫자 설정 사용: 1 - 1000 사이의 값, 정상 체중 크기는 400

<body>
    <style>
        /* 使用单词设置 font-weight */
        .font-weight .one{
      
      
            font-weight:normal;
        } 
        .font-weight .two{
      
      
            font-weight: bold;
        }
        /* 使用数字设置  font-weight */
        .font-weight .three{
      
      
            font-weight:200;
        }
    </style>
    
    <div class="font-weight">
        <div class="one">
            正常粗细
        </div>
        <div class="two">
            加粗
        </div>
        <div class="three">
            变细
        </div>
    </div>    
</body>

표시 효과는 다음과 같습니다.

이미지-20230310145859229

1.3 텍스트 스타일

실제 사용시 주요 기능 은 css 스타일 설정을 통해 html로 설정한 태그와 태그를 정상으로 복원하는 것입니다.

/* 设置字体为倾斜 */
font-style: italic
/* 设置字体为正常格式 */
font-style: normal;

1.4 텍스트 색상

우리가 매일 보는 많은 빛이 혼합되어 있습니다.빨강, 초록, 파랑이 섞여 있습니다. 컴퓨터에서는 R, G, B를 혼합하여 색상을 표현하는데, 이를 RGB 표현이라고 합니다. 3가지 요소의 조합을 통해 다른 비율로 다른 색상을 표현할 수 있습니다.

RGB의 세 가지 구성 요소를 나타내는 바이트를 할당합니다. 각 바이트 범위는 0~255입니다.

<style>
       .color{
      
      
        /* 使用预定义的颜色值 */
        color: red;
        /* 使用十六进制表示 */
        color: #ff0000;
        /* 使用 R G B 混合表示 */
        color: rgb(255, 0,0);
       }    
 </style>
// 通过设置 rgb 的值得控制混合颜色的结果

1.5 텍스트 정렬

text - align 속성을 사용하여 텍스트 정렬을 설정합니다.

<body>
    <style>
       .text-align .one{
        /* 设置文本居中对齐 */
        text-align: center;
       }
       .text-align .two{
        /*设置文本为靠左对齐 */
        text-align: left;
       }
       .text-align .three{
        /* 设置文本为靠右对齐 */
        text-align: right;
       }
    </style>
    <div class="text-align">
        <div class="one">文本居中对齐</div>
        <div class="two">文本靠左对齐 </div>
        <div class="three">文本靠右对齐 </div>
    </div>
</body>

text - align 속성을 설정하여 페이지의 텍스트 정렬을 설정합니다.

1.6 텍스트 장식

텍스트 - 데코레이션을 설정하여 텍스트의 장식을 설정합니다.

 /* 设置文本下划线 */
        text-decoration: underline;
        /* 清空文本装饰  可以给 a 标签链接去掉下划线*/
        text-decoration: none;
        /* 设置文本下划线 */
        text-decoration: overline;
        /* 设置文本的删除线 */
        text-decoration: line-through;

1.7 텍스트 들여쓰기

텍스트 들여쓰기는 단락의 한 줄에 두 단어의 들여쓰기를 제어할 수 있습니다. 다른 줄은 영향을 받지 않습니다. text-indent를 사용하여 들여쓰기 거리를 제어합니다. 단위는 px 또는 em일 수 있으며 em은 텍스트 크기에 따라 설정됩니다. , 텍스트 크기가 40픽셀이라고 가정하면 1em = 40픽셀입니다.

이미지-20230310154447883

텍스트 들여쓰기의 크기는 음수일 수도 있으며, 음수로 설정하면 왼쪽으로 들여쓰기됩니다.

1.8 배경 속성

배경 속성에는 주로 배경색, 배경 이미지, 배경 타일링, 배경 위치, 배경 크기가 포함됩니다.

배경 타일링 옵션: 반복 타일링 no-repeat: 타일링 없음 repeat-x: 수평 타일링 repeat-y: 수직 타일링
배경 위치: 방향 명사, 정밀 단위, 혼합 단위, 컴퓨터의 좌표계는 일반적으로 왼손 좌표계,
배경 크기: 상위 요소의 크기에 따라 설정되는 특정 값 또는 백분율일 수 있습니다. 표지(배경이 완전히 덮임) 포함(배경이 콘텐츠 영역에 맞게 조정됨)

사용 사례 :

<body>
    <style>
       .pg{
      
      
        /* 设背景颜色 */
        background-color: transparent;
        /* 设置背景链接 */
        background-image:url(test.jpg);
        /* 设置背景图片不平铺 */
        background-repeat: no-repeat;
        /* 设置图片方位 */
        background-position:center center;
        /* 设置背景图片的尺寸 */
        height: 500px;
       }
    </style>
    <div class= "pg">
        这是一张背景
    </div>
</body>

이미지-20230310182434550

1.9 테두리 설정

HTML 요소는 기본적으로 모두 사각형이지만 일상생활에서는 둥근 사각형이 일반적으로 사용되며, css에서는 테두리 - 반경을 통해 테두리가 둥근 사각형으로 설정됩니다.

leetcode 페이지의 많은 요소는 둥근 사각형을 사용합니다.

이미지-20230313085001787

간단한 둥근 사각형 설정

<body>
    <body>
        <style>
           .one{
            width: 200px;
            height:100px;
            background-color: gray;
            color: black;
            text-align: center;
            line-height: 100px;
            border-radius: 20px; // 设置内切圆的半径
           } 
        </style>   
       <div class="one">设置一个圆角矩形框</div>
    </body>
</body>

이미지-20230313085552768

길이는 내접원의 반지름이며, 길이가 클수록 둥근 사각형의 테두리 호가 커집니다.

길이가 80으로 늘어나면 둥근 사각형의 좌우 변이 완전히 반원 모양이 됩니다.

이미지-20230313085909272

직사각형의 길이와 너비가 같을 때 길이가 증가함에 따라 직사각형의 내접원은 완전한 원이 됩니다.

이미지-20230313090153320

2. 요소의 표시 모드

CSS에는 HTML 태그의 많은 표시 모드가 있습니다. 여기서는 블록 수준 요소와 인라인 요소의 두 가지에만 초점을 맞춥니다. 모든 html 태그의 표시 모드는 설정할 수 있습니다.

블록 수준 요소와 인라인 요소의 차이점

블록 수준 요소는 한 줄을 차지하고 인라인 요소는 한 줄을 차지하지 않습니다.

블록 수준 요소의 높이, 너비, 내부 및 외부 여백을 설정할 수 있습니다.인라인 요소의 높이, 너비 및 행 높이는 유효하지 않습니다.내부 여백은 유효하고 외부 여백은 유효할 때도 있고 유효하지 않을 때도 있습니다.

기본적으로 블록 수준 요소는 부모 요소만큼 넓으며 인라인 요소는 기본적으로 내부 콘텐츠만큼 넓습니다.

일반적으로 인라인 요소는 필요한 경우 블록 수준 요소로 변환됩니다.

2.1 블록 수준 요소

공통 블록 수준 요소

h1 - h6  p div  ul   ol   li

블록 수준 요소의 기능:

독점 일행

높이, 너비, 내부 및 외부 여백, 줄 높이를 모두 제어할 수 있습니다.

너비는 기본적으로 부모 요소 너비의 100%입니다(부모 요소만큼 넓음).

내부 및 블록 수준 요소를 해제할 수 있는 컨테이너(박스)입니다.

블록 수준 요소를 사용할 때 주의해야 합니다. 블록 수준 요소는 텍스트 태그에 배치할 수 없으며 div 태그는 p 태그에 배치할 수 없습니다.

2.2 인라인 요소

공통 인라인 요소

a strong b em i del s ins u span

인라인 요소의 특징:

한 줄만 차지하지 말고 한 줄에 여러 개를 표시할 수 있습니다.

높이, 너비, 행 높이 설정이 유효하지 않습니다.

왼쪽 및 오른쪽 외부 여백이 유효하고 내부 여백이 유효합니다.

기본 너비는 텍스트 자체의 내용입니다.

인라인 요소는 텍스트 및 기타 인라인 요소만 포함할 수 있습니다.

2.3 CSS 상자 모델

페이지는 박스로 구성되어 있다고 볼 수 있는데, 페이지의 요소는 모두 박스로 구성되어 있고, 그 안에 요소의 내용이 담겨 있다. 상자의 안쪽에서 바깥쪽으로 내용(content), 안쪽 여백(padding), 테두리(border), 바깥쪽 여백(margin)

이미지-20230313092623815

테두리 설정
테두리: 테두리를 설정합니다. 테두리는 너비 스타일 색상의 줄임말입니다.
border-width: 테두리의 너비를 설정하는 데 사용됩니다.
border-style: 테두리의 스타일을 설정하는데 사용하며 일반적으로 사용되는 속성값은 실선(solid), 점선(dashed), 점(dotted), bilateral(double) .
border-color: 테두리의 색상을 설정하는데 사용되며 color 속성 값과 마찬가지로 word, rgb, 16진수 등이 될 수 있습니다.

아래에서는 경계 사용을 보여주는 사례를 사용합니다.

<body>
        <style>
           .one{
    
    
            width: 200px;
            height:200px;
            background-color: gray;
            color: black;
            text-align: center;
            border-radius: 20px;
            border-style: solid;
            border-color: green;
           } 
        </style>   
       <div class="one">设置元素的边框</div>
</body>

표시된 효과는 다음과 같습니다.

이미지-20230313093631747

페이지 요소를 관찰하면 다음을 찾을 수 있습니다.

이미지-20230313094029029

클래스 선택기에서 설정한 길이와 너비는 200 * 200이지만 표시되는 크기는 설정된 크기보다 약간 크므로 테두리가 기본적으로 상자를 확장하는 것을 알 수 있습니다.

박스 크기 설정을 통해 프레임이 늘어나는 것을 방지할 수 있습니다.

 box-sizing: border-box;

물론 테두리도 색상과 스타일(선 스타일) 등 다양한 스타일을 설정할 수 있습니다.

padding: 패딩 설정으로 4개의 개별 속성도 있습니다. Left (padding-left), right padding-right), top (padding-top), bottom (padding-bottom), 패딩 약어 규칙은 margin 과 동일합니다 .

위 그림의 텍스트 요소에 패딩을 추가하려면 padding-right를 설정할 수 있습니다.
```
padding-right: 30px; 
```
설정 후 효과는 다음과 같습니다.

물론 요소의 네 방향 모두에 패딩을 설정할 수도 있습니다.
```
padding: 5px; 表示四个方向都是 5px
padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px
padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px
padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针)
```
여유

패딩과 유사하게 바깥쪽 여백은 요소 사이의 거리를 설정하는데, 여러 개의 요소를 설정할 때 보통 함께 붙여넣기 되며 바깥쪽 테두리는 여백 속성을 설정하여 제어할 수 있습니다.

여백: 여백 설정, 단일 여백을 설정하는 별도의 속성이 있습니다. 왼쪽(왼쪽 여백), 오른쪽(오른쪽 여백), 위쪽(위쪽 여백), 아래쪽(아래쪽 여백) margin: margin: top right bottom left (4개의 속성 값은 시계 방향으로 설정)을 통해 속기 모드를 직접 작성할 수 있습니다.

예:

두 요소를 설정하면 기본적으로 서로 옆에 있습니다.

<body>
        <style>
           .one{
        
        
            width:200px;
            height: 100px;
            background-color: gray;
            border-radius: 20px;
            border-color: red;
            box-sizing: border-box;
            border-style: solid;
            text-align: center;
            padding-top: 30px;
             
           } 

        </style>   
       <div class="one">这是第一个div</div>
       <div class="one">这是第二个div</div>
    </body>

이미지-20230313101205825

이때 여백 속성을 추가하여 두 요소 사이에 일정한 간격이 남을 수 있습니다.

margin-top: 30px;

여기서는 동일한 클래스가 두 요소에 사용되므로 두 요소 위에 간격이 있거나 다른 클래스를 사용하여 한 요소의 외부 간격만 변경할 수 있습니다.

이미지-20230313101412498

패딩과 유사하게 다음과 같이 작성할 수도 있습니다.

margin: 10px; // 四个方向都设置
margin: 10px 20px; // 上下为 10, 左右 20
margin: 10px 20px 30px; // 上 10, 左右 20, 下 30
margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40

3. 유연한 레이아웃

Flex는 Flexible Box의 약자로 "탄력 있는 레이아웃" 또는 "유연한 상자"를 의미하며 CSS3의 새로운 레이아웃 모드로 다양한 페이지 레이아웃을 간단하고 완전하며 반응형으로 구현할 수 있습니다. 화면에 매우 적합합니다. 크기와 장치 유형, 플로팅 레이아웃보다 간단하고 완벽합니다.

아래의 예를 살펴보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        div{
      
      
            width: 100%;
            height: 150px;
            background-color: red;
        }
        div>span{
      
      
            background-color: green;
            width: 100px;
        }
    </style>

    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>

위의 코드에서 div 태그는 빨간색으로 설정되고 span 태그는 녹색으로 설정되며 표시 효과는 다음과 같습니다.

이미지-20230401170917553

인라인 요소 범위는 가로 방향으로 배열되지만 인라인 요소의 여백과 크기를 제어할 수 없고 인라인 요소와 인라인 블록 요소가 소스 코드의 줄 바꿈을 공백으로 처리하고 또한 가로 레이아웃에 적합하지 않습니다. 페이지 요소의 레이아웃에 불필요하게 영향을 줍니다.

3.1 유연한 레이아웃 활성화

display : flex;

가로로 배열된 요소의 상위 요소에 Flexible Layout을 추가하고 Flex를 설정하면 Flexible Container 내부의 요소는 더 이상 "블록 수준" 및 "인라인 요소"가 아니라 인라인 요소가 되며 크기와 여백을 설정할 수 있습니다.

이미지-20230401172353331

3.2 가로 배치 설정

부모 요소에 justify - content 속성을 설정하여 플렉스 요소의 가로 배열(왼쪽에서 오른쪽으로 등)을 설정합니다.

justify-content:space-around；

이미지-20230401172815580

justify-content：center；

일반적인 배열:

이미지-20230401172659576

3.3 요소의 가로 배치 설정

부모 요소에 align-items 속성을 설정하여 탄성 요소의 가로 배치 설정(상하 정렬)

align-items: flex-start;

이미지-20230401173549187

이미지-20230401173431371

응용 프로그램: 수평 센터링 및 수직 센터링 설정

     div{
    
    
            width: 100%;
            height: 150px;
            background-color: red;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        div>span{
    
    
            background-color: green;
            width: 100px;
        }

이미지-20230401173819797

2)]

justify-content：center；

일반적인 배열:

[외부 링크 이미지 전송...(img-kJTf1KXA-1680343571722)]

3.3 요소의 가로 배치 설정

부모 요소에 align-items 속성을 설정하여 탄성 요소의 가로 배치 설정(상하 정렬)

align-items: flex-start;

[외부 링크 이미지 전송...(img-GvnR6Fq2-1680343571723)]

[외부 링크 이미지 전송...(img-27c3BwsX-1680343571723)]

응용 프로그램: 수평 센터링 및 수직 센터링 설정

     div{
    
    
            width: 100%;
            height: 150px;
            background-color: red;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        div>span{
    
    
            background-color: green;
            width: 100px;
        }

[외부 링크 이미지 전송...(img-UQ4PhJd8-1680343571724)]