La combinación de css y html (4 combinaciones):
(1)在每个html标签上面都有一个属性 style,把css和html结合在一起
<div style="background-color:red;color:green">这是一个div</div>
--------------------------------------------------
(2)使用html的一个标签实现<style>,写在head里面
代码:
<html>
<head>
<title>html实例</title>
<style type="text/css">
div{
background-color:blue;
color:red;
}
</style>
</head>
<body>
<div>天行健,君子以自强不息</div>
</body>
</html>
----------------------------------------------------
(3)在style标签里面使用语句:
@import url(css文件的路径)
html代码:
<html>
<head>
<title>html实例</title>
<style type="text/css">
@import url(div.css)
</style>
</head>
<body>
<div>天将降大任于斯人也必先苦其心志劳其筋骨饿其体肤</div>
</body>
</html>
---------------------------------------------
css代码:
div{
background-color:red;
color:green;
}
------------------------------------------
(4)使用头标签link,引入外部文件css
html代码:
<html>
<head>
<title>html实例</title>
<link rel="stylesheet" type="text/css" href="div.css"/>
</head>
<body>
<div>天将降大任于斯人也必先苦其心志劳其筋骨饿其体肤</div>
</body>
</html>
----------------------------------------------
div代码:
div{
background-color:gray;
color:green;
}
El tercer método de combinación no es compatible con algunos navegadores, usualmente usamos el cuarto método
Tres selectores de css:
语法:
选择器名称 {
属性名:属性值;属性名:属性值;…….}
(1)标签选择器:使用标签名作为选择器
代码:
<html>
<head>
<title>html实例</title>
<style type="text/css">
div{
background-color :blue;
color:red;
}
p{
background-color :blue;
color:red;
}
</style>
</head>
<body>
<div>天将降大任于斯人也必先苦其心志劳其筋骨饿其体肤</div>
<p>你快乐吗,我很快乐</p>
</body>
</html>
----------------------------------------------------
<html>
<head>
<title>html实例</title>
<style type="text/css">
p{
background-color :green;
color:red;
}
</style>
</head>
<body>
<p>天将降大任于斯人也必先苦其心志劳其筋骨饿其体肤</p>
</body>
</html>
---------------------------------------------
(2)class选择器:每个html上面都有一个class属性。
代码:
<html>
<head>
<title>html实例</title>
<style type="text/css">
div.hello{
background-color :gray;
color:red;
}
</style>
</head>
<body>
<div class="hello">天将降大任于斯人也必先苦其心志劳其筋骨饿其体肤</div>
</body>
</html>
---------------------------------------------------
(3)id选择器:每个html上面都有一个class属性
代码:
<html>
<head>
<title>html实例</title>
<style type="text/css">
div#hahah{
background-color :green;
color:black;
}
</style>
</head>
<body>
<div id="hahah">天将降大任于斯人也必先苦其心志劳其筋骨饿其体肤</div>
</body>
</html>
------------------------------------------------
扩展选择器:
(1)关联选择器:设置div标签里面p标签的样式,嵌套标签里面的样式
代码:
<html>
<head>
<title>html实例</title>
<style type="text/css">
div p{
background-color:gray;
color:yellow;
}
</style>
</head>
<body>
<div><p>css扩展选择器</p></div>
</body>
</html>
----------------------------------------------------
(2)组合选择器:设置不同标签的相同样式
代码:
<html>
<head>
<title>html实例</title>
<style type="text/css">
div,p{
background-color:gray;
color:yellow;
}
</style>
</head>
<body>
/*设置不同标签的相同样式*/
<div>笑傲江湖</div>
<p>css扩展选择器</p>
</body>
</html>
--------------------------------------------------
(3)伪元素选择器:(了解,浏览器的兼容性比较差)
css里面提供了一些定义好的样式,可以拿过来使用
比如超链接:
超链接的状态:
原始状态 鼠标放上去状态 点击 点击之后
:link :hover :active :visited
记忆的方法
lv ha
代码:
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
/*原始状态*/
a:link {
background-color: red;
}
/*悬停状态*/
a:hover {
background-color: green;
}
/*点击状态*/
a:active {
background-color: blue;
}
/*点击之后的状态*/
a:visited {
background-color: gray;
}
</style>
</head>
<body>
<a href="http://www.sina1.com.cn" target="_blank">CSS概述和与HTML的结合方式超链接一</a>
</body>
</html>
Modelo de caja CSS:
代码:
<html>
<head>
<title>html实例</title>
<style type="text/css">
//设置整个边框
div{
width:300px;
height:100px;
border:3px solid blue;
}
//设置第二个的内边距
div#hello2{
padding:50px
}
div#hello3{
padding-top:80px
}
//设置第二个的外边距
div#hello2{
margin:30px
}
div#hello3{
margin-left:100px
}
</style>
</head>
<body>
<div id="hello1">天将降大任于斯人也必先苦其心志劳其筋骨饿其体肤1</div>
<div id="hello2">天将降大任于斯人也必先苦其心志劳其筋骨饿其体肤2</div>
<div id="hello3">天将降大任于斯人也必先苦其心志劳其筋骨饿其体肤3</div>
</body>
</html>`
El diseño flotante de CSS (una comprensión simple):
Posicionamiento del diseño CSS:
position属性值:
absolute:将对象从文档流中拖出,使用top,bottom等属性进行定位。
relative:不会把对象从文档流中拖出,使用top,bottom等属性进行定位。
------------------------------------------------