JavaWeb_HTML&CSS
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>