CSS基础

最新推荐文章于 2024-04-16 15:27:29 发布

sun-flower__

最新推荐文章于 2024-04-16 15:27:29 发布

阅读量325

点赞数 1

分类专栏： Web 修炼文章标签： css html css3

本文链接：https://blog.csdn.net/L__HH/article/details/119577705

版权

Web 修炼专栏收录该内容

12 篇文章 1 订阅

订阅专栏

本文详细介绍了CSS的基础知识，包括CSS的编写位置（行内、内嵌和外部样式表）、基本语法、选择器（如ID、类和伪类选择器）、超链接伪类、伪元素选择器、样式继承、选择器权重以及常用的单位（像素、百分比、em和rem）。此外，还讨论了颜色的表示方法，如RGB和十六进制。通过对这些概念的理解，读者能够更好地掌握CSS，为网页样式设计打下坚实基础。

摘要由CSDN通过智能技术生成

CSS基础

文章目录

CSS基础

1、简介

CSS 是一种描述 HTML 文档样式的语言。
CSS 描述应该如何显示 HTML 元素。
本教程将从零起点的基础教程开始，一直到 CSS3 高级教程，为您提供全面系统地讲解。
是设置网页的样式设置，让网页看起来更加好看。

称为层叠样式表，通过css可以分别为网页的每一层设置样式，而最终我们只能看到网页最上面的一层。

2、CSS编写的位置

一共有三种方式，行内式（内联样式）、内嵌式（内部样式表）、外部样式表。

1、行类式：

在标签中直接通过style属性为标签设置样式，样式格式如下。

<p style="color: red;font-size: 26px;">CSS样式行类式样式</p>

**优点：**可以直接对某个样式直接设置样式。

**缺点：**样式只能对当前的标签起作用，如果希望对多个标签设置样式就必须都复制一遍，不容易修改和维护。在开发中应努力避免使用该方式。

2、内嵌式：

在head标签中编写，写在head中的style标签中，然后通过CSS选择器来设置对应标签的样式，格式如下。

<head>
    <meta charset="UTF-8">
    <title>CSS的编写位置</title>
    <!-- 第二种方式-->
    <style>
        p{
            color: red;
            font-size: 26px;
        }
    </style>
</head>

**优点：**可以同时为多个标签设置样式，并且修改的时候只需修改一次。

**缺点：**它只能对一个页面起作用，不能过重复使用。

3、外部样式表：

在外部需要创建一个css文件，可以在该文件中使用选择器来设置样式，然后在网页中引入该文件。

css文件：

p{
    color: red;
    font-size: 26px;
}

网页中引入css文件：

<link rel="stylesheet" href="css/CSS的编写位置.css" type="text/css">

**优点：**这样就可以使修改一次就可全部修改，其它页面也是可以使用该样式文件，达到重复使用。将css样式写在css样式文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户体验。

3、CSS的基本语法

CSS的注释：

/*注释的内容，会被浏览器自动忽略*/

CSS的语法：

p{
    color: red;
    font-size: 26px;
}

格式：选择器声明快

**选择器：**p就是选择器，它选择页面的所有的 p标签。

**声明快：**大括号的内容就是声明快，通过声明来设置网页中的样式。声明快由一个一个声明组成，声明是一个键值对的形式

**声明名称:声明的值;**color是声明的名称，red是声明的值，一个样式名对应一个样式值。

4、常用选择器

分为简单选择器、组合选择器、伪类选择器、伪元素选择器、属性选择器。

简单选择器：

1、元素选择器：（标签选择器）根据标签名来指定元素的样式，例如p{}、h1{}、img{}等，这样网页中这类的标签全部都变成该样式。

p{
    color: red;
    font-size: 26px;
}

这样页面中的p标签全部就为该属性，但是这样也会存在一定的问题。

2、id选择器：根据id来设置对应标签的样式。

<p id="two">常用选择器的学习2</p>

#two{
    color: green;
    font-size: 26px;
}

