<!doctype html>
<html lang="en">
<head>
<title>day02</title>
<meta content="day02" charset="UTF-8">
</head>
<body>
<pre>
1、CSS:层叠样式表是网页用来显示效果。可以解决html代码的可维护性,并增强了网页的显示效果功能。CSS将网页内容和显示样式进行分离,提高了显示功能。
-层叠:一层一层的
-样式表:很多的属性和属性值
2、css和html的结合方式(四种结合方式)
-1、在每个html标签上面都有一个属性 style,把css和htnml结合在一起。
-<div style="background-color:red;color:green;">hello world</div>
-2、使用html的一个标签实<style>标签,写在head里面
-<style type="text/css">
div{
background-color:green;
color:yellow;
}
</style>
-3、在style标签里面使用语句
-<style type="text/css">
@import url(../css/div.css);
</style>
缺点:在有些浏览器下不起作用,一般使用第四种方式
-4、使用头标签 link,引入外部css文件
-<link rel="stylesheet" type="text/css" href="css文件路径"/>
样式优先级:由上到下,由外到内,优先级由低到高,后加载的优先级高
代码规范:
-选择器名称{属性名:属性值;}
-属性之间分号隔开
-属性与属性值用冒号连接
-如果一个属性多个值的话,那么多个值用空格隔开
3、css的选择器(三种)
-要对那个标签里面的数据进行操作
-1、标签选择器
*使用标签名作为选择器名称
div{
background-color:green;
color:yellow;
}
-2、class选择器
*每个html标签都有一个属性 class
-<style type="text/css">
.haha{
background:red;
color:blue;
}
</style>
-<div class="haha">hello world</div>
-<p class="haha">hello world</p>
-3、id选择器
*每个html标签上面都有一个属性id
- <style type="text/css">
<!--div-->#haha{
background:red;
}
</style>
-<div id="haha">hello world</div>
-<p id="haha">hello world</p>
*基本选择器的优先级
-class选择器优先级大于标签选择器
-id选择器大于class选择器
-结合方式style高于三种选择器
即:style>id>class>label
4、css扩展选择器
-1、关联选择器:标签是可以嵌套的,两个或者多个选择器之间产生关系,就可以用此选择器
*<div><p>helloworld</p></div>
设置div标签里面的样式,嵌套标签里面的样式
(外标签div和p之间用空格隔开)
- <style type="text/css">
div p{
background:orange;
}
</style>
-<div><p> hello world</p></div>
-2、组合选择器:对多个不同选择器进行相同样式设置的时候应用此选择器
*<div>helloworld</div>
*<p>helloworld</div>
把div和p标签设置成相同的样式,把不同的标签设置成相同的样式
-<style type="text/css">
div,p{background:blue;}
</style>
-<div>hello world</div>
-<p>hello html</p>
-3、伪元素选择器:其实就在html中预先定义好的一些选择器。或者说当前元素处于的状态。
*css里面提供一些定义好的样式,可以拿过来使用
*比如超链接
**超链接状态:
原始状态: :link
鼠标悬停状态::hover
点击状态: :active
点击之后状态::visited
<style type="text/css">
/*原始状态*/
a:link{background:red;}
/*悬停状态*/
a:hover{background:green;}
/*点击状态*/
a:active{background:blue;}
/*点击之后*/
a:visited{background:gray;}
</style>
<a href="http://www.baidu.com" target="_blank">css概述和html结合方式超链接</a>
5、css盒子模型
*在进行布局之前需要把数据封装到一块一块的区域内,这个区域的专业术语叫盒子、
边框:
统一设置 border
上border-top
下border-bottom
左border-left
右border-right
内边距:
统一设置 padding
上padding-top
下padding-bottom
左padding-left
右padding-right
外边距:
统一设置 margin
上margin-top
下margin-bottom
左margin-left
右margin-right
6、css布局的漂浮
*float:left/right
7、css布局定位属性
*position:
-属性值:
**static:默认值 无特殊定位,对象遵循html定位准则、
**absolute:
-将对象从文档流中拖出
-使用left,tright,top,bottom等属性相对于其进行绝对定位、
**relative:
-不会将对象从文档流中拖出,对象不可层叠-依据left,right,top,bottom等属性在正常文档流中绝对位置、
8、案例图文混排 float:left、right应用
9、案例图像签名 position:absolute应用
*在图片上显示文字
10、内容总结:
1、css和html四种结合方式
2、css基本选择器
*标签选择器
*class选择器
*id选择器
**优先级:style>id>class>label
3、css的扩展选择器
*关联选择器
-设置嵌套标签的样式 div p{}
*组合选择器
-不同的标签具有相同的样式 div,p{}
*伪元素选择器
-超链接的状态
*原始:link
*悬停:hover
*点击:active
*点击之后:visited
4、盒子模型
*边框: border:2px solid red;
上下左右:border-top、border-bottom、border-left、border-right
*内边距:padding:20px;
上下左右:padding-top、padding-bottom、padding-left、padding-right
*外边距:margin:20px;
上下左右:margin-top、margin-bottom、margin-left、margin-right
5、布局的漂浮
*float
-left:后面的div到右边
-right:后面的div到左边
6、布局的定位
*position
-absolute:从文档流中拖出
-relative:不会从文档流中拖出
</pre>
</body>
</html>
CSS知识点
猜你喜欢
转载自blog.csdn.net/weixin_39531549/article/details/81054370
今日推荐
周排行