初识CSS 第二节
🌹CSS 注释🌹
注释可以用于解释代码，在以后编写源代码时会有所帮助。浏览器会自动忽略注释。<style>中的注释以/*开始，以*/结束。
您可以在代码里的任何位置添加注释用来解释代码。注释能够跨越多行。
实例：
<!DOCTYPE html>
<html>
<head>
<style>
/* 这是单行注释 */
/*这是多行
注释*/
p {
color: red;
}
</style>
</head>
<body>
<p>CSS 注释不会在输出中显示。</p>
</body>
</html>
🔫CSS颜色🔫
在CSS中可以使用颜色名，或RGB、HEX、HSL、RGBA、HSLA值来指定颜色，在CSS/HTML 中支持 140 种标准的颜色名。
实例：
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:AliceBlue;">爱丽丝蓝</h1>
<h1 style="background-color:Orange;">橙色</h1>
<h1 style="background-color:CornflowerBlue;">矢车菊蓝</h1>
<h1 style="background-color:MediumSeaGreen;">中海绿色</h1>
</body>
</html>
💦CSS 背景色💦
您还可以给HTML页面中的元素设置背景色。
实例：
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">
There are moments in life when you miss someone so much that you just want to pick them from your dreams and hug them for real! Dream what you want to dream;go where you want to go;be what you want to be,because you have only one life and one chance to do all the things you want to do.
</p>
</body>
</html>
🌾CSS 文本颜色🌾
我们还可以给文本设置颜色。
<!DOCTYPE html>
<html>
<body>
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;">很多时候，不能坚持并不是因为我们不能吃苦，只是因为我们做某件事情的意愿不强。</p>
<p style="color:MediumSeaGreen;">当我们立下FLAG的时候，可能一开始都会忍不住下狠劲儿。</p>
</body>
</html>
🌸CSS 边框颜色🌸
<!DOCTYPE html>
<html>
<body>
<h1 style="border: 2px solid CornflowerBlue;">Hello World</h1>
<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>
<h1 style="border: 2px solid AliceBlue;">Hello World</h1>
</body>
</html>
🍊CSS 颜色值🍊
在 CSS 中不仅可以使用颜色名，还可以使用 RGB 值、HEX 值、HSL 值、RGBA 值或者 HSLA 值来指定颜色，与颜色名 “AliceBlue” 等颜色名效果一样。
而且RGBA和HSLA可以指定颜色透明度。
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:rgb(255, 99, 71);">纯色</h1>
<h1 style="background-color:#ff6347;">纯色</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">纯色</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">半透明效果</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">半透明效果</h1>
</body>
</html>
🥬CSS 背景🥬
CSS中的背景属性用来定义元素的背景效果。在这小节中我们将学到CSS的背景属性。
- background-color
- background-image
- background-repeat
- background-position
- background-attachment
- background-position
background-color属性可以指定元素的背景色。通过 CSS，颜色通常可以通过有效的颜色名称、HEX、RGB值来指定。
实例：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<p>此页面拥有浅蓝色背景色！</p>
</body>
</html>
background-image属性可以指定元素背景的图像。默认情况下图片会重复，以覆盖整个元素。
实例：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("./background.png");
}
</style>
</head>
<body>
<p>此页面背景为图片！</p>
</body>
</html>
注意：使用背景图像时，请使用不会干扰文本的图像。
background-repeat属性可以设置图片属性在水平方向还是垂直方向重复图像。
实例：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("./background.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>背景图像仅在水平方向上重复！</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("./background.png");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<p>背景图像仅在水平方向上重复！</p>
</body>
</html>
提示：如需设置不重复图像，请设置 background-repeat: no-repeat;
如需设置所有方向重复请设置 background-repeat: repeat;
background-position 属性可以用于指定背景图像的位置。
实例：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("./background.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
}
</style>
</head>
<body>
<p>图片放在右上角</p>
</body>
</html>
background-attachment属性可以指定图像是滚动的还是固定的。
实例：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("./background.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
background-attachment: fixed;
}
</style>
</head>
<body>
<p>背景图像是固定的。向下滚动页面。</p>
<p>背景图像是固定的。向下滚动页面。</p>
<p>背景图像是固定的。向下滚动页面。</p>
</body>
</html>
提示：如需设置页面跟随其余部分一起滚动，请设置：background-attachment: scroll;
background简写属性，可以在一个属性中指定所有背景属性。所有它被称为简写属性。
实例：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #ffffff url("./background.png") no-repeat right top;
margin-right: 200px;
}
</style>
</head>
<body>
<p>背景图像不重复，且位于右上角。</p>
</body>
</html>
🧅CSS 边框🧅
border 属性允许我们指定元素边框的样式、宽度和颜色。
🧄CSS 边框样式🧄
border-style 属性指定要显示的边框类型。它允许以下几种值。
- dotted - 定义点线边框
- dashed - 定义虚线边框
- solid - 定义实线边框
- double - 定义双边框
- groove - 定义 3D 坡口边框。效果取决于 border-color 值
- ridge - 定义 3D 脊线边框。效果取决于 border-color 值
- inset - 定义 3D inset 边框。效果取决于 border-color 值
- outset - 定义 3D outset 边框。效果取决于 border-color 值
- none - 定义无边框
- hidden - 定义隐藏边框
border-style 属性能设置一到四个值（用于上边框、右边框、下边框和左边框）。
实例：
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<p class="dotted">点状边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双线边框。</p>
<p class="groove">凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">3D inset 边框。</p>
<p class="outset">3D outset 边框。</p>
<p class="none">无边框。</p>
<p class="hidden">隐藏边框。</p>
<p class="mix">混合边框。</p>
</body>
</html>
注意：除非设置了 border-style 属性，否则其他边框属性都不会起作用！
🍡CSS 边框宽度🍡
border-width 属性指定四个边框的宽度。可以将宽度设为特定大小（以 px、pt、cm、em 计），还可以使用以下三个预定义值之一：thin、medium 或 thick.
实例：
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: dotted;
border-width: 2px;
}
p.four {
border-style: dotted;
border-width: thick;
}
p.five {
border-style: double;
border-width: 15px;
}
p.six {
border-style: double;
border-width: thick;
}
</style>
</head>
<body>
<p class="one">边框宽度</p>
<p class="two">边框宽度</p>
<p class="three">边框宽度</p>
<p class="four">边框宽度</p>
<p class="five">边框宽度</p>
<p class="six">边框宽度</p>
</body>
</html>
注释：border-color 属性单独使用时不起作用。请首先使用 border-style 属性设置样式。
🧉CSS 边框颜色🧉
border-color 属性用于设置四个边框的颜色。可以通过以下方式设置颜色。
- name - 指定颜色名，比如 “red”
- HEX - 指定十六进制值，比如 “#ff0000”
- RGB - 指定 RGB 值，比如 “rgb(255,0,0)”
- HSL - 指定 HSL 值，比如 “hsl(0, 100%, 50%)”
- transparent
注释：如果未设置 border-color，则它将继承元素的颜色。
实例：
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color: blue;
}
</style>
</head>
<body>
<p class="one">红色实线边框</p>
<p class="two">绿色实线边框</p>
<p class="three">蓝色点状边框</p>
</body>
</html>
🧃CSS 边框各边🧃
在 CSS 中，有一些属性可以指定每个边框（顶部、右侧、底部和左侧）。
实例：
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
</style>
</head>
<body>
<p>两种不同的边框样式。</p>
</body>
</html>
🍷CSS 简写边框属性🍷
Border为缩减代码，也可以在一个属性中指定所有单独的边框属性。
- border-width
- border-style（必需）
- border-color
实例：
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 5px solid red;
}
</style>
</head>
<body>
<p>此属性是简写属性。</p>
</body>
</html>
🍦CSS 圆角边框🍦
border-radius 属性用于向元素添加圆角边框.
实例：
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
border: 2px solid red;
}
p.round1 {
border: 2px solid red;
border-radius: 5px;
}
p.round2 {
border: 2px solid red;
border-radius: 8px;
}
p.round3 {
border: 2px solid red;
border-radius: 12px;
}
</style>
</head>
<body>
<p class="normal">普通边框</p>
<p class="round1">圆角边框</p>
<p class="round2">角更圆的边框</p>
<p class="round3">角最圆的边框</p>
</body>
</html>
🍨好了，今天的教程就到这里。🍨
勇于接受别人的批评，正好可以调整人生感悟。
3942
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
