CSS提供了网站的样式。
background属性使您可以使用图像和颜色为网页创建背景。
背景颜色属性允许您选择元素的颜色。这可以是整个页面的背景，也可以是页面某一部分的背景。
元素是一段HTML，例如网页上的标题或段落。
这是将网页的背景色设置为绿色的示例。
body {
background-color: green;
}这是设置两个元素的颜色的示例。这会将标题的背景设置为紫色，并将页面的其余部分设置为蓝色。
body {
background-color: blue;
}
h1 {
background–color: purple;
}在CSS中，可以通过三种方式定义颜色：
有效的颜色名称，例如 blue
十六进制值，例如#FFFFF（这是白色的十六进制值。）
RGB值，例如rgb(76,175,80)（这是浅绿色的RGB值。）
您可以使用background image属性将图像设置为元素的背景。默认情况下会重复图像，以使其覆盖整个元素。
body {
background-image: url("barn.jpg");}您还可以使用链接（例如，从Google图片搜索中）链接在线找到的图片或GIF。
body {
background-image: url("https://mdn.mozillademos.org/files/11983/starsolid.gif");}默认情况下，背景图像在垂直（上下）和水平（整个网页）上重复。您可以使用background-repeat属性在垂直或水平方向上重复图像。
这是垂直重复图像的示例：
body {
background-image: url("barn.jpg");
background-repeat: repeat-y;}您可以通过将background-repeat属性设置为“ repeat-x”来水平重复图像。
body {
background-image: url("barn.jpg");
background-repeat: repeat-x;}您还可以使用background-repeat属性将图像设置为不重复。
body {
background-image: url("barn.jpg");
background-repeat: no-repeat;}您可以使用position属性来指定图像在网页上的位置。
body {
background-image: url("barn.jpg");
background-repeat: no-repeat;
background-position: right top;}您可以使用background-attachment属性将图像设置为固定位置。固定位置使它不会随页面的其余部分滚动。
body {
background-image: url("barn.jpg");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;}渐变是两种或多种颜色之间的过渡，可以通过CSS类似于背景图像使用。
渐变背景的语法可能非常复杂，并且由于受支持的浏览器之间的不一致，通常仍与供应商前缀一起使用。
该Colorzilla渐变编辑器是用于生成自定义的梯度和相关的CSS标记一个伟大的在线工具。
您可以将背景属性写在一行上。这称为速记属性。
body {
background: url("barn.jpg") no-repeat right top;}您可以省略使用简写属性时不需要的属性，但是必须按特定顺序使用这些属性。顺序是：
颜色
图片
重复
附件
位置
您可以在单个背景属性中指定多个背景图像。
body {
background: url("barn.jpg"), url("stars.jpg"), linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5));}指定的第一个图像（或渐变）在最上面，第二个图像在后面，依此类推。如果元素之一由于其URL或语法不正确，则浏览器将忽略整行。
CSS背景属性用于定义元素的背景效果。
CSS背景属性：background-color，background-image，background-repeat，background-attachment，background-position
CSS断点是根据媒体查询处于活动状态而改变网站布局的特定点。
通常，当您要使网站的布局重新适应浏览器视口的大小时，可以指定一个断点。通常是视口的宽度。
例如，如果您的网站内容在狭窄的视口中看起来不错（例如在智能手机浏览器上），但在较大的屏幕上看起来却很糟糕（例如，字体大小太小且难以阅读），那么您可能想为更大的屏幕引入一个新的断点，使字体更大：
CSS断点可以被认为是响应式Web设计的核心，因为它们定义了内容的行为方式或以不同的设备宽度/比例排列的方式。这使您可以向用户显示最佳的布局。
断点是根据以下任意一种大致设置的：
基于设备宽度的断点
基于内容的断点
很明显，我们所有的设备都没有相同的屏幕宽度/尺寸。现在，由设计决定包括一组特定的设备并相应地编写CSS规则。
我们已经有了足够的设备来担心，当新的设备以不同的宽度出现时，回到您的CSS并重新添加一个新的断点非常耗时。
这是一个例子：
/* ----------- iPhone 6, 6S, 7 and 8 ----------- *//* Portrait */@media only screenand (min-device-width: 375px)and (max-device-width: 667px)and (-webkit-min-device-pixel-ratio: 2)and (orientation: portrait) {}/* Landscape */@media only screenand (min-device-width: 375px)and (max-device-width: 667px)and (-webkit-min-device-pixel-ratio: 2)and (orientation: landscape) {}/* ----------- Google Pixel ----------- *//* Portrait */@media screenand (device-width: 360px)and (device-height: 640px)and (-webkit-device-pixel-ratio: 3)and (orientation: portrait) {}/* Landscape */@media screenand (device-width: 360px)and (device-height: 640px)and (-webkit-device-pixel-ratio: 3)and (orientation: landscape) {}使用这种方法，您最终将拥有大量的媒体查询列表。
在制作或编写断点规则时，这是首选。因为仅在需要更改时才更容易根据特定布局调整内容。
@media only screen (min-width: 768px){...}此断点意味着当设备宽度为768px及以上时，CSS将适用。
@media only screen and (min-width: 768px) and (max-width: 959px){...}注意始终尝试根据自己的内容而不是设备创建断点。将它们折断为逻辑宽度，而不是随机宽度，并保持为可管理的数字，因此修改仍然简单明了。
当您要根据屏幕尺寸更新样式时， CSS断点非常有用。例如，在宽度为1200px以上的设备上，请使用font-size: 20px;，否则请使用font-size: 16px;。
我们从大于1200像素（通常是笔记本电脑屏幕的宽度）的设备开始。您可能还注意到我们提到了“大于”，这意味着我们在某种程度上使用了“ if-then ”语句。
让我们将其转换为CSS代码：
.text1 {
font-size: 16px;}@media (min-width: 1200px) {
.text1 {
font-size: 20px;
}}为了方便起见，我们首先写下.text1基本样式，然后再指定@media规则。
提示：您可能会在一个名为'Bootstrap'的通用CSS框架上看到，他们在Bootstrap v4.0中采用了 'min-width'和更高版本 ，与之相比，在旧的Bootstrap v3.0中使用了 'max-width'和更低版本。这只是一个偏爱，说“这个大小小于”与“这个大小大于”并没有什么错。
很好用@media (max-width) {}。这是一个例子：
.text1 {
font-size: 20px;}@media (max-width: 1199px) {
font-size: 16px;}// Normal, basic styles
// that look great on small screens
// but not on bigger screens
body {
font-size: 16px;}// Define a new breakpoint, with a media query.// In this case, for when the viewport's width// is at least 512px wide.@media (min-width: 512px) {
body {
font-size: 20px;
}}基于内容的断点（与设备相对）不那么复杂。这里有一个简单的代码片段触发时，该设备的宽度是向上的code 700px，大致智能手机屏幕尺寸
@media only screen and (min-width: 700px) {
something {
something: something;
}}您还可以设置最小和最大宽度，以便您尝试不同的范围。这大致触发了智能手机与更大的台式机和显示器尺寸之间的触发：
@media only screen and (min-width: 700px) and (max-width: 1500px) {
something {
something: something;
}}CSS Colors是一个CSS模块，处理颜色，颜色类型，颜色混合和不透明度。并非所有将a作为值的CSS属性都属于该模块，但是它们确实依赖于此。
在CSS中，您可以更改HTML页面中几乎所有元素的颜色。属性，如background-color，color和border-color设置这些元素的颜色。
CSS支持颜色名称，十六进制和RGB颜色。除了opacity声明的引入外，现在还可以使用颜色名称或RGB，HEX，HSL，RGBA，HSLA值指定CSS3中的颜色。
HTML支持140种标准颜色名称。
RGB代表“红色，绿色，蓝色”。RGB值是红色，绿色和蓝色的强度值的组合。每个介于0（黑色）和255（全强度）之间。RGBA颜色值是具有alpha通道的RGB颜色值的扩展-它指定了颜色的不透明度。alpha参数是介于0.0（完全透明）和1.0（完全不透明）之间的数字。
RGB颜色值指定为：rgb（红色，绿色，蓝色）。RGBA颜色值相似，alpha值位于最后一个位置：rgba（红色，绿色，蓝色，alpha）。
HSL代表“色相，饱和度和亮度”。色相是色轮上的度数（从0到360）：0（或360）是红色，120是绿色，240是蓝色。饱和度是一个百分比值：100％是全色。亮度也是一个百分比；0％是深色（黑色），而100％是白色。
HSLA颜色值是带有Alpha通道的HSL颜色值的扩展-它指定了颜色的不透明度。
HSL颜色值指定为：hsl（色相，饱和度，亮度）。HSLA颜色值相似，alpha值位于最后一个位置：hsla（色相，饱和度，亮度，alpha）。
CMYK颜色是CYAN，MAGENTA，YELLOW和BLACK的组合。电脑屏幕使用RGB颜色值显示颜色。打印机通常使用CMYK颜色值显示颜色。HTML不支持CMYK，但建议将它作为CSS4中的新标准。
颜色示例：CMYK红色：cmyk（0％，100％，100％，0％），CMYK绿色：cmyk（100％，0％，100％，0％）或CMYK蓝色：cmyk（100％，100％ ，0％，0％）。
十六进制代码（十六进制代码的缩写）是一种向计算机表达颜色值的方法。之所以这样命名，是因为可以将16个唯一的符号用作值。在这种情况下，将使用数字0至9和字母a至f。
十六进制代码以以下格式表示：＃000000，在这种情况下为黑色。每个十六进制使用六个字符，使用前面提到的16个字符中的任何一个。这六个字符分为三对两。
这三对分别表示特定颜色的红色，绿色和蓝色量的值。以十六进制颜色＃AA11BB表示，AA表示红色，11表示绿色，BB表示蓝色。0是颜色的最小值，而f是最大值。
十六进制代码不区分大小写，这意味着#FFFFFF和#ffffff将具有相同的颜色：白色。
此外，使用十六进制代码有16,777,216种可能的颜色组合。
CSS3 opacity属性设置整个元素的不透明度（背景颜色和文本都是不透明/透明的）。与rgba和hsla指定的alpha值不同，不透明度是由子元素继承的。
不透明度属性值必须是介于0.0（完全透明）和1.0（完全不透明）之间的数字。
<html> <body> <p>Hello Moto</p> </body></html>
body {
background-color: green;
color: white;}在上面的示例中，background-color: green将<body>元素变为绿色。这会使整个网页变成绿色。该<p>元素是全白之后color: white了。您可以使用命名的颜色，像green，blue，yellow，red，purple，和其他许多人。但是对于自定义颜色，您可以使用十六进制代码（#147ACC），RGB值（rgb(20, 122, 204)）甚至HSL值（hsl(145, 59%, 30%)）。
p {
color: rgba(244, 145, 14, 0.80); // bright orange}h2 {
color: #FA8072; //salmon
}您还可以为颜色添加Alpha值或透明度。透明性允许将文本覆盖在图像上，并且仍然可以通过文本部分查看图像，或者如果文本的前面或后面没有其他元素，则可以用来更改颜色的阴影。使用rgba()或hsla()并填写您的颜色值。Alpha值位于最后，并且是百分比转换为小数。（例如20％是0.2，75％是0.75，依此类推）
body {
background-color: hsl(184, 87%, 94%); // bright blue}上方显示的段落样式为鲜橙色，透明度为20％，h2元素为鲑鱼粉，身体背景为亮蓝色。
要使自定义颜色在CSS中使用，您可能会发现颜色选择器很有帮助。一些文本编辑器具有内置的颜色选择器，例如Visual Studio Code。如果您在Google或DuckDuckGo上搜索“颜色选择器”，则将获得可以使用的颜色选择器。Google Chrome和Firefox也具有可以安装的颜色选择器加载项。Adobe Color CC不仅可以帮助您选择一种颜色，而且还可以帮助您为网页选择一种配色方案！
最好使用WebAIM的颜色对比度检查器之类的工具来检查文本和背景色之间是否有足够的对比度。
CSS中的颜色用于使网页中的元素着色。有很多方法可以为元素分配颜色。您可以使用颜色的实际名称，其RGB值或十六进制值。在CSS3中，hsl（色相饱和度）已添加到规范中。
目前，HTML支持140种颜色名称，可以通过在CSS规则中键入名称来进行分配。例如：
p {
color: green;}RGB代表“红色”，“绿色”和“蓝色”，我们还可以通过在规则中键入其RGB值来分配颜色。RGB值如下所示：rgb（255,0,0），其中每个数字定义最终混合中每种颜色的数量。
值的范围是0到255，在我们的示例中，我们看到只有第一个值是255，而其他两个值都设置为0。这意味着我们的值中只有红色，并且相应的元素将变为红色。RGB值（0，0，0）将产生黑色，而值（255，255，255）将产生白色。
不可能记住每个颜色代码，因此，有许多在线工具可以为项目选择所需的颜色。
p {
color: rgb(0, 255, 0);}就像上面一样，该规则将所有p元素的字体颜色更改为绿色。
十六进制值是在CSS中定义颜色的另一种方法，它们的工作原理与RGB值非常相似。
随机十六进制代码将如下所示：#29432b，其中哈希值后的前两个字符代表混合中的RED数量，后两个代表绿色的数量，最后两个代表蓝色的数量。
的值#000000和#ffffff分别代表黑色和白色。
您可以使用提到的RGB值相同的工具找到所需的特定十六进制颜色。
p {
color: #00fe00;}此规则再次将所有p元素的字体颜色更改为绿色。
HSL具有三个值。第一个是色相，以度为单位。因此0（或360）代表红色，120代表绿色，240代表蓝色。
第二个是饱和度，其百分比值的范围从0到100％。
第三个是亮度，它的百分比值也从0到100％。0％是深黑色，平均50％，100％是白色。
p {
color: hsl(0, 100%, 50%);}JS小提琴
颜色名称仅使用140个值，而RGB和HEX值具有16,777,216个可能的组合。因此，如果您希望您的项目准确地了解您的设想，则应使用后两个选项，并保留颜色名称的值以用于模型化和测试目的。
顾名思义，currentColor关键字在CSS中是有效的颜色值。这表示特定元素的color属性的值。这使您可以将color属性的值用于默认情况下不接收该属性的属性。
例如，如果我们声明每个div边框都有3px的color边框currentColor，这意味着每个边框的颜色div将使用其color属性的相同值进行着色：
div{
/* The currentColor keyword for the color value, which means that the border will have the value of the respective div's color property */
border: 3px solid currentColor;}/* This div will have green borders, because its color value is green. */#div1{
color: green;}/* This div will have blue borders, because its color value is blue. */#div2{
color: blue;}这是网络上一个非常常见的示例–一个带有SVG图标和文本的按钮。鼠标悬停在按钮上方时，边框，文本和图标的颜色会更改。下图按顺序描述了按钮的初始状态和悬停状态。
图标字体也可以用于此目的，但是内联SVG相对于图标字体具有多种优势，这可能使SVG成为许多开发人员的选择。引用CSS技巧，
放置字体图标可能会令人沮丧。图标是通过伪元素插入，而这取决于line-height，vertical-align，letter-spacing，word-spacing，字体字形是如何设计的（它自然有它周围的空间吗？它有字距信息？）。然后，伪元素display类型会影响这些属性是否起作用。SVG就是它的大小。
总结起来，有时将字体图标与文本一起使用可能会令人沮丧。
我们可以使用以下代码来实现所需的行为：
button {
color: #016898;}.emailIcon {
fill: #016898;}button:hover {
color: #19B5FE;}button:hover .emailIcon {
fill: #19B5FE;}现在，fill我们可以将fill设置为，而不是在悬停时显式更改SVG的颜色currentColor。这将自动将SVG的颜色更改color为按钮属性的值。现在，我们只需要更改color按钮的属性。这使CSS代码更短，更智能：
.emailIcon {
fill: currentColor;}button {
color: #016898;}button:hover {
color: #19B5FE;}媒体查询使您可以针对不同的设备/屏幕尺寸使用不同的样式。他们在CSS3中的引入大大简化了响应式网页的构建。
设计响应式网站的最佳方法是首先考虑移动性。表示您从移动版本的设计和内容开始创建页面。
您可能会认为，使用某些可缩放的大小（％，vw或vh），您的页面将完全适合任何设备。但事实并非如此。也许是针对一些非常基础的设计，但肯定不是针对更常见或更复杂的页面！
在为较小的设备设计页面时，您将专注于主要内容。在更大的屏幕上，您将不得不重新调整一些字体大小，边距，填充等，以使您的网站舒适且可读。但是，您也将需要/需要添加更多内容，您没有判断基本的内容，并填充由屏幕尺寸创建的空间。
思考过程应为：
要显示哪些内容？
如何布置？
尺寸？
@media only screen and (min-width: 768px) {
p {padding: 30px;}
}p屏幕达到最小768px宽度后，该标签的填充将为30px。
@media only screen and (min-height: 768px) and (orientation: landscape) {
p {padding: 30px;}
}p屏幕达到最小768px高度且其方向为横向时，该标签的填充将为30px。
@media only screen and (min-width: 768px), (min-resolution: 150dpi) {
p {padding: 30px;}
}p屏幕达到最小768px的宽度或分辨率达到最小150dpi时，标签的填充将为30px。
不同的CSS字体属性定义页面上文本的大小，粗细，样式，行高和字体系列/字体。
使用font-family属性设置文本的字体系列或字体。
此属性适用于后备系统-如果您的浏览器不支持第一种字体，它将尝试以下每种字体，直到找到支持的字体。如果字体名称超过一个单词，则必须用引号引起来。例如：
p {
font-family: "Times New Roman", Times, serif; }Times New Roman由三个词组成，必须用引号引起来。同时，衬线只是一个词，因此不需要引号。
列表中的最后一项应始终是通用字体系列名称，例如衬线，无衬线，等宽字体，草书，幻想，系统用户界面。
该font-style属性可用于使文本变为斜体或斜体。
此属性有三个可能的值：
正常-文字正常显示
斜体-文字以斜体显示
倾斜-文字倾斜
.normal {
font-style: normal;}.italic {
font-style: italic;}.oblique {
font-style: oblique;}使用该font-size属性可以调整文本的大小。16px在大多数浏览器中，默认的文本大小是。
以下是最常用的字体大小值：
px （像素）
em-– 1em父字体大小
rem –根元素的字体大小
% -百分比
.with-pixels {
font-size: 14px;}.with-ems {
font-size: 0.875em;}.with-absolute {
font-size: large;}.with-percentage {
font-size: 80%;}该font-weight属性调整文本的粗细。此属性接受关键字值（例如bold或normal）和数字关键字值（例如400和）700。
以下是一些常见的关键字和数字关键字值：
| 关键字值 | 数字关键字值 |
|---|---|
| 100 | thin |
| 300 | light |
| 400 | normal |
| 500 | medium |
| 700 | bold |
| 900 | black |
默认字体粗细为400或normal。
p {
font-weight: bold}注意：并非所有关键字或数字关键字值都可用于每个字体系列。例如，如果您要从Google字体加载字体系列，则需要选择要使用的所有字体粗细。
此CSS属性描述其父块元素中内联内容的水平对齐方式。text-align不控制块元素的对齐，它仅影响其内联内容。
该text-align属性被指定为从以下值列表中选择的单个关键字：
text-align: left; 将文本向左对齐
text-align: right; 将文本向右对齐
text-align: center; 使文本居中对齐
text-align: justify; 使线相同的宽度
text-align: justify-all; 使线条具有相同的宽度，包括最后一条
text-align: start; 将最后一行与行首对齐
text-align: end; 将最后一行对齐到该行的末尾
text-align: match-parent; 计算该值的开始和结束，以父代的方向为准，并替换为适当的左或右值。
块对齐值（非标准语法）：
text-align: -moz-center;
text-align: -webkit-center;
全球价值观：
text-align: inherit; 从其父元素继承
text-align: initial; 默认值
text-align: unset; 根据元素的默认属性应用继承或初始值
了解CSS Box模型对于能够正确布局网页至关重要。
例如，当浏览器渲染（绘制）网页时，每个元素都会按照CSS Box Model的规则绘制为矩形框的文本或图像。
框本身的中心是内容，它占据了一定的高度和宽度。该区域称为内容区域。内容区域的大小可以自动确定，也可以显式设置高度和宽度的大小（请参阅下面有关的注释box-sizing）。在内容区域周围，这是一个称为填充区域的区域。填充的大小可以是相同的四周（镶有padding），也可以单独设置为上，右，下和左补白（有padding-top，padding-right，padding-bottom和padding-left）。
接下来，有一个边境区域。这将在元素及其填充周围创建边框。您可以设置边框的粗细（border-width），颜色（border-color）和样式（border-style）。样式选项包括none（无边框）solid，dashed，dotted和其他几个人。
另外，您可以分别在4个面上设置边框。例如，带有的顶部边框border-top-width，border-top-color以及border-top-style其厚度，颜色和样式。（请参阅以下有关的注释box-sizing。）
最后是边距区域。这样会在元素，填充和边框周围创建清晰的空间。同样，你可以单独设置上，右，下，左页边距（与margin-top，margin-right，margin-bottom和margin-left）。在某些情况下，会发生边距崩溃，并且相邻元素之间的边距可能会共享。
box-sizing属性：此属性的默认值为content-box。如果使用默认值，则框模型将允许作者指定内容区域的大小。但是，可以使用它们代替指定边框区域的大小。这是通过将box-sizing属性更改为来完成的border-box。有时这会使布局更容易。您可以box-sizing根据需要为每个元素设置属性。
cursor属性指定将鼠标悬停在元素上时要显示的光标类型。它具有36个可能的值：
.auto{ cursor: auto; }
.default { cursor: default; }
.none{ cursor: none; }
.context-menu{ cursor: context-menu; }
.help{ cursor: help; }
.pointer { cursor: pointer; }
.progress{ cursor: progress; }
.wait{ cursor: wait; }
.cell{ cursor: cell; }
.crosshair { cursor: crosshair; }
.text{ cursor: text; }
.vertical-text { cursor: vertical-text; }
.alias { cursor: alias; }
.copy{ cursor: copy; }
.move{ cursor: move; }
.no-drop { cursor: no-drop; }
.not-allowed { cursor: not-allowed; }
.all-scroll{ cursor: all-scroll; }
.col-resize{ cursor: col-resize; }
.row-resize{ cursor: row-resize; }
.n-resize{ cursor: n-resize; }
.e-resize{ cursor: e-resize; }
.s-resize{ cursor: s-resize; }
.w-resize{ cursor: w-resize; }
.ns-resize { cursor: ns-resize; }
.ew-resize { cursor: ew-resize; }
.ne-resize { cursor: ne-resize; }
.nw-resize { cursor: nw-resize; }
.se-resize { cursor: se-resize; }
.sw-resize { cursor: sw-resize; }
.nesw-resize { cursor: nesw-resize; }
.nwse-resize { cursor: nwse-resize; }
您也可以将图像设置为光标。
.custom-cursor {
cursor: url(cursor-image.png);} Copyright © 2017-2023 soword.cn SOWORD科技言
网站地图 BUG反馈 联系我们 用户隐私
栖族科技开发服务中心
浙公网安备 33011002016917号
京ICP备19009350号-2
soword科技言免费资源网站，免费API接口，免费开发模板，免费开发工具，开发技术问题，汉化版免费开发工具，API接口，开发教程，免费教程
SOWORD科技言