CSS基础:
css:全拼(Cascading Style Sheets) 层叠样式表;也称之为样式表;
作用:css是用来修饰结构(html标签)的;让结构显示的更美观;
以前布局使用的是表格,缺点,修改不够灵活,因为结构和表现是写在一起的,没有分离,导致不好维护,耦合性高;
后来用html+css布局(div+css)
html和css实现了结构表现相分离;耦合性低;
CSS样式表:css必须要写在样式表里;
1、行内样式表(内联样式表)
语法: <标签 style="css语句"></标签>
说明:
1、在当前的标签上定义一个style属性即可,在style属性值的位置上写css语句;
2、不推荐使用行内样式,
-> 会出现代码冗余的情况
->没有实现 耦合性高,结构和表现相分离
-> 行内样式的优先级别高
-> 在需要的时候使用
3、特点:
-> 使用方便
-> 作用域: 只针对当前标签起作用
如: <div style=" width:100px;height:100px;background:red;"></div>
css属性:
width:; 宽度
height:; 高度
background:; 背景
2、css样式表-内部样式表(内嵌样式表):
语法:<style type="text/css">
css 语句
</style>
说明:
1、通过style标签创建内部样式表,是在html文件内创建;
2、建议把style标签创建在html文件内的head区域内;
3、type="text/css" 定义文本类型为css;可写可不写;
特点:
1、实现了结构和表现相分离,但是分离的还不够彻底,耦合性相对较低
2、不是特别推荐使用,当页面代码量比较少或者在写案例时使用;
3、作用域:只针对当前页面起作用;
3、外部样式表:
外部样式表的创建:新建一个css文件;关联样式表到当前的html文件内:
<link rel="stylesheet" type="text/css" href="目标文件路径">
属性:
rel="stylesheet" 关联样式表(必须的)
-> rel : relation 关系,关联
-> stylesheet: 样式表
type="text/css" 设置文本类型为css,可写可不写;
href="" 设置要使用的css文件的路径;
说明:
建议把link标签写在head区域内;
特点:
1、建议使用
2、真正实现了结构和表现相分离,耦合性极低
3、作用域:可以对多个页面起作用
css 三大特性:
1、优先级:
-> 行内样式的优先级别最高;
-> 内部样式表和外部样式表的优先级跟书写顺序有关,谁的位置越靠后,谁的优先级别就越高;根据就近原则显示;
-> ?选择器也有优先级 ,每一个选择器都有自己的权重大小;
-> 当优先级一样的时候,后写的会把前面的覆盖;
2、层叠(覆盖)性:
-> 当发生冲突的时候,优先级高的就会把优先级低的给层叠(覆盖)掉;
-> 当没有发生冲突的时候,就都会被显示,也就是说不会被层叠;
3、继承性:
-> 给父元素添加的属性,子元素也会应用;
-> 有的属性具有继承性,有的属性没有继承性;
width height background border 都没有继承性了;
设置文本样式的属性,基本都具有继承性;
关键字过滤器:!important;
说明:具有最高优先级,比行内样式表的优先级还要高;
如:
.box{
background:green !important;
}
css选择器:
1、类型选择器(元素选择器、标签选择器):
语法:元素名称{属性:属性值;}
如: body div html p span...
特点:会把页面内相同的元素全部找到,用且添加样式;
使用场景:
-> 控制全局样式时;
-> 当想统一页面内某一类标签的样式时;
-> 当改变某一类标签的默认样式时; a{ color:gray ;}
2、id选择器
语法: #id名{ 属性:属性值;}
如: #one{ 属性:属性值;}
<div id="one">1</div>
说明:具有唯一性,一个元素只能拥有一个唯一的id名字;
使用场景:一般在写外围结构时会使用id属性;
注:项目开发中,设置样式时,一般很少用id,一般使用class设置样式;
3、class选择器(类选择器):
语法:.class名{属性:属性值;}
如:
<div class="box"></div>
.box2{ 属性:属性值;}
class属性的特点:像我们的名字一样,每个元素可以拥有多个class名字,并且可以和其他元素拥有相同的class名字;
注:
当一个元素拥有多个class名字时,名字和名字之间用空格隔开;(属性值和属性值)
基本选择器(类型选择器、id选择器、class选择器);
复合式选择器:只是一种属性的形式,混合使用或者配合使用时;
复合式选择器:
并集选择器(群组选择器):
后代选择:子选择器 包含选择器 交集选择器...
伪类选择器
伪元素选择器
css 选择器-群组选择器(并集选择器):
语法:选择器1,选择器2,选择器3,...,选择器n{ 属性:属性值;}
作用:提取同分类项;
把具有相同样式的选择器提取出来,用逗号隔开的形式组成一组,共同添加相同的样式;
css 选择器-包含选择器
语法:选择器1 选择器2 ... 选择器n{ 属性:属性值;}
说明:通过父元素找子元素,或者通过祖先级元素找后代元素;
包含选择器也叫后代选择器;
注:包含选择器只能通过父找子,祖先找后代,绝对不能通过子元素找祖先级元素;
css选择器-复合式选择器-交集选择器:
交集选择器:
选择器1选择器2...选择器n{ }
说明:选择器1和选择器2...之间是没有空格的,也就是紧挨在一起的;
注:选择器1 选择器2 ... 指的都是同一个元素;
具有增加权重,更加强调的意思;
css选择器-复合式选择器-子选择器:
语法:选择器1>选择器2{ }
说明:选择器1一定是选择器2的父元素;
css选择器-复合式选择器-动态伪类选择器:
语法:
选择器:link{ } 超链接的初始状态
选择器:visited{ } 超链接的访问过后状态
选择器:hover{ } 鼠标滑过状态 (常用的,可以使用在按标签以外的标签上)
选择器:active{ } 激活状态(鼠标按下去没有松开的瞬间,很少用,可以使用在按标签以外的标签上)
注:
1、当一起使用伪类选择器时,要注意书写顺序,按照上面的书写顺序使用,错误的顺序会导致样式显示错误;
2、直接给a标签设置样式,是包含了以上四个状态的;
3、如果只有滑过状态不一样,其他三个状态都一样,可以如下设置:
a{ color:red; }
a:hover{ color:green;}
li:hover a{color: red} 代表鼠标滑过li标签时,a标签的变化
a作为超链接标签的文字不具有继承性,继承不了滑过li时,li设置的文本颜色
所以设置 li:hover{color: red} li标签里面的a标签文字不会有变化
默认自带的效果,都不具有继承性,需要在自身标签内设置。(a标签默认自带颜色)
a作为文本标签的文本如果之前设置了文本颜色,那么在下面 li:hover 设置颜色时就无法继承li的颜色,而a标签默认带有颜色属性,a的文本不管设不设置都有颜色效果,相当于二次设置了颜色,所以作为文本属性 a 设置的权重比 li 继承的权重大,文字不能改变颜色。所以a标签的文本只能通过自身设置。
a的下划线,作为文本标签,如果在a标签里没有设置样式,那么默认是有下划线的,所以在 li:hover里面 作为文本设置是有效果的,不属于二次设置,不存在改变权重设置问题,但是默认的下划线会一直存在,两个会成为重叠的下划线
css选择器-通配符:
语法: *{ 属性:属性值;}
说明:通配符代表了页面上所有的标签;
作用:设置全局样式的;
如:
*{
/* 外边距 */
margin:0;
/* 内边距 */
padding:0;
}
选择器的权重值:0000
类型选择器 0001
id选择器 0100
class选择器 0010
并集选择器 选择器自身权重大小
包含选择器 包含选择器的权重之和
交集选择器 交集选择器权重之和
子选择器 所有子选择器的权重之和
伪类选择器 0010
通配符 0000
继承属性 0000
行内样式表 1000
!important; 具有最高权重
注:当权重相等的时候,根据就近元素显示;
id和class的权重相比较
id=100,class=10
在指向同一个标签时,多少个class的权重和都不能覆盖id,除非计算权重时加上id的权重
单独来说 id的权重永远大于class