CSS基础
CSS简介
CSS分为两部分——CSS选择器和CSS属性。
四种使用CSS的方式
1.外链式CSS方式 在头部使用link标记引入
如:
<head>
<meta charset="utf-8"/>
<title> 标题</title>
<link rel="stylesheet" type="text/css" href="css文件路径"/>
</head>
2.导入式css样式 @import url (‘css文件路径’)
如:
<head>
<meta charset="utf-8"/>
<title>标题</title>
<style type="text/css">
@import url('css文件路径');
/*此处可以继续编写其他的css样式*/
</style>
</head>
3.嵌入式CSS样式 内联样式 在头部的style标签里
如:
<head>
<meta charset="utf-8"/>
<title>标题</title>
<style type="text/css">
选择器{
background -color:red;
color:#fff;
font-size:10px;
}
</style>
</head>
4.行内样式CSS方式
如:
<p style="width:100px; height:100px; background-color:#fff; "></p>
CSS选择器的分类
什么是选择器 用来干啥的? 层叠样式表,CSS技术用来美化HTML页面,HTML相当于盖房子,CSS相当于装修,使用CSS可以把样式代码和HTML分离
选择网页文档的标签就是对网页装修的第一步 也是很关键的一步 选择器的作用就是用来选择网页结构中具体的标签进行修饰
最终实现整个网页的表现形式
· 1-HTML选择器 元素选择器 标签名
使用语法 在可以写CSS样式的地方 -选择器{样式属性:属性值;} -HTML选择器 就是使用标签名 作为选择器 选择同类的标签
· 2-class选择器 类选择器 .
<div class="box div dd "></div>一个标签可以有多个class类型 好比人的 大名 小名 乳名
… class选择器的使用
- . 类名{样式属性:属性值;}选择对应类名的标签
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
.box{color:#fff;}
</style>
</head>
<body>
<div class="box div1 dd"></div>
<div></div>
</body>
· 3-ID选择器 类选择器 #
· #id名称 必须全页面唯一 -#id 名{样式属性:属性值;} 选择对应类名的标签
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
.box{color:#fff;}
#box{color:#fff;}<!--id选择器-->
</style>
</head>
<body>
<div class="box div1 dd"></div>
<div id="box"></div>
</body>
· 4-组合选择器 群组选择器 #
一次可以选择一群的选择器用 , 隔开 使用方式
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
#box,.box{color:#fff;}
</style>
</head>
<body>
<div class="box div1 dd"></div>
<div id="box"></div>
</body>
· 4-关系选择器 后代选择器 #
父元素 包含子元素 父元素选择器 子元素选择器{样式属性:属性值}
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
#box(空格).box{color:#fff;}
</style>
</head>
<body>
<div class="box div1 dd"></div>
<div id="box"></div>
</body>
**· 5-通用选择器 ***
·一个可以选择所有标签的选择器*
慎用
·*{样式属性:属性值}
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
*{color:#fff;}<!--所有标签字体颜色为白色-->
</style>
</head>
· 5-伪类选择器 表示一个元素的不同的状态
·伪类也是选择器的一种,但是用伪类定义的CSS样式并不是作用在标签上的。伪类作用在标签的状态上。 ·伪类包括:
:first-child、🔗、:visited、:hover、:active、:focus和:lang等等
·我们来先了解超链接的伪类 包括:🔗、:visited、:hover和:active。分别表示a 标签的四种状态
–:link未有任何操作时 :visited 访问过的状态 --:hover鼠标移上时 :active在鼠标点击与释放之间发生
**a标签的伪类**
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
超链接初始颜色为blue
a:link{color:blue;}
超链接点击一次之后,颜色变为darkslategrey
a:visited{color:darkslategrey;}
鼠标在超链接上时,超链接颜色为yellow
a:hover{color:yellow;}
在鼠标点击与释放之间发生
a:active{volor:green;}
a{font-size:30px}
</style>
</head>
<body>
<a href="#">超链接</a>
</body>