黑马程序员技术交流社区

标题: 【石家庄校区】笔记 [打印本页]

作者: xcxiao1992 时间: 2017-11-19 17:25
标题: 【石家庄校区】笔记
本帖最后由小石姐姐于 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

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2