세 가지 방법의 우선순위

3가지 방법을 동시에 사용하여 동일한 요소에 CSS 스타일을 설정하는 경우 어떤 방법이 실제로 효과적인가요? 오른쪽 에디터에서는 이런 일이 일어났습니다

1. 内联式CSS를 사용하여 "Super Cool Internet" 텍스트를 粉色으로 설정합니다.

2. 그런 다음 嵌入式CSS를 사용하여 텍스트를 红色으로 설정합니다.

3. 마지막으로 外部式을 사용하여 텍스트를 蓝色(style.css 파일에 설정)으로 설정합니다.

하지만 마지막으로 "Cool Internet"이라는 짧은 단어의 텍스트가 粉色으로 설정되어 있는 것을 확인할 수 있습니다. 이 세 가지 스타일에는 우선순위가 있으므로 우선순위를 기억하세요. 内联式 > 嵌入式 > 外部式

하지만 임베디드>외부 스타일에는 전제 조건이 있습니다. 임베디드 CSS 스타일의 위치는 다음과 같습니다. 외부 스타일에 뒤쳐져 있습니다. 예를 들어, 올바른 코드 편집기에서 <link href="style.css" ...> 코드는 <style type="text/css">...</style> ; 코드(실제로는 개발 중에도 작성되었습니다). 관심 있는 친구들은 시도해 보고 순서를 바꿔서 우선순위가 바뀌는지 확인할 수 있습니다.

사실 정리하면 --就近原则(离被设置元素越近优先级别越高)입니다.

지속적인 학습
||
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>样式网页</title> <link href="style.css" rel="stylesheet" type="text/css"> <style type="text/css"> span{ color:red; } </style> </head> <body> <p>PHP中文网,<span style="color:pink">超酷的互联网</span>、IT技术免费学习平台,创新的网络一站式学习、实践体验;服务及时贴心,内容专业、有趣易学。专注服务互联网工程师快速成为技术高手!</p> </body> </html>
  • 코스 추천
  • 코스웨어 다운로드
현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~