div: 独占一行eg
eg:
<html> <style type="text/css"> div{border:1px solid #ff0000} </style> <body>
<div id="dv">aaaa</div>
<div id="dv1">aaaa</div>
<div id="dv2">aaaa</div>
</body>
</html>
aaaa
aaaa
aaaa
span:
eg: <html> <style type="text/css"> span{border:1px solid #00ff00} </style> <body> <span>bbb</span>
<span>bbb</span> </body> </html>
bbb bbb
ul li
<ul type="square circle disc">
<li>aa</li>
<li>bb</li>
</ul>
ol li
<ol type="1 a i">
<li>aa</li>
<li>bb</li>
</ol>
css:
替代属性,不用写在标记中
实现表现与结构分离,便于管理,是页代码整结
web 2.0思想
web 2.0： div+css架构页面
html5 css3:在web 2.0思想基础上添加了一些内容
css调用方式:
1. CSS的格式:
{样式名称：样式值；样式名称:样式值;...}
2.html页面中如何调用css 表现和结构分离
A：标记上直接使用style属性来调用样子
<标记 style="样式名称:样式值；样式名称:样式值；样式名称:样式值...">
eg:
<body>
<div style="border:1px solid #ff0000">我很爱国</div> 与<div type 类似>
</body>
B：
eg:
</head>
<style type="text/css">
样式列表
</style>
<body>
C:外部调用样式
html.html 调用 index.css
<head>
<link href="index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
</body>
css选择器:在页面中找到元素
1.使用选择器的格式
选择器{样式名称：样式值;样式名称：样式值....}
2.css的六中选择器
1.通配选择器,选择页面上所有元素
eg:
a.html:
<head>
<link href="index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div>aaaaa</div>
<span>cccc</span>
<a href="www.baidu.com">bbb</a>
</body>
index.css:
*{
border:1px solid #ff0000
}
2.标记选择器: 标记名称{ }
eg: a.html: <head> <link href="index.css" rel="stylesheet" type="text/css"/> </head> <body> <div>aaaaa</div> <span>cccc</span> <a href="www.baidu.com">bbb</a> <div>ddd</div> </body> index.css: div{ border:1px solid #ff0000 }
3:class选择器:选择具有相同class属性的元素 ： .classname{} ： 可以同类不同名的选择器
eg: a.html: <head> <link href="index.css" rel="stylesheet" type="text/css"/> </head> <body> <div class="one">aaaaa</div> <span class="one">cccc</span> <a href="www.baidu.com">bbb</a>
<div>ddd</div> </body> index.css: .one{ border:1px solid #ff0000 }
4.id选择器：#id{}
eg:
a.html:
<head>
<link href="index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="dv">aaaaa</div>
<span >cccc</span>
<a href="www.baidu.com">bbb</a>
<div>ddd</div>
</body>
index.css:
#dv{
border:1px solid #ff0000
}
id:唯一
5.群组选择器:
#id, .classname, 标记名称{}
eg: a.html: <head> <link href="index.css" rel="stylesheet" type="text/css"/> </head> <body> <div class="one">aaaaa</div> <span class="one">cccc</span> <a href="www.baidu.com">bbb</a>
<div id="dv">eeee</div>
</body> index.css: .one,#dv,a{ border:1px solid #ff0000 }
6.派生选择器:
父选择器 子选择器
eg:
a.html:
<head>
<link href="index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="one">aaaaa</div>
<span class="one">cccc</span>
<a href="www.baidu.com">bbb</a>
<div id="dv">eeee</div>
<ul id="us" type="square">
<li>aa</li>
<li>bb</li>
</ul>
</body>
index.css:
#us li{
border:1px solid #ff0000
}