Home > Article > Web Front-end > CSS: Basic syntax and derived selectors_html/css_WEB-ITnose
CSS: Basic syntax and derived selectors_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:52:591431browse
This article introduces the basic syntax and derived selectors of CSS.
The code is compiled from w3school: http://www.w3school.com.cn
(1) Basic part:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Language" content="zh-cn" /><head><style type="text/css">h1,h2,h3 {color:red;background-color:#ccc}li strong {font-style:italic;}</style></head><title>CSS基础</title><body> <h1>h1,h2,h3 级标题为CSS样式指定为灰底红字<h1> <h2>h1,h2,h3 级标题为CSS样式指定为灰底红字<h2> <h3>h1,h2,h3 级标题为CSS样式指定为灰底红字<h3> <h4>h4级标题没有被指定样式<h3> <hr/> <!--派生选择器--> <h4>派生选择器允许你根据文档的上下文关系来确定某个标签的样式。</p> <p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p> <ol> <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li> <li>我是正常的字体。</li> </ol></body></html>Effect Picture: (2) Style "override" rules
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Language" content="zh-cn" /><head> <style type="text/css"> strong {color: red;} h2 {color: red;} h2 strong {color: blue;} </style></head><title>CSS基础-样式的“覆盖”规则</title><body> <p>The strongly emphasized word in this paragraph is <strong>red</strong>.</p> <h2>This subhead is also red.</h2> <h2>The strongly emphasized word in this subhead is <strong>blue</strong>.</h2></body></html> Rendering:
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Codeforces Round #280 (Div. 2 A,B,C,D,E)_html/css_WEB-ITnoseNext article：Codeforces Round #280 (Div. 2 A,B,C,D,E)_html/css_WEB-ITnose