CSS基本内容

最新推荐文章于 2023-03-04 22:37:12 发布

小花仙呐~

最新推荐文章于 2023-03-04 22:37:12 发布

阅读量185

点赞数

文章标签： css

本文链接：https://blog.csdn.net/h379028139/article/details/124452859

版权

CSS基础内容

css简介

概念：CSS 指的是层叠样式表* (Cascading Style Sheets)，CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素，CSS 节省了大量工作。它可以同时控制多张网页的布局，外部样式表存储在 CSS 文件中。

样式

在标签里直接设置的样式

<p style="color: red; font-size: 60px;">123</p>

内部样式：将样式编写到head中的style标签里，然后通过CSS选择器来选中元素并为其设置各种样式，可以同时为多个标签设置样式，并且修改时只需要修改一处即可全部应用。

<style>
        p{
            color: green; 
            font-size: 50px;
        }

外部样式:可以将CSS样式编写到一个外部的 CSS文件中, 通过link标签进行引入。
优点：将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。

格式：<link rel="stylesheet" href="./style.css">
请添加图片描述

CSS语法

注释：/* */

语法：选择器声明块
- 选择器：可以选定指定元素
  比如p标签，可以选中页面中所有的p元素
- 声明块：给元素设置样式
  声明是名值对结构，以冒号：连接；结尾

<style>
        p{
            color: blue;
            font-size: 40px;
        }

CSS常用选择器

id选择器
- 作用：根据元素的id属性值选中一个元素
- 语法：#id属性值{}
- 例子：#box{} #red{}

代码：

<head>
	<style>
    #abc{
           color: blue;
       } 
   </style>
</head>
<body>
<p id="abc">少小离家老大回</p>
</body>

类选择器
- 作用：根据元素的class属性值选中一组元素
- 语法：.class属性值
- 例子：.blue{}、.red{}

代码：

   	 .blue{
           color: chartreuse;
       }
       .abc{
           font-size: 20px;
       }

<h1 class="blue abc " >少小离家老大回</h1>

通配选择器
- 作用：选中页面中的所有元素
- 语法：*

CSS复用选择器

交集选择器
- 作用：选中同时符合多个条件的元素
- 语法：选择器1选择器2选择器3选择器n{}
- 例子：div.red{} 注意:交集选择器中如果有元素标签，必须使用元素选择器开头

代码：

<style>
h1 .blue{
        font-size: 40px;
        color: rgb(111, 0, 255);
    }
    </style>

    <h1 class="blue">bbbbb</h1>

并集选择器
- 作用：选中多个选择器对应的元素，满足选择器其一即可改变
- 语法：选择器1，选择器2，选择器3，选择器n{}
- 例子：div，.red{}

代码：

	p,.blue{
        font-size: 40px;
        color: rgb(111, 0, 255);
    }

	<p >aaaaa</p>
    <h1 class="blue">bbbbb</h1>

CSS关系选择器

子元素选择器
- 含义：直接被父元素包含的元素叫子元素
- 语法：父元素>子元素{}
- 例子：div>span{}

代码：

<style>
        div>span{
            color: blue;
        }
    </style>
</head>
<body>
  <div >
        这里是div标签
        <p>
            这里div里面的是P标签
            <span>这里是p里面的span标签</span>
        </p>
        <span>div里面的span标签</span>
    </div> 
</body>

结果：
在这里插入图片描述

后代元素选择器
- 含义：直接或者间接被祖先元素包含的元素叫做后代元素
- 语法：祖先后代{}
- 例子：div span{} 选择div里面的所有后代为span的元素
  代码：

<style>
        div>span{
            color: blue;
        }
    </style>
</head>
<body>
  <div >
        这里是div标签
        <p>
            这里div里面的是P标签
            <span>这里是p里面的span标签</span>
        </p>
        <span>div里面的span标签</span>
    </div> 
</body>

结果：
在这里插入图片描述

兄弟元素选择器
- 含义：拥有相同父元素的元素是兄弟元素
- 语法：1.前一个+后一个选择后一个兄弟 2.前一个~后一个选择后一个之后的全部兄弟元素
- 例如：p+span{},和前面子元素选择器的效果是一样的。

CSS属性选择器

作用：指定标签里面的属性的元素
语法：标签 [属性名] {} 满足标签且有这个属性名的
标签[属性名=”属性值”] {} 满足标签且有这个属性名的，还有值确定的
标签[属性名^=”属性值”]{} 选择属性值以指定值开头的元素
标签[属性名$=”属性值”]{} 选择属性值以指定值结尾的元素
标签[属性名*=”属性值”]{} 属性值中含有某值的元素
例子： p[title]{} p[title=”123”]{} p[title^=”123”]{} p[title$=”123”]{} p[title*=”123”]{}

