Download presentation
Presentation is loading. Please wait.
1
css2/css3全教程 选择器 群号： 韬略课堂：何韬
2
内联样式（在 HTML 元素内部）:<p style="color: sienna; margin- left: 20px">
内部样式表（位于 <head> 标签内部） 外部样式表:<link rel="stylesheet" type="text/css" href="mystyle.css" />
3
css选择器 1.与标签同名： input,select{ border:1px solid blue; } body{
font-family: font-size:32px; background:green;
4
2.用id名： #tt{ background:#bbaacc; }
5
3.用class名： .myc{ font-size:32px; background:green; } class组合 class="class1 class2"
6
4.用属性名：(属性选择器) [aa]{ border:10px solid red; background:blue; } 属性值 [name*="hello"] /*包含*/
![4.用属性名：(属性选择器) [aa]{ border:10px solid red; background:blue; } 属性值 [name*= hello ] /*包含*/](http://slidesplayer.com/slide/11559340/62/images/6/4.%E7%94%A8%E5%B1%9E%E6%80%A7%E5%90%8D%EF%BC%9A%28%E5%B1%9E%E6%80%A7%E9%80%89%E6%8B%A9%E5%99%A8%29+%5Baa%5D%7B+border%3A10px+solid+red%3B+background%3Ablue%3B+%7D+%E5%B1%9E%E6%80%A7%E5%80%BC+%5Bname%2A%3D+hello+%5D+%2F%2A%E5%8C%85%E5%90%AB%2A%2F.jpg "4.用属性名：(属性选择器) [aa]{ border:10px solid red; background:blue; } 属性值 [name*= hello ] /*包含*/")
7
5.值选择器: [aa="5"]{ border:10px solid red; background:blue; }
![5.值选择器: [aa= 5 ]{ border:10px solid red; background:blue; }](http://slidesplayer.com/slide/11559340/62/images/7/5.%E5%80%BC%E9%80%89%E6%8B%A9%E5%99%A8%3A+%5Baa%3D+5+%5D%7B+border%3A10px+solid+red%3B+background%3Ablue%3B+%7D.jpg "5.值选择器: [aa= 5 ]{ border:10px solid red; background:blue; }")
8
6.包含hello的值选择器,只要包含hello就被选择
[name*="hello"]{ background:yellow; } <input name="helloworld" type="text"/>
9
//-----------组合选择器--------------------
,是平级关系 空格是层级关系(下层到最底层符合条件的标签全受css样式渲染) >仅指下一层(仅仅下一层受渲染)
10
下节内容 边框背景
11
选择器的分组： h1,h2,h3,h4,h5,h6 { color: green; }
12
派生选择器 li strong { font-style: italic; font-weight: normal; } <ol> <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。 </strong></li> <li>我是正常的字体。</li> </ol>
13
类(class)选择器 .fancy td { color: #f60; background: #666; }
14
属性选择器 [title] { color:red; } <a title="W3School" href="
![属性选择器 [title] { color:red; } <a title= W3School href= >W3School</a>](http://slidesplayer.com/slide/11559340/62/images/14/%E5%B1%9E%E6%80%A7%E9%80%89%E6%8B%A9%E5%99%A8+%5Btitle%5D+%7B+color%3Ared%3B+%7D+%3Ca+title%3D+W3School+href%3D+++%3EW3School%3C%2Fa%3E.jpg "属性选择器 [title] { color:red; } <a title= W3School href= >W3School</a>")
15
属性和值选择器 [title=W3School] { border:5px solid blue; } <a title="W3School" href="
![属性和值选择器 [title=W3School] { border:5px solid blue; } <a title= W3School href= >W3School</a>](http://slidesplayer.com/slide/11559340/62/images/15/%E5%B1%9E%E6%80%A7%E5%92%8C%E5%80%BC%E9%80%89%E6%8B%A9%E5%99%A8+%5Btitle%3DW3School%5D+%7B+border%3A5px+solid+blue%3B+%7D+%3Ca+title%3D+W3School+href%3D+++%3EW3School%3C%2Fa%3E.jpg "属性和值选择器 [title=W3School] { border:5px solid blue; } <a title= W3School href= >W3School</a>")
16
包含hello， [title~=hello] { color:red; } <h2 title="hello world">Hello world</h2>
![包含hello， [title~=hello] { color:red; } <h2 title= hello world >Hello world</h2>](http://slidesplayer.com/slide/11559340/62/images/16/%E5%8C%85%E5%90%ABhello%EF%BC%8C+%5Btitle%7E%3Dhello%5D+%7B+color%3Ared%3B+%7D+%3Ch2+title%3D+hello+world+%3EHello+world%3C%2Fh2%3E.jpg "包含hello， [title~=hello] { color:red; } <h2 title= hello world >Hello world</h2>")
17
不等于en [lang|=en] { color:red; }
![不等于en [lang|=en] { color:red; }](http://slidesplayer.com/slide/11559340/62/images/17/%E4%B8%8D%E7%AD%89%E4%BA%8Een+%5Blang%7C%3Den%5D+%7B+color%3Ared%3B+%7D.jpg "不等于en [lang|=en] { color:red; }")
18
设置表单的样式 input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; }
![设置表单的样式 input[type= text ] { width:150px; display:block; margin-bottom:10px; background-color:yellow;](http://slidesplayer.com/slide/11559340/62/images/18/%E8%AE%BE%E7%BD%AE%E8%A1%A8%E5%8D%95%E7%9A%84%E6%A0%B7%E5%BC%8F+input%5Btype%3D+text+%5D+%7B+width%3A150px%3B+display%3Ablock%3B+margin-bottom%3A10px%3B+background-color%3Ayellow%3B.jpg "font-family: Verdana, Arial; }")
19
设置表单的样式 input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; }
![设置表单的样式 input[type= text ] { width:150px; display:block; margin-bottom:10px; background-color:yellow;](http://slidesplayer.com/slide/11559340/62/images/19/%E8%AE%BE%E7%BD%AE%E8%A1%A8%E5%8D%95%E7%9A%84%E6%A0%B7%E5%BC%8F+input%5Btype%3D+text+%5D+%7B+width%3A150px%3B+display%3Ablock%3B+margin-bottom%3A10px%3B+background-color%3Ayellow%3B.jpg "font-family: Verdana, Arial; }")
20
CSS 选择器参考手册 选择器 描述 [attribute] 用于选取带有指定属性的元素。
选择器 描述 [attribute] 用于选取带有指定属性的元素。 [attribute=value] 用于选取带有指定属性和值的元素。 [attribute~=value] 用于选取属性值中包含指定词汇的元素。 [attribute|=value] 用于选取带有以指定值开头的属性值的元 素，该值必须是整个单词。 [attribute^=value] 匹配属性值以指定值开头的每个元素。 [attribute$=value] 匹配属性值以指定值结尾的每个元素。 [attribute*=value] 匹配属性值中包含指定值的每个元素。
![CSS 选择器参考手册 选择器 描述 [attribute] 用于选取带有指定属性的元素。](http://slidesplayer.com/slide/11559340/62/images/20/CSS+%E9%80%89%E6%8B%A9%E5%99%A8%E5%8F%82%E8%80%83%E6%89%8B%E5%86%8C+%E9%80%89%E6%8B%A9%E5%99%A8+%E6%8F%8F%E8%BF%B0+%5Battribute%5D+%E7%94%A8%E4%BA%8E%E9%80%89%E5%8F%96%E5%B8%A6%E6%9C%89%E6%8C%87%E5%AE%9A%E5%B1%9E%E6%80%A7%E7%9A%84%E5%85%83%E7%B4%A0%E3%80%82.jpg "选择器 描述. [attribute] 用于选取带有指定属性的元素。 [attribute=value] 用于选取带有指定属性和值的元素。 [attribute~=value] 用于选取属性值中包含指定词汇的元素。 [attribute|=value] 用于选取带有以指定值开头的属性值的元 素，该值必须是整个单词。 [attribute^=value] 匹配属性值以指定值开头的每个元素。 [attribute$=value] 匹配属性值以指定值结尾的每个元素。 [attribute*=value] 匹配属性值中包含指定值的每个元素。")
Similar presentations
