CSS基础知识01
一、定义
CSS(Cascading Style Sheets,层叠样式表)是一种样式表语言,用于描述HTML文档的呈现和美化内容。
二、css的引入方式
2.1.内联样式(行内样式)
直接在HTML元素的
style
属性中添加CSS样式。这种方式只适用于单个元素,且不利于样式的复用和维护。例如:
<div style="width:100px; height:100px; background-color:blue;"></div>
2.2.内部样式
在HTML文档的
<head>
部分使用<style>
标签定义CSS样式。这种方式适用于单个HTML文档,样式只在该文档中生效。例如:
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: 50px;
color: red;
}
</style>
</head>
<body>
<p>页面内容</p>
</body>
</html>
2.3.外部样式
将CSS样式定义在一个独立的
.css
文件中,然后在HTML文档的<head>
部分使用<link>
标签引入该CSS文件。这是最常见且推荐的方式,因为它实现了样式与内容的分离,提高了样式的复用性和可维护性。例如:
<!--html文件-->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>外部样式表</p>
</body>
</html>
CSS文件(styles.css):
//css文件
p {
font-size: 50px;
color: red;
}
2.4.导入样式
使用CSS的
@import
规则引入外部的CSS文件。但这种方式不如<link>
标签常用,因为@import
会导致CSS文件在HTML文件加载完成后才被加载,且在某些旧版浏览器中可能不被支持。例如:
<style>
@import url("styles.css");
</style>
三、选择器
3.1.标签选择器
定义:选择具有特定HTML标签的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签选择器示例</title>
<style>
/* 使用标签选择器选中所有的<p>元素,并设置它们的文本颜色为蓝色 */
p {
color: blue;
}
</style>
</head>
<body>
<p>这是一个段落,文本颜色为蓝色。</p>
<p>这是另一个段落,同样文本颜色为蓝色。</p>
</body>
</html>
3.2.类选择器
定义:选择具有指定类的元素,并将样式应用于这些元素。类选择器以
.
开头,后面跟类名。
可以为多个元素指定相同的类名,并为这些元素应用相同的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类选择器示例</title>
<style>
/* 使用类选择器选中所有class为"highlight"的元素,并设置它们的背景颜色为黄色 */
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<p class="highlight">这是一个带有highlight类的段落,背景颜色为黄色。</p>
<div class="highlight">这是一个带有highlight类的div元素,同样背景颜色为黄色。</div>
</body>
</html>
3.3.ID选择器
定义:选择具有指定ID的元素,并将样式应用于该元素。ID选择器以
#
开头,后面跟ID名。由于ID在HTML文档中具有唯一性,因此ID选择器通常用于选中单个元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID选择器示例</title>
<style>
/* 使用ID选择器选中ID为"uniqueElement"的元素,并设置它的字体大小为24px */
#uniqueElement {
font-size: 24px;
}
</style>
</head>
<body>
<p id="uniqueElement">这是一个带有唯一ID的段落,字体大小为24px。</p>
<p>这是另一个段落,不受ID选择器影响。</p>
</body>
</html>
3.4.属性选择器
定义:选择具有指定属性的元素,并将样式应用于这些元素。属性选择器以
[]
表示,里面包含属性名和属性值(可选)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性选择器示例</title>
<style>
/* 使用属性选择器选中所有具有title属性的元素,并设置它们的边框为1px实线黑色 */
[title] {
border: 1px solid black;
}
/* 使用属性选择器选中title属性值为"example"的元素,并设置它们的背景颜色为灰色 */
[title="example"] {
background-color: gray;
}
</style>
</head>
<body>
<p title="example">这是一个带有title属性且值为"example"的段落,有边框和灰色背景。</p>
<p title="another">这是一个带有title属性但值不为"example"的段落,只有边框。</p>
<div title>这是一个带有title属性但没有指定值的div元素,同样只有边框。</div>
</body>
</html>
3.5.通配符选择器
定义:通配符选择器使用星号(
*
)来选择HTML文档中的所有元素。它通常用于应用全局样式或重置样式。
<style>
/* 选择所有元素,并设置它们的margin和padding为0 */
* {
margin: 0;
padding: 0;
}
</style>
<body>
<p>这是一个段落。</p>
<div>这是一个div元素。</div>
<!-- 所有元素都将应用上面的样式 -->
</body>
3.6.后代选择器
定义:后代选择器用于选择某个元素内部的所有指定后代元素,无论这些后代元素位于多少层嵌套之内。后代选择器通过空格分隔两个选择器来表示。
<style>
/* 选择div元素内部的所有p元素,并设置它们的文本颜色为绿色 */
div p {
color: green;
}
</style>
<body>
<div>
<p>这是一个段落,位于div内部,文本颜色为绿色。</p>
<!-- 其他元素 -->
</div>
</body>
3.7.子代选择器
定义:子代选择器用于选择某个元素的直接子元素。子代选择器通过大于号(
>
)分隔两个选择器来表示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子代选择器示例</title>
<style>
/* 选择div的直接子元素p,并设置它们的文本颜色为蓝色 */
div > p {
color: blue;
}
</style>
</head>
<body>
<div>
<p>这是一个段落,是div的直接子元素,文本颜色为蓝色。</p>
<div>
<p>这是另一个段落,但不是div的直接子元素,不受子代选择器影响。</p>
</div>
</div>
</body>
</html>
3.8.并集选择器
定义:并集选择器用于选择多个选择器所匹配的元素。并集选择器通过逗号(
,
)分隔多个选择器来表示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>并集选择器示例</title>
<style>
/* 选择p元素和div元素,并设置它们的字体大小为16px */
p, div {
font-size: 16px;
}
</style>
</head>
<body>
<p>这是一个段落,字体大小为16px。</p>
<div>这是一个div元素,同样字体大小为16px。</div>
</body>
</html>
3.9.交集选择器
定义:交集选择器用于选择同时匹配多个选择器的元素。交集选择器通过将多个选择器放在一起(没有分隔符)来表示。注意,交集选择器通常用于选择具有特定类名或属性,并且同时属于特定HTML标签的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>交集选择器示例</title>
<style>
/* 选择同时是p元素且class为special的元素,并设置它们的背景颜色为黄色 */
p.special {
background-color: yellow;
}
</style>
</head>
<body>
<p class="special">这是一个特殊的段落,背景颜色为黄色。</p>
<p>这是一个普通的段落,不受交集选择器影响。</p>
</body>
</html>
3.10伪类选择器
定义:伪类选择器用于选择元素的特定状态或位置。伪类选择器通常以冒号(
:
)开头,后跟伪类名称(有些伪类如:not()
使用函数语法)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类选择器示例</title>
<style>
/* 选择鼠标悬停状态的a元素,并设置它们的文本颜色为红色 */
a:hover {
color: red;
}
/* 选择第一个p元素,并设置其字体加粗 */
p:first-of-type {
font-weight: bold;
}
</style>
</head>
<body>
<a href="#">这是一个链接,鼠标悬停时文本颜色变为红色。</a>
<p>这是第一个段落,字体加粗。</p>
<p>这是第二个段落,不受伪类选择器影响。</p>
</body>
</html>
3.11.属性选择器(css3)
允许根据元素的属性及其值来选择元素。属性选择器可以非常灵活和强大,让你能够选择具有特定属性、属性值或特定属性特性的元素
1.存在属性选择器(attr)
选择具有指定属性的所有元素
[title] {
color: blue;
}
//选择所有具有title属性的元素
2.属性值选择器
选择具有指定属性且属性值完全等于指定值的所有元素
[type="text"] {
border: 1px solid #ccc;
}
3.属性值包含选择器([attr~=value]
):
选择具有指定属性且属性值包含指定单词的所有元素(单词以空格分隔)
[class~="example"] {
background-color: yellow;
}
选择所有 class
属性包含单词 example
的元素,例如 class="foo example bar"
。
4.属性值开头选择器([attr^=value]
):
选择具有指定属性且属性值以指定值开头的所有元素。
[href^="https"] {
color: red;
}
5.属性值结尾选择器([attr$=value]
):
选择具有指定属性且属性值以指定值结尾的所有元素。
[src$=".png"] {
border: 2px solid black;
}
6.属性值包含选择器(子字符串匹配)([attr*=value]
):
选择具有指定属性且属性值包含指定值的所有元素(不区分单词边界)
[name*="user"] {
font-weight: bold;
}
7.属性值大小写敏感选择器([attr|=value]
):
选择具有指定属性且属性值以指定值开头且紧跟一个连字符(-)的所有元素,或者属性值完全等于指定值(适用于语言代码选择)
[lang|="en"] {
color: green;
}
8.属性值否定选择器([attr!=value]
):
选择具有指定属性且属性值不等于指定值的所有元素。
[type!="text"] {
background-color: lightgray;
}
四、元素特性
4.1.三种元素
1.块级元素:独占一行,并且可以设计宽高
常见块级元素:div : 布局容器;h1~h6:h1标题最大,h6标题最小;p标签:段落标签;table:表格;form:表单容器;ul li :无需列表;ol li :有序列表;dl dt dd:自定义列表;hr标签:水平线
2.行级元素:在同一行显示,不可以设置宽高,宽度由内容决定,可以与其他行内元素一起在同一行上显示。
常见行级元素:a:超链接;span:修饰文本标签;sub:下标;sup:上标;label:行元素;strong或者b标签:字体加粗;em或者i:字体倾斜;ins或者u:下划线;del或者s:删除线
3.行块级元素:在同一行显示,并且可以设置宽高
常见行块元素:img:图片标签;input:表单元素
4.2.切换元素特性
display:none;
属性名 | 属性值 | |
---|---|---|
display | none | 元素不会在页面上显示,也不会占据任何空间。 |
inline | 元素会被显示为内联元素。内联元素不会独占一行,它们的宽度只由其内容决定,并且可以和其他内联元素在同一行上显示。 | |
block | 元素会被显示为块级元素。块级元素会独占一行, | |
inline-block | 结合了内联元素和块级元素的特点。元素像内联元素一样在同一行上显示,但可以设置宽度和高度。 | |
(拓展) | flex (以后会常用) | 将元素设置为弹性盒模型(flexbox)容器,允许其子元素以灵活的方式排列和布局。 |
grid | 将元素设置为网格布局(grid layout)容器,允许其子元素在二维网格中排列和布局。 |
五、css的单位
5.1.单位类型与特性
5.1.1.绝对单位
1.像素(px):
特性:固定大小,不随视口变化
应用场景:图标、图标、边框等固定大小的元素。
注意事项:在高分辨率屏幕上,可能导致页面元素显得过小或模糊
2.毫米、厘米、英寸(in):
特性:给予物理尺寸,适用于打印样式表
应用场景:需要精确控制打印输出布局时使用
注意事项:在网页设计中较少用到,因为屏幕显示与物理尺寸存在差异
3.点(pt)、派卡(pc):
特性:印刷行业常用单位,1pt等于1/72英寸,1pc等于12点
应用场景:在需要精准控制打印输出布局时使用
注意事项:同样在网页设计中不常见
5.1.2.相对单位
1.百分比(%)
特性:相对于父元素的尺寸来定义。
应用场景:流体布局,是元素尺寸可以根据父容器的大小变化。
注意事项:对于未设置宽度的元素,百分比无效;多层嵌套元素时,尺寸计算相对复杂。
2.em:
特性:相对于元素的字体大小来定义,如果当前行内文本的字体尺寸未被人设置,则相对于浏览器的默认字体尺寸。
应用场景:字体大小的缩放,以字体大小为基准的元素尺寸调整
注意事项:继承关系复杂,多层嵌套时计算量大;可能收到父元素字体大小的影响。
3.rem:
特性:相对于根元素(即html元素)的字体大小来定义
应用场景:在保持一致性的同时进行全局尺寸调整,适应响应式设计
注意事项:不会收到父元素字体大小的影响,提供了一个更稳定、更可预测的度量方式。
4.ex和ch:
特性:ex是字体中消协字母x的高度,ch是给予数字0的宽度计算的
应用场景:在需要给予字体尺寸进行布局时使用
注意事项:使用较少,因为它们的值取决于元素的font-size和font-family属性
5.1.3.视口单位
vw(视口宽度百分比):
特性:表示视口宽度的百分比。
应用场景:创建响应式布局,使元素宽度与视口宽度成比例。
注意事项:对于老旧浏览器(如IE9及以下版本)不支持。
vh(视口高度百分比):
特性:表示视口高度的百分比。
应用场景:创建响应式布局,使元素高度与视口高度成比例。
注意事项:同样需要注意老旧浏览器的兼容性。
vmin和vmax:
特性:vmin表示视口宽度和高度中的较小值的百分比,vmax表示较大值的百分比。
应用场景:在不同屏幕尺寸下提供更加平衡的尺寸调整。
注意事项:同样需要考虑浏览器兼容性。
5.2.单位的选择与应用
1.根据需求选择单位:
在进行网页设计时,需要根据具体需求选择合适的单位。例如,对于需要精确控制的尺寸,可以选择像素(px)或绝对长度单位;对于需要根据字体大小来调整的尺寸,可以选择em或rem单位;对于需要根据视口大小来调整的尺寸,可以选择vw、vh、vmin或vmax单位。
2.考虑浏览器兼容性:
在选择单位时,还需要考虑浏览器的兼容性。例如,老旧浏览器可能不支持某些新的CSS单位(如vw、vh等)。因此,在进行网页设计时,需要确保所选单位在目标浏览器上都能得到良好的支持。
3.结合使用多种单位:
在实际开发中,可以结合使用多种单位来实现更加灵活和可适应不同设备的布局。例如,可以使用像素(px)来定义固定大小的元素,使用百分比(%)来定义相对大小的元素,使用vw或vh来定义与视口大小成比例的元素等。
六、文本相关属性
6.1.常见文本属性
CSS(层叠样式表)提供了多种用于设置文本样式的属性。以下是一些常见的文本相关属性及其用途:
color
:设置文本的颜色。
p {
color: #333;
}
/*本文最后会简单讲一下关于颜色#333的相关内容
无基础的同学可以看一下*/
font-family
:设置文本的字体族。
p {
font-family: Arial, sans-serif;
}
font-size
:设置文本的字体大小。
p {
font-size: 16px;
}
font-weight
:设置文本的粗细。
p {
font-weight: bold;
/* 其他值包括 normal, lighter, bolder, 100-900(以100为增量) */
}
font-style
:设置文本的字体样式(正常、斜体或倾斜)。
p {
font-style: italic; /* 其他值包括 normal 和 oblique */
}
text-align
:设置文本的对齐方式(左对齐、右对齐、居中对齐或两端对齐)。
p {
text-align: center; /* 其他值包括 left, right, justify */
}
text-decoration
:设置文本的装饰(如下划线、上划线、贯穿线等)。
a {
text-decoration: none;
/* 其他值包括 underline, overline, line-through, blink(不推荐使用) */
}
text-transform
:控制文本的大小写(全部大写、全部小写或首字母大写)。
p {
text-transform: uppercase; /* 其他值包括 lowercase 和 capitalize */
}
line-height
:设置文本行高。
p {
line-height: 1.5; /* 可以是数值、百分比或长度单位 */
}
letter-spacing
:设置字符间距。
p {
letter-spacing: 2px; /* 可以是负值 */
}
word-spacing
:设置单词间距。
p {
word-spacing: 4px; /* 可以是负值 */
}
font-variant
:设置小型大写字母(小型大写字母通常用于标题)。
p {
font-variant: small-caps; /* 其他值包括 normal */
}
text-indent
:设置文本首行缩进。
p {
text-indent: 30px; /* 可以是负值 */
}
text-shadow
:设置文本阴影。
h1 {
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
/*text-shadow:上 右 下 左(逆时针方向)rgba阴影可在浏览器上调*/
}
white-space
:设置如何处理空白字符(如空格和换行)。
pre {
white-space: pre-wrap; /* 其他值包括 normal, nowrap, pre, pre-line */
}
overflow-wrap
:设置长单词或URL是否应该被拆分换行。
p {
overflow-wrap: break-word; /* 其他值包括 normal, anywhere, break-all */
}
direction
:设置文本的方向。
p {
direction: rtl; /* 从右到左,默认值为 ltr(从左到右) */
}
unicode-bidi
:与direction
属性一起使用,用于设置文本嵌入的双向算法。
p {
unicode-bidi: bidi-override; /* 使用双向算法覆盖,默认值为 embed(使用嵌入的双向算法) */
}
writing-mode
:设置文本在页面上的书写模式。
常用值:horizontal-tb
(水平书写,从上到下)、vertical-lr
(垂直书写,从左到右)、vertical-rl
(垂直书写,从右到左)等。
p {
writing-mode: vertical-rl;
/* 垂直书写,从右到左,其他值包括 horizontal-tb(水平书写,从上到下)、
vertical-lr(垂直书写,从左到右)等 */
}
text-overflow
:当文本溢出包含它的元素框时,指定如何显示溢出的文本。
常用值:clip
(剪切溢出文本,不显示)、ellipsis
(显示省略号以表示文本被剪切)。
p {
text-overflow: ellipsis; /* 显示省略号以表示文本被剪切,其他值为 clip(剪切溢出文本,不显示) */
white-space: nowrap; /* 通常与 text-overflow 一起使用,防止文本换行 */
overflow: hidden; /* 隐藏超出容器的内容 */
}
overflow-wrap
(或word-wrap
,两者效果相同,但word-wrap
是旧名称):设置如何处理长单词或URL地址的换行。
p {
overflow-wrap: break-word;
/* 在长单词或URL内部进行换行,默认值为 normal(只在允许的断行点换行) */
}
font-feature-settings
:允许对OpenType字体中的特定特性进行低级控制。
需要指定要启用或禁用的特性的标签和值。
p {
font-feature-settings: "liga" 1, "dlig" 1;
/* 启用连字和离散连字特性,具体标签和值根据字体而定 */
}
font-kerning
:控制字体中的字距调整(kerning)是否应用。
p {
font-kerning: none;
/* 不应用字距调整,默认值为 auto(根据字体和浏览器的设置自动应用字距调整) */
}
font-variant-alternates
:控制字体的替代变体,如小型大写字母、分数字符等。
p {
font-variant-alternates: stylistic(1);
/* 启用字体的某种样式变体,具体编号根据字体而定 */
}
font-variant-caps
:控制字体的大小写形式,如小型大写字母、所有大写字母等。
常用值:normal
(默认值)、small-caps
(小型大写字母)、all-small-caps
(所有字母均为小型大写字母)、petite-caps
(比小型大写字母更小的变体,但并非所有字体都支持)等。
p {
font-variant-caps: all-small-caps;
/* 所有字母均为小型大写字母,其他值包括 normal(默认值)、small-caps(小型大写字母)、
petite-caps(比小型大写字母更小的变体,但并非所有字体都支持)等 */
}
font-variant-numeric
:控制数字的显示方式,如比例数字、衬线数字等。
p {
font-variant-numeric: tabular-nums; /* 使用表格数字显示,具体类型根据字体而定 */
}
font-variant-position
:控制字体中字符的位置,如上标、下标等。
常用值:
normal
(默认值)、super
(上标)、sub
(下标)等。
p {
font-variant-position: super; /* 上标,其他值包括 normal(默认值)、sub(下标)等 */
}
white-space:设置如何处理空白字符(如空格和换行)
pre {
white-space: pre-wrap;
/* 保留空白符序列,但是正常地进行换行,其他值包括 normal(合并空白符,并允许自动换行)、
nowrap(合并空白符,但是不允许换行)、pre(保留空白符序列,并且不进行换行)、
pre-line(合并空白符,但是保留所有换行符) */
}
七、颜色
7.1.颜色的基本属性
- 色调:指颜色的种类,如红色、蓝色等。
- 饱和度:指颜色中灰色的含量。饱和度最大时,颜色中灰色的含量为零,颜色最鲜艳;饱和度最小时,颜色基本就是灰色。
- 亮度:指颜色中黑色的含量。亮度最大时,颜色中黑色的含量为零,颜色最亮;亮度最小时,颜色最暗。
- 对比度:指前景色与背景色之间的差异。差异越大,对比度越大,反之则越小。
7.2.颜色的表示方法
CSS支持多种颜色表示方法,包括色彩关键字、RGB色彩模式、HSL色彩模式等。
1、色彩关键字:如red、blue、green等,这些是不区分大小写的标识符,表示具体的颜色。
2、RGB色彩模式:使用红(Red)、绿(Green)、蓝(Blue)三个颜色的叠加来表示颜色。在CSS中,RGB色彩模式可以通过两种方式表示:
十六进制符号:#RRGGBB,其中RR、GG、BB分别表示红、绿、蓝三个颜色的值,取值范围为00~FF。例如,红色可以表示为#FF0000。
百分数或整数:rgb(red, green, blue),其中red、green、blue分别表示红、绿、蓝三个颜色的值,取值范围为0255(整数)或0%100%(百分数)。例如,红色可以表示为rgb(255, 0, 0)或rgb(100%, 0%, 0%)。
3、HSL色彩模式:使用色调(Hue)、饱和度(Saturation)、亮度(Lightness)三个参数来表示颜色。在CSS中,HSL色彩模式通过hsl(H, S, L)函数实现,其中H表示色调,取值范围为0360(度数);S和L表示饱和度和亮度,取值范围为0%100%(百分数)。例如,红色可以表示为hsl(0, 100%, 50%)。
7.3.颜色的透明度
在CSS中,除了可以设置颜色的色调、饱和度、亮度等属性外,还可以设置颜色的透明度。透明度的设置对于实现一些特殊效果非常有用。
- RGBA色彩模式:在RGB色彩模式的基础上增加了一个alpha通道,用于表示颜色的透明度。alpha的取值范围为0.0(完全透明)到1.0(完全不透明)。例如,半透明的红色可以表示为rgba(255, 0, 0, 0.5)。
- HSLA色彩模式:在HSL色彩模式的基础上也增加了一个alpha通道,用于表示颜色的透明度。用法与RGBA类似。
码字不易,希望亲爱的网友们给孩子点点赞~~谢谢啦
上述内容若有遗漏或不足之处,恳请各位大佬不吝赐教,指正并帮助美化,以期更加完善。