今日总结

css初识

css表示层叠样式表

css主要作用是为了美化html网页，是html的美化师，

css引入的方式

外链式

<link rel="stylesheet" href="./style.css" 这是一个外链式的语法

div {
    font-size:16px;    /*这就是一个css文件*/
}

外链式写在css文件中，通过link标签和html文件相连，一般用于大型的项目中，可以实现html和css分离。

行内式

<div style="font-size: 16;">  <!--这就是一个行内式-->
     这是一个盒子
 </div>

行内式是只作用于当前标签，一般不怎么用，后期会配合js来使用。

内联式

<style>
 div {
     font-size:19px;
 }
</style>

内联式写在html中的head标签里面，作用于当前页面，一般用于小项目当中。内联式是使用最多的方式。

css的基础选择器

类选择器

<style>
    .one {
        font-size:16px; 
    }
</style>

上面就是一个类选择器的语法，类选择器由.加上类名(.one)来调用，在标签里由class=“类名”，但是在类名中，不能由数字和下划线、中划线开头，类名可以有数字、字母、下划线组成，一个标签可以有多个类名，一个类可以被多个标签调用。

<style>
    .one {
        font-size:16px; 
    }
    .two {
        font-size:16px; 
    }
</style>
​
<div class="one two">
    标签调用多个类的话需要用空格隔开
</div>

标签调用多个类的话需要用空格隔开

标签选择器

标签选择器可以选择一个网页中的一个整体的标签

结构：标签名 { 属性值}

p {
    font-size:16px;
}

比如选择了p标签之后，那么html中的所有p元素都被选中，可以整体更改样式，不过标签选择器用的不是很多，多用于清除网页的固定布局。

* {
    margin;0px;
    padding:0px;
}

id选择器

id选择器的结构 # 标签名 { 属性值}，在html标签中用id=“"标签名"

<div id="box">
    这是一个id选择器盒子
</div>

#box {
    font-size:16px;
}

id选择器相当于一个身份证号，只能用一次，一个id选择器只能被一个标签使用，一个标签只能用一个id选择器

通配符选择器

通配符选择器默认选中所有标签，可以给html所有标签设置样式，但是只有极少数情况下才使用。

<style>
        * {
            color: grey;
            font-size: 20px;
        }
    </style>

字体的样式

字体的大小

字体的大小用font-size来实现

<style>
    .one {
        font-size:16px;
    }
</style>

字体的粗细

字体的粗细用font-weight来实现

<style>
        div {
            font-weight: 700;
        }
</style>

• 字体加粗后面的属性值不需要加px，一般加粗字体的值设置为700，字体不加粗的值设置为400。

字体的样式

字体的样式用font-style来实现，一般有normal、italic两个值比较常用，在em标签中，用font-style：norma；可以实现让倾斜的字体变正常。

   em {
            font-style: normal;
        }

   <em>让倾斜的文字变正常</em>

字体系列

字体系列用font-family里面有各种各样的字体系列，可以根据自己的需求来选择

<style>
    div {
        font-family:"微软雅黑";
    }
</style>

字体的连写

字体的连写|font : style weight size family;| 按照 swsf(是我师傅)的顺序，在字体的连写中，可以省略前两个属性，size和family是必须要写的属性。如果不写前两个那就算是默认属性样式。

文本样式

文本水平对齐方式

文本水平对齐方式：text-align ，可以将文本水平对齐，取值为：left、right、center。这个标签需要给当前文本的父级标签定义text-align 才能实现，例如

  <div class="box">
      文本水平居中
</div>

.box {
        background-color: grey;
           width: 300px;
           height: 300px;
           color: honeydew;
           text-align: center;
}

文本缩进

文本缩进：text-indent: 2em ; em是计量单位，1em等于当前文本的字体大小，所以2em就相当于往前缩进两个字体。

<style>
        p {
            text-indent:2em;
        }
        /*1em表示当前文本文字的大小，所以2em就相当于首行缩进2个文字 */
    </style>

字体的修饰（decoration）

属性名：text-decoration：属性值; decoration表示装饰的意识。其取值如下图：

 <style>
        a {
            /* 删除链接的样式 */
            /* text-decoration: none; */
            /* 加下划线 */
            /* text-decoration:underline; */
            /* 加删除线 */
            /* text-decoration:line-through; */
            /* 加上划线 */
            /* text-decoration:overline; */
        }
    </style>

盒子水平居中方法

如果需要让div、p、h（大盒子）水平居中可以用margin:0 auto; 来实现，

如果需要让 div、p、h（大盒子） 水平居中，直接给当前元素本身设置即可

margin：0 auto 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度

<style>
        .box {
            width: 300px;
            height: 300px;
            background-color: #000;
            margin:0 auto;
        }
    </style>
​
  <div class="box">
        盒子居中对齐
    </div>
​

行高

line-height 表示文本的行高，就是文本的上下的间距,line-height等于盒子的高度就可以让文本水平居中。line-height=1可以文本的上下间距。一般文本都有自己默认的上下间距。

<style>
        div {
            width: 300px;
            height: 300px;
            font-weight: 700;
            text-align: center;
            background-color: beige;
            line-height:300px; 
           /* line-height: 1; */        
        }
    </style>

  <div>
       文本居中
   </div>