[学习交流] 【石家庄校区】JavaWeb阶段Day02

Day02 DIV和CSS

DIV和CSSHTML的块标签

<div></div>:默认一个div独占一行
<span></span>:默认在同一行

CSS的概述

层叠样式表
HTML相当于网站的骨架,CSS对骨架进行美化,
CSS使用地方
- 任何网站都会使用CSS美化页面

CSS语法

选择器{属性:属性值;属性:属性值...}

h1{color:red;font-size:14px;}

CSS的引入方式

行内样式:直接在HTML的元素上使用style属性设置CSS

页面内样式:在HTML的<head>标签中使用<style>标签设置CSS

<html>
<head>
      <style>
         h1{
            color:blue;
            font-size:40px;
         }
      </style>
</head>
<body>
      <h1>标题</h1>
</body>
</html

外部样式:单独定义一个.css的文件,在HTML中引入css文件

<html>
<head>
<link href="" rel="stylesheet" type="text/css" />
</head>
</html>CSS的选择器

元素选择器:

<html>
<head>
      <style>
         div{
            border:1px solid blue;
            width:40px;
            height:45px;
         }
      </style>
</head>
<body>
      <div> DIV1</div>
      <div> DIV2</div>
      <div> DIV3</div>
      <div> DIV4</div>
      <div> DIV5</div>
</body>
</html>

ID选择器:

#d1{
border:2px solid red;
}

类选择器:

.divClass{
border:2px solid yellow;
}

后代选择器
叠加选择器

CSS的浮动

使用float属性完成div的浮动
- float属性的取值
  - right
  - left
  - none
  - inherit
清楚浮动效果:使用clear属性进行清除

CSS的其他选择器

属性选择器:

<html>

<style>
input[type="text"]{

}
</style>
</html>

后代选择器:
- div span 查找的是所有div中的所有的span元素
子元素选择器
- div > span 查找这个div第一层级的span元素
并列选择器

选择器,选择器{

}CSS的样式

背景
文本
字体
列表

CSS中的盒子模型

内边距padding
边框border
外边距margin

CSS中的定位

position属性设置定位:
- relative:相对位置
- absolute:绝对位置
- fixed:修正位置
使用另外两个属性:left,top

超链接的伪类

a:link{color: #FF0000}:未访问的链接
a:visited{color: #00FF00}已访问的链接
a:hover {color: #FF00FF}鼠标移动到链接上
a:active {color: #0000FF}选定的链接

显示和隐藏属性

display
- block:显示元素
- none:隐藏元素

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【石家庄校区】JavaWeb阶段Day02

0 个回复