您的位置：首页 > Web前端 > CSS

css选择器

2016-06-14 16:47 399 查看

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
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航