CSS 스타일 선택기
- 高洛峰원래의
- 2017-02-14 15:04:321733검색
css는 English Cascading Style Sheets의 약어로 캐스케이딩 스타일 시트(Cascading Style Sheets)라고도 하며 페이지를 아름답게 만드는 데 사용됩니다. 존재 방식에는
요소 인라인, 페이지 임베딩, 외부 소개의 세 가지 방식이 있습니다. 세 가지 방법의 장점과 단점을 비교해보세요.
구문: style='key1:value;key2:value2;'
태그에 style='xx:xxx;' 사용
페이지에 삽입: < ;style type='text/css'> 531ac245ce3e4fe3d50054a55f265927Block
외부 CSS 파일 소개
필수: 아티스트가 페이지를 편집합니다. 개발자 색상 일치와 이미지 미화를 담당하며 이를 달성하는 방법을 알아야 합니다.
위의 세 가지 방법을 사용하는 방법을 살펴보세요.
1. c3aab84afb7bed6c51e6bd21ae7bcca2 ;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" />
</head>
<body>
<div style="background-color:red;">123</div>
</body>
</html>2. 페이지에 c3aab84afb7bed6c51e6bd21ae7bcca2 531ac245ce3e4fe3d50054a55f265927Block
<!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='logo'>123456</div>
<div class='logo'>aaa</div>
</body>
</html>를 삽입합니다. 즉, 코드에 <를 추가합니다. ;style>
<style>
.logo{
background-color:red;
}
#logo{
background-color:red;
}
a,div{
color:red;
}
a div{
color:red
}
input[type='text']{
color:blue
}
.logo a,.logo p{
font-size:56px;
}
</style>로 작성됩니다. 1. 클래스 선택기 .logo가 class='logo'를 나타내는 경우 스타일
2. ID 선택기
# 로고가 id='logo'인 경우 이 스타일을 참조하세요.
3.
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 중국어 홈페이지를 주목해주세요!