马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2019-12-18 08:07 编辑
哈哈，废话不多说了， #敲黑板时刻！ 
课程思维导图
一段基础代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鱼C-零基础入门学习Web（Html5+Css3）</title>
<style>
</style>
</head>
<body>
<h1>FishC.com</h1>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias consequuntur deserunt dolor doloribus ea eius enim eos esse explicabo facere, harum in laboriosam necessitatibus nulla obcaecati optio perspiciatis porro quibusdam. </span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, adipisci beatae ea earum, eius facere itaque natus neque nobis perferendis perspiciatis quae quas quasi repudiandae saepe! Commodi labore nesciunt possimus!</p>
</body>
</html>
html 中我们用到了块级（h1、p）和行内元素（span）。
1、::first-line
::first-line 选择器用于选取指定选择器的首行。
添加样式：
::first-line
{
background-color:green;
}
我们本意对所有元素的首行添加样式。
但是只有块级元素才会生效，行内元素没有效果。
因为只有块级才有换行（按照浏览器宽度自动换行）的概念，而行内本身就是一行。
还可以指定元素添加 ::frist-line：
p::first-line
{
background-color:green;
}
2、::first-letter
::first-letter 选择器用于选取指定选择器的首字母。
添加样式：
::first-letter
{
font-size:200%;
color:green;
}
没错，还是只针对块级元素。
也可以指定为具体元素添加样式： p::first-letter{}
3、::before
::before 选择器在被选元素的内容前面插入内容。
行内和块级都可以。
注意：
为 p 元素添加样式：
p::before
{
content:"鱼C - ";
}
4、::after
::after 选择器在被选元素的内容后面插入内容。
还是通过 content 属性来指定要插入的内容。
为 span 添加样式：
span::after
{
content:"- 我爱鱼C";
}
5、::selection
::selection 选匹配元素中被用户选中或处于高亮状态的部分。
只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline。
为 p 元素添加选中样式：
p::selection
{
color:green;
}
课后作业，完成了吗？
传送门
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（ 传送门）（ 不喜欢更要订阅 ） | 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2019-11-5 08:39:48
置顶卡
千斤顶
显身卡
发表于 2019-11-12 23:05:11
痛苦