CSS 스타일 선택기-CSS 튜토리얼-php.cn

CSS 스타일 선택기

高洛峰

풀어 주다： 2017-02-14 15:04:32

원래의

1688명이 탐색했습니다.

css는 English Cascading Style Sheets의 약어로 캐스케이딩 스타일 시트(Cascading Style Sheets)라고도 하며 페이지를 아름답게 만드는 데 사용됩니다. 존재 방식에는

요소 인라인, 페이지 임베딩, 외부 소개의 세 가지 방식이 있습니다. 세 가지 방법의 장점과 단점을 비교해보세요.

구문: style='key1:value;key2:value2;'

태그에 style='xx:xxx;' 사용

페이지에 삽입: < ;style type='text/css'> Block

외부 CSS 파일 소개

필수: 아티스트가 페이지를 편집합니다. 개발자 색상 일치와 이미지 미화를 담당하며 이를 달성하는 방법을 알아야 합니다.

위의 세 가지 방법을 사용하는 방법을 살펴보세요.

1. Block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/css"; charset="UTF-8">
    <title>页面一</title>
    <link rel="stylesheet" href="commom.css" />
    <style>
        .logo{
            background-color:red;
        }
    </style>
</head>
<body>
    <div class=&#39;logo&#39;>123456</div>
    <div class=&#39;logo&#39;>aaa</div>
</body>
</html>

로그인 후 복사

를 삽입합니다. 즉, 코드에 <를 추가합니다. ;style>

3. 외부 CSS 파일 도입

사용자 정의 CSS 스타일을 참조해야 하는 html 파일이 여러 개 있는 경우 두 번째 방법에 따라 각 html 파일에 스타일을 정의해야 합니다. 이 문제를 해결하려면 파일을 정의하고 사용자 정의 CSS 스타일을 작성할 수 있습니다. .style을 선택한 다음 파일에서 이 스타일을 호출합니다.

스타일은

<style>
    .logo{
        background-color:red;
    }
    #logo{
        background-color:red;
    }
    a,div{
        color:red;
    }
    a div{
        color:red
    }
    input[type=&#39;text&#39;]{
    color:blue
    }
    .logo a,.logo p{
        font-size:56px;
    }
</style>

로그인 후 복사

로 작성됩니다. 1. 클래스 선택기

.logo가 class='logo'를 나타내는 경우 스타일

2. ID 선택기

# 로고가 id='logo'인 경우 이 스타일을 참조하세요.

a, div는 모든 태그와 div 태그가 이 스타일을 참조함을 의미합니다.

4. 관련 선택기

a div는 계층적 관계, 즉 a 태그 아래의 모든 div 태그에 이 스타일이 적용됩니다.

5. 속성 선택기

input[type='text'], 'text' 유형의 모든 태그가 이 스타일을 참조함을 나타내는 속성 태그

6. .logo a, .logo p는 class='logo'인 경우 다음의 모든 a 태그를 의미하고 class='logo'인 경우 모든 p태그에 이어 스타일을 참고하세요

더 많은 CSS 스타일 선택기 관련 글은 PHP 중국어 홈페이지를 주목해주세요!