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

标签: HTML CSS
15人阅读 评论(0) 收藏 举报
分类:

总结

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

记忆吧-少年!

  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;
查看评论

大一软件专业实训报告

实训报告 我于2014年6月3日致6月8日进行了学校安排的实训,这次特意将专业见习提到大一,在本月的六月三号,我们开始了为期一星期的专业见习。这次实训让我们大一学生更好的了解自己本专业的知识以及将来...
  • worldwsyw
  • worldwsyw
  • 2014-06-09 13:19:17
  • 638

html+css学习总结

实习第一天,上午在项目经理的帮助下完成了J2EE开发工具的基本安装。 今日任务:运用HTML绘制简历表格 学习情况:基本完成了对HTML基础部分的学习,但是对HTML+Css的使用仍然不是很熟练的。 ...
  • tangzenglei
  • tangzenglei
  • 2015-03-30 17:35:34
  • 469

MySQL实践总结

一直在使用MySQL,本文就工作中常用的MySQL语句及查询优化进行简单的总结,方便自己记忆。...
  • z410970953
  • z410970953
  • 2016-01-06 19:59:15
  • 1077

电子信息工程技术专业实训报告

  • 2009年11月12日 22:39
  • 37KB
  • 下载

软件专业实训总结

  • 2013年01月12日 17:59
  • 36KB
  • 下载

软件专业毕业实训报告

  • 2011年05月03日 12:47
  • 33KB
  • 下载

专业实训之三家智慧养老有限公司的商业模式画布20180407

1、老来网一、重要伙伴:湖南省长沙市社会保障局二、关键业务:在河南省长沙市社会保障局的支持下,历时数月,经公司团队的不懈努力,制作出一款能让广大老年人在手机上社保认证——手机社保资格认证系统三、核心资...
  • qizhehaiguidehouniao
  • qizhehaiguidehouniao
  • 2018-04-07 22:59:20
  • 69

我的软件工程之路(五)—四个月总结

我的软件工程之路并没有按计划更新 ,有些感觉对不起自己,客观原因是比较忙,一方面因为换了一个新环境,要适应工作,另一方面也是因为要考工程硕士,学习备考科目,还要继续学习跟自己工作相关的java web...
  • shan9liang
  • shan9liang
  • 2013-01-19 14:18:06
  • 2300

中兴内部员工培训 移动通信基本知识

  • 2009年02月22日 00:24
  • 658KB
  • 下载

数字媒体技术实训基地方案

数字媒体技术 平面设计 ...
  • softwave
  • softwave
  • 2006-08-22 17:56:00
  • 2161
    个人资料
    持之以恒
    等级:
    访问量: 649
    积分: 355
    排名: 22万+
    文章存档