html/css d01

HTML

超文本标记语言 是一种创建网页的标准标记语言。
HTML不是编程语言，而是一种标记语言。
HTML使用标记标签来描述页面。
划分：
单标记标签：
双标记标签：

注意事项：

1.命名规则：
数字，字母，下划线 数字不能开头
如：d01 d_1 banner
2.改title
3.符号要在英文状态下书写
charset 字符集
UTF-8 国际通用字符集
gb2312
gbk 宽字符集

css

层叠样式表
样式定义如何显示HTML元素
样式通常存储在样式表中

选择器：
1.标签选择器 p{ }
2.id选择器
步骤：

  <h1 id="add">我是h1</h1>    先起id名
 #add{
     color: chartreuse;      通过#获取id，加样式
  }

3.class选择器
步骤：

 <b class="acc">我是加粗</b>     先起class名
 .add{
     color: chartreuse;      通过"."获取class，加样式
  }

id和class区别：
id名不允许重复，而class名允许重复

文本：

color 字体颜色
text-align 文本对齐方式 center 居中
background-color 背景颜色
width 宽度
height 高度 单位：px/像素
text-decoration 文本修饰
none 默认 取消
underline 定义文本下的一条线
overline 定义文本上的一条线
line-through 穿过文本的一条线
dotted 点虚线
wavy 波浪线

简写：text-decoration: underline overline wavy blue;

文本转换：
text-transform:uppercase/lowercase/capitalize 大写/小写/首字母大写

文本缩进：
text-indent 单位：px

字体大小：
font-size 单位：px

文字字体：
font-family

字体样式：
font-style
normal 正常
italic 倾斜
oblique 倾斜

字体粗细：
font-weight
值：
normal 默认值 正常大小
bold 定义粗体
bolder 更粗
lighter 定义更细字符
inherit 从父元素继承
100-900 400默认

css背景

background-color     背景颜色
颜色值：
    1.英文           red    blue
    2.十六进制       #fff   #1057bf     
    3.rgb()          rgb(17,90,195)

背景图片
background-image  
    url()  路径
 
background-size:50px 100%;     背景图片大小

background-repeat    背景重复
         no-repeat   不重复
         repeat-x    沿着X轴重复
         repeat-y    沿着Y轴重复

background-position:right bottom;   背景图片位置：左下
             值：right bottom
                 100%   100%      
                 50px 50px

简写： background: url(img/shop_bottom_05.jpg) no-repeat right top;

边框：

border

边框线：
border-style:

solid 实线
dashed 虚线
dotted 点虚线

边框颜色：
border-color

边框粗细：
border-width 单位/px

简写：
border:solid red 2px;

单独给一条边加边框：
border-top:solid red 2px;
border-bottom:solid red 2px;
border-left:solid red 2px;
border-right:solid red 2px;

注意：
1.每个值之间用空格隔开
2.每个值之间的顺序任意

行内与块级

行内标签：
宽高不可控，不独占一行

<img/>  <span></span>    <font></font>   <a></a>

块级标签：
块级宽高可控，独占一行

<p></p>     <h1></h1>    <div></div>

转换：
行内转块级：display:block;
块级转行内：display:inline;
转行内块：
宽高可控，不独占一行
display:inline-block;

列表：
1.有序列表 ol li
2.无序列表 ul li
3.自定义列表 dl dt dd

list-style: 列表样式
none： 取消

行高：
line-height 调整每一行之间的间距(高度)

上下居中：
把行高的值设置成与外侧盒子高度相同即可。

圆角效果：
border-radius
值：100% px
给盒子半径就会变成圆。

分别设置四个角的不同的圆角效果：
1.border-radius:10px 5px 8px 15px;
四个值： 左上 右上 右下 左下

2.border-radius:10px 5px 8px;
三个值： 左上 右上和左下 右下

3.border-radius:10px 5px;
两个值： 左上和右下 右上和左下

阴影：
1.盒子阴影
box-shadow:

• X轴偏移量 阴影水平的宽度 必选 可以给负数

• Y轴偏移量 阴影垂直的高度 必选 可以给负数

• 阴影模糊半径 阴影边缘模糊程度 可选 必须是正数

• 阴影颜色 可选

box-shadow: 10px 10px 7px rgb(151, 149, 149),
            -10px -10px 7px rgb(151, 149, 149);  

2.文字阴影
text-shadow:

• X轴偏移量 阴影水平的宽度 必选 可以给负数

• Y轴偏移量 阴影垂直的高度 必选 可以给负数

• 阴影模糊半径 阴影边缘模糊程度 可选 必须是正数

• 阴影颜色 可选

盒子模型：
所有的HTML元素都可以看成盒子模型。
组成：边框(border), 内容(width,height), 边距( 内边距(padding)和外边距(margin) )

<div></div> 盒子
布局方式： div+css

之前的布局方式：table表格

边距： 布局方式之一
1.内边距
padding
内容到边框的间距

padding-top 上内边距
padding-bottom
padding-left
padding-right

简写：padding:10px 20px 30px 40px;

简写的方向和外边距一样。

2.外边距
margin 调整盒子与盒子之间的距离

单独给一个方向加外边距：
margin-top
margin-bottom
margin-left
margin-right

简写：

• margin:10px 20px 30px 40px; 四个值：上 右 下 左

• margin:10px 20px 30px; 四个值：上 左右 下

• margin: 10px 20px; 四个值：上下 左右

• margin:10px; 一个值：四个方向

左右居中效果：
margin-left 和 margin-right 值给auto

浮动：
float 布局方式之一
会使我们的元素向左或者向右移动，不能上下移动，其周围的元素会重新排列。
值：
float:left; 左浮动
float:right; 右浮动

清除浮动：
1.调成一个层面上
2.给浮动元素外侧套一个盒子
3.clear:both;

盒子模型的两种方式:
1.标准模式:
一个盒子的总宽度=width+margin(左右)+padding(左右)+border(左右)

2.怪异模式(IE盒子模型):
一个盒子的总宽度=width+margin(左右)
说明:IE浏览器 width已经包含了宽度和内边距.

width:200px;
margin-left:20px;
padding:40px;
border-left:10px;
?
 
width: 300px;
10px   4
padding:20px
width:300-10*2-20*2

全局样式:

*{ margin:0px; padding:0px; font-size:12px; font-family:"微软雅黑";}

放在css样式的最上侧

什么原因造成div脱离标准文档流?

标准文档流:
是按照一定规矩排列的,默认就是元素从左到右,从上到下排列,块级元素独占一行,行内元素共享一行

本来在标准文档流下,各个元素相安无事,可突然有一天,某个元素心想,我这么优秀,不该出现在这里,于是它成精了,它发现了一道大门,走向新的空间.

原因:浮动 float

position 定位 布局方式之一
1.固定定位(根据浏览器定位)
position:fixed;
top left right bottom

2.相对定位(根据自身定位)
position:relative;
top left right bottom

3.绝对定位(根据父类定位)
position:absolute;
top left right bottom

层: z-index
注意:
必须结合定位使用.
值可以随便给 是数字
数字越大层数越高

position:relative
原始的位置依然占用,不会有其他元素填充.
其真实位置依然是原位置,用margin使其原盒子下方盒子移动,本质上说其物理位置依然是原位置,新位置是渲染出来的一个位置,也可以理解为是一个影子.