2.CSS
2.1.概念与基础
2.1.1.什么是CSS
Cascading Style Sheets 全称层叠样式单 简称样式表。
是告诉浏览器如何来显示HTML的元素的特殊标记
2.1.2.编写方式
2.1.2.1.外部文件
在html文件的<head>中加入<link>结点来引入外部的文件
<link rel="stylesheet" type="text/css" href="../c.css"/>
2.1.2.2.定义属性
在html元素中加入 style 属性来引入样式,
style="样式属性 : 值 ; 样式属性 : 值 ;"
<input type="text" style="color: red; background: yellow;" />
2.1.2.3.样式定义
在<head>下加入<style>结点,
<style type="text/css">
.ss{
color: red;
background: yellow;
}
</style>
2.1.3.选择器
# 对应 id
. 对应 class
标签名tagName 对应 匹配的标签
也可以通过[attr =value]来通过属性进行筛选
三种选择器的优先原则：
# ID>.类名>标签名称
2.2.常用样式
2.2.1.文本处理
text-decoration : 横线修饰 如 : text-decoration: none;
| none | 默认值。无装饰 |
|---|---|
| blink | 闪烁 |
| underline | 下划线 |
| line-through | 贯穿线 |
| overline | 上划线 |
letter-spacing : 字间距
vertical-align : 垂直对齐
text-align : 水平对齐 如 : text-align: center;
text-transform : 大小写
| none | 默认值。无转换发生 |
|---|---|
| capitalize | 将每个单词的第一个字母转换成大写，其余无转换发生 |
| uppercase | 转换成大写 |
| lowercase | 转换成小写 |
text-indent : 缩进量
line-height : 行间距
2.2.2.使用字体
font : 字体
font-family : 字体
font-style : 风格
| normal | 默认值。正常的字体 |
|---|---|
| italic | 斜体。对于没有斜体变量的特殊字体，将应用 oblique |
| oblique | 倾斜的字体 |
font-variant : 大小写
| normal | 默认值。正常的字体 |
|---|---|
| small-caps | 小型的大写字母字体 |
font-weight : 粗细
| normal | 默认值。正常的字体。相当于 400 。声明此值将取消之前任何设置 |
|---|---|
| bold | 粗体。相当于 700 。也相当于 b 对象的作用 |
| bolder | 比 normal >粗 |
| lighter | 比 normal >细 |
font-size : 尺寸
| xx-small | 绝对字体尺寸。根据对象字体进行调整。最小 |
|---|---|
| x-small | 绝对字体尺寸。根据对象字体进行调整。较小 |
| small | 绝对字体尺寸。根据对象字体进行调整。小 |
| medium | 默认值。绝对字体尺寸。根据对象字体进行调整。正常 |
| large | 绝对字体尺寸。根据对象字体进行调整。大 |
| x-large | 绝对字体尺寸。根据对象字体进行调整。较大 |
| xx-large | 绝对字体尺寸。根据对象字体进行调整。最大 |
| larger | 相对字体尺寸。相对于父对像中字体尺寸进行相对增大。使用成比例的 em 单位计算 |
| smaller | 相对字体尺寸。相对于父对像中字体尺寸进行相对减小。使用成比例的 em 单位计算 |
| length | 百分数 | 由浮点数字和单位标识符组成的长度值，不可为负值。其百分比取值是基于父对象中字体的尺寸。 |
2.2.3.颜色和背景
background :
background-image:url(../img/bs.png); : 背景图片
background-color : 背景颜色 如 : background-color: black; background-color: aliceblue;
background-repeat : 背景平铺
| repeat | 默认值。背景图像在纵向和横向上平铺 |
|---|---|
| no-repeat | 背景图像不平铺 |
| repeat-x | 背景图像仅在横向上平铺 |
| repeat-y | 背景图像仅在纵向上平铺 |
background-attachment : 是否滚动
| scroll | 默认值。背景图像是随对象内容滚动 |
|---|---|
| fixed | 背景图像固定 |
background-position : 偏置位置
| length | 百分数 | 由浮点数字和单位标识符组成的长度值。 |
|---|---|
| position | top | center | bottom | left | center | right |
color : 颜色
2.2.4.盒子
在 CSS 中，盒子（Box）是用于表示所有 HTML 元素的矩形区域。每个盒子包含了元素的内容、内边距（Padding）、边框（Border）和外边距（Margin）。
盒子模型描述了一个HTML元素的矩形框的大小和位置，其中包括：
- 内容区域（content area）：元素的实际内容所占据的空间。
- 内边距（padding）：内容区域和边框之间的空间。
- 边框（border）：内边距和外边距之间的空间。
- 外边距（margin）：边框和周围元素之间的空间。
CSS 的盒模型是一种计算元素宽高大小和定位属性的方式，设计网页时经常用到。了解盒模型对于 CSS 布局至关重要。
margin : 边距属性 外边距
margin-top : 顶端边距 如 : margin-top: -240px ;
margin-right
margin-bottom
margin-left : 如 : margin-left: -200px; margin-left: 10px;
padding : 填充距属性 内边距
padding-top
padding-right
padding-bottom
padding-left
border : 边框属性 如: border: 1px solid #AAAAAA;
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border-color
border-top
border-right
border-bottom
border-left
外边距的特性：
a)垂直方向的外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
并且合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
b) 当一个标签包含在另一个标签中时（在没有内边距或边框把外边距分隔开），它们的上下外边距也会发生合并。
取消父与子的垂直方向外边距合并效果：
只需要在父级的垂直方向上加上内边距或边框就可以。（加一堵墙）。
如果提供全部四个参数值，
将按上－右－下－左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上－下，第二个用于左－右。 如: margin: 5px 10px;
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
2.2.5.其它
display : 显示
| block | 块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行。 |
|---|---|
| inline | 内联对象的默认值。将对象强制作为内联对象呈递，从对象中删除行。 |
| inline-block | 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。 |
| none | 隐藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间。 |
visibility : 显示,隐藏时保留位置
| inherit | : | 默认值。继承父对象的可见性 |
|---|---|---|
| visible | : | 对象可视 |
| collapse | : | 未支持。主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于 hidden |
| hidden | : | 对象隐藏 |
overflow : 内容溢出
| visible | : | 默认值。不剪切内容也不添加滚动条。假如显式声明此默认值，对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效 |
|---|---|---|
| auto | : | 在必需时对象内容才会被裁切或显示滚动条 |
| hidden | : | 不显示超过对象尺寸的内容 |
| scroll | : | 总是显示滚动条 |
float : 漂移
width : 宽 如: width: 400px; width: 100%;
height : 高 如: height: 100%;
min-height : 最小高度 如: min-height: 150px;
left : 左边距 如 : left: 0px; left: 50%;
right : 右边距如 : right: 5px;
top : 上边距 如 : top: 0px; top: 50%;
bottom : 下边距
border-collapse : 表格线边框合并 如: border-collapse: collapse;
empty-cells : 是否显示空的td
z-index : 层叠序号 如: z-index: 3000;
opacity : 透明度, 0~1 之间 如: opacity: 0.5;
border-radius : 圆角, 如: border-radius: 8px;
box-shadow: 阴影效果 如: box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
position : 定位：absolute代表决对定位 如: position: fixed; position: absolute;
| static | : | 默认值。无特殊定位，对象遵循HTML定位规则 |
|---|---|---|
| absolute | : | 将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义 |
| *fixed* | : | 对象定位遵从绝对(absolute)方式。但是是相对于窗口定位 |
| relative | : | 对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置 |
cursor : 鼠标样式 如: cursor: pointer;
| auto | : | 默认值。浏览器根据当前情况自动确定鼠标光标类型。 | |
|---|---|---|---|
| all-scroll | : | IE6.0 | 有上下左右四个箭头，中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。 |
| col-resize | : | IE6.0 | 有左右两个箭头，中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。 |
| crosshair | : | 简单的十字线光标。 | |
| default | : | 客户端平台的默认光标。通常是一个箭头。 | |
| *hand* | : | 竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。 | |
| move | : | 十字箭头光标。用于标示对象可被移动。 | |
| help | : | 带有问号标记的箭头。用于标示有帮助信息存在。 | |
| no-drop | : | IE6.0 | 带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。 |
| not-allowed | : | IE6.0 | 禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。 |
| pointer | : | IE6.0 | 和 hand 一样。竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。 |
| progress | : | IE6.0 | 带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。 |
| row-resize | : | IE6.0 | 有上下两个箭头，中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。 |
| text | : | 用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。 | |
| vertical-text | : | IE6.0 | 用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转90度的形状。 |
| wait | : | 用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。 | |
| *-resize | : | 用于标示对象可被改变尺寸方向的箭头光标。w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize | |
| url ( url ) | : | IE6.0 | 用户自定义光标。使用绝对或相对 url 地址指定光标文件(后缀为 .cur 或者 .ani )。 |
2.2.6.连接状态
一些专业术语用来描述交互元素（尤其是超链接或链接）的不同状态。每个术语代表了用户与其交互时，链接呈现的独特视觉外观或行为：
-
Hover（悬停）：此状态指当用户将鼠标光标置于超链接上但未点击时发生的视觉变化。设计师通常使用悬停效果为用户提供视觉反馈，表明该元素可交互且可以点击。悬停样式可能包括颜色、背景、下划线或其他视觉增强的变化。在 CSS（层叠样式表）中，你可以使用
:hover伪类定义悬停样式，如下所示：a:hover { color: #ff0000; /* 鼠标悬停时将链接颜色改为红色 */ text-decoration: underline; /* 鼠标悬停时添加下划线 */ } -
Active（活动）：活动状态表示用户已单击超链接但尚未释放鼠标按钮的时刻。它通常涉及比悬停状态更为显著的视觉变化，进一步向用户确认其操作正在处理中。活动样式可能包括对颜色、背景、阴影或其他视觉属性的调整。在 CSS 中，你可以使用
:active伪类针对活动状态进行样式设置：a:active { color: #00ff00; /* 鼠标按下时将链接颜色改为绿色 */ transform: scale(0.95); /* 鼠标按下时缩小链接尺寸 */ } -
Link（链接）：这是超链接在其初始、未被访问状态下的基本样式。它定义了链接在页面加载后首次呈现给用户时的外观，如颜色、字体、下划线等。在 CSS 中，直接针对
<a>标签设置样式即可指定链接状态的样式：a { color: #0000ff; /* 设置链接颜色为蓝色 */ text-decoration: none; /* 去除默认下划线 */ } -
Visited（已访问）：已访问状态表示用户曾经点击过并已访问过的超链接。为了帮助用户区分已访问过和未访问过的链接，设计师通常会为已访问链接赋予不同的视觉样式。在 CSS 中，使用
:visited伪类来定义已访问链接的样式，同时需要注意浏览器出于隐私保护会对可应用的样式有所限制：a:visited { color: #800080; /* 已访问链接颜色设为紫色 */ }
总结来说，“Hover”、“Active”、“Link” 和 “Visited” 分别对应超链接的悬停、活动（按下）、初始和已访问四种状态，通过为这些状态设置相应的 CSS 样式，可以提升用户体验，清晰地传达链接的交互状态和访问历史。
1735
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
