CSS
1、全称:层叠样式表(目的:将网页的内容和样式分离,利用代码维护)
1、全称:层叠样式表(目的:将网页的内容和样式分离,利用代码维护)
2、css和html的结合方式
(1)css和html有四种结合方式
1:使用html标签属性 <div style="background-color:red;color:blue;">
(1)css和html有四种结合方式
1:使用html标签属性 <div style="background-color:red;color:blue;">
2:使用html的标签
<style type="text/css">
div {
background-color:red;
color:black;
}
</style>
3:使用html标签link(html中head里面)
* 1.创建css文件,写css代码 2.在html中使用link标签引入css文件
* <link rel="stylesheet" type="text/css" href="1.css"/>
4:使用html的style标签,在标签里面使用语句样式操作
*1. 创建css文件,写css代码
* 写style标签,在标签里面 @import url(css路径);
<style type="text/css">
div {
background-color:red;
color:black;
}
</style>
3:使用html标签link(html中head里面)
* 1.创建css文件,写css代码 2.在html中使用link标签引入css文件
* <link rel="stylesheet" type="text/css" href="1.css"/>
4:使用html的style标签,在标签里面使用语句样式操作
*1. 创建css文件,写css代码
* 写style标签,在标签里面 @import url(css路径);
3、css的选择器
(1)css优先级:一般而言,优先级是后加载的优先级高
(2)规范: 属性名称1:属性值1;属性名称2:属性值2;
(3)选择器概念:作用在哪个标签上(选择操作对象)
css的基本选择器:
第一种:标签选择器
div {
background-color: red;
}
(1)css优先级:一般而言,优先级是后加载的优先级高
(2)规范: 属性名称1:属性值1;属性名称2:属性值2;
(3)选择器概念:作用在哪个标签上(选择操作对象)
css的基本选择器:
第一种:标签选择器
div {
background-color: red;
}
第二种:class选择器(设置标签内class属性的值)
.haha {
background-color:red;
}
.haha {
background-color:red;
}
第三种:id选择器(设置标签内id的属性值)
#hehe {
background-color:green;
}
#hehe {
background-color:green;
}
(4)选择器的优先级: style > id选择器 > class选择器 > 标签选择器
4、css的扩展选择器
(1)关联选择器(设置嵌套标签的样式)
div p {
background-color:red;
}
(1)关联选择器(设置嵌套标签的样式)
div p {
background-color:red;
}
(2)组合选择器(标签同级的)
div,p {
background-color:green;
}
div,p {
background-color:green;
}
(3)伪元素选择器
* 比如超链接为例,
* 状态:原始状态、鼠标悬浮状态、点击状态、点击之后的状态
:link :hover :active :visited
* 比如超链接为例,
* 状态:原始状态、鼠标悬浮状态、点击状态、点击之后的状态
:link :hover :active :visited
补充:
1.路径设置:相对路径 ../等 绝对路径(一般使用带有协议的路径) 使用http://开头
2.注释不可嵌套
3.建议标签小写、属性值引号引起、属性值区分下大小写
4.<a href="javascript:void(0);"></a>表示该超链接不作任何跳转
5.一个HTML文档中ID属性的值必须唯一
6.浏览器具有容错性、兼容性问题、缓存机制