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