##CSS复习## ①

CSS语法

CSS样式设置的语法包括两部分：选择器与样式声明。

例：

h1 {
    color: Tomato;
    font-size: 24px;
}

CSS注释

在CSS中的注释则以/*开始，以*/结束

例：

h1 {
    /* 这是一段单行注释，比如想在这里注释一下Tomato为西红柿色 */
    color: Tomato;
    font-size: 24px;
}

CSS选择器

CSS选择器可以根据元素名称、元素的id、class（类）、attribute（属性）等各种方式来选择指定元素。

元素名选择器

CSS选择器可以直接根据元素名来选择元素。如下所示，可以选择页面上所有的<p>元素。

p {
    color: Tomato;
    font-size: 24px;
}

Id选择器

Id选择器即通过HTML元素的id属性来选择指定元素。每个元素的id属性在一个HTML页面中应该是独一无二的，因此id选择器适合用来选择指定的某一个元素。具体写法如下所示，在目标id值前加上符号#即可。

#id_1 {
    color: Tomato;
    font-size: 24px;
}

Class类选择器

类选择器，就是通过HTML元素的class属性（类名）来选择指定的元素。写法上，在类名前加上符号.即可，则目标页面class属性（类名）等于该指定类名的所有HTML元素都是目标选择元素。

.class_name1 {
    color: Tomato;
    font-size: 24px;
}

选择器组队

h1, h2, #id_3 {
    color: Tomato;
    font-size: 24px;
}

CSS 属性选择器

CSS [attribute] 选择器

利用[attribute]属性选择器可以选择具有该指定属性的HTML元素。

a[target] {
    background-color: yellow;
}

##CSS复习## ①

举一个凭空造出来的fuck属性，如下例所示，所有具有fuck属性的元素，都会表现为背景黄色，上面的例子和a元素进行了组合，这个例子中不仅凭空造出fuck属性，而且不和a元素组合，这也就是为啥具有fuck属性的span元素也会表现为背景黄色。

[fuck] {
    background-color: yellow;
}

##CSS复习## ①

CSS [attribute="value"] 选择器

使用[attribute="value"]选择器来选择指定属性等于指定值的HTML元素。如下所示，选择target属性等于_blank的a元素：

a[target="_blank"] { 
    background-color: yellow;
}

##CSS复习## ①

CSS [attribute~="value"] 选择器

使用[attribute~="value"]选择器来选择指定属性包含指定值的HTML元素。如下所示，选择title~="zhuan"的元素即target属性中只要含有“zhuan”这个词的都属于目标元素。（被包含的这个词必须是独立成词的，更详细解释请看下方备注）

[title~="zhuan"] {
    background-color: yellow;
}

##CSS复习## ①

CSS [attribute*="value"] 选择器

使用[attribute*="value"]选择器来选择指定属性包含指定值的HTML元素。该选择器只要指定属性包含指定值即可，不需要指定值独立成词。

[title*="zhuan"] {
    background-color: yellow;
}

##CSS复习## ①

CSS [attribute|="value"] 选择器

使用[attribute|="value"]选择器来选择指定属性以指定值开头的HTML元素。但是开头的这个词必须是完整的，与后续的词之间必须以-符号来隔开，示例参详下方备注。

[class|="top"] {
    background: yellow;
}

##CSS复习## ①

CSS [attribute^="value"] 选择器

使用[attribute^="value"]选择器来选择指定属性以指定值开头的HTML元素。而这个选择器不同的是不要求指定值是完整单词，只要开头是指定值，后面不管是什么都无所谓。

[class^="top"] {
    background: yellow;
}

##CSS复习## ①

CSS [attribute$="value"] 选择器

使用[attribute$="value"]选择器来选择指定属性以指定值结尾的HTML元素。不要求指定值是完整单词，只要结尾是指定值，前面不管是什么都无所谓。

[class$="tent"] {
    background: yellow;
}

##CSS复习## ①

CSS 组合选择器

选择器的组合方式

