css简单学习总结day02

最新推荐文章于 2024-11-14 17:40:35 发布

Aurevior

最新推荐文章于 2024-11-14 17:40:35 发布

阅读量320

点赞数

分类专栏： JavaWeb学习整理文章标签： css html js

本文链接：https://blog.csdn.net/qq_43598179/article/details/104237989

版权

JavaWeb学习整理专栏收录该内容

10 篇文章 2 订阅

订阅专栏

这篇博客总结了CSS与HTML的结合方式，包括内联样式、内部样式、导入样式和外部样式表。讨论了CSS优先级原则，详细介绍了基本和扩展选择器的用法。此外，还讲解了CSS的盒子模型，包括边框、内边距和外边距。最后，探讨了浮动布局和定位，如float和position属性的应用。

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

代码地址：css

文章目录

一、css与html的结合方法

每个html标签上有属性style，用于结合。（demo1）

<div style="background-color: aqua;color: rebeccapurple"></div>

用head里的标签实现style。（demo2）
```
   <style type="text/css"><style/>
```

在style标签内，@import url（css文件）（demo3）

<style type="text/css">
    @import "css/demo1.css";
</style>

使用头标签link，引入外部css文件（demo4）

<link rel="stylesheet" type="text/css" href="css/demo1.css"/>

二、css的优先级

后加载的优先级高

三、css的选择器

基本选择器

标签选择器标签名作为选择器名称

div{
    background-color: aquamarine;
    color: bisque;
}

class选择器

每个html标签都有个class属性（demo5）

 div.libai{
            background-color: darkcyan;
        }

<div class="libai"></div>

id选择器

每个html标签都有个id属性（demo5）

div#no1{
            background-color: yellow;
        }

<div id="no1"></div>

优先级

style > id选择器 > class选择器 > 标签选择器

扩展选择器

关联选择器

当标签嵌套时，设置嵌套内格式（demo6）

<style type="text/css">
    div p{
    	background-color: crimson;
	}
</style>

组合选择器

当想设置不同标签内的内容相同格式（demo7）

<style type="text/css">
    div,p{
        background-color: coral;
    }
</style>

伪元素选择器

css内提供的样式，可以直接使用

例如对超链接的状态，可以进行不同的设置（demo8）

<style type="text/css">
    a:link{
        background-color: antiquewhite;
        /*原始状态*/
    }
    a:hover{
        background-color: yellow;
        /*悬停状态*/
    }
    a:active{
        background-color: coral;
        /*点击状态*/
    }
    a:visited{
        background-color: crimson;
        /*点击之后*/
    }
</style>

四、css的盒子模型

在进行布局前需要把数据封装到一块一块的区域（div）

边框

border（demo9）

border-top border-bottom border-left border-right

属性有：width style color
内边距

padding（demo10）

padding-top padding-bottom padding-left padding-right

属性有：length
外边距

margin（demo11）

margin-top margin-bottom margin-left margin-right

属性有：length