汇学府笔记网是汇学府网旗下优秀笔记展示平台! 欢迎优秀读书学习笔记投稿,投稿有奖励!

学分类旗下网站

浏览量

在HTML引入CSS样式的3种方式和常用的5种选择器

作者:admin 发布时间:2019-08-12

在HTML引入CSS样式的3种方式和常用的5种选择器

在HTML里引入CSS一般有3中方式:

 

1.内联式

就是字HTML代码的元素内插入CSS代码。例如:

p >

 

2.内嵌样式

就是在网页的内部统一写好CSS样式,然后在网页内部引用,例如:

style type= text/css

!

P{font-size:12px;

}

.nav{

Width:100px;

}

-- /style

引用:

p div clsaa= nav 文字内容 /div 文字内容 /p

 

3.外部样式表

将CSS代码写道一个文件里,然后在网页内部引用文件,引用方式:

link rel= stylesheet type= text/css ahref= x..css 这样就将一个X..css的CSS文件引用进来了。

 

CSS常用的5种选择器:

1.    类型选择器

类型选择器也就是用HTML里的元素当作选择器的名称:例如:p td body ul li等等,定义方式

类型选择器{CSS代码}

P{color:#FF0000;

}

 

2.类选择器

定义一类元素的样式,主要作用:在不同位置的相同元素定义同样的样式,用类选择器将会节省很多代码,定义方式:

.类选择器名称

.nav{ color:#FF0000;

}

这样在任何地方引用这个nav,得到的样式将会是相同的。

类选择器可以和类型选择器组合使用,例如:

a.       nav{color:#FF0000;

}

 

3.ID选择器

ID选择器用于设置一个特定的元素,例如:某个元素不常用,或者是页面的大容器,一般将使用ID选择器来设置,有时候也会用于设置某个元素内的某一个特殊的元素样式。

定义方式:

#选择器名称

#nav{

Color:#FF0000;

}

类选择器可以和其他类别的选择器组合使用,例如:

#nav .AA{

Color:#FF0000;

}

这样就定义了引用ID选择器的AA类选择器中的文字颜色为红色

a#nav a:link, a#nav a:visited{

colorFF0000;

}

定义了a选择器类引用#nav内的链接显示样式和访问后的链接显示样式

 

4.后代选择器

后代选择器一般用于定义一个样式中的某一些元素的样式,例如:要设置某个区域内的#nav或者.nav内的所有段落的样式,那么就必须为每个p元素加入样式,这样会很麻烦,如果直接定义p样式,就会影响其他不需要使用此类p样式的显示方式,那么就可以用后代元素选择器来定义,定义方式:

#nav p{color:#FF0000;}

.nav p{color:#FF0000;}

后代元素选择器的定义是通过一组元素定义的,中间用空格隔开。

 

5.伪类选择器

CSS中对a元素的定义比较特殊,增加了4个伪类定义

a:link      未访问的链接样式

a:visited  访问过的链接样式

a:hover    鼠标悬停于链接表面时的样式

上一篇:使用CSS技术替换FONT标签

下一篇:没有了

网友吐槽

读书笔记 学习笔记 名著读书笔记

本站读书学习笔记由网友提供,版权归原作者本人所有,转载请注明出处!如有侵犯您的相关权利,请联系我们客服处理! 豫ICP备18040320号-1