CSS属性（一）

2019-11-20 本文已影响0人水之飞亦

主要介绍五类：文本，盒模型，背景，浮动，定位。

一：文本

1.字体

font: 在一个声明中设置所有字体属性

font-family: 规定文本的字体系列
font-size: 规定文本的字体尺寸
font-style: 规定文本的字体样式。倾斜：italic（有自动倾斜的字体会用这个字体，没有的话，原文字倾斜），oblique，正常：normal
font-variant: 规定文本的字体样式
font-weight: 规定字体的粗细。有bold（数值700），normal（数值400）。或者其他数值
@font-face: 一个规则，允许网站下载并使用其他超过"Web- safe"字体的字体
font-size-adjust: 为元素规定 aspect 值
font-stretch: 收缩或拉伸当前的字体系列

2.颜色

color：设置文本的颜色

1.颜色名：red，yellow，blue等
2.十六进制：黑色：#000000，白色：#ffffff等
3.RGB：黑色：rgb(0,0,0)，白色rgb(255,255,255)。RGBA，带透明度的色值，0～1，默认为1。rgb(0,0,0,0.5)

3.格式

direction | 规定文本的方向 / 书写方向
letter-spacing | 设置字符间距

line-height | 设置行高。值是像素（px），或者百分比：50%，是相对字体大小来说的
text-align | 规定文本的水平对齐方式。left，right，center
text-decoration | 规定添加到文本的装饰效果。none，underline下划线，line-through中划线，overline上划线。a标签默认为underline，其他文本默认为none
text-indent | 规定文本块首行的缩进。值是像素（px）；百分比：50%，是相对父级宽度来说的；字符例如：2em两个中文字符宽度

<head>
    <style>
        * {
            /*清除默认样式*/
            margin: 0px;
            padding: 0px;
        }
        p {

            font-family: "Arian";
            font-size: 20px;/*字号，20像素*/

            font-weight: 700;/*粗体 bold*/
            font-style: italic;/*倾斜*/

            color: #333333;/**/

            width: 475px;
            height: 350px;
            /*
             复合属性：border-width, border-style,和border-color.
             其中border-style：点状dotted 实线solid 双线double 虚线dashed
            */
            border: 1px solid gray;


            line-height: 200%;/*等价于40px*/
            text-align: center;/*居中*/
            text-indent: 40px;/*首行缩进40像素*/
            text-decoration: line-through;/*删除线（中划线）*/
        }
        h2 {
            /*可以合写：字号/行高，字体。前两个的位置不可颠倒，其他可以*/
            font:40px/80px "宋体";
        }
    </style>
</head>

效果图

二：盒模型

主要包括：宽，高，内边框，边框，外边距。单位为px

盒模型

宽：width
高：height。可以不设置，有内部元素决定其高度
内边距：padding。复合属性，包含上下左右。也可以单独设置，
例如：padding-top，padding-bottom，padding-left，padding-right。
padding:10px 20px 30px 40px;与iOS不同的是，顺序为上右下左
padding:10px 20px 40px;三个值时，为上，左右，下
padding:10px 20px;二个值时，为上下，左右
padding:10px;1个值时，为上右下左相同
边框：border。复合属性：border-width，border-style和border-color。
border: 1px solid gray
border-width | 指定边框的宽度。同上，也是复合属性，包含上下左右。border-top-width，border-bottom-width，border-left-width，border-right-width。也可以同时设置4，3，2，1个值，或者单独设置某个边。
border-color | 指定边框的颜色。同上，也是复合属性。
border-style | 指定边框的样式。同上，也是复合属性。具体的值有：点状dotted，实线solid，双线double，虚线dashed等，更多可以查看资料。

div {
      /*同时设置四边的复合属性width，style，color*/
      border: 1px solid gray;
      /*设置某边的复合属性width，style，color*/
      border-left:  2px dashed pink;

      /*设置某属性的四边*/
      border-width: 10px 20px 30px 40px;
      border-color: red yellow blue purple;
      border-style: solid double dotted dashed;

      /*单独设置某边单一属性*/
      border-top-width: 20px;
      border-top-style: dotted;
      border-top-color: red;
}

应用：
1.三角形：

.arrow {
    margin: 100px;
    width: 0px;
    height: 0px;

    /*background-color: gray;*/
    border:40px solid white;
    border-top-color: red;
}
2.表格边框合并
  属性为border-collapse：边框合并，默认值为separate，分开的，改为collapse，即可`border-collapse: collapse;`

外边距：margin。复合属性。同padding，也有上右下左四个边。可以单设，也可以同时设置。
盒子水平居中：左右值设为auto即可。例如：border：10px 20px 30px;

效果图

补充

盒子高度可以不设置（或者auto），而是由内容来决定
当盒子限定了高度后，内容溢出，可以设置overflow：hidden;
宽度剩余：只设置左边距，不设置右边距（设置为0）。同理还有高度剩余
margin塌陷（竖直方向）
- 同级：上下两盒子都有margin值时，其相邻两个margin值会取其中的大值，而不是和值。
- 盒子嵌套：也会塌陷。并不是相对其父级盒子。
  对于这种情况，同级之间一般只设置其中一个盒子的一个边，另一个设置为0。嵌套关系呢，一般有两种：1.给父级加一个边框border，限定父盒子区域。2.父盒子设置padding，而不是子盒子用margin-top。
  5.居中：
居中：
1. 文本居中：
  - 水平方向：text-align: center;
  - 竖直方向：
    1. 单行文本，直接设置行高等于盒子高度。
    2. 多行文本，高度自适应，设置其上下padding相等即可
2. 盒子居中：
  - 水平方向：margin左右边设置为auto即可
  - 竖直方向：高度自适应，设置其上下padding相等即可