Web基础 ( 二 ) CSS
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;
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 )。 |