Day5_HTML+CSS+JS——CSS基本语法和CSS选择器_html,js,css基本语法-CSDN博客

本文链接：https://blog.csdn.net/qq_40634846/article/details/99167258

一. 储备知识

CSS语法

CSS规则主要由两个主要的部分构成：选择器和声明

selector{
  declaration1；
  declaration2；
  declaration3；
  ...
}

注意：

CSS代码只能写在文件中
html页面如果要书写CSS代码，html提供了style标签，当html引擎解析到此标签的时候自动会将标签内的内容交给CSS引擎解析
由于style标签内的内容不在正文中显示，推荐写在head内

CSS样式的书写位置：

在标签内可以直接使用（不推荐这种做法），每个标签都提供了style属性，可以在style属性直接书写要设置的样式
在head内使用style标签（推荐使用），在style标签内，通过选择器和声明来设置样式
在外部创建CSS文件，然后在要使用CSS样式文件的页面中通过link标签引入样式（推荐使用）

例子1：
在标签内可以直接使用（不推荐这种做法），每个标签都提供了style属性，可以在style属性直接书写要设置的样式

<a style="color:green">点击看我女神</a>

例子2：
在head内使用style标签（推荐使用），在style标签内，通过选择器和声明来设置样式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
        a{
           background:yellow
        }
</style>
</head>
<body>
       <a style="color:green">点击看我女神</a>
</body>
</html>

例子3：
在外部创建CSS文件，然后在要使用CSS样式文件的页面中通过link标签引入样式（推荐使用）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="style.css"/> 
</head>
<body>
       <a style="color:green">点击看我女神</a>
       <p style="color:green">点击看我女神</a>
</body>
</html>

CSS选择器

通过CSS的基本选择器选中想要设置样式的标签，选择器有多种表达方式

标签名选择器：根据指定的标签名选中所有的符合条件的标签。
语法：标签名声明
例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
        a{
           background-color:yellow;
        }
</style>
</head>
<body>
       <a style="color:green">点击看我女神</a>
</body>
</html>

2.id选择器：根据id属性值选中页面中唯一的一个标签（相同id值页面中只能使用一次），每个标签都有id属性
语法：#id属性值声明
例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
        #girl{
             color:red;
        }
        #man{
             color:yellow;
        }
</style>
</head>
<body>
      <p id="girl">点击看我女神</p>
      <p id="man">点击看我男神</p>
</body>
</html>

3.类选择器：根据class属性值选中一组标签（只根据class值来选择）
语法：.class属性值声明
例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
        .sport{
            color:red;
        }
</style>
</head>
<body>
       运动：<span name="basketball" class="sport">篮球</span>
     <span name="football" class="sport">足球</span>
     <span name="volleyball" class="sport">排球</span>
       <span name="run" class="sport">跑步</span>
</body>
</html>

4.复合选择器：多个选择器一起使用
语法：selector1, selector2, selector3 … 声明
例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
        h3, #girl, .sport{
            color:red;
        }
</style>
</head>
<body>
       <h3>这是标签选择器的效果</h3>
       <br/>
       <span id="girl" name="idSelector">这是id选择器的效果</span>
       <br/>
        运动：<span name="basketball" class="sport">篮球</span>
         <span name="football" class="sport">足球</span>
         <span name="volleyball" class="sport">排球</span>
         <span name="run" class="sport">跑步</span>
         <br/>
</body>
</html>

5.选中所有选择器：选择页面中所有的内容（非标签和标签的内容都选中）
语法：* 声明
例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
       *{
            color:red;
        }
</style>
</head>
<body>
       <h3>这是标签选择器的效果</h3>
       <br/>
       <span id="girl" name="idSelector">这是id选择器的效果</span>
       <br/>
        运动：<span name="basketball" class="sport">篮球</span>
         <span name="football" class="sport">足球</span>
         <span name="volleyball" class="sport">排球</span>
         <span name="run" class="sport">跑步</span>
         <br/>
</body>
</html>