1.DIV相关技术
- Div是一个HTML标签,一个块级元素(单独显示一行)。它单独使用没有任何意义,必须和CSS结合起来使用,主要用于页面的布局。
- Span同样也是一个HTML标签,它是一个内联元素(显示一行)。它单独使用也没有任何的意义,必须和CSS结合使用,它主要用于对括起来的内容进行修饰作用。
2.什么是CSS?
- CSS指的是层叠样式表
- 样式定义如何去显示HTML元素
- 样式通常储存在样式表中
- 多个样式可以层叠为一
3.HTML和CSS的关系
- HTML:整个网站的骨架
- CSS:对整个网络骨架的内容进行的美化(修饰作用)
4.关于CSS的三种引入方式
行内引入:在<body>标签内直接进行<div>标签的书写
<div style="color: red;font-size: 30px;">
你若安好便是晴天
</div>
内部引入方式:在<head>标签里面加入如下代码
<style type="text/css">
div{
color: greenyellow;
font-size: 30px;
}
</style>
在接下来的<body>标签里面直接添加如下代码即可:
<div>你若安好便是晴天</div>
外部引入:先在一个外部文件夹,如CSS文件夹里面进行*.css的书写,如下代码:
div{
color: greenyellow;
font-size: 30px;
}
之后在**.html文件中直接进行外部CSS文件的引入
<link rel="stylesheet" href="css/Out.css" />
在接下来的<body>标签里面直接添加如下代码即可:
<div>你若安好便是晴天</div>
5.CSS 的语法和规范
选择器{
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;//注意分号和冒号
}
6.CSS的三种基本选择器(元素选择器、类选择器、id选择器)
- 元素选择器:用来实现整体的设计,如下:在<body>标签内部写<div>标签设计即可
<div>你若安好便是晴天11</div>
<div >你若安好便是晴天22</div>
<div>你若安好便是晴天33</div>
<div>你若安好便是晴天44</div>
<div>你若安好便是晴天55</div>
<div>你若安好便是晴天66</div>
在<head>标签里面写选择器内容
<style type="text/css">
div{
color: greenyellow;
font-size: 30px;
}
</style>
- 类选择器:用来实现局部的设计,在<body>标签里面的<div>加上class属性
<div>你若安好便是晴天11</div> <div class="div2">你若安好便是晴天22</div> <div>你若安好便是晴天33</div> <div class="div2">你若安好便是晴天44</div> <div>你若安好便是晴天55</div> <div>你若安好便是晴天66</div> 在<head>标签里面的类选择器中如下设置即可:注意div2前面的引入有个小数点 <style type="text/css"> .div2{ color: greenyellow; font-size: 30px; } </style>
-
id选择器:用来实现唯一的设计,在<body>标签里面的<div>加上id属性
<div>你若安好便是晴天11</div>
<div class="div2">你若安好便是晴天22</div>
<div>你若安好便是晴天33</div>
<div class="div2">你若安好便是晴天44</div>
<div id="div5">你若安好便是晴天55</div>
<div>你若安好便是晴天66</div>
在<head>标签里面的id选择器中如下设置即可:注意div5前面的引入有个#号
<style type="text/css">
#div5{
color: greenyellow;
font-size: 30px;
}
</style>
7.其他选择器(层级选择器,属性选择器)
层级选择器:
在body标签里面添加如下代码:
<div>
<p>你若安好便是晴天66</p>
</div>
在style标签里面添加如下代码:
<style type="text/css">
div p{
color: greenyellow;
font-size: 30px;
}
</style>
属性选择器:
在body标签里面添加如下代码:
用户名:<input type="text" name="username"/><br />
密码:<input type="password" name="password"/>
</div>
在style标签里面添加如下代码:
<style>
input[type='text']{
background-color: red;
}
input[type='password']{
background-color: blue;
}
</style>