CSS学习总结

最新推荐文章于 2024-08-12 22:06:26 发布

lyjlch

最新推荐文章于 2024-08-12 22:06:26 发布

阅读量128

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/lyjlch/article/details/115199299

版权

CSS学习总结

开发工具
基本概念
CSS语法
- 选择器
- - id 选择器
  - class 选择器
CSS创建
- 外部样式表
- 内部样式表
- 内联样式
- 级联的优先级
CSS背景
- 背景颜色
- 背景图像
- - 背景图像 - 水平或垂直平铺
  - 背景图像- 设置定位与不平铺
- CSS背景属性
CSS尺寸
- CSS尺寸属性
CSS对齐
- 元素居中对齐
- 文本居中对齐
- 图片居中对齐
- 左右对齐 - 使用定位方式
- 左右对齐 - 使用 float 方式
- 垂直居中对齐 - 使用 padding
CSS盒子模型
CSS边框
- 边框样式
- - border-style 值:
- 边框宽度
- 边框颜色
- 边框-单独设置各边
- CSS边框属性
CSS边距
CSS定位
- static定位
- relative定位
- fixed定位
- absolute定位
- sticky定位
CSS溢出
CSS浮动
CSS不透明度
CSS组合选择器
- 后代选择器
- 子元素选择器
- 相邻兄弟选择器
- 后续兄弟选择器
CSS伪类
- 伪类的语法
- anchor伪类
CSS伪元素
- 语法
- first-line 伪元素
- first-letter 伪元素
关于伪类与伪元素的说明

开发工具

这里作者使用的是VScode，安装方法请点击这里,学习CSS之前，你应该对HTML/XHTML知识有一定了解，想了解更多关于HTML知识点击这里.

基本概念

CSS是级联样式表（Cascading Style Sheets）的缩写。HTML 用于撰写页面的内容，而 CSS 将决定这些内容该如何在屏幕上呈现。
网页的内容是由 HTML的元素构建的，这些元素如何呈现，涉及许多方面，如整个页面的布局，元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。

CSS语法

一条CSS样式规则由两个主要的部分构成：选择器，以{}包裹的一条或多条声明:
在这里插入图片描述说明

选择器是您需要改变HTML样式的对象（上图的规则就一级标题生效）。
每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用{}包裹，且声明用;分割）
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

为了让CSS可读性更强，你可以每行只描述一个属性:

/* 这是CSS的注释 */
/* 建议每条申明占一行 */
p{
  color:red;
  text-align:center;  /* 文本居中 */
}

选择器

一个页面上的元素众多，选择器就用于在页面中找到/选择需要应用这个样式的对象。
除我们前示的元素选择器外，还有id和class选择器。其中class选择器使用非常普遍。

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以"#"来定义。
以下的样式规则应用于元素属性 id=“para1”:

#para1
{
    text-align:center;
    color:red;
}

上述代码意思为id为para1的元素文本居中为红色。

在HTML中，元素的id值必须唯一。因此，id 选择器适用范围只有一个元素。

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

.center {text-align:center;}

你也可以指定特定的HTML元素使用class。
在以下实例中, 所有的 p 元素使用 class=“center” 让该元素的文本居中:

p.center {text-align:center;}

元素的class值可以多个，也可以重复。因此，实际应用中，class 选择器应用非常普遍。

类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

CSS创建

我们已经学习了如何定义 CSS样式，那么如何让这些规则对页面生效？
我们一般有三种方法：外部样式表，内部样式表，内联样式

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。 <link>标签在（文档的）头部：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

这里stylesheet是样式表的意思，type可加可不加（加了如果报错去掉即可），这里的href是相对路径是保存在当前文件夹下的mystyle下的。

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
.lyj {background-color: linen;}

注：不要在属性值与单位之间留有空格（如：“margin-left: 20 px” ），正确的写法是 “margin-left: 20px” 。

引入外部样式表是我们使用样式的主流方式，因为众多的样式规则单独放在一个文件中，与 HTML 内容分开，结构清晰。同时其它页面也可使用，达到复用的目的。

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用<style> 标签在文档头部定义内部样式表，就像这样:

<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
.lyj {background-color: linen;}
</style>

这里是写在HTML文件中的，该例子与上述例子一样的效果，但注意在<head>元素中引入了<style>标签，放入了样式。

一般而言，只有页面的样式规则较少时可采用这种方式。

内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

