CSS整理总结2

四、CSS属性值和单位

               （只为基础的属性值，具体全面的样式设置在下文）

 4.1  颜色

                      ：英语单词     eg: red、green、white..

                         RGB            eg:  rgb(255, 0, 0)

                         十六进制      eg: #FF0000

 4.2  字体大小

                            ：像素     eg:    font-size: 16px

                                 em       eg： font-size: 1.2em

                                 rem      eg:   font-size: 1.2rem

                        em   是一个相对长度单位，它相对于其使用环境中的字体尺寸来计算长度，浏览器通常将 1em 定义为等于当前元素的字体尺寸   （如果你在一个字体尺寸为 16px 的元素中设置了一个长度为 2em 的属性（比如宽度、高度、边距等），那么这个长度实际上会是 32px）

                      rem  也是一个相对长度单位，是基于根元素的字体尺寸的，因此你可以通过改变根元素的字体尺寸来轻松地调整整个文档的尺寸比例，而不需要逐个修改每个元素的尺寸设置。这种技术常用于创建响应式布局，其中字体尺寸和元素尺寸会根据视口（viewport）的宽度自动调整。

  4.3 图片适应框架的方式 object-fit

                  

        

•  fill：     默认值，拉伸图片以完全填充容器，不考虑宽高比。
•  contain：保持宽高比，缩放图片以使其完全适应容器，但图片可能被裁剪以适应容器。
•  cover：    保持宽高比，缩放图片以覆盖整个容器，但图片可能被裁剪以适应容器。
•  none：      保持图片的原始宽高比，图片不会被缩放，如果容器的宽高比与图片的宽高比不                       匹配，图片将不会覆盖整个容器。
•  scale-down：类似于none或contain，取决于哪个选项会导致更小的图片尺寸。

  4.4透明度设置

  1.opacity 属性

2.rgba() 颜色值（图片）

3.hsla() 颜色值 （文字）

• 使用opacity时，整个元素（包括其内容）都会变得透明。如果你只想让背景或边框透明，而内容保持不透明，那么应该使用rgba()或hsla()颜色值。
• rgba()和hsla()允许你在不影响内容透明度的情况下设置背景或边框的透明度。

透明度值0表示完全透明，而1（或省略alpha通道时）表示完全不透明。中间的值会创建不同程度的透明度效果。

                opacity: 0.5; /* 图片将半透明显示 */ 

   4.5  其他单位

                       百分比%：百分比单位表示相对于父元素的比例，可以随着浏览器窗口大小的改变而自动调整大小。

                        视口单位（vw、vh、vmin、vmax）：视口单位基于视口的尺寸，而不是元素的尺寸。vw 和 vh 分别表示视口宽度和高度的百分比，vmin 和 vmax分别表示 vw 和 vh 中的最小值和最大值。例如，width: 50vw; 表示元素宽度是视口宽度的 50%。

 五、背景设置

   5.1 纯色背景

                   背景颜色：background-color: #f0f0f0; /* 灰色背景 */

   5.2图片背景

                   设置图片背景： background-image: url('背景图片的路径'); /* 设置背景图片 */  

                                        (可以为相对路径也可以为绝对路径，如果报错就改变一下URL中的‘/’或‘\’，将‘\’都变为‘/’或将‘\’都变为‘/’，为’...‘有单引号）
                   背景的位置：     background-position: center center; /* 背景图片居中 */

                  背景图片的大小： background-size: cover; /* 背景图片覆盖整个元素，保持其宽高比 */

                                             = background-size: 100% 100%; /* 背景图片完全填充元素，可能会改变宽高比 */                           

                                                 width:80px;  height:500px; 
               

                  固定某个图片的位置： background-attachment: fixed; /* 背景图片固定，不随页面滚动 */  

                  背景不重复：background-repeat: no-repeat; /* 背景图片不重复 */ :如果图片本身尺寸小于要填充的尺寸，浏览器默认会将图片重复以填满div，在代码中加上  background-repeat: no-repeat;和background-size: cover;后可以j将一张图片更正确的设置为响应式背景

   5.3  其他

                    外边距：margin: 10px;
                    内边距： padding: 5px; /* （虽然对`<img>`标签来说不常见） */

                   透明度：opacity: 0.5; /* 图片将半透明显示 */ 

 六、文字设置

   颜色：color: red; /* 红色文字 */  
  /* 或者使用rgba、hsla等包含透明度的颜色值 */

             color: rgba(255, 0, 0, 0.5); /* 半透明红色文字 */ 

   字体：font-family: Arial, sans-serif; /* 首选Arial字体，如果没有则使用浏览器默认的无衬线字体 */  
}
  大小：font-size: 24px; /* 标题文字大小为24像素 */  
  /* 也可以使用em、rem等单位 */  

格式：font-weight: bold; /* 粗体文字 */  
 font-style: italic; /* 斜体文字 *
对齐： text-align: center; /* 居中对齐 */  
  /* 其他值包括left（左对齐，默认值）、right（右对齐）和justify（两端对齐） */  
}

 行高：line-height: 1.5; /* 行高为字体大小的1.5倍 */  
  /* 也可以使用具体的单位，如px、em等 */  
 字体间距： letter-spacing: -1px; /* 字母间距缩小1像素 */ 

                    letter-spacing: 2px; /* 字母间距增加2像素 */ 

  阴影：text-shadow: 2px 2px 4px #000000; /* 文字阴影，向右和向下偏移2像素，模糊半径为4像素，颜色为黑色 */  
}

大小写转换： text-transform: uppercase; /* 转换为大写 */  

                       text-transform: lowercase; /* 转换为小写 */

                       text-transform: capitalize; /* 每个单词的首字母大写 */

透明度：color: hsla(0, 100%, 50%, 0.5); /* 纯红色文字，半透明 */  

其他：

 text-decoration: none; /* 去除超链接的下划线 */  
  /* 其他值包括underline（下划线，默认值）、overline（上划线）、line-through（删除线）等 */  
}