CSS基础教程学习 - 卷卷1121

公告

随笔档案

阅读排行榜

1.设置背景色而不是文本的不透明度：

div {
  background: rgba(0, 128, 0, 0.3) /* 30% 不透明度的绿色背景 */
}

2.背景图像相关属性：

body {
  background-image: url("tree.png"); 
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;  /* 是否随文字滚动而滚动*/
}

　使用简写属性在一条声明中设置背景属性：

body {
  background: #ffffff url("tree.png") no-repeat right top;
}

　在使用简写属性时，属性值的顺序为：

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

3.边框属性：

属性	描述
border	简写属性，在一条声明中设置所有边框属性。
border-color	简写属性，设置四条边框的颜色。
border-radius	简写属性，可设置圆角的所有四个 border-*-radius 属性。
border-style	简写属性，设置四条边框的样式。
border-width	简写属性，设置四条边框的宽度。
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	设置上边框的宽度。

4.margin外边距，padding内边距。

使用 box-sizing 属性将宽度保持为 300px，无论填充量如何：（不用的话随着padding改变而改变）

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

5.width和height：

设置 max-width：max-width 属性用于设置元素的最大宽度。在这种情况下，使用 max-width 能够改善浏览器对小窗口的处理。

元素的总宽度应该这样计算：

元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距

元素的总高度应该这样计算：

元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

6.轮廓outline：是在元素周围绘制的一条线，在边框之外，以凸显元素。

CSS 拥有如下轮廓属性：

outline-style
outline-color
outline-width
outline-offset
outline

注意：轮廓与边框不同！不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。

（1）反转颜色

下例使用 outline-color: invert，执行了颜色反转。这样可以确保无论颜色背景如何，轮廓都是可见的：

p.ex1 {
  border: 1px solid yellow;
  outline-style: solid;
  outline-color: invert;
}

（2）CSS 轮廓偏移

outline-offset 属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。

p {
  margin: 50px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 25px;
}

7.CSS文本（text）：color（不是text-color）

（1）文本方向：

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

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

（2）垂直对齐：vertical-align 属性设置元素的垂直对齐方式。（top、middle、bottom）

（3）文字装饰：

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

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

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

h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

（4）文本转换：

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

它可用于将所有内容转换为大写或小写字母，或将每个单词的首字母大写：

p.uppercase {
  text-transform: uppercase;
}
p.lowercase {
  text-transform: lowercase;
}
p.capitalize {
  text-transform: capitalize;
}

（5）文本缩进（text-indent）： 用于指定文本第一行的缩进：50px。

（6）字母间距（letter-spacing ）：用于指定文本中字符之间的间距。（每个字符之间的距离，可以为负）

（7）行高（line-height ）：用于指定行之间的间距（大多数浏览器中的默认行高大概是 110% 到 120%。<1.1、1.2>）

（8）字间距（word-spacing） ：用于指定文本中单词之间的间距。（每个单词之间的距离）

（9）空白（white-space）：指定元素内部空白的处理方式。

此例演示如何禁用元素内的文本换行：

p {
  white-space: nowrap;
}

（10）文本阴影（text-shadow ）：为文本添加阴影。

text-shadow: 2px 2px 5px red; /*水平阴影、垂直阴影、模糊效果、阴影颜色*/

8.CSS字体（font）：

（1）通用字体族：

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

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;
}

（2）字体样式：font-style 属性主要用于指定斜体文本。

此属性可设置三个值：

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

（3）字体粗细：font-weight 属性指定字体的粗细。（normal，lighter，bold）

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

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

（5）百分比和 Em 的组合设置字体大小：在所有浏览器中显示相同的文本大小，并允许所有浏览器缩放或调整文本大小！

body {
  font-size: 100%;
}
h1 {
  font-size: 2.5em;
}
h2 {
  font-size: 1.875em;
}
p {
  font-size: 0.875em;
}

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

文本大小将遵循浏览器窗口的大小：

<h1 style="font-size:10vw">Hello World</h1>

注释：视口（Viewport）是浏览器窗口的大小。 1vw = 视口宽度的 1％。如果视口为 50 厘米宽，则 1vw 为 0.5 厘米。

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

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

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
  font-family: "Sofia";
  font-size: 22px;
}
</style>
</head>

（8）字体属性：

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

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

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

使用简写声明设置一些字体属性：

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

注意：font-size 和 font-family 的值是必需的（属性之间是空格，不是逗号）。如果缺少其他值之一，则会使用其默认值。

9.CSS图标：

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

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

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

（1）Font Awesome 图标：访问 fontawesome.com，登录并获取代码添加到 HTML 页面的 <head> 部分

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<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" style="font-size:60px;color:lightblue;"></i>

</body>
</html>

（2）Bootstrap 图标：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>

</body>
</html>

（3）Google图标：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>

</body>
</html>

10.CSS链接：

（1）根据链接处于什么状态来设置链接的不同样式。

四种链接状态分别是：

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

/* 未被访问的链接 */
a:link {
  color: red;
}

/* 已被访问的链接 */
a:visited {
  color: green;
}

/* 将鼠标悬停在链接上 */
a:hover {
  color: hotpink;
}

/* 被选择的链接 */
a:active {
  color: blue;
}
......
......
<p><b><a href="/index.html" target="_blank">这是一个链接</a></b></p>

如果为多个链接状态设置样式，请遵循如下顺序规则：

