css
css中的样式
css特性:
层叠性
继承性
优先级
css背景:
后代选择器
子元素选择器
交集选择器
并集选择器
伪类选择器
行高:
单行文本垂直居中
行高和高度的三种关系
标签显示模式:
块级元素
行内元素
行内块级元素
标签显示模式转换
css背景:
背景颜色
背景图片
背景平铺
背景位置
背景附着
背景简写
背景透明
css注释
css选择器(重点)
学习目标:
理解:
能说出选择器的作用
id选择器和类选择器的区别
应用:
能够使用基础选择器给页面元素添加样式
1.css选择器的作用(重点)
选择器的作用:
找到特定的HTML页面元素
[css选择器干什么的,选择标签用的,把我们想要的标签选择出来 ,通俗来讲就是,选对人,做对事。]
[段代码就是2件事,把h1选出来,然后把它变成了红色。以后我们都这么干。
选择器分为基础选择器和复合选择器,我们这里先讲解—下基础选择器。]
2.css基础选择器
2.1标签选择器:
概念:
标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定同意的css样式。
语法:
标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
作用:
标签选择器可以把某一类标签全部选择出来,比如所有的div标签和所有的span标签。
优点:
是能快速为页面中的同类型的标签统一样式。
缺点:
不能设计差异化样式。
口诀:
标签选择器
页面同选起
直接写标签
全部不放弃
2.2类选择器
类选择器使用”.“(英文点号)进行标识,后面紧跟类名。
语法:
类名选择器
.类名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
标签:
<p class=‘ 类名 ’>
优点:
可以为元素对象定义单独或相同的样式,可以选择一个或者多个标签。
注意:
类选择器使用”.“(英文点号)进行标识,后面紧跟类名(自定义,我们自己命名的) 。
长名称或词组可以使用中横线来为选择器命名。
不要纯数字、中文等命名,尽量使用英文字母来表示。
记忆口诀:
差异化选择
一个或多个
上面点定义
类别别写错
谁用谁调用
class来做
嘿嘿,工作类最多。
2.3类选择器特殊用法-多类名
我们可以给标签指定多个类名,从而达到更多的选择目的。
注意:
各个类名中间用空格隔开。
多类名选择器在后期布局比较复杂的情况下,还是较多使用的。
2.4 id选择器
id选择器使用#进行标识,后面紧跟id名:
其基本语法格式如下:
id选择器
#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
标签
元素的id值是唯一的,只能对应于文档中某一个具体的元素。
用法基本和类选择器相同。
id选择器和类选择器区别
W3C标准规定,在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class:
类选择器
(class)好比人的名字,是可以多次重复使用的,比如张伟王伟李伟李娜
id选择器
好比人的身份证号码,全中国是唯一的,不得重复。只能使用一次。
id选择器和类选择器最大的不同在于使用次数上:
类选择器我们在修改样式中,用的最多。
id选择器—般用于页面唯一性的元素身上,经常和我们后面学习的javascript 搭配使用。
2.6通配符选择器
概念:
通配符选择器用*号表示,*就是选择所有的标签他是所有选择器中作用范围最广的,能匹配页面中所有的元素。
基本语法格式如下:
*{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
例如下面的代码,使用通配符选择器定义css样式,清楚所有的HTML标记的默认边距
注意:
会匹配页面所有的元素,降低页面响应速度,不建议随便使用