样式开始
新建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/>
特殊符号:
——空格
©——版权符号
>——大于号>
<——小于号<
&——&符号
¥——钱,美元符号
水平线标签:<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>