不同的选择器是可以进行组合的，一个单独的选择器可以和另外一个选择器乃至更多的CSS选择器进行组合。CSS选择器的组合则一般包括如下4中组合方式：

  • 后代元素选择器（空格）
  • 子元素选择器（>）
  • 相邻兄弟选择器（+）
  • 普通兄弟选择器（~）
div p {
    background: Tomato;
}
div > p {
    background: Tomato;
}
div + p {
    background: Tomato;
}
div ~ p {
    background: Tomato;
}

CSS 伪类

伪类（pseudo-class）是用来定义某个元素的某种特殊状态。

跟链接元素相关的伪类

链接元素配合如下几种不同的伪类，则有不同的展示方式：

/* 没有被访问过的链接 */
a:link {
    color: blue;
}

/* 访问过的链接 */
a:visited {
    color: gray;
}

/* 被鼠标悬停在上方的链接 */
a:hover {
    color: green;
}

/* 被选中的链接元素 */
a:active {
    color: red;
}

伪类和类（Class）的组合

伪类和类（Class）的组合使用，顺理成章，天经地义，没什么好解释的，看例子吧：

a.jerk:hover {
    color: #46acb6;
    font-size: 48px;
}

 

<div> 被鼠标悬停的样式（hover）

举一个div元素的被鼠标悬停状态下的样式设置。

div:hover {
    color: white;
    background: #46acb6;
}

 

通过悬停来实现弹出另外一个元素

这是使用悬停伪类（:hover）的一个复合技巧，如下列所示：

p {
    display: none;
    background-color: black;
    color: white;
    padding: 20px;
}

div:hover p {
    display: block;
}

CSS 插入方式

CSS的三种插入方式

插入CSS样式表有三种方式，如下所示：

  • 通过<link>元素来引入外部样式表；
  • 以<style>标签在HTML源码内插入内部样式表；
  • 通过HTML元素的style属性来设置行内样式表。

引入外部样式表

使用外部样式表，非常方便就可以改变整个站点的风格样式。因为往往一个站点的多个页面都共用同一个外部样式表。

而引入外部样式表，则是通过在head元素中插入link元素，如下例所示：

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

内部样式表

内部样式表一般是通过<style>标签的方式直接把样式表插入到HTML源码内，因此被插入的CSS样式表就被称为了内部样式表。一般来说，内部样式表的style元素都是位于head元素内，但是这不是绝对的，直接插入在body元素中也是没问题的。

<html>
<head>
<style>
h1 {
    color: #46acb6;
    margin-left: 10px;
    }
p {
    color: LightGray;
    margin-left: 13px;
    }
</style>
</head>

<body>
    <h1>标题</h1>
    <p>这是一个段落</p>
</body>
</html>

行内样式表

通过元素的style属性可以设置行内样式表；行内样式表这种方式比较适合某元素需要单独进行一些样式设置。

<h1 style="color:#46acb6;margin-left:10px;">标题</h1>

CSS 优先级

CSS优先级梯度

如下所示，依次列出的四大类选择器的优先级梯度，从上往下越来越低，行内样式表 > Id选择器 > 类选择器、属性选择器、伪类 > 元素名选择器、伪元素：

  • 行内样式表 - 利用元素的style属性直接设置元素样式的那种方式优先级别最高；
  • Id选择器 - 直接通过元素id定位到指定元素的选择器优先级别次高；
  • 类选择器、属性选择器、伪类 - 类选择器、属性选择器、伪类的优先级别次次高；
  • 元素名选择器、伪元素 - 相对前面三大类而言，元素名选择器、伪元素的优先级别最低。

 

CSS 颜色

背景色

background-color和background特性都可以用来设置背景色。

<h1 style="background-color:Tomato;">Tomato</h1>

 

文本颜色

color特性可以用来设置元内的文本颜色。

<h1 style="color:Tomato;">Tomato</h1>

 

边框颜色

border特性可以用来设元素的边框颜色。

<h1 style="border:1px solid Tomato;">Tomato</h1>

 

颜色属性的取值表示

RGB 值

RGB是计算机通过红色、绿色、蓝色的比例来定义颜色的一种方式。红、绿、蓝的取值0-255。

