CSS的常见声明！

#CSS的网页排版不仅可以控制文本的大小、颜色、对齐方式、字体，还可以控制行高、首行缩进、字母间距和字符间距等#

一、常见声明（设置字体样式）

1、字体类型

属性	说明
font-family	设置字体的类型
font-weight	设置字体的粗细
font-size	设置字体的大小
font-style	设置字体的倾斜

①前言

字体两个类型的作用：传递语义功能、美学效应
字体大小：font-size：绝对尺寸 | 相对尺寸
字体粗细：font-weight：bold （粗体）| number（默认字体） | normal （比默认字小）| lighter（比默认字体大） | 100 - 900（400相当于关键字normal，700相当于bold）
字体倾斜：font-style：normal （正常）| italic（斜体） | oblique（倾斜体）

②字体样式的运用：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
      .font{
        color:red;
        font: size 30px;
        font-family: 楷体;
        font-weight: 2px;
        font-style: italic;
      }
  </style>

</head>
<body>
   <p class="font"> 测试字体属性</p>
</body>
</html>

运行代码后如下

2、设置文本样式

属性	说明
text- align	设置文本的水平对齐方式
line- height	设置行高
text- decoration	设置文本修饰效果
text-indent	设置段落的首行缩进
first-letter	设置首字下沉
text-overflow	设置文本的截断
color	设置文本的颜色
backgroune-color	设置文本的背景颜色

①前言

文本样式的设置可以改变文字本身的效果。
通常使用font前缀和text前缀来区分两类不同性质的属性。
文字水平对齐方式：text- align：left | right | center | justify (两端对齐)
行高：line - height : length（长度值） | normal （默认行高）
文本的修饰：text-decoration:underline(下划线) | | blink（）闪烁 || overline （上划线）|| line-through（贯穿线） | none（无装饰）
段行首行缩进：text-indent：length（为百分比数字或有浮点数字、单位标识符组成的长度值）

②文本样式的运用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      #font2{
          width:480px ;
          height: 60px;
          background-color: gray;


          color:green;
          font: size 30px;
          font-family: 楷体;
          font-weight: 2px;
          font-style: italic;
          /* 这个水平对齐方式是指相对于元素容器来说的位置 */
          text-align: center;
          /* 文字修饰线： */
          text-decoration: underline;
      }
</style>

</head>
<body>
  <p class="font" id="font2">测试字体属性</p>
</body>
</html>

运行代码后如下

二、图片属性

属性	说明
width / height	设置图像的缩放
border	设置图像边框样式
opacity	设置图像的不透明度

1、前言

图片样式包含了图片缩放和图片边框，图片既<img>元素。
<img>元素在页面中的分格样式仍然用盒子模型设计。
opacity取值范围0.0~1 透明度从大到小

2、图片样式的运用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片属性</title>
    <style>
        #img{
            width:600px;
            height: 300PX;
            background-color: antiquewhite; 
            /* border-color: red;
            border-width: 30px;
            border-style: dashed;  */

              /* 可以对三个属性合并写 */
            border:red 30PX dashed; 
            /* 图像不透明度 ,取值范围0.0~1*/
            opacity:0.5;
        }
     </style>
</head>
<body>
   <img id="img1" src="./橘子.jpg">
</body>
</html>

运行代码后如下

三、背景属性

属性	说明
background-image	设置背景图像
background-repeat	设置背景图像重复方式
background-position	设置背景图像定位
background-attachment	设置背景图像固定
background-size	设置背景图像大小

1、前言

CSS中不仅可以设置背景颜色，还可以用background-image来设置背景图像
CSS中背景重复（background-repeat）使用很小的图片就可以铺满整个页面，有效地减少图像字节地大小
background-image：url() | none
background-repeat:repeat | no-repeat(图片不平铺) | repeat-X（水平方向平铺） | repeat-y（垂直方向平铺）

background-position:top center | right | left | bottom

