1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > CSS选择器及引入方式

CSS选择器及引入方式

时间:2019-10-03 10:06:47

相关推荐

CSS选择器及引入方式

目录

前言

一、css选择器

1、基础选择器

2、复合选择器

二、css引入方式

总结

前言

学习了一段时间了解了什么是CSS,我归纳出了我觉得在CSS中非常重要的四个知识点。首先就是:CSS选择器,,其次是:盒子模型,然后是引入方式,那么最后一个就是:浮动,首先让我们先来看看CSS选择器和引入方式!

一、css选择器

1、基础选择器

是单个选择器组成,包括标签选择器、类选择器、ID选择器和通配符选择器。

标签选择器:标签名{ 属性:属性值;},用HTML标签作为选择器;可以吧某一类标签全部选择出来,如所有的div标签和p标签;可以快速统一设置样式;但是不能设计差异化样式。

类选择器:.类名{ 属性:属性值;},如.red{ color:red;}将所有的red类的HTML元素均为红色;结构还需要class属性来调用class类;如<div class='red'>文字</div>

可以单独选一个或某几个标签

多类名选择器:在标签class属性离写多个类名,类名之间用空格分开,可以把一些标签元素相同的共同的步伐放在一个类里面,这些标签都可以调用这个公共的类

语法:如<div class="lred font"></div>

id选择器:以id属性来设置id选择器,css中id选择器以“#”来定义:#id名{属性:属性值; },口诀:样式#定义,结构id来调用,只能调用一次。

通配符选择器 :*{属性:属性值;}

2、复合选择器

复合选择器包括后代选择器、子选择器、并集选择器、伪类选择器(链接伪类选择器、:focus伪类选择器)

后代选择器: 又为包含选择器,可以选择父元素里面的子元素;

语法:元素1 元素2 {样式声明},选择元素1里面的所有元素2;元素1和元素2 中间用空格隔开,最终选择的是元素2;

元素2 可以是儿子也可以是孙子;元素1 和元素2 可以是任意基础选择器

子选择器:只能选择某元素最近的一级子元素; 元素1>元素2(样式声明);比如div>p { }

元素1 和元素2之间用大于隔开,元素2必须是最近的,亲儿子

并集选择器:可以选择多组标签定义相同的样式,各选择器是用英文逗号隔开;通常用于集体声明。

语法:元素1 ,元素2 {} ; 如ul,div { 属性:属性值 };

伪类选择器 :伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果。

伪类选择器最大的特点是用冒号:表示,比如:hover或者:first-child

二、css引入方式

css的引入方式有三种:行内样式表、外部样式表和内部样式表;

前两个上面有提到,内部样式表就是在HTML页面里,在<head>标签里加<style></style标签,然后在<style>里写样式即可。

总结

以上就是今天要讲的内容,这些CSS的选择器和引入方式内容就是我想为大家讲解我认为比较重要的点。希望大家也能学到有用的内容。谢谢!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。