What is CSS?
CSS refers to the Cascading Style Sheets (Cascading Style Sheets)
style definitions how to display and control HTML elements, thus beautifying HTML content .
Styles are usually stored in style sheets, and the purpose is also to solve the problem of separation of content and presentation.
External style sheets (CSS files) can greatly improve the efficiency of work.
Multiple style definitions can be stacked into one, and the latter can override the former style.
CSS basic syntax
Format: selector {attribute:value;attribute:value;attribute:value;...}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS基础语法</title>
<style>
/*内部样式*/
/*选择器{属性:值;属性:值;属性:值} */
h3{
color:deeppink;font-size: 30px;}
li{
color:firebrick;font-size: 30px;line-height: 30px;}
</style>
</head>
<body>
<h3>什么是CSS?</h3>
<ul>
<li>指层叠样式表 (Cascading Style Sheets)</li>
<li>样式定义如何显示控制 HTML 元素,从⽽实现美化HTML⽹⻚。</li>
<li>样式通常存储在样式表中，⽬的也是为了解决内容与表现分离的问题</li>
<li>外部样式表(CSS⽂件)可以极⼤提⾼⼯作效率</li>
<li>多个样式定义可层叠为⼀，后者可以覆盖前者样式</li>
</ul>
</body>
</html>
The effect diagram is as follows:
Common selectors in CSS
(1). The htmlselector (tag selector)
is to use the htmltag as the selector. For
example p{....}, all p tags in the
h2{....}web use this style , and all h2 tags in the web use this style
(2). class selector (using Use dot. The selector defined by the self-defined name (class name) is defined
: .类名{样式....} 匿名类
Other selector name. Class name {style...}
Use: <html标签 class="类名">...</html标签>
.mc{color:blue;}/* Any class attribute value of mc will use this style*/
p.ps{color:green;}/ p tags only class attribute value of ps was recorded using this style /
Note: class selector Use may be repeated in the ⽹ ⻚
(3) Id selectors:
Definition: #id名{样式.....}
Use: <html标签 id="id名">...</html标签>
Note: idselectors only ⽹ ⻚ Used once in.
Priority of selector: from large to small [ID selector]->[class selector]->[html selector]->[html attribute]
(4). Associated selectors (including selectors
Format: selector 1 selector 2 selector 3 …{style…}
table a{....} /*table标签⾥的a标签才采⽤此样式*/
h1 p{color:red} /*只有h1标签中的p标签才采⽤此样式*/
(5). Combination selector (selector group)
format: selector 1, selector 2, selector 3 …{style…}
h3,h4,h5{color:green;} /*h3、h4和h5都采⽤此样式*/
(6). Pseudo-category (pseudo-element) selector:
Format: Tag name: pseudo-category name {style...}
a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */
a:hover {color: #FF00FF; text-decoration: underline} /* ⿏标在链接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */
Selector in CSS3
(1). Relationship selector:
div>p 选择所有作为div元素的⼦元素p
div+p 选择紧贴在div元素之后p元素
div~p 选择div元素后⾯的所有兄弟元素p
(2). Attribute selector:
[attribute]选择具有attribute属性的元素。
[attribute=value]选择具有attribute属性且属性值等于value的元素。
[attribute~=value]选择具有attribute属性且属性值为⼀⽤空格分隔的字词列表，其中⼀个等于
value的元素。
[attribute|=value]选择具有att属性且属性值为以val开头并⽤连接符"-"分隔的字符串的E元素。
[attibute^=value]匹配具有attribute属性、且值以valule开头的E元素
[attribute$=value]匹配具有attribute属性、且值以value结尾的E元素
[attribute*=value]匹配具有attribute属性、且值中含有value的E元素
(3). Structural pseudo-class selector:
::first-letter设置对象内的第⼀个字符的样式。
::first-line设置对象内的第⼀⾏的样式。
:before设置在对象前（依据对象树的逻辑结构）发⽣的内容。
:after设置在对象后（依据对象树的逻辑结构）发⽣的内容。
:lang(language)匹配使⽤特殊语⾔的E元素。
:element1~element2:
:first-of-type匹配同类型中的第⼀个同级兄弟元素
:last-of-type匹配同类型中的最后⼀个同级兄弟元素
:only-of-type匹配同类型中的唯⼀的⼀个同级兄弟元素
:only-child匹配⽗元素仅有的⼀个⼦元素
*:nth-child(n)匹配⽗元素的第n个⼦元素
:nth-last-child(n)匹配同类型中的倒数第n个同级兄弟元素
*:first-child 匹配⽗元素的第⼀个⼦元素
* :last-child 匹配⽗元素的最后⼀个⼦元素
:root匹配元素在⽂档的根元素。在HTML中，根元素永远
(4). State pseudo-class selector
:link 设置超链接a在未被访问前的样式。
:visited 设置超链接a在其链接地址已被访问过时的样式
:active 设置元素在被⽤户激活（在⿏标点击与释放之间发⽣的事件）时的样式
*:hover 设置元素在其⿏标悬停时的样式
*:focus 设置元素在其获取焦点时的样式
:target 匹配相关URL指向的E元素
:enabled 匹配⽤户界⾯上处于可⽤状态的元素
:disabled 匹配⽤户界⾯上处于禁⽤状态的元素
:checked 匹配⽤户界⾯上处于选中状态的元素
:not(selector)匹配不含有selector选择符的元素
::selection 设置对象被选择时的样式
(5). Other pseudo-class selectors
E:not(s) ： {attribute}
匹配所有不匹配简单选择符s的元素E
p:not(.bg) {background-color:#00FF00;}