css选择器

来源:互联网 发布:网站自然优化 编辑:程序博客网 时间:2024/06/05 16:04

css是级联样式表(Cascading Style Sheets )

css是用来定义HTML、XML、JSP等文件的样式(是标记语言的一种)

对Css来说最为重要,使用最多的就是css选择器

css样式表的四种引用方式:

一、行内样式

在style属性中设置css样式,如
<td  style = "color:#cccccc">设置该表格单元内文章颜色为灰色
(不推荐使用,没有体会css的优势)

二、嵌入样式

嵌入式就是将css样式集中写在网页的<head></head>标签中,如
  <head>
<style  type="text/css">
css样式
</style>
</head>
(多网页时,修改样式麻烦)

三、导入式

导入外部样式表,即将独立的.css文件引入到HTML文件中,如:
<head>
<style type="text/css">
@import  "css样式文件的路径";   //要注意该css文件的路径
</style>
</head>
(页面的加载顺序:先加载页面,再装载css文件,当HTML文件较大时,页面显示后css文件可能还没装载完,会闪烁一下后再出现页面的样式)

四、链接式

将css文件引入到HTML文件中,使用<link>标签来引用,如
<link rel="stylesheet" type="text/css" href="mystyle.css">要注意css文件的路径

css选择器:

选择器种类

元素(标签)

类选择器

ID选择器

属性选择器

后代选择器

符号


 .   

  #  

        [   ]   

                      

例子

html{color:blue;} h2{color:silver;}

.cName{

color:red;

}

#demoDiv{

color:#FF0000;

}

 

[title]{

   color:red;

}

h1 em {

  Color:red;

}

<h3>这是 heading 1</h3>

<h2>这是 heading 2</h2>

<p>这是一段普过放电。</p>

<h3 class="cName">a</h3>

<h2 class="cName">b</h2>

<i>kdkdk</i>

<div id="demoDiv">

aa</div>

<h3>可以应用样式:</h3>

<h3 title="Hello">Hello</h3>

<i title="W3Sl">W3Sl</i>

<h3><em></em></h3>

<p><em></em></p>

<h3><i></i></h3

结果

 

 

 

 


选择器种类

子元素选择器

群组选择器

相邻兄弟选择器

伪类选择器

A>B,A元素的子元素的所有B元素

当几个元素样式属性一样时,可同调用一个声明,元素间用逗号分隔

可选择紧接在另一元素后的元素,且二者有相同父元素。

向某些选择器添加特殊的效果

符号

 > 

 , 

 + 

 : 

例子

p > i {color:red;}

b,p{color:red;}

h4 + p {colorred;}

a:link {color: #FF0000}

<p>aa <i>bb</i> <i>cc</i>dd</p>                            

<p>aa <i>bb</i> ee<i>cc</i>dd</p>

<p>a <i>b</i><b>e</b> <i>c</i>d</p>

<p>aa <em>bb <i>cc</i></em> dd</p>

<b>aa</b>

<p>aa</p>

<i>aa</p>

<h4>ccc</h4>

<p>aaa</p>

<p>ddd</p>

<a href="/a.jsp" target="_blank">aa</a>

结果

 

 

 









0 0
原创粉丝点击