前端学习——CSS入门

最新推荐文章于 2024-09-24 15:55:35 发布

tyra_y

最新推荐文章于 2024-09-24 15:55:35 发布

阅读量204

点赞数

分类专栏：前端学习笔记文章标签： css 前端学习 css3

本文链接：https://blog.csdn.net/qq_45727209/article/details/124549023

版权

本文是关于CSS入门的学习指南，涵盖了CSS的引入方式，包括内部样式表、外部样式表和内联样式表。详细介绍了常用选择器，如通配选择器、标签选择器、类选择器、ID选择器等。此外，还讲解了盒模型，包括边框、内边距、外边距和怪异盒模型。最后，文章提到了定位概念，如静态定位、相对定位、绝对定位和固定定位。

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

CSS引入方式

1. 内部样式表

（1）写在html文件的head标签中，例：

<style>
    div{}
</style>

（2）在内部表中引入CSS文件，例：

<style>
    @import url(“second.css”);
    div{}
</style>

2. 外部样式表（写在.css文件下）

（1）在html文件中的head标签下用link引入，例：

<link rel="stylesheet" href="css/first.css">

（此处link标签中的属性介绍请参见前端学习——HTML入门）

（2）在.css文件中引入其他.css文件

例：在first.css文件中引入second.css文件（first.css文件必须在html文件中引入，才会使first.css文件和second.css文件在html文件中生效）

@import url(“second.css”);

3. 内联样式表

给任意一个标签一个style属性

当三种样式表均存在时，内部样式表与外部样式表取决于哪个后引⼊；内联样式表的优先级最⾼

常用选择器

1. 通配选择器

给html网页的所有body内容添加的统一样式，例：

*{}

2. 标签选择器

选用的某类标签，例：

div {}

3. 类选择器

给标签赋予class属性，在选择器中用类名体现；一个标签可以赋多个类名，中间用空格隔开，例：

css部分：.类名1 {}
html部分：<div class="类名1 类名2"></div>

4. id选择器

给标签赋予id属性，在选择器中用id名体现；一个标签的id名建议一般只给一个，例：

css部分：.id名 {}
html部分：<div id="id名"></div>

5. 后代选择器

只在选择器1中的选择器2，选择器2只要在选择器1以内都满足条件，例：

css部分：div div {}
html部分：
<div>
    <div class="类名1">
        <div class="类名2"></div>  
    </div>    
    <div class="类名1"></div>
</div>
<!-- 为类名1和类名2的部分都被选择 -->

6. 群组选择器

同时选用选择器1和选择器2，例：

选择器1,选择器2 {}

7. 子代选择器

选用选择器1的直接子集选择器2，例：

css部分：div div {}
html部分：
<div>
    <div class="类名1">
        <div class="类名2"></div>  
    </div>    
    <div class="类名1"></div>
</div>
<!-- 只有类名1的部分被选择 -->

8.属性选择器

选用具有某属性的选择器，例：

css部分：[type] {}
html部分：
<div>
    <form>
        <input type="text">
    </form>
</div>
<!-- input标签被选择 -->

9. 伪类选择器

描述元素的某种状态

:hover {} 鼠标覆盖在元素上时体现地某种样式
:active {} ⿏标在元素上并按下左键时体现地某种样式
:link {} 元素点击链接前时体现地某种样式
:visited {} 元素链接点击后时体现地某种样式
:focus {} 获取焦点时体现地某种样式
:first-child {} 第⼀个⼦级体现地某种样式，必须是⽗级模块的第⼀个⼦级元素
:first-of-type {} 特定的第⼀个⼦级体现地某种样式，只需要是当前指定类型的标签就可，不⽤是⽗级模块的第⼀个⼦级元素
:last-child {} 最后⼀个⼦级体现地某种样式
:last-of-type {} 特定的最后⼀个⼦级体现地某种样式
:nth-child(n) {} 第n个⼦元素体现地某种样式
:nth-of-type(n) {} 指定类型的第n个⼦元素体现地某种样式
:nth-last-child(n) {} 倒数第n个⼦元素体现地某种样式
:nth-last-of-type(n) {} 指定类型的倒数第n个⼦元素体现地某种样式

tips:

在第6~第13种选择器中，更推荐使用加type的伪类选择器
a标签4种伪类，应按顺序书写：:link,:visited,:hover,:active

10. 伪元素选择器

可以理解为某个元素的子元素，但不存在于html中，例：

p::before{
    <!-- content为必写内容 -->
    content:"大家好我是";
    color：red;
}

::before {} 元素前的内容体现地某种样式
::first-line {} ⽂本的第⼀⾏样式体现地某种样式
::first-letter {}⽂本的⾸字⺟，只⽤于块元素体现地某种样式
::palceholder {} 只⽤于表单的提示本⽂体现地某种样式

选择器的优先级：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

背景(background)

背景⾊background-color：颜⾊的表示⽅式——单词；rgba(红⾊(0-255)，绿⾊，蓝⾊，透明度(0-1))；rgb；⼗六进制(#000000-#ffffff)
背景图：background-image: url();
背景图尺寸：background-size: 宽⾼；背景图尺⼨（contain：⻓边占满⽗级，宽⾼等⽐例；cover：短边占满⽗级，宽⾼等⽐例）
背景图平铺⽅式，例：background-repeat: no-repeat;
背景图位置：background-position: x y;(可以写center center，代表x y⽅向都在⽗级居中显示）