rgb(red, green, blue)

HEX 值

HEX即16进制色彩的定义方式。

#rrggbb

HSL 值

HSL的方式是利用色调（hue）、饱和度（saturation）、明度（lightness）这三个指数进行对颜色的定义。

hsl(hue, saturation, lightness)
  • 色调hue的取值范围是0-360，0代表红色，120代表绿色，240代表蓝色。
  • 饱和度saturation取值范围0%-100%，取值越大则饱和度越高，越低则灰度越高。
  • 明度lightness取值范围是0%-100%，0%代表全黑，100%代表全白，50%代表黑白之间。

 

CSS 背景

CSS中跟背景相关的属性被用于设置元素的背景效果样式；相关属性有如下几种：

  • background
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

 

HTML 元素背景色设置

使用background属性或background-color属性都可以设置背景色。

地镇高岗，一派西山千古秀；

门朝大海，三河合水万年河。

<div style="background-color:LightGray;">
地镇高岗，一派西山千古秀；
</div>

<div style="background:LightBlue;">
门朝大海，三河合水万年河。
</div>

 

HTML 元素背景图片设置

使用background特性或background-image特性都可以设置元素的背景图片。

background: url('背景图片的url地址');

 

background-image: url('背景图片的url地址');

 

让背景图片只在水平方向上重复

默认情况下，背景图片会重复显示的；如果希望背景图片只在水平方向上重复，将元素的 background-repeat特性设置成repeat-x即可。

background-image: url('背景图片的url地址');
background-repeat: repeat-x;

 

让背景图片只在垂直方向上重复

默认情况下，背景图片会重复显示的；如果希望背景图片只在垂直方向上重复，将元素的 background-repeat特性设置成repeat-y即可。

background-image: url('背景图片的url地址');
background-repeat: repeat-y;

 

让背景图片不重复显示

默认情况下，背景图片会重复显示的；如果希望背景图片不重复显示，将元素的 background-repeat特性设置成no-repeat即可。

background-image: url('背景图片的url地址');
background-repeat: no-repeat;

让背景图片不重复，且控制背景图片的位置

可通过background-position属性来控制图片的位置，如下所示：

background-image: url('背景图片的url地址');
background-repeat: no-repeat;
background-position: right top;

让背景图片不随滚动而变化位置

将“background-attachment”的属性设定为“fixed”就能搞定了。

background-image: url('背景图片的url地址');
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;

使用background属性合并上述各属性

background: url('背景图片的url地址') no-repeat right top fixed;

使用background-origin定义背景图片的起始位置

利用background-origin属性可以定义背景图片的起始位置，该属性有三种取值：padding-box、border-box、content-box，具体如例所示：

#example1 {
    border: 10px double black;
    padding: 25px;
    background: url('https://logo.zhuanfou.com/bash.png');
    background-repeat: no-repeat;
    background-origin: padding-box;
}

#example2 {
    border: 10px double black;
    padding: 25px;
    background: url('https://logo.zhuanfou.com/bash.png');
    background-repeat: no-repeat;
    background-origin: border-box;
}

#example3 {
    border: 10px double black;
    padding: 25px;
    background: url('https://logo.zhuanfou.com/bash.png');
    background-repeat: no-repeat;
    background-origin: content-box;
}

 

使用background-size来定义背景图片的尺寸

属性background-size的默认取值是auto，即按原有尺寸展示；如果想自定义背景图片的显示尺寸，设置该属性为指定宽度、高度即可，如案例所示：

background-size: 30px 30px;

 

使用background-clip来定义背景的起始范围

与background-origin有点像，只是background-clip是用来定义背景效果的起始范围，三种取值：padding-box、border-box、content-box，具体如例所示：

#example1 {
    border: 10px double black;
    padding: 25px;
    background: LightBlue;
    background-clip: padding-box;
}

#example2 {
    border: 10px double black;
    padding: 25px;
    background: LightBlue;
    background-clip: border-box;
}

#example3 {
    border: 10px double black;
    padding: 25px;
    background: LightBlue;
    background-clip: content-box;
}

CSS 边框