这样就可以给某一个标签设置样式，因为id在页面中是唯一的，只会选择设置了对应id的标签。

3、类选择器：根据设置的类名来设置对应标签的样式。

<p class="three">常用选择器的学习3</p>
<p class="three">常用选择器的学习4</p>

class属性和id类似，但是id是唯一的，class可以重复，可以通过class来为标签分组，class的值相同的标签为同一组。

.three{
    color: red;
    font-size: 26px;
}

类选择器通过上面的格式来设置标签，class选择器在开发中用得比较多。可以为同一个标签设置多个class，多个class之间使用空格隔开。

<p class="three a">常用选择器的学习3</p>

这样上面得p标签就有两个class，分别是three和a，通过这两个都可以来选择该标签。

4、通配选择器：选中页面中得所有标签。

格式：*{ 声明内容 }

组合选择器：

1、交集选择器：选中同时符合多个条件得元素。

语法：选择器1选择器2选择器3{ }

例如：

<div class="test">我是盒子</div>
<p class="test">我是段落</p>

div.test{
   color: red;
}

这就选择了即是盒子也有类名为test得元素。

注意：交集选择器中有元素选择器，必须由元素选择器开头。

2、并集选择器：同时选中多个选择器对应的元素。

语法：选择器1,选择器2,选择器3{ }

例如：

<h1>我是一级标题</h1>
<span>我是span</span>

h1,span{
    color: red;
}

这样就同时选择了h1和span元素，可以为他们设置同一种样式。

注意：选择器之间使用逗号隔开。

3、父子兄弟选择器：（关系选择器）

<div>
    我是一个div
    <p>
        我是div中的p
        <span>我是p中的span</span>
    </p>
    <span>我是div中的span</span>
</div>

拓展：

父元素：直接包含子元素的元素是父元素，上面中div就是p和span（div中的span）中的父元素。

子元素：直接被父元素包含的元素是子元素，上面中p和span（div中的span）是div的子元素。

祖先元素：直接或间接包含后代的元素是祖先元素，一个元素的父元素也是祖先元素，上面的div是p和span的祖先元素。

后代元素：直接或间接被祖先元素包含的元素是后代元素，上面的p和span是div的后代元素。

兄弟元素：拥有相同的父元素就是兄弟元素，上面的p和span（div中的span）就是兄弟元素。

选中父元素中的子元素：

语法：父元素 > 子元素{ }

例如：

div > span{
    color: red;
}

这样就选中了div中的span元素，就可以对其设置样式。

后代元素选择器：

语法：父元素子元素{ }

例如：

div span{
    color: red;
}

这样就选择了div中的所有span，包括p中的span。

兄弟元素选择器：

语法1：前元素 + 后元素{ }。 选择距前元素最近的后元素，就是找下一个。

例如：

p + span{
    color: red;
}

这样就选择了div中的span元素，必须是兄弟元素。

语法2：前元素 ~ 后元素{ }。 选择前元素后面的所有的元素。

例如：

p ~ span{
    color: red;
}

这样就选择了p后面的所有的span元素，必须兄弟元素。

4、属性选择器：根据标签的属性来选择指定的标签，class、id都是属性，但是一般不对于它们使用，它们有专门的选择器。

<p title="test1">我有属性title1</p>
<p title="test2">我有属性title2</p>
<p>我有属性title3</p>
<p>我有属性title4</p>

我们使用title属性来测试。

方式一：我们选择有title属性的标签。

语法：[属性名] { }

例如：

[title]{
   color: red;
}

这就选中了具有title属性的标签。

方式二：我们可以选择指定元素具有指定属性的元素。

语法：元素名[属性名]{ }

例如：

p[title]{
    color: red;
}

这样我们就选择了有title属性的p元素。

方式二：我们选择指定属性且具有指定的属性值的元素。

语法：元素名[属性名=属性值]{ }

例如：

p[title=test1]{
    color: red;
}

方式三：我们选择属性的属性值以什么开头的元素。

语法：元素名[属性名^=值]{ }

例如：

