一、CSS的概念
层叠样式表(英文全称:Cascading Style Sheets),层叠:多个样式可以作用在同一个HTML元素上,同时生效
这是一种用来表现HTML或XML(标准通用标记语言的一个子集) 等文件样式的计算机语言。
- 样式定义如何显示HTML元素
- 样式通常储存在样式表中
- 把样式添加到HTML4.0中,是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常储存在CSS文件中
- 多个样式定义可层叠为一个
二、CSS的优势
- 功能强大
- 将内容展示和样式控制分离
- 降低耦合度
- 让分工协作更容易
- 提高开发效率
三、CSS的使用:CSS与HTML结合使用
根据定义CSS的位置不同,分为行内样式、内部样式和外部样式
3.1行内样式
也称为内联样式
直接在标签中编写样式,通过使用标签内部的style属性
一般在测试的时候使用居多
语法:
<html标签 style="样式1::值1;">hello</html标签>
弊端:只能对当前的标签生效,没有做到内容和样式相分离,耦合度太高。
3.2内部样式
定义在head标签内,通过style标签,该标签内容就是CSS代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h1{
color:red;
}
</style>
</head>
<body>
<h1>hello</h1>
</body>
</html>
3.3外部样式
1、提前定义CSS资源文件
2、在head标签内,定义link标签引入外部样式文件
ljw.css文件:
h1{
color: blue;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/ljw.css">
</head>
<body>
<h1>hello</h1>
</body>
</html>
作用域的范围:外部样式表>内部样式表>行内样式表
优先级:行内样式表>内部样式表>外部样式表
同样的样式作用于同一个标签上:就近原则;
不同的样式作用在同一个标签上:叠加生效
四、CSS语法
基本格式:由两个主要的部分构成:选择器,以及一条或多条声明:
选择器{
属性1:值1;
属性2:值2;
...
}
选择器:筛选具有相似特征的元素
属性和属性值之间用冒号分割,不同的属性之间用分号隔开
例如:
五、CSS注释
注释是用来解释代码
CSS注释同java一样,用 /* 注释内容*/
六、基本选择器:筛选具有相似特征的元素
6.1 id选择器
选择具有相同id属性值的元素,建议html页面中的id值唯一
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式
HTML元素以id属性来设置id选择器,CSS中 id 选择器以 “#” 来定义。
PS:ID属性不要以数字开头,数字开头的ID在部分浏览器中不起作用
虽然多个元素可以使用同一个id选择器控制样式,但是不推荐,如果需要同样的样式对多个标签生效,使用class选择器
6.2 class选择器
**选择具有相同的class属性值的元素 **
class 选择器用于描述一组元素的样式,class选择器有别于id选择器,class可以在多个元素中使用。
class 选择器在HTML中以class属性表示,在CSS中,类选择器以一个点“.”号表示
PS:类名的第一个字符不能使用数字! 它无法在部分浏览器中使用
6.3 元素选择器/标签选择器
选择具有相同标签名称的元素
定义选择器语法:标签名称{}
PS:标签名称必须是HTML提供好的标签。
使用标签选择器:自动使用在所有的同名标签上
七、优先级
7.1 选择器的优先级
ID选择器 > 类选择器 >标签选择器
当多个选择器作用在同一个标签上的时候,如果属性冲突,看优先级;如果不冲突,样式叠加生效
7.2 样式表的优先级
行内样式 > 内部样式 > 外部样式
同样,三个样式表中都有内容作用在同一个html标签的时候,如果属性冲突,看优先级;如果不冲突,样式叠加生效
八、CSS常用样式
8.1 color:字体颜色
跟颜色相关的取值分3种
- 颜色的单词:red、blue…
- rgb(红禄蓝)三色的取值范围是0-255 例如 rgb(255,0,0)
rgba(红绿蓝透明度),透明度取值:0-1 ;0全透明,1不透明,0.5半透明 - #值1值2值3 :值的范式是00-FF 十六进制数字组成的 例如#FF0000
8.2 width height 宽高
PS:只有块状元素可以设置宽高,行级元素设置不生效
取值有两种方式:
- 数值:绝对数字 单位是像素PX
- 百分比 : 占据父元素的比例
8.3 背景样式
8.4 文本样式
8.5 列表样式
8.6 边框样式
九、盒子模型
9.1 概念
所以HTML元素都可以看作盒子,在CSS中,box model这一术语是用来设计和布局时使用
CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包括边距,边框,填充,和实际内容
盒模型允许我们在其他元素的周围元素边框之间的空间放置元素。
盒子模型说明:
- margin 外边距:清除边框外的区域,外边距是透明的
- border 边框:围绕在内边距和内容外的边框
- padding 内边距:清除内容周围的区域,内边距是透明的
- context 内容:盒子的内容,显示文本和图像
9.2 如果想要设置的宽度直接就是元素的实际宽度,通过box-sizing属性
十、补充常用样式
10.1 float 浮动
10.1.1 什么是浮动
CSS的float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列
float(浮动),往往是用于图像,但它在布局时一样非常有用
10.1.2 元素怎样浮动
元素的水平方向浮动,意味着元素只能左右移动而不能上下移动
一个浮动元素会尽量向左或向右移动,知道它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
10.1.3 彼此相邻的浮动元素
如果你把几个浮动元素放到一起,如果有空间的话,他们将彼此相邻
10.1.4 clear——清除浮动
元素浮动之后,周围的元素将会重新排列,为了避免这种情况,使用clear属性。
clear元素指定元素两侧不能出现浮动元素。
10.2overflow
控制内容溢出元素框时的显示方式
overflow 属性有以下值:
注意:overflow属性只工作于指定高度的块元素上
10.3 Display(显示)与Visibility(可见性)
10.3.1 两者的区别
display属性设置一个元素应该如何显示,visibility属性指定一个元素应可见还是隐藏。
隐藏一个元素可以通过把display属性设置为none,或把是visilibity属性设置为hidden 但是请注意,这两种方法会产生不同的效果
visilibity:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局
display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。
10.3.2 display改变元素的类型
CSS样式有以下三个:
- display:block - 显示为块状元素
- display:inline - 显示为内联元素
- display:inline-block -显示为内联块元素,表现为同行显示并可修改宽高内外边距等属性
十一、复合选择器
由两个或多个基础选择器,通过不同方式组合而成的。
可以更精确更精细的选择目标元素标签
11.1全局选择器
语法:
*{
属性:值;
{
一般去掉标签的一些默认效果的时候使用,或者整站通用效果时使用。但是不推荐,一般将 * 替换为常用标签的名称,并用逗号分隔,其实就是使用并集选择器。
11.2 并集选择器
并集选择器(CSS选择器分组)是各个选择器通过,
连接而成的,通常用于集体声明。
语法:
选择器1,选择器2,.....选择器N{
属性:值;
}
意思是多个选择器都是通用样式。任何形式的选择器(包括标签选择器、class选择器id选择器等),都可以作为并集选择器的一部分。
11.3 交集选择器
条件:交集选择器由两个选择器构成,找到的标签必须满足:既有标签一的特点,也有标签二的特点。
语法:
h3.class{
}
其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格,例如div.list。
交集选择器是并且的意思。即…又…的意思
11.4 后代选择器
概念:后代选择器又称为包含选择器
作用:用来选择元素或元素组的子孙后代。
其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔,先写父亲也有,再写儿子孙子
语法:
父级 子级{
属性:值;
属性:值:
}
当标签发生嵌套时,内层标签就成为外层标签的后代
子孙后代都可以这么选择,或者说,它能选择任何包含在内的标签
11.5子元素选择器
作用:子元素选择器只能选择作为某元素子元素的元素
语法:
父级>子级{
}
比如: .demo > h3 {color: red;} 说明 h3 一定是demo 亲儿子。 demo 元素包含着h3。
11.6 伪类选择器
伪类选择器:和类选择器相区别,类选择器是一个点,比如.demo{}
而我们的伪类 用两个点 就是 冒号 比如 :link{}
。
作用:用于向某些选择器添加特殊的效果。比如给链接添加特殊效果
伪类选择器有很多,比如链接伪类,结构伪类等等。这里先说连接伪类。
a:link /* 未访问的链接 /
a:visited / 已访问的链接 /
a:hover / 鼠标移动到链接上 /
a:active / 选定的链接 */
注意:
写的时候顺序不能错 :lvha
实际开发中,我们很少写全四个状态,一般我们写法如下
a { /* a是标签选择器 所有的链接 */
font-weight: 700;
font-size: 16px;
color: gray; }
a:hover { /* :hover 是链接伪类选择器 鼠标经过 */
color: red; /* 鼠标经过的时候,由原来的 灰色 变成了红色 */
}