CSS 기본 튜토리얼 기본 선택기

CSS 선택기

1. 기본 선택기

(1) "*" 선택기: 와일드카드

설명 : 모든 HTML 태그와 일치합니다. , 모든 태그가 변경됩니다.
구문: *{ color:red }

참고: "*"를 최대한 적게 사용하세요. IE6에서는 지원하지 않기 때문에 가능합니다.

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
    <style type="text/css">
     *{
         color:red;
     }
    </style>
    </head>
    <body>
        <h1>习近平心中的互联网</h1>
        <p>互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
    </body>
</html>

(2) 태그 선택기

설명 : 지정된 HTML 태그와 일치합니다.

구문: h1{ color:red }

참고: CSS 태그 선택기는 HTML 태그와 이름이 같지만 꺾쇠 괄호는 사용할 수 없습니다. 추가되었습니다.

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
    <style type="text/css">
     h1{
         color:red;
     }
     p{
         color:blue;
     }
    </style>
    </head>
    <body>
        <h1>习近平心中的互联网</h1>
        <p>互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
    </body>
</html>

(3) 클래스 선택기(class selector) - 클래스 선택기가 가장 많이 사용됩니다

설명: HTML 태그 유형에 스타일을 추가합니다. 여기서 언급되는 "하나의 클래스"는 각 HTML 태그에 클래스 속성이 있고 클래스 값이 동일하다는 것입니다. 클래스 속성은 모든 HTML 태그가 갖는 공개 속성입니다.

클래스 선택기의 이름은 "."으로 시작해야 하며 HTML 태그의 클래스 속성 값으로 제한됩니다. 예: .box{ color:red; }

참고: HTML 태그의 클래스 속성 값은 숫자로 시작할 수 없습니다.

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
    <style type="text/css">
     .NO1{
         color:red;
         background-color:#88ff66;
     }
    </style>
    </head>
    <body>
        <h1 class="NO1">习近平心中的互联网</h1>
        <p class="NO1">互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
    </body>
</html>

(4) id 선택기

설명 : 지정된 ID를 가진 요소에 스타일을 추가합니다.

참고:

웹페이지에 있는 HTML 태그의 id 속성 값은 고유해야 합니다.
모든 HTML 태그에는 id라는 공개 속성이 있습니다.
id 속성은 스타일을 추가하는 용도가 아닌 JS에서 일반적으로 사용됩니다. class 속성은 JS가 아닌 CSS에만 사용할 수 있습니다.
id 선택기의 이름은 "#"으로 시작해야 하며 그 뒤에 HTML 태그의 id 속성 값이 와야 합니다.

아아앙

지속적인 학습

새로운 파일

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <style type="text/css"> *{ color:red; } </style> </head> <body> <h1>习近平心中的互联网</h1> <p>互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。</p> </body> </html>

제출하다 코드 재설정

자동운전