【5.0】CSS基础

【一】什么是CSS

  • 层级样式表：就是给HTML标签添加样式的，让它变得好看

【二】注释语法

/* 这是注释 */

【三】CSS的语法结构

选择符 {
    样式属性: 样式属性值;
    样式属性: 样式属性值;
    样式属性: 样式属性值, 样式属性值, 样式属性值;
}
  • 一个正常的网页css样式是非常多的 就算专门开设css文件存储也很乱
  • 这个时候就可以在css文件中通过注释来辅助辨别与查找

【四】CSS的三种引入方式

【1】style标签内部直接书写

  • head内style标签内部直接编写css代码
  • 建议在小白学习阶段可以使用 方便查看
  <style>
    <!--
    方式一-- >
    h1 {
      color: blue;
    }
  </style>

【2】引入外部CSS文件(最正规的方式，解耦合)

  • head内link标签引入外部css文件
  • 作中一般使用的都是link形式 符合标准
/*css文件*/
h1 {
    color: blue;
}

<!--HTML文件-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="01.css">
</head>
<body>
<h1>
    这是一级标题
</h1>
</body>
</html>

【3】行内式(一般不用)

  • 标签内部通过style属性直接编写
  • 第三种也称之为"行内式"是最不推荐使用的一种方式
  • 因为它会将HTML和CSS柔和到一起
  • 增加了耦合度

【五】基本选择器

【1】概览

  • 在CSS中，选择器用于选取HTML文档中的元素。
  • 根据选择器的类型和语法的不同，可以选择不同的元素。
  • 常用的有id选择器、类选择器、元素/标签选择器和通用选择器。

【2】介绍

（1）Id选择器

  • 通过元素的id属性进行选取。
  • 每个页面中id值是唯一的，所以在css中最好不重复使用id选择器。
<h1 id="myH1">Hello, World!</h1>
p {
    color: #FF0000;
}
  • 把id为"myH1"的元素设置为红色

（2）类选择器

  • 通过元素的class属性进行选取。
  • 多个元素可以共享一个class，所以class选择器是应用样式的最佳方式。
<h1 class="title">Hello, World!</h1>
<p class="content">这是一个段落。</p>

.title {
    font-size: 24px;
}

.content {
    line-height: 1.5;
}
  • 上面的代 ** 给标题和段落添加样式，其中title和content是类名

（3）元素/标签选择器

  • 通过元素的标签名称进行选取。
  • 比如选择所有的段落、列表等。
p {
    color: #FF0000;
}

ul {
    list-style-type: none;
}
  • 上面的代 ** 让所有的段落变为红色，所有的无序列表去除默认的项目符号

（4）通用选择器

  • *表示所有的元素。
* {
    margin: 0;
    padding: 0;
}
  • 上面的代 ** 让所有元素的内外边距都设为0

【3】示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* id选择器 */
        #myH1 {
            color: red;
        }

        /* 类选择器 */
        .title {
            font-size: 24px;
        }

        .content {
            line-height: 1.5;
        }

        /* 元素/标签选择器 */
        p {
            color: blue;
        }

        ul {
            list-style-type: none;
        }

        /* 通用选择器 */
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<h1 id="myH1">Hello, World!</h1>
<p class="title">This is a title.</p>
<p class="content">This is a content.</p>
<ul>
    <li>This is a list item.</li>
    <li>This is another list item.</li>
</ul>
</body>
</html>
  • 在上面的示例中，我们创建了一个包含一个id为"myH1"的标题、两个类分别为"title"和"content"的段落以及一个无序列表的HTML文档。
  • 然后我们在CSS中使用相应的选择器来给这些元素设置样式。

【4】示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* （1）id 选择器 */
        /* 找到id为d1的标签，将其内部的颜色变为greenyellow */
        #d1 {
            color: greenyellow;
        }

        /* （2）类选择器 */
        /* 找到c1类的标签，将其颜色变为blue */
        .c1 {
            color: blue;
        }

        /*（3）元素/标签选择器 */
        /* 找到所有的span标签，变成红色 */
        span {
            color: red;
        }

        /*  通用选择器 */
        /* 将页面上的全部内容变为blue */
        * {
            color: blue;
        }

    </style>


</head>
<body>