级联的优先级

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

一般情况下，优先级如下：
(内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

如果想了解更多关于CSS样式优先级的知识请点击这里

CSS背景

背景颜色

CSS中，颜色值通常以以下方式定义:

十六进制 - 如："#ff0000"
RGB - 如：“rgb(255,0,0)”
颜色名称 - 如：“red”

这里的十六进制六位数每两位分别表示红、绿、蓝的程度。如ff0000表示全红，rgb中的三个数值也是表示红、绿、蓝的程度。如例子rgb（255,0,0）也是表示全红。

该颜色的设定规则同样适用于文本

背景图像

background-image 属性描述了元素的背景图像.
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.
页面背景图片设置实例:

body {background-image:url('tupianming.jpg');}

背景图像 - 水平或垂直平铺

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。
一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调.如下所示

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>lyj的css</title> 
<style>
body
{
	background-image:url('gradient2.png');
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

浏览器效果如图

如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>lyj的css</title> 
<style>
body
{
    background-image:url('https://static.runoob.com/images/mix/gradient2.png');
    background-repeat:repeat-x;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

浏览器效果如图
在这里插入图片描述

背景图像- 设置定位与不平铺

让背景图像不影响文本的排版
如果你不想让图像平铺，你可以使用 background-repeat 属性:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>lyj的css</title> 
<style>
body
{
	background-image:url('img_tree.png');
	background-repeat:no-repeat;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
<p>runoob 背景图片实例。</p>
<p>背景图片只显示一次,但它打扰到读者!</p>
</body>
</html>

浏览器的效果如图
在这里插入图片描述
以上实例中，背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。

可以利用background-position属性改变图像在背景中的位置:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>lyj的css</title> 
<style>
body
{
    background-image:url('https://static.runoob.com/images/mix/img_tree.png');
    background-repeat:no-repeat;
    background-position:right top;
    margin-right:200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>背景图片不重复，设置 position 实例。</p>
<p>背景图片只显示一次，并与文本分开。</p>
<p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
</body>
</html>

浏览器的效果如图
在这里插入图片描述

CSS背景属性

Property	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

CSS尺寸

我们可以用 height 和width设定元素内容占据的尺寸。常见的尺寸单位有：像数 px，百分比%等。

CSS尺寸属性

属性	描述
height	设置元素的高度。
line-height	设置行高。
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。
width	设置元素的宽度。

CSS对齐

元素居中对齐

要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。

设置到元素的宽度将防止它溢出到容器的边缘。

元素通过指定宽度，并将两边的空外边距平均分配:

.center {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}

注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。

文本居中对齐

如果仅仅是为了文本在元素内居中对齐，可以使用text-align: center

.center {
    text-align: center;
    border: 3px solid green;
}

图片居中对齐

要让图片居中对齐, 可以使用 margin: auto; 并将它放到 块元素中:

img {
    display: block;
    margin: auto;
    width: 40%;
}

左右对齐 - 使用定位方式

我们可以使用 position: absolute; 属性来对齐元素:

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

左右对齐 - 使用 float 方式

.right {
    float: right;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

注意：如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 "clearfix(清除浮动)"来解决该问题。

我们可以在父元素上添加 overflow: auto; 来解决子元素溢出的问题:

.clearfix {
    overflow: auto;
}

当使用 float 属性时，IE8 以及更早的版本存在一个问题。如果省略 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 float 属性时，请始终设置 !DOCTYPE 声明：

垂直居中对齐 - 使用 padding

CSS 中有很多方式可以实现垂直居中对齐。一个简单的方式就是头部顶部使用padding:

.center {
    padding: 70px 0;
    border: 3px solid green;
}

如果要水平和垂直都居中，可以使用 padding 和 text-align: center:

.center {
    padding: 70px 0;
    border: 3px solid green;
    text-align: center;
}

CSS盒子模型

每一个HTML元素都可以看做是一个盒子，所以称为盒子模型。由内到外，这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的，如下图所示：
在这里插入图片描述

不同部分的说明：

Margin（外边距）-边框以外与其它元素的区域，外边距是透明的。
Border（边框）- 围绕在内边距和内容外的边框,默认不显示。
Padding(内边距) - 填充，也叫内边距，即内容和边框之间的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。

一个元素真正占据的宽度应该是：
左外边距 + 左边框宽度 + 左内边距 + 内容宽度 + 右内边距 + 右边框宽度 + 右外边距

因此，我们在用width属性设置元素的宽度时，实际上只设置了其内容的宽度。

CSS边框

在CSS中，你可以指定一个元素边框的样式和颜色。
HTML文件中：

<p class="example-1">I have black borders on all sides.</p>
<p class="example-2">I have a blue bottom border.</p>
<p class="example-3">I have rounded grey borders.</p>
<p class="example-4">I have a purple left border.</p>

CSS文件中:

.example-1 {
  border: 1px dotted black; /* 上下左右都相同 */
}
.example-2 {
  border-bottom: 1px solid blue; /* 只设置底部边框 */
}
.example-3 {
  border: 1px solid grey;
  border-radius: 15px; /* 边框圆角 */
}
.example-4 {
  border-left: 5px solid purple;
}

浏览器效果如图
在这里插入图片描述

边框样式

border-style 值:

在这里插入图片描述

边框宽度

您可以通过 border-width属性为边框指定宽度。

边框颜色

border-color属性用于设置边框的颜色。可以设置的颜色：

name - 指定颜色的名称，如 “red”
RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
Hex - 指定16进制值, 如 “#ff0000”
这里RGB和十六进制代表的含义在背景颜色中已经讲述，这里不再做重复。
注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。

.one
{
    border-style:solid;
    border-color:red;
}

边框-单独设置各边

在CSS中，可以指定边框不同的边具有不同的属性：

.lyj{
 border-top-style:dotted;/*边框顶部*/
 border-right-style:solid;/*边框右边*/
 border-bottom-style:dotted;/*边框底部*/
 border-left-style:solid;/*边框左边*/
}

CSS边框属性

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color	设置元素的左边框的颜色。
border-left-style	设置元素的左边框的样式。
border-left-width	设置元素的左边框的宽度。
border-right	简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color	设置元素的右边框的颜色。
border-right-style	设置元素的右边框的样式。
border-right-width	设置元素的右边框的宽度。
border-top	简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色。
border-top-style	设置元素的上边框的样式。
border-top-width	设置元素的上边框的宽度。

CSS边距

下面样式说明了内边距的设置（其他如外边距等同理）：

padding: 20px; /* 上下左右都相同 */
padding-top: 20px;
padding-bottom: 100px;
padding-right: 50px;
padding-left: 80px;
padding: 25px 50px 75px 100px; /* 简写形式，按上，右，下，左顺序设置 */
padding: 25px 10px; /* 简写形式，上下为25px，左右为10px */

提示：请留意简写时的顺序为上，右，下，左，或记为顺时针方向。

CSS定位

position属性用于对元素进行定位。该属性有以下一些值：

static 静态
relative 相对
fixed 固定
absolute 绝对
sticky 粘性

设置了元素的position属性后，我们才能使用top, bottom, left, right属性，否则定位无效。

static定位

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

静态定位的元素不会受到 top, bottom, left, right影响。

设置为静态定位position: static.

relative定位

设置为相对定位position: relative;，这将把元素相对于他的静态（正常）位置进行偏移
试试如下的代码：

<!-- HTML -->
<div class="example-relative">我偏移了正常显示的位置。去掉我的样式对比看看？</div>
<!-- CSS -->
.example-relative {
  position: relative;
  left: 60px;
  top: 40px;
  background-color: rgb(173, 241, 241);
}

fixed定位

设置为固定定位position: fixed;这将使得元素固定不动（即使你上下左右拖动浏览器的滚动条）。
此时元素固定的位置仍由top, bottom, left, right属性确定，但相对的是视口（viewport，就是浏览器的屏幕可见区域）
如下的代码将会在浏览器右下角固定放置一个按钮元素：

<!-- HTML -->
<div class="broad">占位区域。请将浏览器窗口改变大小，看看右下角的按钮发生了什么？</div>
<div class="example-fixed">这个按钮是固定的</div>
<!-- CSS -->
.example-fixed {
  position: fixed;
  bottom: 40px;
  right: 10px;
  padding: 6px 24px;
  border-radius: 4px;
  color: #fff;
  background-color: #9d0f0f;
  cursor: pointer;
  box-shadow: 0 3px 3px 0 rgba(0,0,0,0.3), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}
.broad {
  height: 5000px;
  width: 5000px;
  padding: 20px;
  background-color: darkkhaki;
}

absolute定位

设置为绝对定位position: absolute;将使元素相对于其最近设置了定位属性（非static）的父元素进行偏移。
如果该元素的所有父元素都没有设置定位属性，那么就相对于<body>这个父元素。

绝对定位此处可能有些混淆，请留意其是仍是相对的，不过是相对最近的父元素

sticky定位

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是top, right, bottom 或 left之一，换言之，指定 top, right, bottom 或 left四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

CSS溢出

CSSoverflow 属性用于控制内容溢出元素框时显示的方式。
CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
overflow属性有以下值：

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

CSS浮动

在一个区域或容器内，我们可以设置float属性让某元素水平方向上向左或右进行移动，其周围的元素也会重新排列。
我们常用这种样式来使图像和文本进行合理布局.
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
如果希望浮动元素后面的元素在其下方显示，可使用clear: both样式来进行清除。

CSS不透明度

我们可以用opacity对任何元素（不过常用于图片）设置不透明度。
值在[0.0～1.0]之间，值越低，透明度越高，如下图所示：
在这里插入图片描述用法如下：

 .opacity-2 {
      opacity: 0.2;
    }

CSS组合选择器

前面我们学习了 CSS有三种选择器：元素、id 和 class。但我们也可以进行组合，以得到简洁精确的选择。
在 CSS3 中包含了四种组合方式:

后代选择器(以空格分隔)
子元素选择器(以大于>号分隔）
相邻兄弟选择器（以加号 + 分隔）
普通兄弟选择器（以波浪号～ 分隔）

后代选择器

以空格作为分隔，如：.haha p 代表在div元素内有.haha这种类的所有元素。
参见如下代码：

<html>
<head>
  <style>
    .haha p {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="haha">
    <p>Paragraph 1 in the div .haha.</p>
    <p>Paragraph 2 in the div .haha>.</p>
    <span>
        <p>Paragraph 3 in the div .haha.</p>
    </span>
  </div>
  <p>Paragraph 4. Not in a div .haha.</p>
  <p>Paragraph 5. Not in a div .haha.</p>
</body>
</html>

段落1、2、3都将有黄色的背景，而段落4、5没有。

子元素选择器

也称为直接后代选择器，以>作为分隔，如：.haha > p 代表在有.haha类的元素内的直接<p>元素。
参见如下代码：

<html>
<head>
  <style>
    .haha > p {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div class="haha">
    <p>Paragraph 1 in the div .haha.</p>
    <p>Paragraph 2 in the div .haha.</p>
    <span>
        <p>Paragraph 3 in the div .haha - it is descendant but not immediate child.</p>
    </span> <!-- not Child but Descendant -->
  </div>
  <p>Paragraph 4. Not in a div .haha.</p>
  <p>Paragraph 5. Not in a div .haha.</p>
</body>
</html>

虽然段落3在.haha类中，但它的直接父元素是span，不是.haha的直接后代，所以不能选择。只有段落1、2有黄色背景。

相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素:

<html>
<head>
  <style>
    div+p {
      background-color: yellow;
    }
  </style>
</head>
<body>
<h1>文章标题</h1>
<div>
<h2>DIV 内部标题</h2>
<p>DIV 内部段落。</p>
</div>
    <p>DIV 之后的第一个 P 元素</p>
    <p>DIV 之后的第二个 P 元素</p>
</body>
</html>

浏览器效果如图
在这里插入图片描述

后续兄弟选择器

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。
以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素<p> :

<html>
<head>
  <style>
    div+p {
      background-color: yellow;
    }
  </style>
</head>
<body>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
</html>

浏览器运行效果如下
在这里插入图片描述

CSS伪类

伪类的语法

selector:pseudo-class {property:value;}

anchor伪类

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

注意：在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
注意：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
注意：伪类的名称不区分大小写。

CSS伪元素

语法

伪元素的语法：
selector:pseudo-element {property:value;}

first-line 伪元素

“first-line” 伪元素用于向文本的首行设置特殊样式。
在下面的例子中，浏览器会根据 “first-line” 伪元素中的样式对 p 元素的第一行文本进行格式化：

p:first-line 
{
    color:#ff0000;
    font-variant:small-caps;
}

注意：“first-line” 伪元素只能用于块级元素。

first-letter 伪元素

“first-letter” 伪元素用于向文本的首字母设置特殊样式：

p:first-letter 
{
    color:#ff0000;
    font-size:xx-large;
}

关于伪类与伪元素的说明

伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。