CSS基础知识大白话介绍

柠檬味的融融521

已于 2022-03-31 15:23:40 修改

阅读量1k

点赞数 3

于 2022-03-31 10:06:52 首次发布

本文链接：https://blog.csdn.net/m0_64054560/article/details/123859903

版权

小菜鸟学习大本领专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS的基础知识介绍：CSS样式表分类、样式表的优先级、CSS选择器的分类、用法及权重。

CSS：层叠样式表

作用：美化网页的，让页面看起来美滋滋，好看beautiful！

CSS样式表分类：

1、行内样式表（（内联样式表、行间样式表））

直接在标签名字后加一个style属性。（很少用哦）

<div style="font-size: 200px;" >

2、内部样式表

在html文件的head标签中创建一个style标签

~~~html代码和css代码在同一个文件中，就称为内部样式表

css样式：给标签p创建样式   
<style>
          p{
             /* 字体颜色 */
                     color: red;
             /* 字体大小 */
                     font-size: 40px;
            /* 背景颜色 */
                     background-color: red;
            /* 宽度 */
                     width: 300px;
            /* 高度 */
                    height: 300px;
         
       	    }
   </style>

3、外部样式表

首先：在html文件的body中写入东西

其次：外部创建css文件并且设置样式

最后：在html文件的head中link引入css文件

<link rel="stylesheet" href=" ">

rel="stylesheet" 用来关联样式表的

样式表的优先级:

从上到下依次执行，所以以最后面的为主

行内样式最大

注意哦：如果同时使用了多个样式表，被覆盖的只是相同属性的样式。

CSS语法：

格式：

选择器：选择器就是用来找标签的，要改谁的样式就写谁的名字。

属性：要更改什么属性就写属性的单词。比如要更改文字颜色就写color单词。

注意哦：

1、每个CSS样式由两部分组成，即选择器（选择符）和声明，声明又分为属性和属性值；

2、属性必须放在花括号中，属性与属性值用冒号连接。

3、每条声明用分号结束。

4、当一个属性有多个属性值的时候，值与值之间用空格隔开。

CSS选择器：

目的：选择器就是为了找页面元素（找标签）用的

1、标签选择器

直接根据标签名字做查找

2、类选择器

1）给标签起一个类名（在标签名字的后面写一个class属性）

2）使用的时候类名前面加点

起名规则：

1）可以使用字母、数字、下划线

2）不能以数字开头

3）不可以使用关键字（官方给的单词）

4）做到见名知意

~~~~一个元素可以有多个类名，类名和类名之间空格分开。

css样式：
 <style>
		.a1{
            color: red;
        }
 </style>

html语句：
<p class="a1">秦时明月汉时关</p>

3、ID选择器

1）给标签起一个id名（在标签名字的后面写一个id属性）

2）使用的时候类名前面加 #

特点：id具有唯一性，一个id名字只允许使用一次，相当于身份证号（行业规定）

css样式： 
	 <style>
		#a1{
            color: red;
        }
      </style>

html语句：
  <p id="a1">秦时明月汉时关，</p>

4、后代（包含）选择器

标志：空格

所有后代都可以找到

css样式：  
 <style>
        .a p{
            color: red;
        }
    </style>

html语句：
 <div class="a">
        <span>
            是div的儿子
            <p>是div的孙子</p>
        </span>
    </div>

5、子代选择器

标志：>

只可以找到子代

css样式：  
    <style>
        .a>span{
            color: red;
        }
    </style>

html语句：
   <div class="a">
        <span>
            是div的儿子
        </span>
    </div>

6、群组选择器

可以一次找到多个标签，减少代码量

css样式：
 <style>
        p,.a1,.a2,i,b{
            color: red;
        }
  </style>

html语句：
   <body>
    <p>我是p标签</p>
    <div class="a1">我是div标签</div>
    <div class="a2">我是div标签</div>
    <i>我是倾斜小i</i>
    <b>我是加粗小b</b>
   </body>

7、通配符选择器

标志：*

可以找到所有的标签

使用场景：清除全部标签间距

css样式： 
   <style>
         *{
            padding: 0;
            margin: 0;
        }
   </style>

用思维导图瞅瞅吧······

（类选择器加*意思是比较常用哦~）

8、伪类选择器

标志：：（一个冒号）

：link====未访问===只针对超链接使用

：visited====已访问===只针对超链接使用

：hover===鼠标滑过===可以用在任何标签上

：active===鼠标按下===可以用在任何标签上

css样式： 
 <style>
        /* 未访问超链接 */
        a:link{
            color: red;
        }
        /* 已访问超链接 */
        a:visited{
            color: blue;
        }
        /* 鼠标滑过超链接 */
        a:hover{
            color: palevioletred;
        }
        /*鼠标按下超链接 */
        a:active{
            color: gold;
        }
    </style>
</head>

html语句：
<body>
    <a href="text.html">你好</a>
</body>

（样式的顺序尽量不要变，要不然可能会导致出现错误！）

选择器的权重（优先级）：

通配符选择器：0

标签选择器：1

类选择器：10

ID选择器：100

行内选择器：1000

子代选择器：所使用的所有选择器相加之和

后代选择器：所使用的所有选择器相加之和

eg：如下所示举例，101>11,所以显示为绿色

 <style>
        /* 1+10=11 */
     div .a1{
         color: red;
     }
        /* 1+100=101 */
     div #a2{
         color: green;
     }

    </style>
</head>
<body>
    <div>
        <span>我是div的儿子
            <p class="a1" id="a2">我是div的孙子</p>
        </span>
    </div>
</body>