CSS基础常识
(笔记)
简介
* css: 层叠样式
** 样式表: 很多的属性和属性值
* CSS将网页内容和显示样式进行分离,提高了显示功能。 * 是页面显示效果更加好
2、css和html的结合方式(四种结合方式)
(1)在每个html标签上面都有一个属性 style,把css和html结合在一起
<div style="background-color:red;color:green;">
(2)使用html的一个标签实现 <style>标签,写在head里面
<head>
<style type="text/css">
css代码;
</style>
</head>
<!-- 片段2-->
<head>
<style type="text/css">
div {
background-color:blue;
color: red;
}
</style>
</head>
<body>
div{ html代码;}
</body>
(3)在style标签里面 使用语句(在某些浏览器下不起作用)
@import url(css文件的路径);
- 第一步,创建一个css文件
<style type="text/css">
@import url(div.css);
</style>
(4)使用头标签 link,引入外部css文件
- 第一步 ,创建一个css文件
<link rel="stylesheet" type="text/css" href="css文件的路径" />
*** 第三种结合方式,缺点:在某些浏览器下不起作用,一般使用第四种方式
*** 优先级(一般情况)
由上到下,由外到内。优先级由低到高。 *** 后加载的优先级高 (类似于刷墙,越往后刷越上面的越显示)
*** 格式 选择器名称 { 属性名:属性值;属性名:属性值;…….}
3、css的基本选择器(三种)
** 要对哪个标签里面的数据进行操作
(1)标签选择器
* 使用标签名作为选择器的名称
div {
background-color:gray;
color:white;
}
(2)class选择器
* 每个html标签都有一个属性 class
<div class="haha">aaa</div>
.haha {
background-color: orange;
}
(3)id选择器
* 每个html标签上面有一个属性 id
<div id="hehe">id选择器</div>
#hehe {
background-color: #333300;
}
class是" . " ID 是"#"
*** 优先级
style > id选择器 > class选择器 > 标签选择器
4、css的扩展选择器
(1)关联选择器
<div><p>关联选择器</p></div>
* 设置div标签里面p标签的样式,嵌套标签里面的样式
div p {
background-color: green;
}
(2)组合选择器
<div>组合选择器1</div>
<p>组合选择器2</p>
* 把div和p标签设置成相同的样式,把不同的标签设置成相同的样式
div,p {
background-color: orange;
}
(3)伪元素选择器(了解,浏览器的兼容性比较差)
* css里面提供了一些定义好的样式,可以拿过来使用
* 比如超链接
** 超链接的状态
原始状态 鼠标放上去状态 点击 点击之后
:link :hover :active :visited
** 记忆的方法
lv ha
5、css的盒子模型
** 在进行布局前需要把数据封装到一块一块的区域内(div)
(1)边框
border: 2px solid blue;
border:统一设置
上 border-top
下 border-bottom
左 border-left
右 border-right
(2)内边距
padding:20px;
使用padding统一设置
也可以分别设置
上下左右四个内边距
(3)外边距
margin: 20px;
可以使用margin统一设置
也可以分别设置
上下左右四个外边距
6、css的布局的漂浮(了解)
float:
** 属性值
left : 文本流向对象的右边
right : 文本流向对象的左边
7、css的布局的定位(了解)
position:
** 属性值
- absolute :
*** 将对象从文档流中拖出
*** 可以是top、bottom等属性进行定位
- relative :
*** 不会把对象从文档流中拖出
*** 可以使用top、bottom等属性进行定位
重点
1、css和html的四种结合方式(****)
2、css的基本选择器(****)
* 标签选择器 使用标签名
* class选择器 .名称
* id选择器 #名称
** 优先级
style > id > class > 标签
3、css的扩展选择器(了解)
* 关联选择器
- 设置嵌套标签的样式 div p {}
* 组合选择器
- 不同的标签具有相同的样式 div,p{}
4、布局的定位
position
- absolute ** 从文档流中拖出
- relative ** 不会从文档流中拖出