专业实训第七天 HTML+CSS样式

总结

今天讲的知识更加的繁杂，并不是很难，但是知识量大，而且练的比较少，难以熟练应用，各知识点之间的连贯性不是很强，不能融会贯通~~
所以老师会让记大量的笔记，并且要求背下来。可能只有背下来或者用的多了记住了，才可以使用的熟练吧–熟能生巧。。

记忆吧-少年！

1. css字体样式–font；
   1.字体尺寸–font-size：
   font-size的取值有两种：
   1. 固定尺寸取值：px；
   2. 相对于根元素尺寸取值：rem；
   px取值：font-size：16px;//固定取值样式;
   rem取值：根元素：HTML，一个网页中只有一个根元素HTML;
   HTML默认尺寸为16px
   rem取值就是取16的倍数;
   语法：p{font-size：.75rem;} //即16 * 0.75 = 12;
   手机网页主要使用rem取值
   
   1. 字体的类型—font-family:一般情况下默认为”微软雅黑”;
      如果我们想给整个页面都设置为微软雅黑：
      body{font-family:微软雅黑}
      如果计算机不支持汉字取值：
      body{font-family:microsoft yahei;}
   2. 字体加粗font-weight：bold;加粗
   3. line-height:
      line-height = font-size + line-space;
      行高 = 字体尺寸 + 行间距;
      在一个多行的文本内容里面，我们可以通过设定行高；
      来调整每行内容的行间距；
      如果在父级标签内，只有一行内容，那么给父级标签设定line-height:
      父级标签的高度，就可以实现子级内容在父级的垂直居中。
      line-height能够解决行标签和块标签的垂直居中
      但是解决不了行内块标签的垂直居中—-img
   4. 解决图文混排在父级上垂直居中问题：
      如果存在左图右文，那么我们单纯给父级设置line-height=父级高度；
      这样只会让文字居中，不能让图片居中，
      原因 ：图片和文字的对齐方式是以底边为对齐的；
      如果我们想要图片也能垂直居中就需要让图片和文字以中轴线对齐；
      设置方式：给图片设置样式img{vertical-align:middle;}
2. 文本内容样式设置：text;
   首行缩进：text-indent：2rem;首行缩进两个字;
   text-indent:60px;可以设定首行缩进固定的尺寸值;
3. 水平对齐
   text-align：left,right,center;
   文本内容是靠左对齐，靠右对齐，居中对齐；
   该属性可以实现行标签，行内块标签的水平居中；
   默认等于父级宽度的块标签，只能实现块标签内部文字的水平居中，
   设定具体宽的的块标签是无法水平居中的
4. 文本修饰：text-decoration：
   作用：去除文本下划线；
   用法：text-decoration:none;
5. 字间距：letter-spacing://英文称呼字符间距；
   改变的是一段文字中，最小单元的水平间距；
6. ul列表样式：
   list-style:取值为none
   作用：去除列表的类型；
7. 链接样式< a >:
   a标签的样式具有状态性；带有状态的样式设置以”:”开头；
   :link—–没有被点击时；
   :visited—-点击结束时；
   :hover—-鼠标悬停时；
   :active—-鼠标点击时；
   我们在日常工作中经常用到的状态是：hover鼠标悬停在标签上的时候，
   因为任何的标签都可以被鼠标放上去，所以我们可以用：hover结合选择器
   形成一个叫做”状态伪类选择器”
   状态伪类必须和其他的选择器结合才能够有效使用，状态伪类也有权重系数；
   权重系数：10；
   作用：给样式的出现增加一个出发的条件，伪装成用户可以操作的假象；
8. 过渡：transition:过渡的对象 过渡的时间 过渡的运动方法(linear);
   过渡的第一个取值：如果你只需要设定一个动作类型的变形；
   那么取值直接写上改变性类型；
   如果我们需要一次执行多个变形过程，
   这个时候我们就需要设置值：all
   过渡属性放在发生变形动作的标签上，但是最好不要放到：hover状态的标签内。
9. 背景：background
   background-color背景色；
   background-image背景图；
   background-repeat背景平铺；
   background-position背景定位；
10. background-position：
    取值有两大类：
    
    1. 关键词取值：top,left,center,bottom,right
    2. 固定的像素值取值：background-position：距离左边的像素值 距离上边的像素值；
       利用来进行背景图定位，就可以实现对一张大图上的局部图片进行调用。
    3. 如果图片尺寸小，但是设置背景的盒子大，
       此时为了让图片铺满整个盒子，我们需要使用一个css3样式属性background-size: cover;
11. 浮动：float： 取值：left向左，right向右，none不浮动
    浮动原理：父级标签内的子级浮出父级框的束缚，通过向左向右排列的方式，让参与浮动的子级标签排为一行；
    而且所有参与浮动的标签，无论之前是什么标签最后变为：块标签，
    默认宽度自动收缩为内容的宽度。
    在前端开发中，我们一般不设置网页的具体高度；
    这样的在浮动的情况下，父级一般会出现高度消失。背景色不见了这样的情况；
    所以我们需要学习如何清空浮动带来了负面；
    如果我们需要给失去高度的父级恢复高度：做法：
    父级标签:after{content:”“;dispaly:block;
    visibility:hidden;clear:both;
    }
    给失去高度的父级标签的内容后面，插入一个为空的内容；这个为空的内容显示为block块标签；
    我们只是将内容隐藏了；给这样一个块做一个不参与浮动的设置。
    如果不参与浮动的标签跟随参与浮动的内容跑了， 那么我们就给跑了的标签设置一个clear:both;