12.23~12.30周报
【###### 每次做网页都有如下感想(作为一个初学者):
想让一个页面好看就必须有好看的图片,搭配好看的颜色,但有时你的页面必须出现文字呀,却又不知道怎样把文字变得好看一点:感觉天了文字之后整个页面都不如之前好看了,所以这里我们就要学习一个新的技能:css文本属性】
本周学习的知识点
本周分享知识点
1.文本缩进
test-indent属性 所有元素的第一行都可以缩进一个给定的长度,这个长度的值可以时正值,可以是负值也可是百分数。
一般的,可以为所有块级元素应用text-indent,但无法将这个属性应用到行内元素,图像之类的替换元素上也无法应用text-indent属性。不过,如果一个块级元素(如段落)的首航中有一个图像,他会随着该行的其余文本移动。/其实如果想把一个行内元素的第一行缩进,也可以通过改变内左边距和外边距来实现相同的效果/。
eg1:
{test-indent: 10px;}
{tese-indent: 10cm;}
{test-indent: 5em;}
{test-indent: -5em;}
- 这里的em指字体高,任意浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为16px*62.5%=10px, 这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。em有如下特点:
- em的值并不是固定的;
- em会继承父级元素的字体大小。
分享这样一段代码:
<!--继承-->
div#outer{
width: 500px;
}
div#inner{
test-indent: 10%;
}
p{
width: 200px;
}
//
<div id="outer">
<div id="inner">just once test
<p>this is a example.</p>
</div>
</div><!--p的文字也会错仅为原来的10%因为它继承了上面inner的属性;-->
- 水平对齐
test-align
值left丶right和center会导致元素中的文本分别左对齐丶右对齐和居中。
justify 两端对齐
3. 字间隔
word-spacin属性
可改变字(单词)之间的标准间隔。
同样值可以为正值也可以为负值
eg:
{word-spacing:30px;}
{word-spacing:-0.5em;}
- 字母间隔
letter-spacing属性
修改字母之间的间隔
eg:
letter-spacing:-0.5em;
- 字符转换
text-transform属性:
属性 | 功能 |
---|---|
none | 无变动 |
uppercase | 转大写字母 |
lowercase | 专小写字母 |
capitalize | 首字母大写 |
6.文本装饰
text-decoration属性:
属性 | 功能 |
---|---|
none | 不改变 |
underline | 下划线 |
overline | 上划线 |
line-through | 在文本中间画一条贯穿线 |
blink | 让文本闪烁 |
我觉得锚与正常文本之间在视觉上的唯一差别就是颜色吧,如果你想让你的锚变好看点可以利用文本装饰,比如:
a:link a:visited{
text-decoration:uderline overline;
}
本周遇到的难点问题及疑惑
- 之前写网页时,遇到那种要弄一个超链接,弄好之后特别不好看,只有蓝色的字体和下划线,直到学习了文本装饰后才发现原来那个下划线只需要一个简单的属性就能把它弄没。
- 再打c语言链表这部分题的时候发现结构题数组这方面自己还是没弄太懂,下去还是要好好看看那一章。
- 写网页时发现对那种本地图片弄成在线图片不太明白,下去要好好研究研究。
下周学习计划
- 首先一定要把结构体数组那块儿弄懂。
- 前端的下周决定学习css框模型。
- 好好复习丶备考期末。