css選擇器

時間 2019-11-20

標籤 css 選擇器欄目 CSS 简体版

原文原文鏈接

div: 獨佔一行egcss

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

span:html

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:html5

替代屬性,不用寫在標記中css3

實現表現與結構分離,便於管理,是頁代碼整結web

web 2.0思想架構

web 2.0： div+css架構頁面spa

html5 css3:在web 2.0思想基礎上添加了一些內容code

css調用方式:htm

1. CSS的格式:blog

{樣式名稱：樣式值；樣式名稱:樣式值;...}

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 }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。