css学习(二)｜ 青训营笔记

用户9439801814573
105 阅读7分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天

css文本

文本颜色

color 属性用于设置文本的颜色。颜色由以下值指定：

  • 颜色名 - 比如 "red"
  • 十六进制值 - 比如 "#ff0000"
  • RGB 值 - 比如 "rgb(255,0,0)"
body {
  color: blue;
}

文本颜色和背景色

在本例中，我们定义了 background-color 属性和 color 属性：

h1 {
  background-color: black;
  color: white;
}

对齐

text-align 属性用于设置文本的水平对齐方式。

当 text-align 属性设置为 "justify" 后，将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的（就像在杂志和报纸中）：

文本方向

direction 和 unicode-bidi 属性可用于更改元素的文本方向：

垂直对齐

vertical-align 属性设置元素的垂直对齐方式。

css文字装饰

文字装饰

text-decoration 属性用于设置或删除文本装饰。

text-decoration: none; 通常用于从链接上删除下划线：

其他 text-decoration 值用于装饰文本：

实例

h1 {
  text-decoration: overline;
}
​
h2 {
  text-decoration: line-through;
}
​
h3 {
  text-decoration: underline;
}

文本转换

text-transform 属性用于指定文本中的大写和小写字母。

文字缩进

text-indent 属性用于指定文本第一行的缩进：

字母间距

letter-spacing 属性用于指定文本中字符之间的间距。

行高

line-height 属性用于指定行之间的间距：

字间距

word-spacing 属性用于指定文本中单词之间的间距。

空白

white-space 属性指定元素内部空白的处理方式。

p {
  white-space: nowrap;
}

仅用了元素内的文本换行

css文本阴影

文本阴影

text-shadow 属性为文本添加阴影。

最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）：

h1 {
  text-shadow: 2px 2px;
}

image.png

css字体

通用字体族

在 CSS 中，有五个通用字体族：

  • 衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
  • 无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
  • 等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
  • 草书字体（Cursive）- 模仿了人类的笔迹。
  • 幻想字体（Fantasy）- 是装饰性/俏皮的字体。

image.png

CSS font-family 属性

font-family 属性应包含多个字体名称作为“后备”系统，以确保浏览器/操作系统之间的最大兼容性。

注释： 如果字体名称不止一个单词，则必须用引号引起来，例如："Times New Roman"。

实例

为三个段落规定不同的字体：

.p1 {
  font-family: "Times New Roman", Times, serif;
}
​
.p2 {
  font-family: Arial, Helvetica, sans-serif;
}
​
.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

字体样式

font-style 属性主要用于指定斜体文本。

此属性可设置三个值：

  • normal - 文字正常显示
  • italic - 文本以斜体显示
  • oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）

字体粗细

font-weight 属性指定字体的粗细：

字体变体

font-variant 属性指定是否以 small-caps 字体（小型大写字母）显示文本。

在 small-caps 字体中，所有小写字母都将转换为大写字母。但是，转换后的大写字母的字体大小小于文本中原始大写字母的字体大小。

字体大小

font-size 属性设置文本的大小。

绝对尺寸：

  • 将文本设置为指定大小
  • 不允许用户在所有浏览器中更改文本大小（可访问性不佳）
  • 当输出的物理尺寸已知时，绝对尺寸很有用

相对尺寸：

  • 设置相对于周围元素的大小
  • 允许用户在浏览器中更改文本大小

注释： 如果没有指定字体大小，则普通文本（如段落）的默认大小为 16px（16px = 1em）。

以像素设置字体大小

使用像素设置文本大小可以完全控制文本大小：

  • 实例
h1 {
  font-size: 40px;
}

用 em 设置字体大小

为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用 em 而不是像素。

W3C 建议使用 em 尺寸单位。

响应式字体大小

可以使用 vw 单位设置文本大小，它的意思是“视口宽度”（"viewport width"）。

这样，文本大小将遵循浏览器窗口的大小，请调整浏览器窗口的大小，以查看字体大小如何缩放：

谷歌字体

