隔了好几天,继续学习!
菜鸟教程CSS实例:http://www.runoob.com/css/css-examples.html
W3SCHOOL HTML参考手册:http://www.w3school.com.cn/tags/tag_a.asp
数了一下后面的练习还是有很多的,本篇学习(练习)5个部分:文本、字体、链接、列表、表格。
———————————————文本、字体、链接、列表、表格练习———————————————
(1)文本练习:
文本对齐原图:
练习图:
练后感:比较简单,text-align(center、left、right),<b>,
* ";(“)
文本的其他属性:由于看了一下这些属性除了text-align、color其余的都不怎么熟悉,就一起都学习+练习了吧~
这部分的练习结果就不写了,太基础了。。。整理了一个表格,勉强看看
属性 | 描述 | 语法/备注 | 值/样例 |
color | 设置文本颜色 | / | rgb(255,255,255) 、#123456 、red |
direction | 设置文本方向 | / | ltr、rtl... |
line-height | 设置行高 | 在大多数浏览器默认行高约20 px | normal、number(倍数)、length(px)、percent(%)、inherit |
text-align | 对齐元素中的文本 | / | left、right、center、inherit |
text-decoration | 向文本添加修饰 | / | none、underline、overline、line-through、blink、inherit |
text-indent | 缩进元素中文本的首行 | / | 50px |
word-spacing | 设置字间距 | / | 50px |
letter-spacing | 设置字符间距 | / | 50px |
text-shadow | 设置文本阴影 | text-shadow: h-shadow v-shadow blur color; | 20px 20px 20px #123456 |
text-transform | 控制元素中的字母大小写 | / | uppercase、lowercase |
unicode-bidi | 设置或返回文本是否被重写 | / | normal、embed、bidi-override、initial、inherit |
vertical-align | 设置元素的垂直对齐 | / | |
white-space | 设置元素中空白的处理方式 | / | normal(默认忽略)、pre(保留)、nowrap(不换行)、pre-wrap()、pre-line()、inherit |
(2)字体练习
练习题:
# 设置文本的字体:font-family
# 设置字体大小:font-size
用px设置的字体的大小
用em设置的字体的大小
用百分比和em设置字体的大小
# 设置字体样式:font-style
# 设置字体的异体:font-variant
# 设置字体的粗细:font-weight
# 在一个声明的所有字体属性:font
贴个小表格:
font | 在一个声明中设置所有的字体属性 | 可行顺序之一:font-style font-variant font-weight font-size/line-height font-family | / |
font-family | 指定文本的字体系列 | family-name 、generic-family | / |
font-size | 指定文本的字体大小 | 单位:px、em、rem | / |
font-style | 指定文本的字体样式 | / | normal、italic(斜体)、oblique(倾斜)、inherit |
font-variant | 以小型大写字体或者正常字体显示文本 | / | normal、small-caps(显示小型大写字母的字体) |
font-weight | 指定字体的粗细 | 100-900:400为normal | normal、bold、bolder、lighter、inherit、100-900 |
知识点:
* em:
子元素字体大小的em是相对于父元素字体大小;
元素的width/height/padding/margin用em的话是相对于该元素的font-size
(放个链接)css中单位em和rem的区别:https://www.cnblogs.com/koubazhuanshu/p/6985331.html
* rem:
rem是全部的长度都相对于根元素,根元素是谁?<html>元素。
通常做法是给html元素设置一个字体大小,然后其他元素的长度单位就为rem。
* font顺序:
font 简写属性在一个声明中设置所有字体属性。
可设置的属性是(按顺序): "font-style font-variant font-weight font-size/line-height font-family"
font-size和font-family的值是必需的。如果缺少了其他值,默认值将被插入,如果有默认值的话。
(3)链接
练习题:
# 为访问/未访问链接添加不同的颜色:a:link、a:visited、a:hover、a:active
# 在链接上使用文本装饰:text-decoration
# 指定链接的背景颜色:background-color、background
# 超链接添加其他样式:改变文字颜色;改变背景颜色;改变字号;改变字体;改变文字修饰
# 高级 - 创建链接框:background
知识点:
* link、visited、hover、active
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击链接时 */
当设置为若干链路状态的样式,也有一些顺序规则:
a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
以上练习题都是基于了解<a>的4个状态的情况下添加的样式。
* 链接的常见样式:见练习题(插一个gif动图来看看效果 ↓↓↓)
* href是Hypertext Reference的缩写(来源百度百科)
(4)列表
练习题:
# 列表中所有不同的列表项标记
# 设置作为列表项标记的图像
# 使用跨浏览器解决方案设置一个列表项标记的图像
# 在一个声明中的所有列表属性
知识点:
* 列表
无序列表:<ul> square、circle...
有序列表:<ol> upper-roman、lower-alpha....
* 列表属性
list-style、list-style-type、list-style-position、list-style-image
? 遇到一个问题:当list-style-image引入的图片很大时(如下图),如何调整可以使图片与文字大小相符呢?
目前还没搜索到合适的答案。
(5)表格
练习题:
# 指定一个表的Th,TD元素和黑色边框:border
# 使用border-collapse
# 指定表格的宽度和高度:width、height
# 设置内容的水平对齐方式:text-align
# 设置内容的垂直对齐::vertical-align
# 指定TH和TD元素的填充:padding
# 指定表格边框的颜色:border
# 设置表格标题的位置:capital-side
# 创建一个奇特的表
知识点:
* border-collapse:separate/collapse
在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。
为了显示一个表的单个边框,使用 border-collapse属性。
* capital-side:设置表格标题的位置 top/bottom
* 练习
练后感:遇到不会的就看看样例代码,勉强做出来了,字体不想换了就没换;但是没搞懂是怎么实现每列不同宽度。
学习(练习)之路还很长远,继续努力!