CSS的作用:
就是用来改变文本的样式
CSS三大特性
继承性:给父类元素设置一些属性以后,子类也可以使用,叫继承性
如果对父类标签设置样式以后,如果子类标签没有单独设置样式默认继承父类的样式
注意:
1、并不是所有的都可以继承,只有以color font- text line开头的才可以继承
2、继承不仅仅是直接子代可以继承,后代同样可以继承
3、超链接的文字颜色和下划线是不能继承的
层叠性
就是css处理冲突的能力
注意点:
层叠型只有在多个选择器同时选中同一个标签,有设置了相同的属性,才会发生层叠型
如果多个选择器设置的属性没有重复则样式重叠
优先级
当多个选择器选中同一个标签,并且给同一个标签设置了相同的属性时,
如何层叠,由优先级来确定
优先级判断的三种方式:
1、选择器是否直接选中(间接选中指的就是继承),如果是间接选中采取就近原则
2、是否是相同的选择器
如果选择器相同 谁在后面听谁的
3、如果是不同的选择器
根据选择器的优先级 比如 id选择器>类选择器>标签选择器
4、!important 优先级最高
color: yellow !important;
注意点:!必须要
important 必须要写;前面
语法:
选择器{
属性: 属性值;
}
p{
color:red;
}
格式:
选择器{
属性: 属性值;
}
注意点:
style标签必须写在head标签里面
属性 type="text/css"可写可不写
CSS的三种方式
1、行内样式--直接写在标签里面的样式
<p style="color:red">今天星期五,明天再上一天班就可以休息p>
不推荐使用 增加了结构的复杂度
2、内部样式
CSS写在style标签里面
<style type="text/css">
h1{
color:red;
}
style>
3、外部样式
单独写一个css文件,然后在页面使用引入或导入的方式加载进来(推荐的写法)
引入: 使用link标签引入 <link href="path" rel="stylesheet">
导入: 使用@import
<style type="text/css">
@imprt url(path)
区别:
企业实际开发只是用link方式的,再html外面单独写一个css文件
外部链接link方式加载原理是,先把css文件和网页文件全部加载以后再显示页面效果,而导入式是先加载结构再加载CSS样式,所以可能在网速较慢的情况下客户看到的页面样式不是使用css后的样式
CSS基本选择器
1、标签选择器
直接选择标签名,不需要<>,表示对选中的标签直接设置css样式,使用标签选择器,在页面中所有的同名标签都会被选中
2、类选择器
根据指定的类名称找到对应的标签,然后设置样式
格式:
.类名{
属性:属性值;
}
注意点:
1、每一个html标签都有一个属性叫class
2、class属性值可以重复
3、类名就是专门给某个特定的标签设置样式的(常用)
4、每个标签可以有多个clss属性值 每个值之间使用空格隔开
3、Id选择器
格式:
#id值{
属性:属性值;
}
注意点:
1、每个标签都可以添加一个id属性
2、同一个页面id属性值只允许出现一次(如果设置多个同名的值使用id选择器设置样式可以有效果
因为,在后面学习的Js里面要求一个ID值只能出现一次,因为js通过id获取时只能拿到第一个)
3、使用id选择器需要在ID值前面加#
class选择器和ID选择器的编写规范:
1、 id或class 名称只能是由数字、字母、下划线,不能以数字开头
2、一般不推荐使用和html标签名一样的名字
3、在前端开发里面,一般情况如果设置id属性值仅仅是为了设置样式,我们不推荐使用id选择器,因为在前端开发里面id属性是留给JS用
基本选择器的优先级
ID选择器>类选择器>标签选择器
高级选择器
层次选择器
后代选择器:
格式:
选中的父标签 选中的后代标签{
属性:属性值;
}
只要是父标签里面的后代标签都会被选中(包括子标签)
子选择器
格式:
选中的父标签>选中的子标签{
属性:属性值;
}
只能选中父标签的直接子元素
后代选择器和子选择器的区别:
后代可以选中子元素和后代元素,而子选择器只能选中子元素
相邻兄弟选择器
格式:
选中的标签+选中的选择器 E+F
E+F{
属性:属性值;
}
选择E紧跟其后的F标签,中间不能隔其他标签而且只能选中紧跟其后一个
通用兄弟选择器
格式:
选中的标签~选中的选择器 E~F
E~F{
属性:属性值;
}
选择E后面的F标签都被选中,不管中间有没有隔开都会被选中
并集选择器(掌握)
需要同时对多个标签设置一样的样式时
格式: E,F,A{
}
表示同时对E F A标签设置同样的样式
h1,h2,h3,h4,h5{
color: yellow;
}
交集选择器(了解)
EF
E只能是标签选择器
F可以id选择器也可以是类选择器
表示EF两者同时具备
结构伪类选择器
格式:
E:first-child{
}
作为父类元素第一个子元素E
格式:ul li:nth-child(2)
选择父级元素E的第n个子元素F,F必须是父级元素的第n个子元素
属性选择器
* 选择器
表示所有标签