学习【尚硅谷HTML5前端视频】主讲人李立超(上篇)

这位老师讲解的是真心好 地址(。◕ˇ∀ˇ◕)。

1,这里使用 UTF-8 编码。

学习【尚硅谷HTML5前端视频】主讲人李立超(上篇)_第1张图片

使用谷歌欧朋浏览器显示正常,但使用火狐,Edge,IE就是乱码,使用Sarifi浏览器也是乱码

这是为神马呢?

因为谷歌欧朋浏览器默认解码是UTF-8,火狐IE(在中文系统)默认解码是GB2312,Sarifi浏览器默认解码是ISO-8859-1

解决方法:告诉浏览器编码格式

2.

的重要性仅次于, 搜索引擎检索完title标签就会去查询h1标签

在html中,多个空格/换行 会被当做一个空格解析。


是水平线

图片 这里的alt会被搜索引擎检索到

图片格式: JPEG(和JPG是同一个东西),支持颜色多,不支持透明,但压缩率高,

GIF 支持颜色少,支持简单的透明效果,支持动态图

PNG 支持颜色多,支持复杂的透明效果

3. meta






4. 内联标签 iframe

搜狗

  target="_self" 本标签打开  target="_blank" 新窗口打开  target="name" 在名字为"name"的 iframe 中打开

5. 引用外部css,浏览器可以缓存下来,提高速度

6. 块元素主要用来做页面布局,内联元素主要用来选中文本设置样式

一般使用块元素 包裹内联元素,而不会使用内联元素包裹快元素,例如

注意, 标签可以包含任意元素,除了本身

元素里面不能放任何的块元素

7. 

#id{
  background-color: yellow;
}
.className{
  background-color: yellow;
}
h1{
  background-color: yellow;
}

以上三个的 样式都一样的,可以使用 逗号,  来分组:

#id , .className, h1{
  background-color: yellow;
}

8. 

如果使用

.p1{
   color: red;
}

p,span都能满足,如果使用

span.p1{
  color: red;
}

则必须满足是 span标签,且className为p1

9.

后代选择器,使用 空格

div p span{
   color: red;
}

子元素选择器,使用 >   (注意 IE6以下不支持这种写法)

div > span{
  color: red;
}

10 伪类    

学习【尚硅谷HTML5前端视频】主讲人李立超(上篇)_第2张图片

a:link {  }  就是 未访问过的链接

div::selection{
   color: red;
}
div::-moz-selection{
   color: red;
}

11. 伪元素,首先理解下啥事伪元素,如下

要使首字变红色,需将第一个字用元素圈起来   

文内容

以前对于火狐浏览器,需要写成 ::-moz-seleionct ,但现在火狐浏览器也支持 ::selection 写法了。

p > span{
  color: red;
}

我们可以使用伪元素: 

正文内容

  


p:first-letter{
   color: red;
}

还有:

        p:first-line{
            background-color: lightblue;
        }
        p:before{
            content: '文字前的位置  ';
        }
        p:after{
            content: '文字后的位置';
        }

12.  title 属性可以给任意标签添加,鼠标移到上面会有“文字提示”

文字内容

使用 中括号 [ ]  表示属性 

p[title]{ 
   background-color: lightblue;
}
p[title=hello]{
   background-color: yellow;
}

学习【尚硅谷HTML5前端视频】主讲人李立超(上篇)_第3张图片

13.


    
        我是相对于body标签的第一个子元素
    
    

我是相对于body标签的第二个子元素

我是相对于body标签的第三个子元素

我是相对于div标签的第一个子元素

使用 p:first-child 表示匹配p元素,且该p元素必须是第一个子元素

p:first-child{
   background-color: lightcoral;
}

使用 :last-child 匹配最后一个子元素

使用 :nth-child(n)  匹配第n个子元素

p:nth-child(2){
    background-color: lightcoral;
}

使用 :nth-child(even) 匹配偶数位的子元素, 使用 :nth-child(odd) 匹配奇数位的子元素

记法:  even 4个字, odd 3个字
p:first-of-type 表示在当前类型 p 中的第一个

p:first-of-type{
   background-color: yellow;
}
p:last-of-type{
   background-color: yellow;
}
p:nth-of-type(2){
   background-color: yellow;
}

14, + 和 ~  都是选则兄弟元素,但 之后紧挨着的那一个兄弟元素,~是之后所有的兄弟元素

span + p{
  background-color: lightcoral;
}
span ~ p{
  background-color: lightcoral;
}

15,现在我要匹配所有class不是hello的p元素

    

第一个

第二个

第三个

第四个

使用  :not( ) 

p:not(.hello){
  background-color: black;
}

16,子元素会继承 祖先元素的样式, 但是 背景 background 不会继承,

    
我是why_su

因为 背景颜色默认是 transparent 透明的,所以看起来像是继承了一样。此问题在于,如果背景是图片,继承的话会出乱子:

学习【尚硅谷HTML5前端视频】主讲人李立超(上篇)_第4张图片

17. 优先级

.good{
   
}
.bye{

}

级别一样的,看排列顺序,.bye.good 之后,所以  .bye

对于

p.hello{
  background-color: black;
}
.hello{
  background-color: green;
}

p.hello{  }  因为有两个级别 相加,所以优先级更高

写在 html中的

优先级别最高,可以在css中使用 !important 来改变这个优先级

.bye{
    background-color: black !important;
}

18,关于a 的伪类的 优先级顺序

        a:link{
            color: cornflowerblue;
        }
        a:visited{
            color: red;
        }
        a:hover{
            color: orange;
        }
        a:active{
            color: black;
        }

这样子写是没错的, 但因为  a:active  鼠标点击  其实同时满足 :active和a:hover 这两个状态,所以鼠标点击的时候会找最后面的一个样式来展现,如果 调下顺序:当鼠标点击时,显示的是 orange 而不是 black

        a:active{
            color: black;
        }
        a:hover{
            color: orange;
        }

此外,如果把  a:link  和 a:visited  写在了  a:hover 和 a:active 后面,则不会有鼠标点击 和 移入 的效果。

19.

     斜体 
      加粗
    上标:  22
    上标带链接:  周杰伦[1]
    下标:   H2O
    
        pre 保存代码中的格式,保留多个空行
        code 用来存代码,和pre一起用
        
            window.onload = function(){
               alert("hello why_su!");
            }
        
    

学习【尚硅谷HTML5前端视频】主讲人李立超(上篇)_第5张图片

学习【尚硅谷HTML5前端视频】主讲人李立超(上篇)_第6张图片

你可能感兴趣的:(CSS,HTML)