CSS中border相关属性可定义元素边框样式、粗度、颜色等信息。

##CSS复习## ①

只用border属性来杂糅实现边框宽度、边框的风格、边框的颜色三类属性，如下：

/* 分别是 width style color */
p {
    border: 5px solid #46acb6;
}

设置圆角的边框

border-radius属性可以用来将边框的直角设置成圆角，该属性的取值即为圆角的半径。

/* 左上角、右上角、右下角、左下角 */
p.round2 {
    border: 2px solid Tomato;
    border-radius: 2px 5px 8px 12px;
}

CSS 外边距

CSS 外边距（margin）

CSS中margin属性用来定义元素的外边距。什么是外边距呢？也就是此元素四周都会空出指定宽度的空白间距，这个事情比较难说清楚，直接看例子来试试吧：

p {
    border: 1px solid #46acb6;
    margin: 72px;
}

Margin - 单独设置各方向的外边距

margin属性可设置元素四周的外边距距离，那如果想对上下左右不同方向分别单独设置外边距距离，则可使用到如下四种属性：

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

案例：

p {
    margin-top: 90px;
    margin-bottom: 36px;
    margin-right: 72px;
    margin-left: 108px;
}

或者：

p {
    margin: 90px 72px 36px 108px;
}

Margin的auto属性

margin属性的取值可以是auto，该取值的作用是让浏览器自动设置外边距以保证该元素水平方向上居中；一般情况下，取值auto前，都会设置好该元素的宽度；浏览器会保证左边距和右边距相等，且恰好这个值可以使元素水平方向上在正中间。

div {
    width: 300px;
    margin: auto;
    border: 1px solid #46acb6;
}

如果有时上下边距也需要特别设定，则可以如下分开设置，效果也是可以保证的：

div {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 24px;
    margin-bottom: 36px;
    border: 1px solid #46acb6;
}

CSS 内边距

CSS padding

在CSS中padding属性被用来定义元素的内边距，即该元素内容与边框之间的空白间距。通过CSS进行设置，不仅能整体控制内边距，还能分别设置上、下、左、右方向的内边距。

Padding - 分别设置上下左右的内边距

通过如下属性可以分别定义上、下、左、右方向的内边距：

  • padding-top - 上内边距
  • padding-right - 右内边距
  • padding-bottom - 下内边距
  • padding-left - 左内边距

内边距属性的取值有如下方式：

  • 数值加单位 - 可用px、pt、cm等单位
  • % - 可以用百分比

案例如下：

div {
    padding-top: 150px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}

或者：

div {
    padding: 150px 30px 50px 80px;
}

Padding 和 Width 二三事

div元素的宽度值虽然被设置成300px，但是实际上其表现出的宽度应该是350px，即300px宽度，加上25px左边距，再加上25px右边距。

div {
    width: 300px;
    padding: 25px;
}

但是，如此元素宽度就很难限定，因此，大多情况下更佳的实践方式是把box-sizing这个值设定成border-box，这样就可以保证内边距不会对元素宽度产生影响。

div {
    width: 300px;
    padding: 25px;
    box-sizing: border-box;
}

##CSS复习## ①

HTML元素的宽度和高度

HTML元素的宽度和高度特指该元素content内容部分、padding内边距部分和border边框部分合在一起的宽度和高度，不包括元素的外边距部分。

元素总宽度 = 左边框宽度 + 左内边距宽度 + width（内容部分宽度）+ 右内边距宽度 + 右边框宽度

总高度的计算方式如下：
元素总高度 = 上边框宽度 + 上内边距宽度 + height（内容部分高度）+ 下内边距宽度 + 下边框宽度

 

CSS Outline轮廓

CSS Outline轮廓

所谓轮廓就元素边框（Border）之外的线。其目的就是让该元素更加显目。

##CSS复习## ①

##CSS复习## ①

使用outline属性进行通吃

