Hello WEB ! CSS是装修吗？！（一）--CSS—基本使用+选择器

本文链接：https://blog.csdn.net/weixin_45160152/article/details/119354917

网盘资料链接：https://pan.baidu.com/s/1qFRLUOS-d3Ns3_avzXRrhw
提取码：echo

CSS是什么
css全称 Cascading Style Sheets
翻译过来就是层叠样式表
如果说HTML是网页的结构
那么CSS就是网页化妆师

CSS可以同时控制多重网页的样式和布局
这样可以大大提高网页开发的工作效率

CSS 写在哪里：
1. 内联：写在标签里面
缺点：不容易找到内容区域，是代码变冗长
2. 内嵌：在head标签里面加上一个style标签，在style里面添加样式
缺点：这种方式会使页面变重（style里面内容太多）
3. 外联：在外部新建一个CSS文件然后导入
外联方法常用方便管理
4. 导入：在head标签里面 import导入
不常用与link一样的功能，link更加好用

CSS样式的语法规则：

选择器声明1 声明2 声明3
div {width: 100px; height: 100px; background-color: bisque;}

目标标签{属性1:属性值1; 属性:属性值2; 属性3:属性值3;}

每一条声明由一个属性和属性值组成
属性就是你希望设置的样式属性，每个属性有一个值，
属性属性值用冒号隔开，属性和属性用分号隔开;

选择器
1. id选择器：
id选择器:根据标签的id属性选择对应的标签
注意: id是唯一的，不能数字开头。css开头用 #

2. class选择器：
class选择器:根据标签的class属性选择对应的标签
注意: class不是唯一，可以重名，不能数字开头。css开头用 .

3.元素选择器：
元素选择器:根据标签名字，选择对应的标签
注意:说白了，就是找标签名字
群组选择器：选择多个标签名统一格式的规定样式

优先顺序
id > class > 元素

4.层次选择器:
层次选择器分为，子代、后代、相邻和兄弟等四种选择器

后代选择器:div p，空格。选择指定标签下所有对应的后代标签，。
子代选择器: div>p，大于号，选择指定标签下所有对应的子元素
兄弟选择器: div~p,波浪线，选择当前标签之后的所有同级标签
相邻选择器:(下一个兄弟选择器)div+p,加号，选择当前标签的下一个同级标签。(可以多次叠加)

5.伪类选择器
:link 未访问过的样式
:visited 访问过后的样式
:hover 划过的样式
:active 激活的样式
:focus 聚焦模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS基础</title>
    <!--内嵌-->
    <style>
        div{width: 200px;height: 200px;background-color: brown;}
    </style>

    <!--外联-->
    <link rel="stylesheet" href="1.CSS—基本使用+选择器.css">

    <!--导入（不常用）-->
    <style>
        @import "1.CSS—基本使用+选择器.css";
    </style>

    <!--选择器-->
    <style>
        /*id选择器*/
        #p1{color: brown}
        /*class选择器*/
        .pp1{color: aqua;align-items: center;}
        /*元素选择器*/
        h1{color: blue}
        /*群组选择器*/
        p,h2,span,ul{color: chartreuse}
        /*后代选择器 用空格*/
        div p{color: rebeccapurple}
        /*子代选择器 用大于号*/
        div>p{color: coral}
        /*兄弟选择器 用~ 一般结合id class选择器使用*/
        #name~p{color: darkslategrey}
        /*相邻选择器*/
        #name+p{color: aliceblue}
        /*伪类选择器*/
        /*访问前*/
        .a1:link{color: coral}
        /*访问后*/
        .a1:visited{color: aqua}
        /*划过的样式*/
        .a1:hover{background-color: darkseagreen}
        /*激活的样式*/
        .a1:active{font-size: 20px;font-family: "Adobe 明體 Std L"}

        /*聚焦焦点*/
        ul{list-style: none;margin: 0;padding: 0}
        input:focus{background-color: #dafffc;color: black;border: 1px solid deepskyblue}



    </style>



</head>
<body>

<!--外联 在head里面导入css文件-->
<div>外联</div>


<!--内联-->
<p style="width: 50px;height: 50px;background-color: aqua"></p>

<!--导入-->
<h1>import导入</h1>

<!--id选择器-->
<p id="p1">id选择器</p>

<!--类选择器-->
<p class="pp1">类选择器</p>

<!--元素选择器-->
<h1>元素选择器1</h1>

<!--后代选择器-->
<div>
    <p id="name">1</p>
    <p>2</p>
    <ul>
        <li>3</li>
        <li>4</li>
    </ul>
</div>



<a href="#" class="a1">外部链接</a>

<!--聚焦焦点 focus-->
<form action="#">
    <ul>
        <li>姓名：<input type="text" placeholder="请输入你的姓名"></li>
        <li>年龄：<input type="text" placeholder="请输入你的年龄"></li>
        <li>性别：<input type="text" placeholder="请输入你的性别"></li>
        <li>职业：<input type="text" placeholder="请输入你的职业"></li>
    </ul>
</form>

</body>
</html>

div{width: 100px;height: 100px;background-color: bisque;}
body{background-color: aliceblue}
h1{word-wrap: inherit;background-color: crimson;}