CSS学习笔记

一、css与html四种结合方法

1、在每个html标签上都有一个属性style，通过这个属性可以把css与html结合起来。
<div style="color:green;background-color:red">hello,world</div>
2、使用html的一个标签实现<style>，写在head里面。

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

3、在<style>标签里使用语句：@import url(css文件路径)，来引入我们写好的css文件。

<style type="text/css">
    @import url(div.css);
</style>

4、使用标签<link>来引入css文件：<link rel="stylesheet" type="text/css" href="div.css" />

一般我们使用第四中方式来引入css文件。

二、css的优先级

后加载的优先级高，一个html文件是从上到下，从左到右加载的。

三、css格式

css文件中的注释是/*注释*/这样的。

选择器名称{
    属性:属性值;
    属性:属性值;
}

四、css的基本选择器

1、标签选择器

div {//div就是标签选择器
    background-color:red;
    color:green;
}

2、class选择器
每个html标签都有一个属性class：<div class="haha">hello</div>

div.haha {
    background-color:red;
    color:green;
}

3、id选择器
每个html标签都有一个属性id：<div id="hehe">hello</div>

div#hehe {
    background-color:red;
    color:green;
}

五、css选择器的优先级

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

六、css的扩展选择器

1、关联选择器

<div><p>hello</p></div>
<p>lalalla</p>

假如我们现在只想改变被<div>括起来的<p>标签改变颜色，我们就可以使用关联选择器。

div p {
    color:red;
}

2、组合选择器

<div>1111</div>
<p>22222</p>

我们想把多个标签设置成相同的样式，可以使用组合选择器。

div,p {
    color:red;
}

3、伪元素选择器
css里提供了一些定义好的样式，我们可以直接拿来使用。
<a href="#">lalala</a>

<style type="text/css">
    a:link {
        background-color:red;
    }
</style>

七、css的盒子模型

在进行布局前需要把数据封装到一块一块的区域内，把这个区域就叫做盒子，我们通常用<div>标签来做盒子。
边框：
border：统一设置
上：border-top
下：border-bottom
左：border-left
右：border-right
语法结构：
border: 粗细 样式 颜色
内边距：

padding：统一设置
也可以上下左右分别设置，方法和边框一样
语法结构：
padding: 距离大小
外边距：
设一个有两个div，一大一小，小的div在大的div里面，而小的div和大div直接的距离就叫外边距。
margin：统一设置
也可以上下左右分别设置，方法和边框一样
语法结构：
margin: 大小

本来还想把css的布局也总结一下，发现css的布局不适合用文字来记录，如果想学css的布局，还是看视频或者自己试一下，什么效果一目了然，文字写很多也不知道写的啥意思。