任务六笔记

预习的方式可以看课件或者w3c

HTML CSS 基础课程  任务六笔记

一、line-height

line-height行高,调整文字间的距离,可以在div使文字垂直居中,(line-height=height),只是针对按钮,或者小部分文字适用,如果是大段文字,不适合line-height:2,文字本身是1,上下距离各0.5

二、代码兼容性

can i use网站查看

三、text-indent首行缩进

text-indent:2em缩进2个字符

自动折行是以单词为分隔,如果一个单词比较长,会一直往后,不会换行,溢出;可通过word-wrap:break-word;强制折行

四、a标签

默认是是蓝色的,带下划线的,访问过的话,是紫色的。如果连接中不想要下划线,可设置text-decoration:none即可

<a href="" ></a>

在编辑a标签时,herf属性一定要加上,href="#"是当前页面;如果不加,是默认的文本标签,鼠标放到上面不是手型,而是可编辑的样式

伪类使用时,transtion属性一般放在a标签,而不是a:hover

.div1:hover

border-radius圆角,

targe="_blank"

五、样式的继承性

div设置颜色属性,里面包含的所有其他都会变,除非单独设置,比如div包含a标签,div的设置不对a起作用,但是其他设置有效

六、锚点

在同一文章中篇幅过长或者想连接到其他页面,只需设置如下,即可跳转、

<a href="#here">

</a>点击这里即可跳转到下面

<p id="here"></p>

七、表格

表格的使用场景:就是显示为表格

表格的设置:table、tr(行)、td(列)、th(表头)、text-align:center

表格中的文字、图片默认的垂直水平居中

设置元素、图片垂直居中可采用类似方法 display:table-cell;vertical-align:middle;text-align:center;(vertical-align使用范围)让一个图片文字在div水平垂直居中,只用vertical-align不起作用

display:none inline block inline-block table-cell

diaplay:none让元素彻底消失,不占位置,脱离文档流;dome节点中还是存在的

opacity:设置为0 ,看不见

visiblity:hidden让元素隐藏,但是还是实际存在的,只是看不见,类似于透明;dome节点中还是存在的

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,826评论 1 92
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 3,331评论 0 5
  • 一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css...
    KunMitnic阅读 980评论 0 1
  • CSS格式化排版 1、字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例...
    张文靖同学阅读 1,315评论 0 3
  • 我的婚姻没有浪漫,只有生活 纯梅子:签约作家,专栏作者,职场高管兼全职辣妈,欲望极艳,生活极淡。公众号:“从大傻到...
    纯梅子阅读 662评论 0 0