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的选择器和引入方式内容就是我想为大家讲解我认为比较重要的点。希望大家也能学到有用的内容。谢谢!

  • 7
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 19
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 19
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值