代码：

<head>
<style>

 p[title*="a"]
        {
            color: aqua;
        }

</style>
  </head>
  <body>
	 <p title="abc">少小离家老大回</p>
	<p title="abc123hb">乡音无改鬓毛衰</p>
	<p title="def">儿童相见不相识</p>
	<p>笑问客从何处来</p>
  </body>

结果：
在这里插入图片描述

CSS伪类选择器

含义：不存在的类，特殊的类，伪类用来描述一个元素的特殊状态，比如：第一个子元素、被点击的元素、鼠标移入的元素…
语法：伪类一般情况下都是使用：开头
- ：first-child 第一个子元素
- ：last-child 最后一个子元素
- ：nth-child(n) 选中第n个子元素
  - n的值：
  0~正无穷
  2n选中偶数的元素
  2n+1 或者odd选中奇数位的元素
  (这些伪类都是依据所有的子元素进行排序)
:first-of-type
:last-of-type
:nth-of-type(n)
-这几个伪类的功能和上述的类似，不同点是在同类型元素中的排序
代码：

<head>
<style>
 ul>li:not(:nth-of-type(3))
       {
           color: yellowgreen;
       }
</style>
 </head>
 <body>
    <ul>
       <span>123</span>
       <li>第一个 </li>
       <li >第二个</li>
       <li>第三个</li>
       <li>第四个</li>
       <li>第五个</li>
   </ul>
 </body>

结果：
在这里插入图片描述

CSS a元素的伪类

a元素超链接的伪类设置

link：表示没访问过的链接（正常的链接）
visited：表示已经访问过的链接，注意的是font-size在visited设置无效，因为隐私的原因，只能修改颜色
hover：用来表示鼠标移入的状态
active ：用来表示鼠标点击
使用格式：a:属性{}，例如：a:link{}

CSS伪元素选择器

含义：伪元素，表示页面中一些特殊的并不真实存在的元素（特殊的位置）
要求：伪元素以：：开头
属性：

::first-letter{} 表示第一个字母
::first-line{} 表示第一行
::selection{} 表示选中的内容
::before{} 表示元素的开始
::after{} 表示元素的最后
-before和after必须结合content属性来使用,且不能被选中
content属性就是里面的值无法被选中。

<head>
<style>
div::before{
            content: 'abc';
            color: rgb(47, 107, 160);
        }
        div::after{
            content: '123';
        }
    </style>
</head>
<body>
<div>Hello Hello</div>
</body>

结果：
在这里插入图片描述

CSS样式的继承

样式的继承，我们为一个元素设置样式同时也会应用到它的后代元素上
注意：并不是所有的样式都会被继承
比如：背景相关的，布局相关的样式都不会被继承

CSS选择器的权重

样式的冲突
-当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值是，此时发生了样式冲突,发生冲突时，由选择器的权重（优先级）决定.

选择器	优先级
内联样式（行内样式）	1，0，0，0
id选择器	0，1，0，0
类（class)和伪类选择器	0，0，1，0
元素选择器	0，0，0，1
通配选择器	0，0，0，0
继承选择器	没有优先级

比较选择器时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则优先显示
分组选择器单独计算选择器1，选择器2，如果优先级计算后相等，优先使用靠下的样式。
代码：

<head>
<style>
	div{
            color: yellow;
        }

        .red{
            color: bule;
        }

        #box1{
            color:red ;
        }
    </style>
</head>
<body>
 <div id="box1"  class="red">我是一个div</div>
</body>

结果：
在这里插入图片描述

CSS像素和百分比

像素

屏幕（显示器）实际上是由一个一个小点构成
不同屏幕的像素是不同的，像素越小的屏幕显示的效果越清晰
所以同样的200px在同样的设备下显示效果不一样
表示： px

百分比

可以将属性在设置为相对于其父元素属性的百分比
设计百分比可以使子元素跟随父元素的属性值
表示： %

em:

em是相对于元素的字体大小来计算的
1em=1 font_size,em会根据字体大小的改变而改变

rem

rem是相对于根元素而字体大小来计算，根元素就是html字体的元素

代码：

<head>
<style>
 html{
            font-size: 10px;
        }
        
		.box1{
            width: 100px;
            height: 100px;
            background-color: rgb(140, 187, 54);
        }
	 .box2{
            width: 50%;
            height: 50%;
            background-color: blue;

        }
        .box3{
            font-size: 30px;
            width: 10rem;
            height: 10rem;
            background-color: rgb(207, 111, 31);
        }
    </style>
</head>
<body>
 <div class="box1">
        <div class="box2"></div>
    </div>
    <div class="box3"></div>
</body>