【Web前端】一文带你吃透CSS(上篇)
前端学习路线的核心内容如下：
前端学习路线以HTML为基础：
学习HTML的基本语法及标签使用
掌握CSS的核心知识：
- 选择器与CSS规则
- 外部样式表与内部样式表
- 内联样式与多重样式
学习JavaScript的基础语法及数据结构
CSS部分重点掌握：
选择器及其应用（id选择器、class选择器）
样式表的创建方法（外部/内部/内联）
样式层叠机制与多重样式的应用
JavaScript部分重点掌握：
基础语法及变量声明
数据结构（数组/对象/集合）
函数定义与调用
正则表达式与DOM操作
前端学习路线小总结 ：
- 基础入门：
- HTML、CSS及JavaScript技术
- 三大主流前端开发框架：
- VUE、REACT及Angular技术
- 小程序开发与Node.js应用结合
- 深入学习：
- 小程序开发与Node.js应用结合
- jQuery与TypeScript技术应用
- 前端工程化设计与实现
一起学习CSS吧!
-
一.CSS简介
-
- 1.什么是CSS？
-
二.CSS语法
-
- 1.语法规则
- 2.注释
-
三.CSS选择器
-
- 1.CSS的id选择器
- 2.CSS的class选择器
-
四、CSS的创建
- （1）外层CSS文件
- （2）内层CSS文件
- （3）嵌入式CSS代码
- （4）多层样式表
- （5）各层次样式表之间的优先级关系
- （1）外层CSS文件
第五个CSS背景设置模块包含以下子项
-
六.CSS文本
-
- 1.文本颜色
- 2.文本的对齐方式
- 3.文本修饰
- 4.文本转换
- 5.文本缩进
-
七.CSS文字
-
- 1.CSS字体类型
- 2.字体系列
- 3.字体样式
- 4.字体大小
-
- 4.1设置字体的大小像素
- 4.2用em来设置字体大小
- 4.3使用百分比和EM组合
-
八.CSS链接
-
- 1.链接样式
- 2.文本修饰
- 3.背景颜色
-
九.CSS列表
-
- 1.无序列表和有序列表
- 2.标记为图像的列表
- 3.列表属性值简写
第10章CSS样式表：表单设计
一.CSS简介
1.什么是CSS？
CSS 指层叠样式表 (Cascading Style Sheets)。
- 样式如何展示HTML元素
- 一般情况下,样式的应用有助于实现对HTML元素的显示效果
- 外部样式的应用不仅能够显著提升效率,并且常见地保存于CSS文件中
- 多个样式的层叠应用有助于集中管理相关属性设置
p
{
color:red;
text-align:center;
}二.CSS语法
1.语法规则
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
- 在HTML中, 选择器通常被用于更改样式.
- 每个说明项通常包含一个属性和一个对应的值.
2.注释
CSS注释以 /* 开始, 以 */ 结束,注释是为了提高代码的可读性！
/*注释*/
p
{
text-align:center;
/*注释*/
color:red;
}三.CSS选择器
如果要在HTML元素中使用CSS样式，则需要在元素中使用选择器！
1.CSS的id选择器
基于带有特定ID的HTML元素设计样式时使用ID选型器，在CSS中则通过前缀‘#’来定义该选型器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小橙子前端教程!</title>
<style>
#p1 {
color: red;
}
</style>
</head>
<body>
<p id="p1">通过id选择器把这一段文字设置为红色！</p>
<p>这一段文字不受上面的影响！</p>
</body>
</html>
2.CSS的class选择器
该选区主要用于描述一组元素的表现形式，在网络架构设计中与ID选区存在显著差异性特点，在网页开发过程中该选区具有高度可扩展性优势，在HTML编码体系下通常采用 class 属性来实现具体应用效果，在CSS描述语言系统中，默认情况下会以点号 "." 符号标识该选区类型特性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小橙子前端教程！</title>
<style>
.center {
text-align: center;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中</p>
</body>
</html>
同时也可以指定特定的HTML元素使用class。
p.center {text-align:center;}四.CSS创建
浏览器会根据样式表格式化HTML文档！有三种方法可以插入样式表：
1.外部样式表
当样式需在多个界面应用时，多用于外部样式的应用更为高效。多用于外部样式的优点是可以通过修改单个文件来实现对整个HTML文档样式的全面调整。每个页面都通过 <link> 标签引用相应的样式的定义。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<!--rel 属性是必须的，规定当前文档与被链接文档/资源之间的关系。-->
</head>2.内部样式表
对于个别文檔需要特別的格式時, 倫议採用內建式样式的定義。應在文 документ首部聲明
<style>
hr {
color: sienna;
}
p {
color: red;
}
body {
background-color: aqua;
}
</style>3.内联样式
如果样式仅需应用于单个元素，则可采用内联样式；然而由于这种样式将展示效果与内容混合在一起的特点，在实际应用中并不推荐直接采用。
<p style="color:red">内联样式不建议使用!</p>4.多重样式
如果某些属性字段在多个不同的样式表文件路径中使用了相同的选定器进行定义，则这些属性值将会继承自更为具体的那些样式表文件路径。
内部样式表和外部样式表中包含重复的某些内容，并且内部样式表将被用于取代外部样式表中的相应部分！
外部样式表：
h3
{
color:red;
font-size:12px;
}内部样式表：
h3
{
font-size:20pt;
}最终效果：
h3
{
color:red;
font-size:20px;
}颜色属性继承自外部样式表，字体大小属性将取代外部样式表中的部分。
5.多重样式的优先级
样式表支持多种方式来指定样式信息。这些样式可以在单个HTML元素、页面头部或者外部CSS文件中进行定义。此外，在同一个HTML文档内部还可以引用多个外部样式表来增强其视觉效果和排版功能。
优先级则依次为：Inline-style显示 > Internal-style文件 > External-style文件 > 系统预设样式。
五.CSS 背景
CSS 背景属性用于定义HTML元素的背景。CSS背景有以下的效果：
1.背景颜色
background-color 属性定义了元素的背景颜色，在body选择器中使用！
body {background-color:grey;}CSS中的颜色通常有以下三种定义方式：
- 十六进制 - 如：“#ff0000”
- RGB - 如：“rgb(255,0,0)”
- 颜色名称 - 如：“red”
2.背景图像
background-image 属性的作用是用来定义一个元素的背景图像。该属性在未设置具体值时，默认会执行一种平铺模式来重复展示图像内容，并确保其覆盖整个元素的实际显示区域。
background-image: url('images/1.jpg');<!--HTML文档和图片文件不在同一个文件夹下面，使用相对路径-->3.背景图像 - 水平或垂直平铺
该background-image属性会将图片设置为页面的水平或垂直方向上的无缝拼接布局。
然而，在某些情况下，默认横向与纵向无缝拼接的效果可能无法满足设计需求。
此时可选择仅在某一特定方向实现无缝拼接。
4.背景图像- 设置定位与不平铺
通过合理设置background-repeat属性使背景图像不会重复铺砌从而避免背景图片干扰文本排版以达到预期效果
同时, 借助background-position属性配置图片的位置布局, 并以最佳显示效果呈现相关文本内容。
body
{
background-image:url('images/pai.jpg');
background-repeat:no-repeat;
background-position:right top;/*设置背景图像的起始位置。*/
}
5.背景- 简写属性
在简化页面背景属性代码时，便于合并处理这些属性。其简写的表示方法是 background。
body {background:grey url('images/pai.jpg') no-repeat right top;}六.CSS文本
1.文本颜色
颜色属性用来设置文字的颜色。
body {color:red;}2.文本的对齐方式
文本排列属性是用来设置文本的水平对齐方式。
文本的水平排列方式有居中，对齐到左，对齐到右，两端对其。
h1 {text-align:center;}
p {text-align:justify;/*两端对齐*/}3.文本修饰
text-decoration 属性用来设置或删除文本的装饰。
a {text-decoration:none;/*用来删除链接的下划线*/}同时，还可以使用text-decoration 属性来增强文章的阅读效果。
<style>
h1 {text-decoration: overline;}
h2 {text-decoration: line-through;}
h3 {text-decoration: underline;}
</style>
4.文本转换
文本转换属性的作用是确定文本中的大小写字母设置。该属性支持将整个文本统一转换为全大写或全小写形式，并可选地将每个单词的首字母大化处理。
<style>
p.uppercase {text-transform:uppercase;}/*大写*/
p.lowercase {text-transform:lowercase;}/*小写*/
p.capitalize {text-transform:capitalize;}/*首字母大写*/
</style>
5.文本缩进
文本缩进属性是用来指定文本的第一行的缩进。
p {text-indent:14px;}七.CSS文字
CSS字体属性定义字体，加粗，大小，文字样式。
1.CSS字体类型
在CSS语言中，默认划分了两类不同的字体家族标识：
- 通用字体家族：这些家族代表一系列外观相似的字体类型集合（例如 serif 和 monospace 类型）
- 专属性别家族：这些家族特指某个具体的字母形式集合（例如 Times 和 Courier 就是两个典型的例子）
| 通用字体系列 | 说明 | 展示 |
|---|---|---|
| Serif | Serif字体中字符在行的末端拥有额外的装饰 |
|
||||
|Sans-serif|字体中字符在行的末端没有额外的装饰|
|
||||
|Monospace|所有的等宽字符具有相同的宽度|
|
||||
2.字体系列
font-family 属性设置文本的字体系列。
系统应指定多个字体名称作为备用方案。
当系统无法识别第一个字体时，则会依次尝试其他选项。
若该系列名称超过一个汉字，则需使用双引号。
3.字体样式
我们可以通过字体样式设置正常或者斜体！
p.normal {font-style:normal;}
p.italic {font-style:italic;}
4.字体大小
font-size 属性设置文本的大小， 字体大小的值可以是绝对或相对的大小。
绝对大小：
- 在设计界面中为文本设定一个精确的像素或点数尺寸
- 禁止任何用户的缩放操作在所有设备上执行
- 当需要精确控制输出尺寸时使用绝对大小更为高效
相对大小：
基于其父级元素的尺寸进行调整
提供调整字体尺寸的功能
4.1设置字体的大小像素
为了控制字体的大小，可以设置字体的大小像素。
p {font-size:14px;}可以通过缩放浏览器来调整字体的大小，但是实际调整的是页面的大小。
4.2用em来设置字体大小
在大多数浏览器环境中，默认文字大小设置为16px。由此可见，在这种情况下，默认字体尺寸与1em一致。由此可见，在这种情况下，默认字体尺寸与1em一致。具体而言，在这种情况下，默认字体尺寸与1em一致。具体而言，在这种情况下，默认字体尺寸与1em一致。要将像素值转换为em值，则可使用以下公式： em = \frac{px}{16}
p {font-size:0.875em;} /* 14px/16=0.875em */4.3使用百分比和EM组合
在所有浏览器的解决方案中，设置 元素的默认字体大小的是百分比。
body {font-size:100%;}
p {font-size:0.875em;}各个浏览器均能呈现一致的文字尺寸，并支持各设备端用户自定义文字尺寸。
八.CSS链接
1.链接样式
不同的链接可以有不同的样式，链接的不同状态也可以有不同的样式。
链接的状态分为以下四种情况：
- a:link：处于初始状态下的链接（未被访问过）
- a:visited：已经成功被用户点击并访出的链接（已访出过）
- a:hover：当处于鼠悬状态时（当用户鼠标悬停在此处）
- a:active：在此次操作中发生激活
a:link {color:black;} /* 未访问链接*/
a:visited {color:greenyellow;} /* 已访问链接 */
a:hover {color:red;} /* 鼠标移动到链接上 */
a:active {color:blue;} /* 鼠标点击时 */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.背景颜色
背景颜色属性指定链接背景色：
a:link {background-color:#B2FF99;} /* 未访问链接 */
a:visited {background-color:#FFFF85;} /* 已访问链接 */
a:hover {background-color:#FF704D;} /* 鼠标移动到链接上 */
a:active {background-color:#FF704D;} /* 鼠标点击时 */九.CSS列表
CSS中可以使用不同的列表项标记来实现列表。
1.无序列表和有序列表
list-style-type属性指定列表项标记的类型。
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: decimal;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
2.标记为图像的列表
<style>
ul {
list-style-image: url('images/1.png');
}
</style>
3.列表属性值简写
对于每个属性字段中，允许设置所有类型的数据结构，并需遵循特定的顺序。
- 配置列表样式
- 按照特定顺序配置
- 包括三个主要属性：
- list-style-type
- list-style-position
- list-style-image
ul
{
list-style:square url("images/3.png");
}
list-style-type: none;设置列表类型为没有列表项标记！
十.CSS表格
1.表格边框
使用border属性指定CSS表格的边框。
2.折叠边框
border-collapse 属性控制表格边框是否会合并为一个单独边界或形成独立边界。
3.表格宽度和高度
Width和height属性定义表格的宽度和高度。
4.表格文字对齐
水平对齐：
<style>
table, td, th
{
border:1px solid blue;
padding:10px;
width:25%;
text-align:left;
}
th
{
background-color:grey;
color:white;
height:30px;
}
</style>
垂直对齐：
td
{
height:50px;
vertical-align:bottom;
}
表格中的文字排版模式分为水平和垂直两种类型：
text-align属性用于指定水平方向的排列方式，在左边显示文本时会突出显示。vertical-align属性则决定了垂直方向上的排列位置，在顶端显示会突出显示。
5.表格填充
td和th元素的填充属性可以控制边框和表格内容之间的间距。
td
{
padding:15px;
}
6.表格颜色
我们可以指定表格边框的颜色，文本的颜色和背景颜色。
<style>
table, td, th
{
border:1px solid blue;
}
th
{
background-color:grey;
color:white;
}
</style>