.ex4 {outline: thick ridge #46acb6;}

Outline Offset

CSS中的outline-offset属性的取值一般是数值加单位，诸如15px这样，其定义的是轮廓（outline）与边界（border）之间的空白透明间距，取值即为该空白间距的宽度。

p {
    margin: 30px;
    background: #eef8f8;
    border: 1px solid #46acb6;
    outline: 1px solid Tomato;
    outline-offset: 15px;
}

##CSS复习## ①

CSS 文本

文本装饰 Decoration （划线方式）

CSS中的text-decoration属性是用来定义文本装饰方式，实际上就是让该文本的划线样式：上划线（overline）、中划线（line-through）、下划线（underline）抑或是不被划线（none）

a {
    text-decoration: none;
}

文本字母大小写样式

CSS中的text-transform属性，可以控制文本元素中的字母的大小写样式，取值如下：

  • uppercase - 全部字母转为大写字母
  • lowercase - 全部字母转为小写字母
  • capitalize - 所有单词首字母自动大写
.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}

文本首行缩进 Indent

CSS中的text-indent属性是用来定义文本首行缩进距离。如下例所示：

p {
    text-indent: 256px;
}

文本字符间距

CSS中的letter-spacing可用来定义文本的字符间距，如下例所示：

h1 {
    letter-spacing: 3px;
}

h2 {
    letter-spacing: -3px;
}

行高 line-height

CSS中的line-height属性可用来定义文本的行高。行高的取值如下：

  • 具体的数值加单位 - 譬如36px这种形式
  • 表示百分百的数字，但习惯上并不用%，而是用实数来表示 - 比如1.2代表1.2倍行高
.small {
    line-height: 0.7;
}

.big {
    line-height: 1.8;
}

文本方向 Direction

CSS中的direction属性可以定义文字的方向，该属性可取值：

  • rtl - right to left的缩写，即文本方向是从右向左
  • ltr - left to right的缩写，即文本方向是从左到右
p {
    direction: rtl;
}

词距 word-spacing

CSS中的word-spacing属性可以用来定义文本中单词之间的距离，该属性主要是针对拉丁字母构成的文本。试试下面的例子吧~

h1 {
    word-spacing: 24px;
}

h2 {
    word-spacing: -12px;
}

文本阴影 text-shadow

CSS中的text-shadow可以设置文本的阴影，如下例所示：

h1 {
    text-shadow: 3px 2px #46acb6;
}

让文本不会断行

如果想强制一段文本不会换行，可以如下例所示：

div {
    white-space: nowrap;
}

字体种类 font-family

字体粗细 font-weight

字体大小 font-size（使用像素px为单位来设置；使用em为单位来设置；使用vw来设置字体大小（不常用））

字体风格 font-style（normal - 就是正常状态，不倾斜（默认就是这种）；italic - 定义字体为斜体；）

 

##CSS复习## ①

CSS 链接

链接元素的CSS样式

链接元素相关的CSS样式有很多，诸如文本颜色color、背景样式background、边框样式border、轮廓样式outline、划线风格text-decoration等。

a {
    color: White;
    background: Tomato;
    border: 7px solid #46acb6;
    outline: 7px solid #d4d854;
    text-decoration: overline;
}

跟链接元素相关的伪类

链接元素配合如下几种不同的伪类，则有不同的展示方式：

/* 没有被访问过的链接 */
a:link {
    color: blue;
}

/* 访问过的链接 */
a:visited {
    color: gray;
}

/* 被鼠标悬停在上方的链接 */
a:hover {
    color: green;
}

/* 被选中的链接元素 */
a:active {
    color: red;
}

CSS 列表

列表属性

HTML列表分为两类，无序列表和有序列表；无序列表通过ul元素定义，有序列表通过ol元素定义。在CSS中列表相关属性的主要功效如下：

  • 控制无序列表的标记样式
  • 控制有序列表的标记样式
  • 自定义图片作为标记物
  • 改变列表背景、颜色、字体等属性
  • ##CSS复习## ①

 

HTML 有序列表的标记样式

通过设置<ul>标签的type属性即可设置标记的样式。

##CSS复习## ①

自定义图片作为标记物

通过CSS中的list-style-image属性即可自定义某张图片作为列表的标记物。如下：