<div id="d1" class="c1 c2">
    <p>div里面的p标签</p>
    <span>div里面的span标签</span>
</div>

<p id="d2" class="c1 c2">这是一个p标签</p>
<span id="d3" class="c3">这是span标签1------11111</span>
<span id="d4" class="c4">这是span标签2------22222</span>


</body>
</html>

【六】组合选择器

【1】概览

  • 后代选择器

  • 儿子选择器

  • 毗邻选择器

  • 弟弟选择器

【2】标签关系

<div>div1
	<div>div2
		<p>p1</p>
	</div>
	<p>p2
		<span>span1</span>
	</p>
	<span>span2</span>
</div>
  • 通过嵌套层级来表示亲属关系
    • 1.对于div1来说：div2、p2、span2都是儿子
    • 2.对于div2、p2、span2来说：div1就是父亲
    • 3.对于p1来说：div2是父亲 div1是爷爷(可以将div1和div2统称为祖先)
    • 4.对于span2来说：div2、p2是哥哥 span2是弟弟
    • 5.div1内部所有的标签无论层级都可以称之为是div1的后代

ps:判断的时候一定要看层级关系

【3】介绍

/*# 1.弟弟选择器(关键符号是大于号)*/
d1 > span {
    /*查找id是d1标签内部所有的儿子span*/
    color: red;
}

/*# 2.弟弟选择器(关键符号是空格)*/
d1 span {
    /*查找id是d1标签内部所有的后代span*/
    color: red;
}

/*# 3.弟弟选择器(关键符号是加号)*/
d1 + a {
    /*查找id是d1标签同级别下面紧挨着第一个a标签*/
    color: red;
}

/*# 4.弟弟选择器(关键符号是小波浪号)*/
d1 ~ a {
    /*查找id是d1标签同级别下面所有a标签*/
    color: red;
}

【4】示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* 后代选择器 */
        /* div下的span标签变成红色 */
        div span {
            color: red;
        }

        /* 儿子选择器 */
        /*  */
        div > span {
            color: greenyellow;
        }

        /* 毗邻选择器 */
        /* 同级别紧挨着的下面的第一个 */
        div + span {
            color: green;
        }
        
        /* 弟弟选择器 */
        /* 同级别下面的所有span标签 */
        div~span{
            color: burlywood;
        }


    </style>

</head>
<body>

<span>这是span标签 1 </span>
<span>这是span标签 2 </span>
<div>这是 div 标签
    <p>
        这是div里面的 第一个 p 标签
    </p>

    <p>这是div里面的第二个 p 标签
        <span>
            这是div标签里面的第二个 p 标签下的 span 标签
        </span>
    </p>

    <span> 这是div里面的第一个 div 标签 </span>
    <span> 这是div里面的第二个 div 标签 </span>

</div>
<span>这是div底部的 第一个 span 标签 </span>
<span>这是div底部的 第二个 span 标签 </span>

</body>
</html>

【七】属性选择器

【1】概览

  • 含有某个属性

  • 含有某个属性并且有某个值

  • 含有某个属性并且有某个值的某个标签

【2】介绍

/*# 根据标签内部的属性名和属性值查找标签(关键符号是中括号)*/
/*1.方式1:直接通过属性名查找*/
[type] {
    background-color: red;
}

/*2.方式2:属性名是type并且值是text的标签*/
[type='text'] {
    background-color: red;
}

/*3.方式3:属性名是type并且值是text的div标签*/
div[type='text'] {
    background-color: red;
}

【3】示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* 将所有含有属性名是username的标签背景色改为红色 */
        [username] {
            background-color: green;
        }

        /* 找到所有属性名是username并且属性值是dream的标签 */
        [username="dream"] {
            background-color: blue;
        }


        /* 找到所有属性名是username并且属性值是dream的input标签 */
        input[username="dream"] {
            background-color: green;
        }

    </style>

</head>
<body>
<input type="text" username>
<input type="text" username="dream">
<input type="text" username="mengmeng">
<p username="dream">this is dream</p>
<div username="mengmeng"> this is mengmeng</div>
</body>
</html>
posted @ 2024-02-27 08:29  Chimengmeng  阅读(8)  评论(0)  编辑  收藏  举报
/* */