p[title^=t]{
   color: green;
}

这样就选择了具有title属性的p，且title的值以t开头。

方式四：我们选择属性的属性值以什么结尾的元素。

语法：元素名[属性名$=值] { }

例如：

p[title$='1']{
    color: #0f6674;
}

这样就选择了具有title属性的p，且title的值以1开头。

方式五：我们选择属性的属性值包含某个值的元素。

语法：元素名[属性名*=值] { }

例如：

p[title*='1']{
    color: #0f6674;
}

这样就选择了具有title属性的p，且title的值中包含指定的值1。

注意：在指定值得时候，如果值是数字需要使用冒号（单、双）包裹。

5、伪类选择器：一个不存在的类，特殊的类，伪类用来描述元素的特殊状态，例如第一个元素、被点击的元素、鼠标移入的元素等。

伪类一般使用冒号开头:

使用以下代码测试：

<ul>
    <li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
    <li>第四个</li>
    <li>第五个</li>
</ul>

常见伪类：语法：父元素>子元素:伪类名称{ }

:first-child伪类：选中第一个元素是否为指定的子元素，如果是就改变样式。

ul>li:first-child{
	color: red;
}

:last-child伪类：选中最后一个元素是否为指定的子元素，如果是就改变样式。。

ul>li:last-child{
   color: red;
}

nth-child(n)伪类：选中n个元素是否为指定的子元素，如果是就改变样式。。

ul>li:nth-child(3){
    color: red;
}

这就是把第3个子元素设置样式，n的范围是0~正无穷。这个有几个特殊的值，n、2n、2n+1、odd、even。

n表示全部子元素。
2n表示偶数位置的子元素。
2n+1表示奇数位置的子元素。
odd表示奇数位置的子元素，与2n+1相同效果。
even表示偶数位置的子元素，与2n相同效果。

注意：以上这些伪类都是根据所有的子元素进行排序的。都是以ul的子元素li来排序，如果存在其它元素，其它元素也是要排序的。

与上面相似的伪类：

:first-of-type、:last-of_type、:nth-of-type(n)。

这写与上面的类似，但是它是在同一类型的元素中排序。

not(除去的元素)：选中除去元素之外的其它子元素。

ul>li:not(li:nth-child(4)){
    color: green;
}

这也是在全部的子元素中，选中除去第四个的其它元素，也可以在同一种元素中筛选。

5、超链接的伪类

超链接状态的分类，访问过的链接、未访问过的链接

访问过的链接：把访问过的超链接设置相应的样式。

语法：链接:visited{ }

a:visited{
    color: green;
}

由于隐私的原因，visited这个伪类只能设置超链接的颜色。不建议设置该伪类，需求需要可以设置

未访问过的链接：把为访问过的超链接设置相应的样式。

语法：链接:linked{ }

a:link{
    color: red;
}

鼠标移入的伪类：鼠标移入，选择该元素，然后可以设置该样式。

语法：元素:hover{ }

a:hover{
    background-color: #1e7e34;
}

除了超链接可以设置该伪类，其它元素也是可以设置该伪类的。

鼠标点击伪类：鼠标点击，选择该元素，然后设置该样式。

语法：元素:active{ }

a:active{
    font-size: 30px;
}

除了超链接可以设置该伪类，其它元素也是可以设置该伪类的。

注意：前两个是超链接特有的，而后面两个是所有元素都可以使用的。

