CSS의 기본 지식 포인트를 자세히 설명-PHP 튜토리얼-php.cn

CSS의 기본 지식 포인트를 자세히 설명

亚连

풀어 주다： 2023-03-26 12:14:02

원래의

1980명이 탐색했습니다.

1. 개념

CSS(Cascading Style Sheets): CSS 스타일 뒤의 계단식 스타일 시트: 동일한 HTML 태그에 스타일을 추가하려면 다양한 스타일을 사용하세요. HTML 태그는 표시해야 하는 효과를 추가합니다.

주로 HTML 페이지의 텍스트 내용, 이미지 모양, 레이아웃과 같은 모양 표시 스타일을 설정하는 데 사용됩니다.

기능: CSS는 페이지를 더 아름답게 만들고, CSS+Div는 레이아웃을 더 유연하게 만듭니다.

규칙: 스타일 선택자는 대소문자를 엄격하게 구분하지만 속성과 속성 값은 그렇지 않습니다.

여러 속성은 영어 세미콜론으로 구분됩니다.

속성 값이 여러 단어로 구성된 경우 영어 인용부호로 묶습니다. 스타일 선택 도구는 다음과 같습니다.

<font style="color:red;size:14;"></font>

로그인 후 복사

2. CSS 스타일 소개 1. 인라인 스타일

<body>  
    <!--行内样式-->  
    <font style="color:red">浅笑安然</font><br />  
</body>

로그인 후 복사

2. 내부 스타일

<head>  
    <meta charset="UTF-8">  
    <title></title>  
    <!--内部样式-->  
    <style type="text/css">  
        font{  
            color: red;  
        }  
    </style>  
</head>

로그인 후 복사

3. 외부 스타일 참조:

<head>  
        <!--外部样式-->  
    <link rel="stylesheet" type="text/css" href="../css/outer.css"/>  
</head>

로그인 후 복사

CSS 파일 설정:

/*글꼴 스타일 설정*/

font{  
    color:green;  
}

로그인 후 복사

우선순위: 인라인 스타일이 가장 높은 우선순위를 가지며, 내부 스타일과 외부 스타일이 서로 가장 가깝습니다.

3, 선택기

<font >浅笑安然</font>  
[html] view plain copy
/*元素选择器*/  
font{  
    color: red;  
}

로그인 후 복사

2.ID 선택 선택기: #id 이름 {}

<font id="flower">心若浮沉</font>  
[html] view plain copy
/*ID选择器*/  
#flower{  
    color: blue;  
}

로그인 후 복사

3. 클래스 선택기: .class 클래스 이름{}

<font class="happy">清风自来</font>  
[html] view plain copy
/*类选择器*/  
.happy{  
    color:gold;  
}

로그인 후 복사

4. 속성 선택기: 태그 이름 [속성='속성 값']

텍스트: < ;input type= "text" name="texts"/>

/*属性选择器*/  
input[type=text]{  
    background-color: brown;  
}

로그인 후 복사

5. 선택기 포함: 상위 라벨 하위 라벨

<p class="day">  
    <font>  
        今天天气好晴朗  
    </font>  
</p>

로그인 후 복사

/*包含选择器*/  
.day font{  
    color:orangered;  
}

로그인 후 복사

1.테두리 너비 높이

2.display : 블록 블록 수준 속성 인라인 행 수준 속성 없음 숨겨진 속성 inline-block: 행의 블록 수준 요소에는 너비가 있습니다.

블록 수준 요소 p, 행 수준 요소 범위 3. 글꼴: 색상 글꼴 크기 배경 -color 4. float: float clear: 클리어 float

5. 상자 모델

margin: 여백, 상자 및 상자, 시계 방향으로 설정, 설정되지 않은 경우 대칭을 따릅니다

border: 경계선

패딩: 패딩, 상자 및 콘텐츠 상자 모델은 우리가 실생활에서 흔히 사용하는 상자로, 고유한 테두리 두께, 내부 개체와의 거리, 상자 자체와 외부 세계 사이의 거리를 갖습니다.

요약:

CSS 캐스케이딩 스타일은 선택기 사용, 속성 설정, 상자 모델 사용 여부에 관계없이 태그에서 함께 작동하는 여러 스타일의 조합입니다. 기본적으로 HTML의 스타일을 변경합니다. 이런 힘이 아름다운 페이지의 효과를 낳는다.

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

CSS의 기본 지식 포인트를 자세히 설명