- 本节涵盖:文本(行高、首行缩进、居中)、锚、伪类、表格、display
学习任务
1.line-height 有什么作用?
- line-height 行间距
- 对一行文字,让它在
<div>xxxx</div>
里面垂直居中
- line-height常用方法:
div {
border:1px solid #ccc;
text-align:center;
height:80px;
line-height:80px;}
2.如何去查 CSS 属性的兼容性?比如 inline-block 哪些浏览器支持?
3.a 标签的href, title, target 是什么? title 和 alt 有什么区别?如何新窗口打开链接?
-
href:"#"
代表当前页面
-
<a href:"#" target="_blank">
在新窗口打开( target="_blank")
- 一个访未访问的链接,默认颜色是蓝色
一个访问过的链接,默认颜色是紫色
对链接设置颜色,不会识别是否访问过。
去掉链接的下划线:用text-decoration:none
(去掉文本装饰)
- 伪类选择器,伪类是代表一种状态,而不是针对某个特别的元素
当使用多个伪类时,应遵循的顺序为::link :visited :hover :focus :active
<a href="http://www.baidu.com">百度</a>
a {
color:#fff;(我是链接/饥人谷,字体白色显示)
text-decoration:none; (去掉下划线)
border:1px solid #ccc;(添加灰色实线边框)
padding:4px;
background:#330000;(背景色深棕色)
border-radius:3px;(边框圆角)
transition:color 0.3s;(变化的时候,是渐变的过程,持续时间0.3秒)
}
a:hover {
color:#eee;(当光标停留在按钮,背景色以0.3秒时间渐变为灰白色)
}
a:active {
background:blue;(当点击按钮,背景色以蓝色显示)
}
- 当对div进行css样式设定时,a标签不会生效,想要a标签生效需要单独对其添加样式(a标签字体大小会继承,css样式不会被继承)
-
.div a
是后代选择器(结合了类选择器),选择器一端用两个以上空格分隔。解释为:a作为div1的一部分;a在div1中找到;a作为div1的后代。
<div class="div1">div1
<p class="2"> 我是段落2</p>
<a href="#">我是链接</a>
</div>
<style>
.div1 {
color:red;
}
.div1 a {
color:yellow;
}
</style>
<a href=''#here''>我是链接</a>
<div class ="div2">
</div>
<p id="here">ddddddd</p>
- 在新窗口打开
特性值:target="_blank"
<a href="tips" target="_blank">hunger</a>
...
<p id="tips">点击链接跳转到这里</p>
表格
-
border-collapse:collapse
边框重叠,折叠后边框变为单线
- 对table设置width,表格的宽度为固定宽度,不随内边距变化而变化;对th、td应用内边距,单元格的内容区会变小
-
display:table-cell
可应用于表格,与vertical-align:center; text-align:center"
同时应用,让元素水平、垂直方向居中
图片是行内元素,让图片在div(表格)中水平垂直居中,应用display:table-cell
属性,即让div拥有表格的特性
<div class="div2">
<img scr="https://.......com/u/.....">
</div>
其他要点:
-
text-indent:2em
首行缩进两个字符(中文的书写习惯)
text-indent可使用负缩进,使用负缩进建议加外边距或内边距
-
word-wrap:break-word
折行(对字符自动换行)
-
text-align:center
与margin:0 auto
有什么区别?
前一个是给inline(内联)元素用的,后一个是给block(块级)元素用的。
-
text-align:center
与<CENTER>
的区别
<center>是将所有被包含的元素都居中显示,而text-align:center只是将元素(块级元素)下面的内联元素居中显示。
-
text-align:justify
如何生效
链接:w3c css:text-align属性
为什么单独设置text-align:justify;不起作用,非要在后面加一个内联块状元素宽度为100%的才可以?
<p class="center">我是两端对齐文字端对齐文字<span></span></p>
.center{
text-align:justify;
}
span{
display:inline-block;
width:100%;
}
- 这个是因为text-align不会处理被打断的行和最后一行。因为你这里的文字只占了一行,所以也是最后一行了,所以text-align设置为justify不会产生任何效果。
- 解决方法:使用text-align-last,并将其设置为justify。不过不幸的是,text-align-last不是所有浏览器支持。
- 对于不支持text-align-last的,可以在最后一行人工生成两行文本,然后把第二行隐藏了,那么我们要显示的第一行自然就可以实现两端对齐了。
span是inline-block,也可以设置宽度(100%),那么这个时候内联匿名盒的宽度超过行盒,浏览器会将其拆成两行,自然第一行文本的text-align效果就生效了。你的实现刚刚好是上面的第二个实现方法。