注意：a:hover必须在 CSS 定义中的a:link和a:visited之后，才能生效！a:active必须在 CSS 定义中的a:hover` 之后才能生效！伪类名称对大小写不敏感。

6、伪元素的选择器

伪元素表示页面中一些特殊的并不真实存在的元素。（特殊的位置）

语法：元素::伪元素的名称{ } （中间有两个冒号）

::first-letter{ }，表示选中段落中的第一个字母。

p::first-letter{
    font-size: 30px;
}

::first-line{ }，表示选中第一行。

p::first-line{
    background-color: blue;
}

::selection{ }，表示用户选中的内容。

p::selection{
    color: red;
}

注意：只能给选中的内容设置颜色样式，包括color、背景颜色。

::befor{ }，表示选中元素内容开始的位置。

<div>Hello,world!</div>

div::before{
    content: '你好，世界！';
}

这就选中了H前面的位置，这个伪类需要配合content属性使用。该方式是通过css来向页面中添加内容，不能够被选中。

::after{ }，表示选中元素内容结束的位置。

div::after{
    content: '该元素结束了！';
    color: red;
}

7、继承

我们为一个元素设置样式，同时后代元素也会有相应的样式，相当于后代元素继承了父元素的样式。

<div>
    我是div中的元素
    <p>我是p元素</p>
</div>

div{
    color: red;
}

我么为div设置了样式，div中的p元素可以继承div的样式。

继承是发生在祖先和后代之间的。

利用继承我们可以将一些通用的样式设置在祖先元素上，这样我们就只需设置一次就可以让所有元素有该样式。

注意：并不是所有的样式都会被继承，例如背景相关的、结构相关的不能被继承

8、选择器的权重

样式冲突：当我们通过不同的选择器来选中同一个元素，并为其设置样式，此时就放生了样式冲突。

发生样式冲突时，我们通过选择器的权重来决定

选择器的权重：

内联样式（1000）–》id选择器（100）–》类选择器和伪类选择器（10）–》元素选择器（1）–》通配选择器（0）–》继承的样式（没有权重）

从左到右，权重越来越小。

注意：比较优先级的时候，需要将所有选择器的权重进行相加，最后由优先级最高的选择器决定。（多用于组合选择器）

div#box1{
    background-color: green;
}

这个选择器的权重就是，元素选择器+id选择器 === 100+1

注意：选择器的累加不会超过上一级的选择器（最大的数量级），例如类选择器的累加不能超过id选择器。

注意：如果优先级计算相等，则优先使用靠下的选择器（覆盖）。

注意：我们可以在某一个样式的后面添加一个!important，这个使样式等级最高，比行类样式还高。但是存在问题，不到万不得已的时候不要使用。

.red{
    color: red !important;
}

9、单位

像素：屏幕（显示器）实际上是由一个一个小方格构成的，一个小方格就是一个像素。
- 不同屏幕的像素大小是不同的，像素越小的屏幕显示得越清晰。
- 单位是px。
```
.box1{
    width: 200px;
    height: 300px;
    background-color: #1e7e34;
}
```
这就设置box1的宽高分别为200px、300px。
白分比：也可以将单位设置为相对于父元素属性的白分比，单位是%。

.box1{
    width: 50%;
    height: 50%;
    background-color: #1e7e34;
}

这样有一个好处，就是子元素的大小可以根据父元素的大小改变而改变。

em和rem

em：它是根据元素的字体大小来计算的，1em = 1 font-size，它可以随着字体的大小改变而改变。

rem：它是根据根元素（html元素）的字体大小来计算的。

颜色单位

以下是几种颜色的表达方式：

通过直接使用颜色名来设置各种颜色，例如red、blue、yellow，但是直接使用颜色名不方便，记不住和不好描述。
RGB值来表示颜色，通过三种不同颜色的浓度来表示不同颜色，Red、Green、Blue，每一种颜色的范围在0到255之间，也可以使用0%~100%表示。

表示方式：

.box1{
    width: 50%;
    height: 50%;
    background-color: rgb(2,23,67);
}

RGBA是RGB的基础上增加一个不透明度，最后一个值表示透明度，范围是0~1，1表示不透明，0表示全透明。

表示方式：

.box1{
    width: 50%;
    height: 50%;
    background-color: rgba(2,23,67,.8);
}

十六进制的颜色表示，语法：#红色绿色蓝色

表示方式：

.box1{
    width: 50%;
    height: 50%;
    background-color: #1e7e34;
}

注意：如果颜色两位两位重复，可以简写，例如#aabbcc简写为#abc，但是一个重复就不可以简写。

sun-flower__

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录