ul {
    list-style-image: url('https://logo.zhuanfou.com/program-logo-60.png');
}

标记物的位置

CSS中的list-style-position属性可定义标记物的位置，如果取值outside标记物则在列表内容之外，若取值inside标记物则在列表内容之内，但缩进依然存在。

##CSS复习## ①

删除默认设定

通过CSS中的list-style-type:none这种属性与取值，可以删除浏览器关于列表样式的默认设置；为了显得更纯粹，最好把列表元素的内边距padding和外边距margin都设置成零。如下例子所示：

ul.demo {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

列表 list-style直接通吃

要分别声明list-style-type、list-style-position、list-style-image有点麻烦，记这么多的属性名有点费事，所以用list-style来通吃上述三种属性。

##CSS复习## ①

CSS 表格

表格边框 Table Borders

如CSS边框所述，表格元素也适用border属性。

如下例，设置table、th、td元素的边框（因为这三个元素都设置了边框，所以看上去表格呈现双线边框）：

table, th, td {
    border: 1px solid black;
}

合并表格边框

明明设置的是单线，最终却呈现出双线，有点事与愿违的感觉；为了解决这个问题，可以将table元素的border-collapse属性设置成collapse就ok啦。

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

只设置表格外边框

如果想只设置表格外边框，而不设置内部单元格边框，直接仅设置table元素即可：

table {
    border: 1px solid black;
}

设置表格的宽度和高度

通过设置表格或单元格的width和height属性即可。看下例，将表格的整体宽度设置成100%宽，表头的单元格高度则设置成72px高。

table {
    width: 100%;
}

th {
    height: 72px;
}

##CSS复习## ①

水平对齐

CSS中的text-align属性可以设置表头或者普通单元格的内容在水平方向上的对齐方式。其中表头（th元素）内容默认情况下是居中，而普通单元格（td元素）的内容默认是左对齐。

th {
    text-align: left;
}

 

垂直对齐

CSS中的vertical-align属性可以设置表头或者普通单元格的内容在竖直方向上的对齐方式（top/midddle/bottom）；默认情况下，表头和普通单元格在垂直方向上都默认取值居中。

th, td {
    height: 72px;
    vertical-align: bottom;
}

表格内边距 Padding

设置一下表格的内边距padding属性，看起来会更加清爽一些：

th, td {
    padding: 16px;
}

 

只设置横线进行分割

如下所示，试一试呗：

th, td {
    border-bottom: 1px solid #46acb6;
}

通过伪类设置单元格hover状态的样式

当单元格被鼠标悬浮，即出发该单元格hover状态下的样式设置；如下例所示，利用:hover伪类选择器来设置tr元素（行元素）hover状态下的CSS样式。

tr:hover {
    background-color: #eef8f8;
}

利用奇偶伪类实现条纹形表格

伪类:nth-child()选择器可以区分奇数行与偶数行；tr:nth-child(even)代表偶数行，tr:nth-child(odd)代表奇数行。

/* 奇数行 odd */
tr:nth-child(odd) {
    font-style: italic;
}

/* 偶数行 even */
tr:nth-child(even) {
    background-color: #eef8f8;
}

表格色彩 Color

CSS中的color属性和background-color属性也适用于表格元素。以设置表头th元素的相关色彩为例：

th {
    background-color: #46acb6;
    color: White;
}

表格太大了怎么办？

如果显示的空间有限，表格太大了，这该如何处理呢？很简单，在表格table元素外添加一个容器元素（比如div元素即可），然后把外部容器元素设置上overflow-x:auto这个属性与取值，这样就可以通过滚动条去查看超出范围的表格内容，这种实践方法是一个不错的解决方案。

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>

相关文章：

  • 2021-06-13
  • 2022-12-23
  • 2022-01-13
  • 2021-11-17
  • 2021-04-01
  • 2021-06-25
  • 2021-04-22
  • 2022-01-14
猜你喜欢
  • 2021-09-13
  • 2021-04-22
  • 2021-07-08
  • 2021-12-31
  • 2021-08-25
  • 2022-01-02
  • 2021-09-28
相关资源
相似解决方案
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode