CSS3学习（2）

白水465

已于 2024-08-14 15:16:27 修改

阅读量611

点赞数 8

文章标签： css3 学习前端

于 2024-08-14 15:12:08 首次发布

本文链接：https://blog.csdn.net/qq_62527610/article/details/141191694

版权

CSS文本

1.文本对齐

text-align: xxxxx;
xxxxx=center/left/right

2.下划线

text-decoration: none; 用于删除html中链接的下划线。
decoration装饰物，可以想象成腰带，用了腰更明显，不用也没事，只是个装饰。
text-decoration: xxxxx;
xxxxx= none/overline/line-through/underline
分别代表无、上划线、中（贯穿线or删除线）、下划线

3.控制字母大小写

text-transform: xxxxx;
xxxxx=uppercase/lowercase/capitalize
意思：大写字母/小写字母/首字母大写
transform转换

4.文本缩进（首行缩进）

text-indent: 50px;
indent 在…边缘留出空间
缩进是指调整文本与页面边界之间的距离。

5.字符间距

letter-spacing: 3px;
letter字符 spacing间隔
举例：让小朋友手写‘女子’和‘好’

6.行间距

line-height: 0.7;
一行中有四条线(一般是隐形的)：顶线、中线、基线、底线。基线是a、b、c等字母的最底端，底线是g、j、p等字母的最底端。
行高（line-height）是指上下(文本)行，基线之间的垂直距离。

7.字间距（单词间距）

word-spacing: 10px;
就是单词之间的距离。

8.文本阴影

text-shadow: 3px 2px 2px red;
offset-x | offset-y | blur-radius | color
阴影相对文字的偏移量、模糊半径、颜色
offset 偏离量，blur 模糊

9.禁用文本换行

white-space: nowrap;
space 空格（空出的格子），white-space空出的白色格子，wrap换行
意思就是不管内容有多长，都只有一行（禁止自动换行）

10. 垂直对齐文本内图像

vertical-align：xxxxx;
xxxxx=top/middle/baseline/bottom

CSS字体

1.文本字体

font-family: “Times New Roman”, Times, serif;
给定一个有先后顺序的，由字体（族）名组成的列表，来设置字体。浏览器会选择列表中第一个该计算机上有安装的字体，或者是通过 @font-face 指定的可以直接下载的字体。

2.字体大小

font-size: 250%;
font-size: 40px;
font-size: 2.5em; /* 40px/16=2.5em */
为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用 em 而不是像素。1em 等于当前字体大小。浏览器中的默认文本大小为 16px。因此，默认大小 1em 为 16px。

3.字体样式

font-style: xxxxx;
xxxxx=normal/italic/oblique
italic：斜体，如果没有可用的斜体版本，会用oblique替代。
oblique：倾斜体，如果没有可用的倾斜体版本，会用italic替代。
italic 一般是现实生活中的草书，相比无样式的字体，通常会占用较少的水平空间，而 oblique 字体一般只是常规字形的倾斜版本。大概意思:italic是属于手写版的斜体，oblique只是把常见的电子字体倾斜了。

4.字体变体

font-variant: xxxxx;
xxxxx=normal/small-caps
就是小写字母变成了大写，被改变大小写的字母，它的字母大小同时变小了，不影响之前就是大写的字母大小。

5.字体粗细

font-weight: xxxxx;
xxxxx=normal/bold/lighter/900(数字)
一些字体只提供 normal 和 bold 两种值。normal=400，bold(加粗)=700。lighter比从父元素继承来的值更细 ,bolder则是更粗。

6.字体的集合声明

font: italic bold 1.2em “Fira Sans”, sans-serif;
/font-style/font-weight/font-size/font-family/
font: caption;/* 系统字体 */
font简写，必须包含font-size和font-family，可以选择性包含font-style、font-variant、font-weight、font-stretch、line-height。
1.font-style、font-variant 和 font-weight 必须在 font-size 之前。
2.font-variant 只可以使用normal和small-caps。
3.font-stretch 必须是单个关键字值。
4.line-height 必须跟在 font-size 后面，由“/”分隔，例如“16px/3”。
5.font-family 必须最后指定。

CSS链接

1.改变链接颜色

a:link {color: red;} 最初态。link 链接。
a:visited {color: green;} 链接被点击过一次，显示的颜色。 visited 已访问。
a:hover {color: hotpink;} 鼠标放在链接上时，显示。 hover 犹豫，还未点击。
a:active {color: blue;} 鼠标放在链接上点击的那一瞬间时，显示。 active 活跃的，即检测到了点击事件。
注意：1.a:hover 必须位于 a:link 和 a:visited 之后才能生效。
2.a:active 必须位于 a:hover 之后才能生效。

2.不同类型的指针

style=“cursor:xxxx”
auto 默认，浏览器设置的光标。
crosshair 十字线。
pointer 一只手。
move 两个垂直交叉的双向箭头。
text 此光标指示文本，像I。
wait 通常是一只表或沙漏。
help 通常是一个问号或一个气球。
e-resize 和 w-resize 水平的双向箭头（西-东）。
ne-resize 和 sw-resize 斜的双向箭头（西南-东北）。
nw-resize 和 se-resize 斜的双向箭头（西北-东南）。
n-resize 和 s-resize 水平的双向箭头（南-北）。
e s w n 分别代表东南西北（速记：饿死无能），resize前是啥矩形框的边缘就能往哪个方向移动。
cursor 光标，crosshair 十字线，pointer指示，resize 调整大小。

3.带边框的链接框

a:link, a:visited { //静态
background-color: white; //框内背景色
color: black; //字体颜色
padding: 10px 20px; //内边距
text-align: center; //水平对齐
text-decoration: none; //没有下划线
display: inline-block; //不占一行的块级
border: 2px solid green; //边框
}
a:hover, a:active { //动态
background-color: green; //背景颜色
color: white; //字体颜色
}
其实很像一个能进行页面跳转的按钮。
display:inline; 内联元素，简单来说就是在同一行显示。
display:block; 块级元素，简单来说就是就是有换行，会换到第二行。
display:inline-block; 就是在同一行内的块级元素。

CSS列表

1.列表项前的标记

list-style-type: xxxx;
none 无标记。
disc 默认，实心圆。翻译：光盘
circle 空心圆。翻译：圆圈
square 实心方块。翻译：正方形
decimal 数字。翻译：十进制
decimal-leading-zero 0开头的数字标记。(01, 02, 03…)
cjk-ideographic cjk中日韩，ideographic表意文字（一、二、三…）
lower-roman 小写罗马数字(i, ii, iii, iv, v…)
upper-roman 大写罗马数字(I, II, III, IV, V…)
lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e…)
upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E…)
lower-latin 小写拉丁字母(a, b, c, d, e…)
upper-latin 大写拉丁字母(A, B, C, D, E…)
lower-greek 小写希腊字母(alpha, beta, gamma…)

2.图像设置为列表项标记

list-style-image: url(‘/1.gif’);

3.定位列表项标记

list-style-position: xxxx;
outside / inside
区别就是标记占不占文字格。inside 就是将标记放入文字区，会导致第一行的字往后移，给标记腾出位置。

4.简约声明

list-style: square inside url(“sqpurple.gif”);
顺序：type position image

CSS表格

1.边框折叠

border-collapse:xxxx;
collapse 合并 /separate 分离
一张美元（纸币）我们可以把它折叠，这样别人看起来就只有半张。边框也能折叠和展开。

2.可悬停

就是鼠标停在某一行的时候，有高亮显示。
tr:hover {background-color:#f5f5f5;}

3.条状表格

tr:nth-child(even) {background-color: #f2f2f2;}
nth-child() 其中n代表变量相当于for循环里的i,th则是match匹配，上面代码的意思是tr(行)自动匹配携带的附件（行数）是否为偶数
odd 表示元素在兄弟元素列表中的位置是奇数：1、3、5……。
even 表示元素在兄弟元素列表中的位置是偶数：2、4、6……。