不二如是 发表于 2019-11-5 08:39:48

034 - 初学CSS的噩梦（Ⅰ）

本帖最后由 不二如是 于 2019-12-18 08:07 编辑

上一集：033 - 还能这么玩



哈哈，废话不多说了，#敲黑板时刻！{:10_281:}



在线视频：传送门



课程思维导图


猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清



一段基础代码：

<!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 选择器在被选元素的内容前面插入内容。

行内和块级都可以。

注意：**** Hidden Message *****

为 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;
      }
当 p 元素被选中后，字体颜色会变为绿色：





课后作业，完成了吗？

传送门



http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif

下一集：035 - 初学CSS的噩梦（II）



如果有收获，别忘了评分{:10_281:} ：

http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif

这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（传送门）（不喜欢更要订阅{:10_297:} ）

LeoDong-77 发表于 2019-11-12 23:05:11

好

大风包子 发表于 2019-11-16 15:56:36

跟上进度了

Albertdjy 发表于 2020-2-16 14:07:54

为什么我按照视频输入，但是一点效果都没有，已经保存了

若习~岚 发表于 2020-2-22 13:27:26

看一看

MYlindaxia 发表于 2020-3-12 09:11:21

before在之前添加，after在之后添加

Fire4EVER 发表于 2020-6-21 16:12:12

1

Bright06 发表于 2020-8-14 23:35:35

{:10_254:}{:10_254:}

我要好好学习= 发表于 2020-8-20 17:47:42

{:9_227:}

昵称_cwb 发表于 2020-8-27 10:13:00

o

兴南 发表于 2020-9-7 22:56:57

{:5_102:}

huiyi479 发表于 2020-9-18 14:17:33

{:5_101:}

pym131420 发表于 2020-11-9 20:34:15

123

trefrn 发表于 2020-12-5 15:13:15

我爱鱼c

natapon 发表于 2021-1-13 23:44:24

回复快快快

笙歌醉梦 发表于 2021-1-20 12:01:31

{:5_103:}

只想白嫖 发表于 2021-2-4 17:58:19

11

鱿鱼追不上我 发表于 2021-3-11 22:57:30

{:9_231:}

13998929493 发表于 2021-3-22 09:21:33

初学css

yuxijian2020 发表于 2021-3-29 16:21:10

{:9_221:}痛苦
页: [1] 2
查看完整版本: 034 - 初学CSS的噩梦（Ⅰ）