HTML学习笔记(三)CSS引入方式及基本选择器、组合选择器、属性选择器

下面是听了林海峰老师的视频总结与大家一起分享~

一、CSS三种引入方式

1、style标签内部直接书写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    1、style标签内部直接书写-->
    <style>
        h1{
            color: #7a77c8;
        }
    </style>
</head>
<body>

<h1>你好呀!!!!</h1>
</body>
</html>

 2、link标签引入外部css文件(最正规的方式,解耦合)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    2、link标签引入外部css文件(最正规的方式,解耦合)-->
    <link rel="stylesheet" href="CSS初识.css">
</head>
<body>
<h1>你好呀!!!!</h1>
</body>
</html>

CSS初始.css文件内容如下

/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/
h1{color: #2b99ff}

3、行内式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--    3、行内式-->
<h1 style="color: #1cb7fd">你好呀!!!!</h1>
</body>
</html>

二、CSS基本选择器

1、id选择器
2、类选择器
3、元素(标签)选择器
4、通用选择器

下面介绍一个小案例来介绍CSS的基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器*/
       #d1 {  /*找到id为d1的标签*/
            color: #7a77c8;
        }
        /*类选择器*/
       .c1 { /*找到class值里面包含c1的标签*/
            color: #0000cc;
        }
       /*元素(标签)选择器*/
        span {/*将找到所有的span标签*/
            color: #7B7B7B;
        }
        /*通用选择器*/
        * {/*将html页面上所有的标签全部找到*/
            color: #f6c4d7;
        }
    </style>
</head>
<body>
<div id="d1" class="c1 c2">div
    <p>div里面的p</p>
    <span>div里面的span</span>
</div>
<p id="d2" class="c1 c2">pppp</p>
<span id="d3" class="c2">span1111</span>
<span id="d4" class="c4">span2222</span>
</body>
</html>

注意:

样式类名不要用数字开头(有的浏览器不认)。

标签中的class属性如果有多个,要用空格分隔。

 

 三、属性选择器

/*用于选取带有指定属性的元素。*/
p[title] {
  color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="12"] {
  color: red;

就以一个简单的案例来为大家介绍 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [username]{/*将所有含有属性名是username的标签背景色改为蓝色*/
            background: #2b99ff;
        }
        [username='jason']{/*找到所有属性名是username并且属性值是jason的标签*/
            color: #f6c4d7;
        }
        input[username='jason']{/*找到所有属性名是username并且属性值是jason的input标签*/
             background: #2b99ff;
        }
    </style>
</head>
<body>
<input type="text" username>
<input type="text" username="jason">
<input type="text" username="kevin">
<p username="tank">tank老师</p>
<div username="egon">egon老师</div>
<span username="jason">jason老师</span>
</body>
</html>

补充几个小点:

/*找到所有title属性以word开头的元素*/
[title^="word"] {
  color: red;
}

/*找到所有title属性以word结尾的元素*/
[title$="word"] {
  color: yellow;
}

/*找到所有title属性中包含(字符串包含)word的元素*/
[title*="word"] {
  color: red;
}

/*找到所有title属性(有多个值或值以空格分割)中有一个值为word的元素:*/
[title~="word"] {
  color: green;
}

四、组合选择器

<!--在前端,我们将标签的嵌套关系用亲戚关系来表述层级-->
1、后代选择器
2、儿子选择器
3、毗邻选择器
4、弟弟选择器 

以简单的案例为例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*后代选择器*/
        div span {
            color: #f6c4d7;
        }
        /*儿子选择器*/
        div>span{
            color: #0000cc;
        }
        /*毗邻选择器*/
        div+span{/*同级别紧挨着的下面的第一个*/
            color: #7B7B7B;
        }
        /*弟弟选择器*/
        div~span{/*同级别下面的所有span*/
            color: #cc2929;
        }
    </style>
</head>
<body>

<span>
    span1
</span>
<span>
    span2
</span>
<div>
    div
    <p>div p</p>
    <p>div p
    <span>
        div p span
    </span>
    </p>
    <span>span</span>
    <span>span</span>
</div>
    <span>span</span>
    <span>span</span>
</body>
</html>

 

上一篇:numpy,pytorch生成随机数,随机分布总结


下一篇:标签平滑Label Smoothing Demo(附pytorch的NLLLoss(),gather())