菜鸟学习笔记——前端开发（HBuilder）——CSS（2）

隔了好几天&＃xff0c;继续学习&＃xff01;

菜鸟教程CSS实例&＃xff1a;http://www.runoob.com/css/css-examples.html

W3SCHOOL HTML参考手册&＃xff1a;http://www.w3school.com.cn/tags/tag_a.asp

数了一下后面的练习还是有很多的&＃xff0c;本篇学习&＃xff08;练习&＃xff09;5个部分&＃xff1a;文本、字体、链接、列表、表格。

———————————————文本、字体、链接、列表、表格练习———————————————

&＃xff08;1&＃xff09;文本练习&＃xff1a;

文本对齐原图&＃xff1a;

练习图&＃xff1a;

练后感&＃xff1a;比较简单&＃xff0c;text-align&＃xff08;center、left、right&＃xff09;&＃xff0c;&＃xff0c;

    *    "&＃xff1b;&＃xff08;“&＃xff09;

    文本的其他属性&＃xff1a;由于看了一下这些属性除了text-align、color其余的都不怎么熟悉&＃xff0c;就一起都学习&＃43;练习了吧~

这部分的练习结果就不写了&＃xff0c;太基础了。。。整理了一个表格&＃xff0c;勉强看看

&＃xff08;2&＃xff09;字体练习

练习题&＃xff1a;

#    设置文本的字体&＃xff1a;font-family
#    设置字体大小&＃xff1a;font-size
        用px设置的字体的大小
        用em设置的字体的大小
        用百分比和em设置字体的大小
#    设置字体样式&＃xff1a;font-style
#    设置字体的异体&＃xff1a;font-variant
#    设置字体的粗细&＃xff1a;font-weight
#    在一个声明的所有字体属性&＃xff1a;font

贴个小表格&＃xff1a;

知识点&＃xff1a;

*    em&＃xff1a;

    子元素字体大小的em是相对于父元素字体大小&＃xff1b;

    元素的width/height/padding/margin用em的话是相对于该元素的font-size

&＃xff08;放个链接&＃xff09;css中单位em和rem的区别&＃xff1a;https://www.cnblogs.com/koubazhuanshu/p/6985331.html

*    rem&＃xff1a;

    rem是全部的长度都相对于根元素&＃xff0c;根元素是谁&＃xff1f;元素。

    通常做法是给html元素设置一个字体大小&＃xff0c;然后其他元素的长度单位就为rem。

*    font顺序&＃xff1a;

    font 简写属性在一个声明中设置所有字体属性。

    可设置的属性是&＃xff08;按顺序&＃xff09;&＃xff1a; "font-style font-variant font-weight font-size/line-height font-family"

    font-size和font-family的值是必需的。如果缺少了其他值&＃xff0c;默认值将被插入&＃xff0c;如果有默认值的话。

&＃xff08;3&＃xff09;链接

练习题&＃xff1a;

#    为访问/未访问链接添加不同的颜色&＃xff1a;a:link、a:visited、a:hover、a:active
#    在链接上使用文本装饰&＃xff1a;text-decoration
#    指定链接的背景颜色&＃xff1a;background-color、background
#    超链接添加其他样式&＃xff1a;改变文字颜色&＃xff1b;改变背景颜色&＃xff1b;改变字号&＃xff1b;改变字体&＃xff1b;改变文字修饰
#    高级 - 创建链接框&＃xff1a;background

知识点&＃xff1a;

* link、visited、hover、active

a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击链接时 */当设置为若干链路状态的样式&＃xff0c;也有一些顺序规则&＃xff1a;

    a:hover 必须跟在 a:link 和 a:visited后面

    a:active 必须跟在 a:hover后面

以上练习题都是基于了解的4个状态的情况下添加的样式。

*    链接的常见样式&＃xff1a;见练习题&＃xff08;插一个gif动图来看看效果    ↓↓↓&＃xff09;

*    href是Hypertext Reference的缩写&＃xff08;来源百度百科&＃xff09;

&＃xff08;4&＃xff09;列表

练习题&＃xff1a;

#    列表中所有不同的列表项标记
#    设置作为列表项标记的图像
#    使用跨浏览器解决方案设置一个列表项标记的图像
#    在一个声明中的所有列表属性

知识点&＃xff1a;

*    列表

无序列表&＃xff1a;

square、circle...
有序列表&＃xff1a;
upper-roman、lower-alpha....


*    列表属性

list-style、list-style-type、list-style-position、list-style-image

&＃xff1f;  遇到一个问题&＃xff1a;当list-style-image引入的图片很大时&＃xff08;如下图&＃xff09;&＃xff0c;如何调整可以使图片与文字大小相符呢&＃xff1f;

目前还没搜索到合适的答案。




&＃xff08;5&＃xff09;表格

练习题&＃xff1a;

#    指定一个表的Th&＃xff0c;TD元素和黑色边框&＃xff1a;border
#    使用border-collapse
#    指定表格的宽度和高度&＃xff1a;width、height
#    设置内容的水平对齐方式&＃xff1a;text-align
#    设置内容的垂直对齐&＃xff1a;&＃xff1a;vertical-align
#    指定TH和TD元素的填充&＃xff1a;padding
#    指定表格边框的颜色&＃xff1a;border
#    设置表格标题的位置&＃xff1a;capital-side
#    创建一个奇特的表


知识点&＃xff1a;

*    border-collapse&＃xff1a;separate/collapse




在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。
为了显示一个表的单个边框&＃xff0c;使用 border-collapse属性。


*    capital-side&＃xff1a;设置表格标题的位置    top/bottom

*    练习







练后感&＃xff1a;遇到不会的就看看样例代码&＃xff0c;勉强做出来了&＃xff0c;字体不想换了就没换&＃xff1b;但是没搞懂是怎么实现每列不同宽度。




学习&＃xff08;练习&＃xff09;之路还很长远&＃xff0c;继续努力&＃xff01;