本帖最后由 小石姐姐 于 2017-11-20 15:18 编辑
【HTML的块标签】
<div></div> :默认一个div独占一行.
<span></span> :默认在同一行.
【CSS的概述】
Ø 什么是CSS:
* HTML相当于网站的骨架！CSS对骨架进行美化！
Ø CSS在那些地方使用：
任何网站都会使用CSS去美化页面！！！
Ø 如何使用CSS
知道CSS的语法.
【CSS的基本语法】
CSS的基本语法通常包含两个部分：一个是选择器，一个声明.
* 选择器{属性:属性值;属性:属性值...}
【CSS的引入的方式】
Ø 行内样式：直接在HTML的元素上使用style属性设置CSS.
<h1 style="color:red;font-size:200px ;">标题</h1>
Ø 页面内样式：在HTML的<head>标签中使用<style>标签设置CSS.
<style>
h1{
color:blue;
font-size: 40px;
}
</style>
Ø 外部样式:单独定一个.css的文件.在HTML中引入该CSS文件.
<link href="../../css/demo1.css" rel="stylesheet" type="text/css" />
【CSS的选择器】
Ø 元素选择器：
div{
border:1px solid blue;
width:40px;
height:45px;
}
Ø ID选择器:
#d1{
border:2px solid red;
}
Ø 类选择器：
.divClass{
border:2px solid yellow;
}
【CSS的浮动】
Ø 使用float属性可以完成DIV的浮动.
float属性的取值:
Ø 清除浮动效果：使用clear属性进行清除:
【CSS的其他选择器】
Ø 属性选择器：
<style>
input[type="text"]{
background-color: red;
}
</style>
Ø 后代选择器:
div span 查找的是所有div中的所有的span元素.
h1 strong{
color:red;
}
<h1>
This is <strong>very</strong> <strong>very</strong> important.
</h1>
<h1>This is
<strong>very</strong>
<em>really
<strong>very</strong>
</em>
important.
</h1>
Ø 子元素选择器：
div > span找这个div中的第一层级的span元素.
h1 > strong{
color:red;
}
<h1>
This is <strong>very</strong> <strong>very</strong> important.
</h1>
<h1>This is
<strong>very</strong>
<em>really
<strong>very</strong>
</em>
important.
</h1>
Ø 并列选择器:
选择器,选择器{
}
【CSS的样式】
Ø 背景
Ø 文本
Ø 字体
Ø 列表
【CSS中的盒子模型】
Ø 内边距：padding.
Ø 边框：border
Ø 外边距：margin
【CSS中的定位】
position属性设置定位：
* relative:相对定位
* absolute:绝对定位
使用另外两个属性:left,top
<title>注册页面</title>
CSS：
* CSS的概述：层叠样式表.
* 修饰HTML的页面.使页面与样式分离.
* CSS的语法：
* 选择器{属性名:属性值;属性名:属性值;...}
* CSS的引入方式：
* 行内样式：在html元素上使用style属性设置
* 内部样式：在html中使用<style></style>进行设置
* 外部样式：定义一个css文件,在html中引入该文件.<link href=”” type=”” rel=””/>
* CSS的选择器：(****)
* 元素选择器:
* ID选择器：
* 类选择器：
* 后代选择器：
* 子元素选择器：
* CSS的样式：
* 文本
* 背景
* 字体
* 列表
* CSS的盒子模型：
* 内边距：padding
* 边框：border
* 外边距：margin
* CSS的悬浮和定位：
* 悬浮：float属性设置悬浮.
* 清除悬浮：clear属性清除.
* 定位：position属性设置定位.
* 使用left和top属性控制位置.
* display属性：控制元素的显示方式：
* block--显示的, none--隐藏的,inline--显示到一行.
背景相关
背景颜色 background-color:red;
背景图片 background-image:"url(xx.png)";
背景重复 background-repeat:no-repeat;
背景位置 background-position
背景图片大小 background-size:
背景缩写 background:颜色 图片 重复方式 位置 大小
边框
边框样式 border-style:none/solid;
边框宽度 border-width:
边框简写 border:1px solid black
文本
左右对齐 text-align:center/left/right
去除下划线 text-decoration:none
上下居中 line-height=100px; height=100px;
字体
字体大小 font-size:12px;
字体：font-family:"微软雅黑";
字体加粗: font-weight:400px;
字体样式:font-style:normal/italic
简写 ：font: style weight size family.常用的是font: size family
颜色 : color:red
列表
list-style:none，disc ,square,circle |
|
收藏
淘帖
踩