2、背景属性的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景属性</title>
    <style>
        footer{
            width: 600px;
            height: 300px;
            /* background-color: rgb(241, 237, 177); */
            background-image: url();
            background-repeat:no-repeat;
            /* 背景图适配容器大小 */
            background-size: 25% 25%;
            
            /* 背景图的位置：横向：left,center,right   纵向： */
            background-position:center center;
             /* 1、背景颜色 */
             background-color: antiquewhite;
            /*2、 背景图片 */
            background-image: url(./橘子.jpg);
            /*3、 背景重复 */
            background-repeat: no-repeat;
            /* 4、背景位置 top center right left bottom */
            background-position: content-box;
            /* 5、设置背景的范围    border-box 默认值，背景颜色会出现在边框的下边

                                padding-box 背景不会出现在边框，只会出现在内容区和内边距

                                content-box 背景只出现在内容区 */
            background-clip:  border-box ;
            /* 6、设置图片背景的偏移量计算的原点，配合偏移量使用的
                padding-box 从内部距处开始计算

                content-box 背景图片的偏移量从内容区处计算

                border-box 从边框开始计算偏移量 */
            background-origin: border-box;
            /* 7、设置图片的大小 */
            background-size: auto;
            
        }
    </style>
</head>
<body>
    <header></header>
    <nav></nav>

    <main>
        <article></article>
        <aside></aside>
    </main>

    <footer></footer>
</body>
</html>

代码运行后如下：

四、表格属性

属性	说明
border-collapse	设置表格的行和单元格地边是合并在一起还是按照标准地HTML样式分开
border-spacing	设置当表格边框独立时，行和单元格地边框在横向和纵向上地间距
empty-cells	设置当表格的单元格无内容时，是否显示该单元格的边框
background-color	设置表格背景颜色
width / height	设置表格的大小
vertical-align	设置单元格内文本垂直对齐位置
text-align	设置单元格内文本水平对齐位置

1、前言

CSS表格属性常用来改善表格的外观。
border-collapse：separate （默认值，边框分开，不合并）| collapse（边框合并）
border-spacing：length
empty-cells：hide | show

2、表格属性的运用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格属性</title>
    <style>
        .table{
            width: 300px;
            height: 150px;
            /* 表格大小 颜色 外部线型 */
            border:2PX  red solid;
            /* 边框线折叠 */
            border-collapse: collapse;
            /* 整张表格的背景色 */
            background-color: azure;
            /* 整张表格文本颜色*/
            color: aqua;
            /* td{
                text-align: center;
            /* 设置单元格内文本垂直对齐位置 */
                 vertical-align: top;
                
            /* } */ 

        }
        #td9{
            background-color: green;
            color: black;
            /* 设置单元格内文本水平对齐位置 */
            text-align: center;
            /* 设置单元格内文本垂直对齐位置 */
            vertical-align: top;
        }

    
    </style>


</head>
<body>
    <table border="1" class="table">
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td id="td9"> </td>
        </tr>

    </table>
</body>
</html>

代码运行后如下

五、表单属性

1、前言

CSS中的表格元素可以美化表单，其中包含了常用的文本域、单选钮、复选框、下拉菜单和美化菜单。
表格元素为<form>元素。

2、表单属性的运用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单属性</title>
    <style>
         #text2{
            width: 400px;
            height: 50px;
            border-image: url();
            background-color: bisque;
            border: 2px red double;
            color: blue;

         }
         #btn2{
            width: 100PX;
            height: 50px;
            color: aquamarine;
            background-color: brown;
            border:  2px red dashed;
            cursor: pointer;
         }

    </style>
</head>
<body>
    <form action="">
        <input type="text"  id="text1">这是默认文本输入框
        <br>
        <input type="text"  id="text2"value=“此处输入您的账号>这是个有默认值的输入框<br>
        <input type="text" id="btn1">这是默认按钮<br>   
        <input type="text" id="btn2" value="按钮">这是设置了样式的按钮<br>       
    </form>
</body>
</html>

代码运行后如下