CSS
1.CSS的简介
*css 层叠样式表
** 层叠: 一层一层的
** 样式表: 很多属性或者属性值
* 使页面显示的效果更好
*css将网页内容和显示样式进行分离,提高了显示功能
2.css和html的结合方式(4种结合方式)
(1)每个html标签上都有一个属性 style, 把css和html结合在一起
-<div style = "background-color : red; color:green;">
(2)使用html的一个标签实现<style>标签,写在head里边
*<style type="text/css">
css 代码;
</style>
*<style type="text/css">
div{
background-color:blue;
color: red;
}
</style>
(3)在style标签里边 使用语句(在某些浏览器上不起作用)
@import url(css文件的路径);
-第一步,创建一个css文件
<style type="text/css">
@import url(css文件的路径);
</style>
(4)使用头标签link,引入外部css文件
-第一步,创建一个css文件
-<link rel="stylesheet" type="text/css" href="css文件的路径"/>
***优先级( 一般情况)
由上到下。由外到内,优先级由低到高
***后加载的优先级高
***格式 选择器名称(属性名:属性值; 属性名:属性值;.......)
3.css的基本选择器(3种选择器)
** 要对哪个标签里边的数据进行操作
(1)标签选择器
* 使用标签名作为选择器的名称
div{
background-color:gray;
color:white;
}
(2)class选择器
*每个html标签都有一个属性 class
例子:
<1> div标签的这个属性背景色设置成黄色
div.haha{
background-color:yellow;
}
-<div class ="haha">aaaaaa</div>
<2>所有标签中有这个haha属性得背景色都是黄色
-.haha{
background-color:orange;
}
(3)id选择器(与class相似)
*每个html标签上面都有一个属性 id
-<div id="hehe">bbbbb</div>
- #hehe{
background-color:gray'
}
***优先级
sytle>id选择器>class选择器>标签选择器
4.css的扩展选择器
(1)关联选择器
*<div><p>wwwwww</p></div>
*设置div标签里面p标签的格式,嵌套标签里面的格式
* div p{ (空格隔开)
background-color:green;
}
(2)组合选择器
*<div>111</div>
<p>22222222</p>
*把div和p标签设置成相同的样式,把不同的标签设置成相同的样式
*div,p{
background-color:orange;
}
(3)伪元素选择器
*css里边提供了一些定义好的样式,可以拿过来使用
*比如超链接
**超链接的状态
原始状态 鼠标放上去的状态 点击 点击后
:link :hover :active :visited
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:(和absolute不同,后边的div不会被补上去)
***不将对象从文档流中拖出
*** 可以是top、bottom等属性进行定位
图片与文字一起显示的例子:
<html>
<haed>
<title>HTML示例</title>
<style>
#imgtex11{
width:350px;
height:300px;
boeder:2px dashed orange;
}
#img11{
float:left;
}
#text1{
color:green;
}
</style>
</head>
<body>
<div id="imagtex11">
<div id="img11"><img src="aa.jpg" width="250" height="200"/></div>
<div id="tex11">啊啊啊啊所多去玩却无号定位虹口区是肯定会</div>
</div>
</body>
</html>