目录
层叠样式表 — 也就是CSS — 是你在HTML之后应该学习的第二门技术。HTML用于定义内容的结构和语义,CSS用于设计风格和布局。比如,您可以使用CSS来更改内容的字体、颜色、大小、间距,将内容分为多列,或者添加动画及其他的装饰效果; 通俗理解为:CSS就是为了给HTML标签修改样式;
语法结构:
选择器 {
属性名1:属性值1;
属性名2:属性值2
}
/*注释内容*/
快捷键:ctrl+? (pycharm)
1.style内部直接编写css代码,平时学习、练习的时候推荐使用
2.link标签引入外部css文件,正式工作、实际生产环境推荐使用
CSS选择器是CSS规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。选择器所选择的元素,叫做“选择器的对象”; css是用来调节标签样式的 那为什么需要学选择器呢? 因为同一个页面上有很多相似的标签 并且这些标签在不同的位置有不同的样式 所以为了能够区分 ,我们肯定先需要学习如何查找指定的标签
如果你有多个使用相同样式的CSS选择器,那么这些单独的选择器可以被混编为一个“选择器列表”,这样,规则就可以应用到所有的单个选择器上了。例如,如果我的
h1
和.special
类有相同的CSS,那么我可以把它们写成两个分开的规则。
/*方式一*/
h1 {
color: blue;
}
.special {
color: blue;
}
/*方式二*/
h1, .special {
color: blue;
}
/*如果出现语法错误,那么样式不会生效*/
/*相同修改,优先级一般最下面的生效*/
通俗理解:
比如两个相同的选择器都要修改p标签,最下面那个,或者离p标签更近的选择器生效;
如果p标签自己使用style参数,那么p标签自己设定的参数生效;
通过标签名直接查找
/*查找所有的div标签*/
div {
color: red;
}
类选择器的关键符号为
.
句点符号,是通过class值查找标签;
/*查找所有含有c1样式类的标签*/
.c1 {
color: red;
}
id选择器关键符号位
#
警号,通过id值查找标签;
/*查找id为d1的标签*/
#d1 {
color: orange;
}
修改body内所有的标签;
/*body内所有的标签*/
* {
color: darkgray;
}
为了区分嵌套标签之间的关系,我们发明了一种称呼,如下:
<div>
<p>
<span></span>
</p>
</div>
/*
span是p的儿子 是div的孙子也可以说是div的后代
p是div的儿子也是div后代 是span的父亲
div是p的父亲是span的爷爷 也可以说是他们的祖先
*/
特征符号是
空格
/*查找div内部所有的后代span*/
div span {
color: red;
}
特征是
>
大于号
/*查找div内部所有的儿子span*/
div > span {
color: greenyellow;
}
特征为
+
加号,这个查找的是同级别下面紧挨着的第一个span
/*查找同级别下面紧挨着的第一个span(不能有其他标签间隔)*/
div + span {
color: pink;
}
特征为
~
/*查找同级别下面所有的span(不需要紧挨着)*/
div ~ span {
color: deeppink;
}
CSS 属性选择器通过已经存在的属性名或属性值匹配元素;
[attr]
表示带有以 attr 命名的属性的元素。
[attr=value]
表示带有以 attr 命名的属性,且属性值为 value 的元素。
[attr~=value]
表示带有以 attr 命名的属性的元素,并且该属性是一个以空格作为分隔的值列表,其中至少有一个值为 value。
[attr|=value]
表示带有以 attr 命名的属性的元素,属性值为“value”或是以“value-”为前缀("-
"为连字符,Unicode 编码为 U+002D)开头。典型的应用场景是用来匹配语言简写代码(如 zh-CN,zh-TW 可以用 zh 作为 value)。
[attr^=value]
表示带有以 attr 命名的属性,且属性值是以 value 开头的元素。
[attr$=value]
表示带有以 attr 命名的属性,且属性值是以 value 结尾的元素。
[attr*=value]
表示带有以 attr 命名的属性,且属性值至少包含一个 value 值的元素。
[attr operator value i]
在属性选择器的右方括号前添加一个用空格隔开的字母 i
(或 I
),可以在匹配属性值时忽略大小写(支持 ASCII 字符范围之内的字母)。
[attr operator value s]
在属性选择器的右方括号前添加一个用空格隔开的字母 s
(或 S
),可以在匹配属性值时区分大小写(支持 ASCII 字符范围之内的字母)。
/* 存在title属性的<a> 元素 */
a[title] {
color: purple;
}
/* 存在href属性并且属性值匹配"https://example.org"的<a> 元素 */
a[href="https://example.org"] {
color: green;
}
/* 存在href属性并且属性值包含"example"的<a> 元素 */
a[href*="example"] {
font-size: 2em;
}
/* 存在href属性并且属性值结尾是".org"的<a> 元素 */
a[href$=".org"] {
font-style: italic;
}
/* 存在class属性并且属性值包含以空格分隔的"logo"的<a>元素 */
a[class~="logo"] {
padding: 2px;
}
如果存在多个标签需要调整为同一样式,那么使用分组和嵌套可以减少代码的冗余; 匹配标签之间用逗号隔开,标签与标签是或的关系; 并列写可以标签和标签、标签和选择器、意思就是可以多个相同选择器或多个不同选择器都可以并列使用;
/*并列的情况*/
/* 多个相同选择器并列使用*/
div,span,p { /*查找div或者span或者p*/
color: red;
}
/*多个不同选择器并列使用*/
div,#d1,.c1 { /*标签查找div id查找d1 类查找c1*/
color: red;
}
/*不并列的情况*/
/*不并列同样可以使用组合选择器*/
.c1 p { /*查找class为c1的后代p标签*/
color: red;
}
/*直接筛选*/
div#d1 { /*查找id为d1的div标签*/
color: red;
}
div.c1 { /*查找class为c1的div标签*/
color: red;
}
CSS 伪类 是添加到选择器的关键字,指定要选择的元素的特殊状态。例如,
:hover
可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。
selector:pseudo-class {
property: value;
}
/*鼠标悬浮在上面*/
a:hover {
color: orange;
}
/*a标签默认的颜色会变化 第一次是蓝色 后面是紫色*/
input:focus {
background-color: red;
}
/*我们将input框被用户点击即将录入数据的过程看成是focus状态(聚焦状态)*/
:active
:any-link
:blank
:checked
:current
(en-US):default
:defined
:dir()
:disabled
:drop
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:future
(en-US):focus
:focus-visible
:focus-within
:has()
:host
:host()
:host-context()
:hover
:indeterminate
:in-range
:invalid
:is()
:lang()
:last-child
:last-of-type
:left
:link
:local-link
(en-US):not()
:nth-child()
:nth-col()
(en-US):nth-last-child()
:nth-last-col()
(en-US):nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:past
(en-US):placeholder-shown
:read-only
:read-write
:required
:right
:root
:scope
:target
:target-within
(en-US):user-invalid
(en-US):valid
:visited
:where()
选择器 | 示例 | 学习CSS的教程 |
---|---|---|
类型选择器 | h1 { } | 类型选择器 |
通配选择器 | * { } | 通配选择器 |
类选择器 | .box { } | 类选择器 |
ID选择器 | #unique { } | ID选择器 |
标签属性选择器 | a[title] { } | 标签属性选择器 |
伪类选择器 | p:first-child { } | 伪类 |
伪元素选择器 | p::first-line { } | 伪元素 |
后代选择器 | article p | 后代运算符 |
子代选择器 | article > p | 子代选择器 |
相邻兄弟选择器 | h1 + p | 相邻兄弟 |
通用兄弟选择器 | h1 ~ p | 通用兄弟 |