什么是CSS?

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示控制 HTML 元素,从⽽实现美化HTML⽹⻚。
样式通常存储在样式表中，⽬的也是为了解决内容与表现分离的问题
外部样式表(CSS⽂件)可以极⼤提⾼⼯作效率
多个样式定义可层叠为⼀，后者可以覆盖前者样式

CSS基础语法

格式：选择器{属性:值;属性:值;属性:值;…}

<!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>

效果图如下所示:
在这里插入图片描述

CSS中常用选择器

(1). html选择符（标签选择器）
就是把html标签作为选择符使⽤
如 p{....} ⽹⻚中所有p标签采⽤此样式
h2{....} ⽹⻚中所有h2标签采⽤此样式
(2). class类选择符 (使⽤点.将⾃定义名（类名）来定义的选择符)
定义： .类名{样式....} 匿名类
其他选择符名.类名{样式…}
使⽤：<html标签 class="类名">...</html标签>
.mc{color:blue;} /* 凡是class属性值为mc的都采⽤此样式 */
p.ps{color:green;} /只有p标签中class属性值为ps的才采⽤此样式/
注意：类选择符可以在⽹⻚中重复使⽤
(3). Id选择符:
定义： #id名{样式.....}
使⽤：<html标签 id="id名">...</html标签>
注意：id选择符只在⽹⻚中使⽤⼀次.

选择符的优先级：从⼤到⼩ [ID选择符]->[class选择符]->[html选择符]->[html属性]

(4). 关联选择符（包含选择符
格式：选择符1 选择符2 选择符3 …{样式…}

table a{....} /*table标签⾥的a标签才采⽤此样式*/
h1 p{color:red} /*只有h1标签中的p标签才采⽤此样式*/

(5). 组合选择符（选择符组）
格式：选择符1,选择符2,选择符3 …{样式…}

h3,h4,h5{color:green;} /*h3、h4和h5都采⽤此样式*/

(6). 伪类选(伪元素)择符：
格式：标签名:伪类名{样式…}

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} /* 激活链接 */

CSS3中的选择器

(1). 关系选择器：

div>p 选择所有作为div元素的⼦元素p
div+p 选择紧贴在div元素之后p元素
div~p 选择div元素后⾯的所有兄弟元素p

(2). 属性选择器：

[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). 结构性伪类选择器：

::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). 状态伪类选择器

:link 设置超链接a在未被访问前的样式。
:visited 设置超链接a在其链接地址已被访问过时的样式
:active 设置元素在被⽤户激活（在⿏标点击与释放之间发⽣的事件）时的样式
*:hover 设置元素在其⿏标悬停时的样式
*:focus 设置元素在其获取焦点时的样式
:target 匹配相关URL指向的E元素
:enabled 匹配⽤户界⾯上处于可⽤状态的元素
:disabled 匹配⽤户界⾯上处于禁⽤状态的元素
:checked 匹配⽤户界⾯上处于选中状态的元素
:not(selector)匹配不含有selector选择符的元素
::selection 设置对象被选择时的样式

(5). 其他伪类选择器

E:not(s) ： {attribute}
匹配所有不匹配简单选择符s的元素E
p:not(.bg) {background-color:#00FF00;}

CSS基础语法!

什么是CSS?

CSS基础语法

CSS中常用选择器

CSS3中的选择器

猜你喜欢