常用CSS属性

标题:常用CSS属性

什么是CSS?

CSS（层叠样式表）是一种用于网页设计的样式表语言，它可以使得 HTML 元素具有丰富的外观和行为。以下是 CSS 的一些常用属性及其用途：**

1. 字体属性：用于设置文本的样式，如字体、字号、粗细等。

• font-family：设置文本的字体系列。
• font-size：设置文本的字号。
• font-weight：设置文本的粗细。
• font-style：设置文本的样式，如正常、斜体、偏斜体等。

//  字体属性     

font-family: Arial, sans-serif;     /*使得文本的字体系列更改为 Arial，如果系统中没有 Arial，则使用 sans-serif 字体*/
font-size: 16px;     /*文本的字号变为 16 像素*/
font-weight: bold;    /*文本变得更粗 */
font-style: italic;     /*使得文本呈斜体样式*/

2. 文本属性：用于设置文本的颜色、对齐方式、装饰等。

• color：设置文本颜色。
• text-align：设置文本的对齐方式，如左对齐、右对齐、居中对齐等。
• text-decoration：设置文本的装饰效果，如下划线、删除线、波浪线等。
• text-indent：设置文本块的缩进。
• line-height：设置文本行高。

// 文本属性  

color: red;     /*文本呈红色*/
text-align: center;    /*文本在容器内居中*/
text-decoration: underline;     /*文本添加下划线*/
text-indent: 2em;      /*文本块的首行缩进 2 个字符宽度*/
line-height: 1.5;     /*文本行的间距增大*/

3. 背景属性：用于设置元素背景的颜色、图片、位置等。

• background-color：设置元素背景颜色。
• background-image：设置元素背景图片。
• background-repeat：设置背景图片是否重复。
• background-attachment：设置背景图片是否随页面滚动。
• background-position：设置背景图片的位置。

//  背景属性                           

background-color: #FF5733;     /* 十六进制颜色值，表示橙色 */  
background-color: rgb(255, 87, 59);     /* RGB 颜色值，表示橙色 */  
background-image: url('image.jpg');     /*元素背景显示 image.jpg 图片*/
background-repeat: no-repeat;     /*背景图片不重复*/
background-attachment: fixed;     /*背景图片固定不随页面滚动*/
background-position: center center;    /*背景图片填充整个容器并居中*/

4. 盒模型属性：用于设置元素的大小、边距、圆角等。

• width：设置元素宽度。
• height：设置元素高度。
• margin：设置元素外边距。
• padding：设置元素内边距。
• border：设置元素边框的宽度和样式。
• border-radius：设置元素圆角。

//  盒模型属性                             

width: 300px;     /*元素宽度固定为 300 像素*/
height: 200px;     /*元素高度固定为 200 像素*/
margin: 10px;     /*元素的外边距为 10 像素*/
padding: 10px;    /*元素的内部边距为 10 像素*/
border: 2px solid black;    /*元素边框宽度为 2 像素，样式为实线,黑色*/
border-radius: 10px;    /*元素四角呈现圆角效果*/

5. 布局属性：用于创建复杂的页面布局。

• float：设置元素浮动。
• clearfix：清除浮动，使元素垂直居中。
• position：设置元素定位方式，如相对定位、绝对定位、固定定位等。
• top、right、bottom、left：设置元素定位的偏移量。

// 布局属性   

float: left;    /*元素向左浮动，实现横向排列*/
 .clearfix:after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
        }    /*对容器添加clearfix类会清除浮动*/
.parent{
            width: 100%;
            height: 37.5rem/* 600px */;
            background: #09c;
            display: flex;
            justify-content:center;   /* 水平居中 */
            align-items:center;    /* 垂直居中 */
            /* flex-direction:column; */   /* 一列显示 */
         }    /*如何保持浮层水平垂直居中*/
position: relative;    /*元素根据其正常位置进行相对定位*/
top: 10px; right: 20px;    /*元素向右移动 20 像素，向上移动 10 像素*/

6. 颜色和渐变属性：用于设置元素的前景色、背景色和渐变效果。

• color：设置元素的前景色。
• background-color：设置元素的背景色。
• background-gradient：设置元素背景的渐变效果。

// 颜色和渐变属性

color: red;  /*文本是红色*/
background-color: blue;    /*蓝色背景的文本*/
background-image: linear-gradient(to right, red, blue);    /*渐变背景*/

7. 列表属性：用于设置列表的样式。

• list-style-type：设置列表项的样式，如圆圈、方框、阿拉伯数字等。
• list-style-position：设置列表项的定位方式，如内联定位、外部定位等。
• list-decoration：设置列表项的装饰效果，如默认项下划线等。

// 列表属性

list-style-type: circle;    /*圆圈样式的列表*/
list-style-type: decimal;   /* 设置列表项样式为逗号分隔的数字 */
list-style-position: outside;    /*是一段外部定位的列表*/
list-decoration: none;    /*是一段无下划线的列表*/
list-decoration: underline; /* 设置列表项下划线装饰 */

8.伪类和伪元素属性：用于选择和操作特定状态的元素。

• :hover：设置鼠标悬停效果。
• :active：设置元素激活状态。
• :visited：设置已访问链接的样式。
• :link：设置未访问链接的样式。
• ::before、::after：在元素内部或外部插入内容。

// 伪类和伪元素属性

<img src="image.jpg" style="width: 100px; transition: background-color 0.3s; cursor: pointer;" alt="图片描述">    /*当鼠标悬停在图片上时，改变图片颜色*/ 

<button style="background-color: blue; color: white; border: none; padding: 10px 20px; cursor: pointer;" type="submit">提交</button>    /*设置按钮按下时的样式*/

p:before{
content:"台词：";
}    /*在元素内部插入内容*/

/* 鼠标悬停效果 */  
   a:hover {  
     color: blue;  
     background-color: lightyellow;  
   }
   
   /* 按钮激活状态 */  
   button:active {  
     background-color: lightblue;  
     border-color: lightgray;  
   }