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

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

亚连

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

원래의

2012명이 탐색했습니다.

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의 스타일을 변경합니다. 이런 힘이 아름다운 페이지의 효과를 낳는다.