如果您不想使用 HTML 中的任何标准字体，则可以使用 Google Fonts API 向页面添加数百种其他字体。

只需添加一个样式表链接并引用您选择的字体系列：

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">

body {
  font-family: "Sofia";
  font-size: 22px;
}

字体属性

为了缩短代码，也可以在一个属性中指定所有单个字体属性。

font 属性是以下属性的简写属性：

  • font-style
  • font-variant
  • font-weight
  • font-size/line-height
  • font-family

注意： font-size 和 font-family 的值是必需的。如果缺少其他值之一，则会使用其默认值。

p.b {
  font: italic small-caps bold 12px/30px Georgia, serif;
}

css图标

向 HTML 页面添加图标的最简单方法是使用图标库，比如 Font Awesome。

将指定的图标类的名称添加到任何行内 HTML 元素（如 或 ）。

下面的图标库中的所有图标都是可缩放矢量，可以使用 CSS进行自定义（大小、颜色、阴影等）。

  • 如需使用 Font Awesome 图标，请访问 fontawesome.com，登录并获取代码添加到 HTML 页面的 部分：
<script src="https://kit.fontawesome.com/yourcode.js"></script>

如：

<body>
​
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
​
</body>
  • 如需使用 Bootstrap glyphicons，请在 HTML 页面的 部分内添加这行：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  • 如需使用 Google 图标，请在HTML页面的 部分中添加以下行：
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

css链接

通过 CSS，可以用不同的方式设置链接的样式。

链接可以使用任何 CSS 属性（例如 color、font-family、background 等）来设置样式。

a {
  color: hotpink;
}

此外，可以根据链接处于什么状态来设置链接的不同样式。

四种链接状态分别是：

  • a:link - 正常的，未访问的链接
  • a:visited - 用户访问过的链接
  • a:hover - 用户将鼠标悬停在链接上时
  • a:active - 链接被点击时

这个东西感觉以后做网站还是有点用的

/* 未被访问的链接 */
a:link {
  color: red;
}
/* 已被访问的链接 */
a:visited {
  color: green;
}
/* 将鼠标悬停在链接上 */
a:hover {
  color: hotpink;
}
/* 被选择的链接 */
a:active {
  color: blue;
}

链接按钮

本例演示了一个更高级的例子，其中我们组合了多个 CSS 属性，将链接显示为框/按钮：

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center; 
  text-decoration: none;
  display: inline-block;
}
​
a:hover, a:active {
  background-color: red;
}

其实就是加上了内边距，然后填了个背景色，看起来就变大了，变成一个按钮了

HTML 列表和 CSS 列表属性

不同的列表项目标记

list-style-type 属性指定列表项标记的类型。

下例显示了一些可用的列表项标记：

  • 实例
ul.a {
  list-style-type: circle;
}
​
ul.b {
  list-style-type: square;
}
​
ol.c {
  list-style-type: upper-roman;
}
​
ol.d {
  list-style-type: lower-alpha;
}

看起来是ul就是无序列表，然后.后面跟的就是一个实例吧，以后就可以直接用

如：

< style> ul.a { list-style-type: circle; }

< ul class="a">

  • Coffee
  • Tea
    •
  • Coca Cola
    •

    图像作为列表项标记

    list-style-image 属性将图像指定为列表项标记：

    ul { list-style-image: url('/i/photo/sqpurple.gif'); }

    < ul>

  • Coffee
  • Tea
  • Coca Cola
    • < /ul>

    定位列表项标记

    list-style-position 属性指定列表项标记（项目符号）的位置。

    "list-style-position: inside;" 表示项目符号将在列表项内。

    删除默认设置

    list-style-type:none 属性也可以用于删除标记/项目符号。请注意，列表还拥有默认的外边距和内边距。要删除此内容，请在

      或
        中添加 margin:0 和 padding:0 ：

        设置列表的颜色样式

        我们还可以使用颜色设置列表样式，使它们看起来更有趣。

        ol {
  background: #ff9999;
  padding: 20px;
}

        css表格

        CSS 表格 (w3school.com.cn)

    avatar
    文章
    阅读
    粉丝