CSS
九、CSS实例
1、CSS 背景
CSS 背景属性用于定义HTML元素的背景。
Ⅰ、CSS 属性定义背景效果
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
举例：
body{
background-color:#b0c4de;
background-image:url('paper.gif');
/*平铺*/
background-image:url('gradient2.png');
background-repeat:repeat-x;
/*不平铺*/
background-image:url('img_tree.png');
background-repeat:no-repeat;
/*改变图像位置*/
background-position:right top;
}
Ⅱ、CSS背景属性设置
| 属性 | 描述 |
|---|---|
| background | 简写属性，作用是将背景属性设置在一个声明中。 |
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
| background-color | 设置元素的背景颜色。 |
| background-image | 把图像设置为背景。 |
| background-position | 设置背景图像的起始位置。 |
| background-repeat | 设置背景图像是否及如何重复。 |
2、CSS 文本
Ⅰ、文本颜色
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定：
- 十六进制值 - 如: ＃FF0000
- 一个RGB值 - 如: RGB(255,0,0)
- 颜色的名称 - 如: red
举例：
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
Ⅱ、文本的对齐方式
文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐.
当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
Ⅲ、文本修饰
text-decoration 属性用来设置或删除文本的装饰。
从设计的角度看 text-decoration属性主要是用来删除链接的下划线。
举例：
a {text-decoration:none;}
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
Ⅳ、文本转换
文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母，或每个单词的首字母大写。
举例：
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
Ⅴ、文本缩进
文本缩进属性是用来指定文本的第一行的缩进。
举例：
p {text-indent:50px;}
3、CSS 字体
CSS字体属性定义字体，加粗，大小，文字样式。
Ⅰ、serif和sans-serif字体之间的区别
在计算机屏幕上，sans-serif字体被认为是比serif字体容易阅读
Ⅱ、CSS字型
在CSS中，有两种类型的字体系列名称：
- 通用字体系列 - 拥有相似外观的字体系统组合（如 “Serif” 或 “Monospace”）
- 特定字体系列 - 一个特定的字体系列（如 “Times” 或 “Courier”）
| Generic family | 字体系列 | 说明 |
|---|---|---|
| Serif | Times New Roman、Georgia | Serif字体中字符在行的末端拥有额外的装饰 |
| Sans-serif | Arial、Verdana | "Sans"是指无 - 这些字体在末端没有额外的装饰 |
| Monospace | Courier New、Lucida Console | 所有的等宽字符具有相同的宽度 |
Ⅲ、字体系列
font-family 属性设置文本的字体系列。
font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。
注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family：“宋体”。
多个字体系列是用一个逗号分隔指明：
举例：
p{font-family:"Times New Roman", Times, serif;}
Ⅳ、字体样式
主要是用于指定斜体文字的字体样式属性。
这个属性有三个值：
- 正常 - 正常显示文本
- 斜体 - 以斜体字显示的文字
- 倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
举例：
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
Ⅴ、字体大小
font-size 属性设置文本的大小。
能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。
请务必使用正确的HTML标签，就< h1> - < h6>表示标题和< p>表示段落：
字体大小的值可以是绝对或相对的大小。
绝对大小：
- 设置一个指定大小的文本
- 不允许用户在所有浏览器中改变文本大小
- 确定了输出的物理尺寸时绝对大小很有用
相对大小：
- 相对于周围的元素来设置大小
- 允许用户在浏览器中改变文字大小
如果不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。
Ⅵ、设置字体大小像素
设置文字的大小与像素，让您完全控制文字大小：
举例：
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
Ⅶ、用em来设置字体大小
为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。
em的尺寸单位由W3C建议。
1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em
举例：
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
Ⅷ、使用百分比和EM组合
在所有浏览器的解决方案中，设置< body>元素的默认字体大小的是百分比
举例：
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
Ⅸ、所有CSS字体属性
| 属性 | 描述 |
|---|---|
| font | 在一个声明中设置所有的字体属性 |
| font-family | 指定文本的字体系列 |
| font-size | 指定文本的字体大小 |
| font-style | 指定文本的字体样式 |
| font-variant | 以小型大写字体或者正常字体显示文本。 |
| font-weight | 指定字体的粗细。 |
4、CSS链接
不同的链接可以有不同的样式。
Ⅰ、链接样式
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
特别的链接，可以有不同的样式，这取决于他们是什么状态。
这四个链接状态是：
- a:link - 正常，未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
当设置为若干链路状态的样式，也有一些顺序规则：
- a:hover 必须跟在 a:link 和 a:visited后面
- a:active 必须跟在 a:hover后面
Ⅱ、常见的链接样式
根据上述链接的颜色变化的例子，看它是在什么状态。
让我们通过一些其他常见的方式转到链接样式：
Ⅲ、文本修饰
text-decoration 属性主要用于删除链接中的下划线：
举例：
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
Ⅳ、背景颜色
背景颜色属性指定链接背景色：
举例：
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
5、CSS列表
CSS 列表属性作用如下：
- 设置不同的列表项标记为有序列表
- 设置不同的列表项标记为无序列表
- 设置列表项标记为图像
Ⅰ、列表
在 HTML中，有两种类型的列表：
- 无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
- 有序列表 ol - 列表项的标记有数字或字母
使用 CSS，可以列出进一步的样式，并可用图像作列表项标记。
无序列表如下所示:
○Coffee
○Tea
○Coca Cola
■Coffee
■Tea
■Coca Cola
有序列表如下所示:
1.Coffee
2.Tea
3.Coca Cola
1.Coffee
2.Tea
3.Coca Cola
Ⅱ、不同的列表项标记
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{
list-style-image: url('sqpurple.gif');
}
Ⅳ、浏览器兼容性解决方案
同样在所有的浏览器，下面的例子会显示的图像标记：
举例：
ul{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
说明：
ul:
- 设置列表类型为没有列表项标记
- 设置填充和边距 0px（浏览器兼容性）
ul 中所有 li:
- 设置图像的 URL，并设置它只显示一次（无重复）
- 需要定位的图像位置（左 0px 和上下 5px）
- 用 padding-left 属性把文本置于列表中
Ⅴ、列表 - 简写属性
在单个属性中可以指定所有的列表属性。这就是所谓的简写属性。
为列表使用简写属性，列表样式属性设置如下：
举例：
ul{
list-style: square url("sqpurple.gif");
}
可以按顺序设置如下属性：
- list-style-type
- list-style-position (有关说明，请参见下面的CSS属性表)
- list-style-image
如果上述值丢失一个，其余仍在指定的顺序，就没关系。
Ⅵ、移除默认设置
list-style-type:none 属性可以用于移除小标记。默认情况下列表 < ul> 或 < ol> 还设置了内边距和外边距，可使用 margin:0 和 padding:0 来移除:
举例：
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
Ⅶ、所有的CSS列表属性
| 属性 | 描述 |
|---|---|
| list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中 |
| list-style-image | 将图像设置为列表项标志。 |
| list-style-position | 设置列表中列表项标志的位置。 |
| list-style-type | 设置列表项标志的类型。 |
6、CSS表格
使用 CSS 可以使 HTML 表格更美观。
Ⅰ、表格边框
指定CSS表格边框，使用border属性。
下面的例子指定了一个表格的Th和TD元素的黑色边框：
举例：
table, th, td{
border: 1px solid black;
}
请注意，在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。
为了显示一个表的单个边框，使用 border-collapse属性。
Ⅱ、折叠边框
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开
举例：
table{
border-collapse:collapse;
}
table,th, td{
border: 1px solid black;
}
Ⅲ、表格宽度和高度
Width和height属性定义表格的宽度和高度。
下面的例子是设置100％的宽度，50像素的th元素的高度的表格：
举例：
table {
width:100%;
}
th{
height:50px;
}
Ⅳ、表格文字对齐
表格中的文本对齐和垂直对齐属性。
text-align属性设置水平对齐方式，向左，右，或中心：
举例：
td{
text-align:right;
}
垂直对齐属性设置垂直对齐，比如顶部，底部或中间：
举例：
td{
height:50px;
vertical-align:bottom;
}
Ⅴ、表格填充
如需控制边框和表格内容之间的间距，应使用td和th元素的填充属性：
举例：
td{
padding:15px;
}
Ⅵ、表格颜色
下面的例子指定边框的颜色，和th元素的文本和背景颜色：
举例：
table, td, th{
border:1px solid green;
}
th{
background-color:green;
color:white;
}
7、CSS盒子模型
Ⅰ、CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
盒子模型(Box Model)不同部分的说明：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
为了正确设置元素在所有浏览器中的宽度和高度，就需要知道的盒模型是如何工作的。
Ⅱ、元素的宽度和高度
重要: 当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。
下面的例子中的元素的总宽度为300px：
举例：
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
计算一下：
300px (宽)
+ 50px (左 + 右填充)
+ 50px (左 + 右边框)
+ 50px (左 + 右边距)
= 450px
试想一下，只有 250 像素的空间。设置总宽度为 250 像素的元素
举例：
div {
width: 220px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
Ⅲ、核心点
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
8、CSS边框
CSS边框属性允许指定一个元素边框的样式和颜色。
Ⅰ、边框样式
边框样式属性指定要显示什么样的边界。
border-style属性用来定义边框的样式
border-style 值:
- none: 默认无边框
- dotted: 定义一个点线边框
- dashed: 定义一个虚线边框
- solid: 定义实线边框
- double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
- groove: 定义3D沟槽边框。效果取决于边框的颜色值
- ridge: 定义3D脊边框。效果取决于边框的颜色值
- inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
- outset: 定义一个3D突出边框。 效果取决于边框的颜色值
Ⅱ、边框宽度
您可以通过 border-width 属性为边框指定宽度。
为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。
注意： CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。
举例：
p.one{
border-style:solid;
border-width:5px;
}
p.two{
border-style:solid;
border-width:medium;
}
Ⅲ、边框颜色
border-color属性用于设置边框的颜色。可以设置的颜色：
- name - 指定颜色的名称，如 “red”
- RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
- Hex - 指定16进制值, 如 “#ff0000”
还可以设置边框的颜色为"transparent"。
注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。
举例：
p.one{
border-style:solid;
border-color:red;
}
p.two{
border-style:solid;
border-color:#98bf21;
}
Ⅳ、边框-单独设置各边
在CSS中，可以指定不同的侧面不同的边框：
举例:
p{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
上面的例子也可以设置一个单一属性：
举例:
border-style:dotted solid;
border-style属性可以有1-4个值：
border-style:dotted solid double dashed;
- 上边框是 dotted
- 右边框是 solid
- 底边框是 double
- 左边框是 dashed
border-style:dotted solid double;
- 上边框是 dotted
- 左、右边框是 solid
- 底边框是 double
border-style:dotted solid;
- 上、底边框是 dotted
- 右、左边框是 solid
border-style:dotted;
- 四面边框是 dotted
上面的例子用了border-style。然而，它也可以和border-width 、 border-color一起使用。
Ⅴ、边框-简写属性
上面的例子用了很多属性来设置边框。
可以在一个属性中设置边框。
也可以在"border"属性中设置：
- border-width
- border-style (required)
- border-color
举例：
border:5px solid red;
Ⅵ、CSS 边框属性
| 属性 | 描述 |
|---|---|
| border | 简写属性，用于把针对四个边的属性设置在一个声明。 |
| border-style | 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。 |
| border-width | 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。 |
| border-color | 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。 |
| 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 | 设置元素的上边框的宽度。 |
9、CSS轮廓属性
Ⅰ、CSS 轮廓（outline）
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。
Ⅱ、所有CSS 轮廓（outline）属性
“CSS” 列中的数字表示哪个CSS版本定义了该属性(CSS1 或者CSS2)。
| 属性 | 说明 | 值 | CSS |
|---|---|---|---|
| outline | 在一个声明中设置所有的轮廓属性 | outline-color、outline-style、outline-width、inherit | 2 |
| outline-color | 设置轮廓的颜色 | color-name、hex-number、rgb-number、invert、inherit | 2 |
| outline-style | 设置轮廓的样式 | none、dotted、dashed、solid、double、groove、ridge、inset、outset、inherit | 2 |
| outline-width | 设置轮廓的宽度 | thin、medium、thick、length、inherit | 2 |
10、CSS外边距
CSS margin(外边距)属性定义元素周围的空间。
Ⅰ、margin
margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
Ⅱ、可能的值
| 值 | 说明 |
|---|---|
| auto | 设置浏览器边距。这样做的结果会依赖于浏览器 |
| length | 定义一个固定的margin（使用像素，pt，em等） |
| % | 定义一个使用百分比的边距 |
| Margin可以使用负值，重叠的内容。 |
Ⅲ、Margin - 单边外边距属性
在CSS中，它可以指定不同的侧面不同的边距：
举例：
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
Ⅳ、Margin - 简写属性
为了缩短代码，有可能使用一个属性中margin指定的所有边距属性。这就是所谓的简写属性。
所有边距属性的简写属性是 margin :
举例：
margin:100px 50px;
margin属性可以有一到四个值：
margin:25px 50px 75px 100px;
- 上边距为25px
- 右边距为50px
- 下边距为75px
- 左边距为100px
margin:25px 50px 75px;
- 上边距为25px
- 左右边距为50px
- 下边距为75px
margin:25px 50px;
- 上下边距为25px
- 左右边距为50px
margin:25px;
- 所有的4个边距都是25px
Ⅴ、所有的CSS边距属性
| 属性 | 描述 |
|---|---|
| margin | 简写属性。在一个声明中设置所有外边距属性。 |
| margin-bottom | 设置元素的下外边距。 |
| margin-left | 设置元素的左外边距。 |
| margin-right | 设置元素的右外边距。 |
| margin-top | 设置元素的上外边距。 |
11、CSS内边距
CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。
Ⅰ、padding（填充）
当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。
单独使用 padding 属性可以改变上下左右的填充。
Ⅱ、可能的值
| 值 | 说明 |
|---|---|
| length | 定义一个固定的填充(像素, pt, em,等) |
| % | 使用百分比值定义一个填充 |
Ⅲ、填充- 单边内边距属性
在CSS中，它可以指定不同的侧面不同的填充：
举例：
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
- 上内边距是 25px
- 右内边距是 50px
- 下内边距是 25px
- 左内边距是 50px
Ⅳ、填充 - 简写属性
为了缩短代码，它可以在一个属性中指定的所有填充属性。
这就是所谓的简写属性。所有的填充属性的简写属性是 padding
举例：
padding:25px 50px;
Padding属性，可以有一到四个值：
padding:25px 50px 75px 100px;
- 上填充为25px
- 右填充为50px
- 下填充为75px
- 左填充为100px
padding:25px 50px 75px;
- 上填充为25px
- 左右填充为50px
- 下填充为75px
padding:25px 50px;
- 上下填充为25px
- 左右填充为50px
padding:25px;
- 所有的填充都是25px
Ⅴ、所有的CSS填充属性
| 属性 | 说明 |
|---|---|
| padding | 使用简写属性设置在一个声明中的所有填充属性 |
| padding-bottom | 设置元素的底部填充 |
| padding-left | 设置元素的左部填充 |
| padding-right | 设置元素的右部填充 |
| padding-top | 设置元素的顶部填充 |
总结：
今天更新的是一些关于CSS实例的部分，这部分内容太多，准备用三篇博客来呈现，有许多的小伙伴可能已经等不及了，甚至可能在想：博主怎么还不更新Java WEB的核心知识点呢？这里先说明一下哈！首先Java WEB的核心是Servlet，主要用的前端的页面是JSP，所以还是会用到前端的知识的，所以先把前端的知识先疏通一下，到时候就会比较容易很多了。
今天的博客一共有11个小节，重点在内边距和外边距上，还有就是盒子模型和div的使用，其他的小结作为了解即可！也不用去深钻牛角尖，如果有兴趣多学一些也可以尝试着在Hbuilder和VSCode当中敲一敲、看一看，前端是容易看到效果的，相对来说比后端入门简单！稍微容易一些！但是想学深入的话也还是有难度的！
不知不觉又到凌晨1:30了，为了实现自己自律的习惯！就算再晚也得把博客更新完！虽然累，还是要坚持下去！相信持之以恒必将会有新的收获！坚持信念梦不会遥远！
今天的博客先更新到这里咯！有什么不对的地方或者有什么建议！欢迎小伙伴们在评论区留言哦！
如果本篇博客对大家有帮助，希望大家能够点赞、关注！在此先谢过各位小伙伴了！
最后，愿我们都能在各行各业中能够取得不同的成就，不负亲人、朋友、老师、长辈和国家的期望！能够用自身的所学知识为国家贡献出自己的一份力量！一起加油！
2021年6月19日夜
1163
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