a:hover 必须 a:link 和 a:visited 之后
a:active 必须在 a:hover 之后

（2）text-decoration 属性主要用于从链接中删除下划线：

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:active {
  text-decoration: underline;
}

（3）background-color 属性可用于指定链接的背景色：

a:link {
  background-color: yellow;
}
a:visited {
  background-color: cyan;
}
a:hover {
  background-color: lightgreen;
}
a:active {
  background-color: hotpink;
}

11.CSS列表：

（1）有序和无序列表：

<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
</head>
<body>

<h1>列表</h1>
<p>无序列表实例：</p>

<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>有序列表实例：</p>
<ol class="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

</body>
</html>

（2）图像作为列表项标记：

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

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

"list-style-position: outside;" 表示项目符号点将在列表项之外。列表项每行的开头将垂直对齐。（默认）

"list-style-position: inside;" 表示项目符号将在列表项内。由于它是列表项的一部分，因此它将成为文本的一部分，并在开头推开文本。

ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}

（4）删除默认设置：

list-style-type:none 属性也可以用于删除标记/项目符号。请注意，列表还拥有默认的外边距和内边距。要删除此内容，请在 <ul> 或 <ol> 中添加 margin:0 和 padding:0 ：

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

（5）列表 - 简写属性：

list-style 属性是一种简写属性。它用于在一条声明中设置所有列表属性：

ul {
  list-style: square inside url("sqpurple.gif");
}

在使用简写属性时，属性值的顺序为：

list-style-type（如果指定了 list-style-image，那么在由于某种原因而无法显示图像时，会显示这个属性的值）
list-style-position（指定列表项标记应显示在内容流的内部还是外部）
list-style-image（将图像指定为列表项标记）

如果缺少上述属性值之一，则将插入缺失属性的默认值（如果有）。

（6）列表的颜色样式：

<!DOCTYPE html>
<html>
<head>
<style>
ol {
  list-style-position:inside;
  background: #ff9999;
  padding: 20px;
}

ul {
  list-style-position:inside;
  background: #3399ff;
  padding: 20px;
}

ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 20px;
  margin-top:5px;
}

ul li {
  background: #cce5ff;
  margin: 5px;
}
</style>
</head>
<body>

<h1>设置列表的颜色样式：</h1>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

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

</body>
</html>

12.CSS表格：

（1）表格边框：

如需在 CSS 中设置表格边框，请使用 border 属性。

下例为 <table>、<th> 和 <td> 元素规定了黑色边框：

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

注意：上例中的表格拥有双边框。这是因为 table 和 <th> 和 <td> 元素都有单独的边框。

（2）全宽表格：

在某些情况下，上表似乎很小。如果您需要一个可以覆盖整个屏幕（全宽）的表格，请为 <table> 元素添加 width: 100%：

table {
  width: 100%;
}

（3）合并表格边框：

border-collapse 属性设置是否将表格边框折叠为单一边框：

table {
  border-collapse: collapse;
}

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

如果只希望表格周围有边框，则仅需为 <table> 指定 border 属性：

table {
  border: 1px solid black;
}

（4）表格宽度和高度：

表格的宽度和高度由 width 和 height 属性定义。

下例将表的宽度设置为 100％，将 <th> 元素（表头）的高度设置为 50px：

table {
  width: 100%;
}

th {
  height: 50px;
}

（5）水平对齐：text-align 属性设置 <th> 或 <td> 中内容的水平对齐方式（左、右或居中）。

默认情况下，<th> 元素的内容居中对齐，而 <td> 元素的内容左对齐。

要使 <td> 元素的内容也居中对齐，请使用 text-align: center：

th {
  text-align: center;
}

下例使 <th> 元素中的文本左对齐：

th {
  text-align: left;
}

（6）垂直对齐：vertical-align 属性设置 <th> 或 <td> 中内容的垂直对齐方式（上、下或居中）。

默认情况下，表中内容的垂直对齐是居中（<th> 和 <td> 元素都是）。

下例将 <td> 元素的垂直文本对齐方式设置为下对齐：

td {
  height: 50px;
  vertical-align: bottom;
}

（7）表格内边距：

如需控制边框和表格内容之间的间距，请在 <td> 和 <th> 元素上使用 padding 属性：

th, td {
  padding: 15px;
  text-align: left;
}

（8）水平分隔线：

向 <th> 和 <td> 添加 border-bottom 属性，以实现水平分隔线：

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

（9）可悬停表格:

在 <tr> 元素上使用 :hover 选择器，以突出显示鼠标悬停时的表格行：

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

（10）条状表格：（偶数even，奇数odd）

tr:nth-child(even) {background-color: #f2f2f2;}

（10）响应式表格：如果屏幕太小而无法显示全部内容，则响应式表格会显示水平滚动条：

在 <table> 元素周围添加带有 overflow-x:auto 的容器元素（例如 <div>），以实现响应式效果：

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

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

</div>

注释：在 OS X Lion（在 Mac 上）中，滚动条默认情况下是隐藏的，并且仅在使用时显示（即使设置了 "overflow:scroll"）。

posted on 2022-05-25 21:05 卷卷1121 阅读(58) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· CSS中级教程学习

· html学习注意点1

· CSS简单使用

· CSS基础知识

· Acwing Web应用课CSS学习笔记中

juanjuan1121

公告

搜索

常用链接

随笔档案

阅读排行榜