一.Css伪类。
1.语法:selector:pseudo-class {property:value;}
如下链接的使用:
2.CSS :first-child 伪类
(1)匹配第一个子元素。
代码:p:first-child { color:blue; }
匹配任何元素下的第一个子元素,如在下面的例子中,选择器匹配作为任何元素的第一个子元素的 <p> 元素:第一个p元素中的字体是蓝色的。
显示效果:
(2)匹配所有子元素中的第一个<i>元素。
代码: p > i:first-child { color:blue; }
效果展示:
(3)匹配所有作为第一个子元素的 元素中的所有 <i> 元素。
代码:q:lang(no) {quotes: "~" "~";}
如下:只有第一个<p>元素的所有<i>元素变成了蓝色。
效果展示:
3.CSS - :lang 伪类。
:lang 类为属性值为 no 的q元素定义引号的类型。
代码:q:lang(no) {quotes: "~" "~";}
二.Css伪元素。
1.语法。
selector:pseudo-element {property:value;}
Css类也可以使用伪元素:
selector.class:pseudo-element {property:value;}
2.:first-line 伪元素
"first-line" 伪元素用于向文本的首行设置特殊样式
代码:p:first-line { color:#ff0000; font-variant:small-caps; }
如下只有文本第一行有特殊样式:
效果展示:
注意:"first-line" 伪元素只能用于块级元素。
3.:first-letter 伪元素。
"first-letter" 伪元素用于向文本的首字母设置特殊样式。
代码:p:first-letter { color:#ff0000; font-size:xx-large; }
如下只有本段第一个首字为特殊样式;
效果展示:
4.before伪元素。
:before元素用于在每个元素前插入一个内容。
代码:h1:before { content:url(smiley.gif); }
如下在每个<h1>前插入了一张图片。
5.after伪元素。
":after" 伪元素可以在元素的内容之后插入新内容。
代码:h1:after { content:url(smiley.gif); }
如下在每个<h1>后插入一个笑脸。
所有CSS伪类/元素
选择器 | 示例 | 示例说明 |
---|---|---|
:link | a:link | 选择所有未访问链接 |
:visited | a:visited | 选择所有访问过的链接 |
:active | a:active | 选择正在活动链接 |
:hover | a:hover | 把鼠标放在链接上的状态 |
:focus | input:focus | 选择元素输入后具有焦点 |
:first-letter | p:first-letter | 选择每个<p> 元素的第一个字母 |
:first-line | p:first-line | 选择每个<p> 元素的第一行 |
:first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的 <p> 元素 |
:before | p:before | 在每个<p>元素之前插入内容 |
:after | p:after | 在每个<p>元素之后插入内容 |
:lang(language) | p:lang(it) | 为<p>元素的lang属性选择一个开始值 |
三.关系选择器。
1.后代选择器(以空格 分隔)。
代码:div p { background-color:yellow; }
如下只有<div>中的所有<p>元素有特殊样式:
效果展示:
2.子元素选择器(以大于 > 号分隔)。
与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素直接/一级子元素的元素。
代码:div>p { background-color:yellow; }
如下只有<div>中的第一级<p>元素有特殊样式。
效果展示:
3.相邻兄弟选择器(以加号“+”表示)
代码:div+p { background-color:yellow; }
相邻兄弟选择器,可选择紧接在另一元素后的元素,且两元素为同级元素。
如下<div>与<p>同一父元素为<body>,它们为同级元素。
效果展示:
4.后续兄弟选择器(以波浪号 ~ 分隔)。
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。
如下所有<div>后的同级<p>元素都有黄色背景色。
效果展示:
四.Css盒子模型。
1.Css盒子模型。
HTML元素可以看作成一个由内边距、外边距、内容。
效果如下:
五.Css布局。
网页布局有很多种方式,一般分为以下几个部分:头部区域、菜单导航区域、内容区域、底部区域。头部区域位于网页顶部,一般用于设置网页的标题和logo。菜单导航区域用于放置其它网页的链接。
如下则是一个简单的网页布局:
Css代码:
Html代码:
效果展示:
六.Css导航栏
导航栏等于链接列表。
1.垂直导航栏。
Css代码:
Html代码:
效果展示:
2.水平导航栏。
有两种方法创建横向导航栏。使用内联(inline)或浮动(float)的列表项。
这两种方法都很好,但如果你想链接到具有相同的大小,你必须使用浮动的方法。
Html代码:
Css代码:
效果展示:
7.Css调试。
1.使用浏览器的开发者工具:大多数现代浏览器都提供了开发者工具,可以用来检查元素、修改样式、调试JavaScript等。在开发者工具中,您可以通过选择元素并查看其样式来检查CSS。您还可以在样式面板中更改样式,并查看它们如何影响元素。
2.使用CSS预处理器的调试工具:如果您使用的是CSS预处理器(如Sass、Less等),则可以使用它们的调试工具来查看生成的CSS代码。这些工具通常会显示生成的CSS代码,并且可以帮助您检查其中的错误。
3.使用代码编辑器的调试工具:一些代码编辑器(如Visual Studio Code)提供了内置的CSS调试工具。这些工具可以帮助您检查CSS代码,并提供错误检查和修复建议。