一、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的布局,还是看视频或者自己试一下,什么效果一目了然,文字写很多也不知道写的啥意思。