专业实训第七天 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;
阅读更多
版权声明:本人小白,欢迎指正~~~ https://blog.csdn.net/shensiback/article/details/79952041
文章标签: HTML CSS
上一篇CSS命名规范(规则)常用的CSS命名规则
下一篇专业实训第八天 CSS 盒子模型+定位+简单css3动画
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