我的网页笔记

样式开始

新建css输入,

@charset "utf-8";
/* CSS Document */

文件名:style.html

HTML文件的文件名：index

1、链接式

<link href="css/style.css" rel="stylesheet" type="text/css" />

2、嵌入式，一般都用嵌入式

<style type="text/css">
    .header{  }
</style>

3、导入试，导入外部创建的css

<style type="text/css">
    @imort"css/style.css";(href)
</style>

4、行内式

home定义

*{ font-family:"微软雅黑"; margin:0px; padding:0px; font-size：14px; color:#666; background:#颜色;}
ul,li{ list-style:none; margin:0px; padding:0px;}

提示区块

name="header"--标题头部区域的内容（用于页面或页面中的一块区域）
name="footer"---标记脚部区域的内容（用于整个页面或页面的一块区域）
name="section"--Web页面中的一块独立区域
name="article"---独立的文章内容
name="aside"----相关内容或应用（常用于侧边栏）
name="nav"-----导航类辅助内容

<header>内容</header>

行内样式 > 内部样式表 > 外部样式表——就近原则

样式

width 宽度
height 高度

line-height:0px;行高/垂直居中

border边框
padding 内边距
margin 外边距

float:left/right 浮动
clear:clear 清除浮动
clear:both; 取消跟随浮动

border-radius: 边框圆角
margin: 0px auto;居中对其

overflow:hidden;超出隐藏/*多用在调试代码时*/

text-indent:0px;首行缩进

whith-space:nowrap;强制换行

list-style:none;清除项目类型符号

list-style0image:url(图像地址);改变项目类型符号

position:absolute / fixed / relative;绝对定位，定为固定，相对定位/*用在跳转页面*/

box-sizing: border-box; /*使边框不占位置*/

伪类

E:first-child作为父元素的第一个子元素的元素E
E:last-child作为父元素的最后一个子元素的元素E
E F:nth-child(n)选择父级元素E的第一个元素F，(n可以是1、2、3,关键字为even、odd)

span在同一行内单独定义使用

鼠标

cursor:pointer;        鼠标经过便手形

下面的属性HTML5不支持

cursor：鼠标形状参数
CSS鼠标形状参数表：
鼠标形状：CSS代码
style="cursor:hand" 　　　　　手形
style="cursor:crosshair" 　　十字形
style="cursor:text" 　　　　　文本形
style="cursor:wait" 　　　　　沙漏形
style="cursor:move" 　　　　十字箭头形
style="cursor:help" 　　　　　问号形
style="cursor:e-resize" 　　　右箭头形
style="cursor:n-resize" 　　　上箭头形
style="cursor:nw-resize" 　　左上箭头形
style="cursor:w-resize" 　　　左箭头形
style="cursor:s-resize" 　　　下箭头形
style="cursor:se-resize" 　　右下箭头形
style="cursor:sw-resize" 　　左下箭头形

下拉菜单

display:none内容隐藏

overflow:hidden;显示隐藏内容

height:auto;自动撑开高度

.e:hover.f{ display:block;}显示下拉菜单

css样式文本↓

首行缩进
text-indent属性(单位em/px)
text-indent:2em/px;

文本不换行
white-space

line-height:0px;行高/垂直居中

1、font-size: 字号参

2、font-style: 字体格式

3、font-weight: 字体粗细
​    normal默认标准字体
​    bold粗体字体
​    bolder更粗的字体
​    lighter更细的字体

4、color: 颜色属性

5、text-decoration:none;（取消下划线在a标签内使用）

6、text-docoration:none / underline / overline / line-through;默认，上划线，下划线，中线

7、line-through;中间线（删除线）

8、text-docoration:blink;闪烁

9、text-oducoration:none;默认值，没有任何修饰效果

10、font-family:字体样式

11、overflow:hidden;超出范围隐藏

12、whith-space:nowrap;强制换行

11、text-shadow:color/*阴影颜色*/ x-offeset/*x轴唯一，用来指定阴阳水平位移量*/ y-offset/*y轴唯一，用来指定阴影垂直位移量*/ blur-radius/*阴影模糊半径，代表阴影向外模糊的模糊范围*/;

12、text-align:center/*文本居中*/;left/*文本靠左*/;right/*文本靠右*/

样式-背景

background-color 背景颜色

background-image 背景图片

background-repeat：背景图片重复（默认）

·no-repeat 不重复平铺背景图片（也可以赋值width----+height[行宽和行高]）

·repeat-x 平铺水平方向
·repeat-y 平铺垂直方向

background:url(图像地址) 100px/*宽度*/ center/*居中对其*/ no-repeat/*不重复显示*/;

background:rgb(0.,0,0,0.6);/*背景透明*/ opacity:.6;/*整体透明*/

样式-边框

border:1px solid #Foo; 显示边框
border-radius:0px;边框圆角
border边框

border-top-color:颜色 设置上边框的颜色
border-right-color:颜色 设置右边框颜色
border-bottom-color:颜色 设置下边框颜色
border-left-color:颜色 设置右边框颜色
thin 定义细的边框
Medium 默认，定义中等边框
thick 定义粗的边框
length 允许自定义边框的宽度，如5px、0.1in等

加边框：
border:1px dashed 颜色;---虚线
border:1px solid 颜色;---实线
padding 边框内边距
padding:top/tight/bottom/left;(内边距 上，左，下，右)
padding:10px; 设置四个方向的内边距均10px
padding:10px 5px; 上、下内边距为10px;左、右内边距为5px;
padding:30px 8px 10px; 上内边距为30px;左、右内边距为8px; 下内边距为10px;
padding 20px 5px 8px 10px; 上内边距为20px; 右内边距为5px; 下内边距为8px; 左内边距为10px;
margin 边框外边距
margin:top/right/bottom/left;(外边距 上，右，下，左)

列表

 list-style:none;不显示项目类型符号

<ul>
    <li>无序</li>
    <li>列表</li>
</ul>


属性：type="disc/*默认实心圆*/circle/*空心圆*/cquare/*正方形*/"

<ol>
    <li>有序</li>
    <li>列表</li>
</ol>


属性：type="1/*阿拉伯数字*/ a /*小写英文*/ A/*大写英文*/ i/*小写罗马*/ I/*大写罗马*/"

<dl>
    <dt>定义
        <dd>列</dd>
        <dd>表</dd>
    </dt>
</dl>

渐变

浏览器兼容性：

属性名	IE	Firefox	Chrome	Opera	Safari
Gradient	10+	19.0+	26.0+	21.1+	5.1+

IE	浏览器是	Trident	内核,加前缀：	-ms-
Chrome	浏览器是	Webkit	内核,加前缀：	-webkit-
Safari	浏览器是	Webkit	内核,加前缀：	-webkit-
Opera	浏览器是	Blink	内核,加前缀：	-0-
Firefox	浏览器是	Mozilla	内核,加前缀：	-moz-

background: linear-gradient(to top/*渐变方向*/, color/*第一种颜色*/, color/*第二种颜色*.../);

background: - webkit-/*兼容前缀*/linear-grandient(to top/*渐变方向*/, color/*第一种颜色*/, color/*第二种颜色...*/);

阴影

盒子阴影

box-shadow: 0px/*水平方向偏移量*/ 0px/*垂直方向偏移量*/ 0px/*模糊半径*/ #000/*模糊颜色*/;

box-shadow: inset/*内阴影，文字阴影不需要此标签*/ 0px 0px 0px #000;

文字阴影

text-shadow: 0px/*水平方向偏移量*/ 0px/*垂直方向偏移量*/ 0px/*模糊半径*/ #000/*模糊颜色*/;

字体

行内标签↓
文字加粗：Ctrl+b
格式：<strong>...</strong> <i>...</i>

文字斜体：Ctrl+i
格式：<em>...</em> <i>...<i/>

特殊符号：
&nbsp;——空格
&copy;——版权符号
&gt;——大于号>
&lt;——小于号<
&amp;——&符号
&yen;——钱，美元符号

水平线标签：<hr/>(单标签)
属性：
color——颜色
size——粗细
width——宽度
align——对齐方式
例：<hr align="left" size="2" width="200" color="blue" />

字体样式：<font>...</font>
color——颜色（16进制）
size——字体大小，字号（数字1~7）
face+字体——字体样式

下划线：格式<u>...</u>

删除线：格式<s>...</s> <del>...</del>

表格

<table 行宽; 行高; 内边距; 外边距; 对齐方式; 边框; 颜色; 边框颜色;>
    <tr>
        <td></td>
    </tr>
</table>

width 行宽
height 行高
cellspacing 内边距
cellpadding 外边距
align 对其方式 reft 居左（默认） center 居中 right居右
bgcolor 背景颜色
bordercolor 表格边框颜色

colspan 合并行
rowspan 合并列

表单

<input type="" /> submit 提交 button 登录 reset 重置

<textarea>文本框</textarea>

<select>
    <option></option>
    <option></option>
</selext>

<form action="action" methed="get/post"></form> methed提交
<input type="text" name="UserName" value="张三"/>
<input name="btn" type="submit" value="提交"/>

value="提示文本"

单选框
radio 单选按钮
checked 单选按钮选中状态
<input name="同下name" type="radio" value="男" checked />男
<input name="同上name" type="radio" value="女" />女
-用于选择性别/单选题

name="fname" value="text"    对接数据库
type="range"滑块 min="0"允许最小值 max="10"允许最大值 step="2"合法数字间隔
type="email"邮箱

导入

插入图片
<img src="图片路径" />

视频元素：video/歪敌油

<video src="视频路径" controls/*提供播放、暂停和音量的控件*/></video>

controls提供播放、暂停和音量的控件
autoplay自动播放

<video controls autoplay>
        <source src="video/video.webm" type="video/webm" />
        <source src="video/video.mp4" type="video/mp4" />
</video>


音乐元素：audio/爱敌油

<audio src="音频路径" controls/*提供播放、暂停和音量的控件*/></video>

controls提供播放、暂停和音量的控件
autoplay自动播放

<audio controls>
    <source src="音频地址" type="music/ogg" >
    <source src+"音频地址" type="music/mp3" >
</audio>

浏览器[支持/不支持]的[音频/视频]格式 :
IE	不支持
Ogg	支持9.0+MP3 不支持MAV
Firefox	支持3.5+MP3 支持4.0+WAV
Opera	支持10.5+Ogg 不支持MP3 支持10.6+MAV
Chrome	支持3.0+Ogg 支持3.0+MP3 不支持MAV
Safari	不支持Ogg 支持3.0+MP3 支持3.0+MAV

<ifranme src="调取链接地址" name="任意名字"></iframe>
结合a标签
<a href="文件地址" target="名字和下相同">第一个</a>

<iframe src="地址" name="名字和上相同" width="定义宽度" height="定义高度" scrolling="no"/*不显示滚动条*/ />

其他

预览：视编译工具而定

水平线标签：<hr/>(单标签)
属性：
color——颜色
size——粗细
width——宽度
align——对齐方式
例：<hr align="left" size="2" width="200" color="blue" />

换行标签：<br/> Shift+回车(单标签)
注：与段落标签有明显的行间距区分。

align 对齐方式
属性值：left || center || trght 左中右

标题标签：
快捷键Ctrl+1~6
格式：<h1>...</h1>~<h6></h6>