<!DOCTYPE html> <html> <head> <title>示例</title> <style type="text/css"> p { color: red; } </style> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p style="color: blue;">这是一段文字</p> </body> </html>
p { color: red; }
<p>
요소를 선택합니다. <p>
元素。
.
号标识,应用于有相同类名的元素。例如:
.red { color: red; }
class="red"
的HTML元素。
#
号标识,应用于唯一的HTML元素。例如:
#header { background-color: gray; }
id="header"
的HTML元素。
div p { color: red; }
<div>
元素内的<p>
元素。
a:hover { text-decoration: underline; }
<a>
元素上时的状态。
<p>三、掌握常用属性
<p>CSS中有很多属性,但是有些比较常用,我们需要熟练掌握。以下是一些常见的属性:
body { background-color: #f1f1f1; background-image: url('background.jpg'); background-repeat: no-repeat; }
background.jpg
的背景图片。
h1 { font-family: Arial; font-size: 24px; color: #333333; }
<h1>
标题元素的字体为Arial、字号为24px、颜色为#333333。
div { border: 1px solid #e5e5e5; border-radius: 10px; }
<div>
元素的边框为1px宽、颜色为#e5e5e5、边框圆角为10px。
img { width: 100%; height: auto; margin-bottom: 10px; padding: 5px; }
body { color: #333333; font-size: 16px; } h1 { font-size: 24px; font-weight: bold; }
<h1>
.
로 식별되며 동일한 클래스 이름을 가진 요소에 적용됩니다. 예:
border: 1px solid #e5e5e5;
class="red"
가 포함된 모든 HTML 요소를 선택합니다.
#
로 식별되며 고유한 HTML 요소에 적용됩니다. 예: <p>rrreee이 선택기는 id="header"
가 있는 HTML 요소를 선택합니다. <p>
<div>
요소 내의 모든 <p>
요소를 선택합니다. 🎜<a>
요소 위에 있을 때 상태를 선택합니다. 🎜🎜3. 공통 속성을 마스터하세요 🎜🎜 CSS에는 많은 속성이 있지만 일부는 더 일반적으로 사용되므로 능숙하게 마스터해야 합니다. 다음은 몇 가지 일반적인 속성입니다. 🎜🎜🎜배경 속성🎜🎜🎜배경 속성은 색상, 그림, 반복성 등을 포함하여 요소의 배경을 제어하는 데 사용됩니다. 예를 들면 다음과 같습니다. 🎜rrreee🎜이 스타일은 페이지 오른쪽 하단에 Background.jpg
라는 배경 이미지를 배치합니다. 🎜<h1>
제목 요소의 글꼴을 Arial로, 글꼴 크기를 24px로, 색상을 #333333으로 설정합니다. 🎜<div>
요소의 테두리를 1px 너비로, 색상을 #e5e5e5로, 테두리 둥근 모서리를 10px로 설정합니다. 🎜<h1>
제목 요소는 동일한 색상을 상속하지만 글꼴 크기와 두께는 다릅니다. 🎜🎜5. 복합 스타일 사용🎜🎜CSS에서는 여러 속성 값을 복합 스타일로 결합할 수 있습니다. 이렇게 하면 코드 양을 줄이고 코드를 더 간결하게 만들 수 있습니다. 예: 🎜rrreee🎜이 스타일은 3가지 속성 값으로 구성된 복합 스타일을 정의합니다. 테두리 너비는 1px, 테두리 스타일은 실선, 테두리 색상은 #e5e5e5입니다. 🎜🎜6. CSS 전처리기 사용🎜🎜CSS 전처리기는 CSS 코드를 더욱 발전된 CSS 언어로 컴파일하는 도구입니다. 변수, 함수, 중첩 등을 포함한 CSS의 기능을 확장하여 CSS 작성을 더욱 편리하고 빠르게 만듭니다. 현재 가장 널리 사용되는 CSS 전처리기에는 Sass, Less, Stylus 등이 있습니다. 🎜🎜7. 요약🎜🎜위 내용은 CSS를 잘 작성하는 방법에 대한 몇 가지 기본 사항입니다. 기본 구문, 선택기, 공통 속성, 스타일 상속 및 복합 스타일을 마스터하면 간결하고 유연하며 유지 관리하기 쉬운 CSS 코드를 작성할 수 있습니다. 🎜위 내용은 좋은 CSS를 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!