CSS学习第二天

青旅半醒 2022-05-23 05:34 214阅读 0赞

今日学习的内容如下：进度有点儿慢了，必须保证每天2小时的学习时间！！！

![70][]

![70 1][]

字体系列是用font-family控制，用逗号隔开加上备用字体。

字体样式：

font-style:normal          /\*正常显示文本\*/

font-styele:italic         /\*斜体显示文本\*/

font-style:oblique         /\*倾斜的文字，文字向一边倾斜\*/

设置字体大小像素：

font-size:40px

font-size:250%

用em来设置字体大小：

font-size:2.5em         /\* 40px/16=2.5em \*/

使用em和百分比组合：

body \{font-size:100%;\}  
h1 \{font-size:2.5em;\}  
h2 \{font-size:1.875em;\}

p \{font-size:0.875em;\}

设置小型大写字母的字体显示文本：

font-variant:small-caps     /\*还有参数normal和inherit\*/

设置字体粗细：

font-weight:normal

font-weight:bold

font-weight:900

还有一些参数如下

![70 2][]

\----------------------------假装有分割线-------------------------------------------------

![70 3][]

\------------------------------------------------------假装有分割线----------------------------------------------------------

主要有以下四种链接状态：

a:link         正常，未访问过的链接

a:visited          已经访问过的链接

a:hover            当鼠标放在链接上

a:active            当鼠标被点击的那一刻

注意：hover必须在link和visited后面，active必须在hover后面

CSS链接样式：

1.文本修饰：

![70 4][]

2.背景颜色：

![70 5][]

3.其他样式：

![70 6][]

![70 7][]

在以上效果图中创建了链接框，主要就是display:block/\*将此元素显示为块级元素\*/，再用width调整框的高度。

display的参数有如下所示：

![70 8][]

\---------------------------------------------------------假装有分割线----------------------------------------------

[70]: /images/20220523/a6d75a11b30f46409b74211e7baf3f69.png
[70 1]: /images/20220523/29e8816532e44ea8b4989cbd22a65ca1.png
[70 2]: /images/20220523/3a0f1863462d49dea9455aa0cda5af7e.png
[70 3]: /images/20220523/18185ac54bd34e16a18f6fccc3d3a910.png
[70 4]: /images/20220523/761452cbc68449caa5a3ed9c44007bf5.png
[70 5]: /images/20220523/531b412f45864328b3cd942ec882f3d1.png
[70 6]: /images/20220523/3b16e4828c324cef8207461d108303e9.png
[70 7]: /images/20220523/136aa53ed1d94d978cbdb39ba044d74d.png
[70 8]: /images/20220523/8eb4956889e543379ed04df2b31f7b12.png