html初学（二） css样式总结及示例
时间：2023-08-29 22:00:01 | 来源：网站运营
时间：2023-08-29 22:00:01 来源：网站运营
html初学（二） css样式总结及示例：
HTML5的优势世界知名浏览器厂商对HTML5的支持:微软 、Google、苹果、Opera、Mozilla
市场的需求
跨平台
网页编辑工具：记事本、Dreamweaver、WebStorm
网页基本信息：<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8"/>
<title>我的第一个网页</title>
</head>
<body>
我的第一个网页
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------------
1.块元素与行内元素的区别:块元素:无论内容多少，该元素独占一行（p、h1-h6…）后续有个div
行内元素:内容撑开宽度，左右都是行内元素的可以排在一行(a、strong、em…) 后续有个span
2.无序列表<ul>
<li>范冰冰演藏族女孩</li>
<li>一线城市楼市退烧</li>
</ul>
没有顺序，每个<li>标签独占一行（块元素）
默认<li>标签项前面有个实心小圆点
3.有序列表<ol>
<li>范冰冰演藏族女孩</li>
<li>一线城市楼市退烧</li>
</ol>
有顺序，每个<li>标签独占一行（块元素）
默认<li>标签项前面有顺序标记
4.定义列表<dl>
<dt>水果</dt>
<dd>苹果</dd>
</dl>
没有顺序，每个<dt>标签、<dd>标签独占一行（块元素）
默认没有标记
5.表格<table border=”1” > (border的取值为表格边框的粗细) 整个表格可以设置宽度
<tr>
<td colspan="3">学生成绩</td> <!—colspan为跨列合并 后面给的值为要合并的列数-->
</tr>
<tr>
<td rowspan="2">张三</td> <!—rowspan为跨行合并 后面给的值为要合并的行数-->
<td>语文</td>
<td>98</td>
</tr>
</table>
6.视频元素<video src="视频路径" controls></video> [controls提供播放、暂停和音量的控件]
支持多个不同浏览器格式：（为了保证无论用户用哪一种浏览器都能正常访问）
<video controls>
<source src="video/video.webm" type="video/webm"/>
<source src="video/video.mp4" type="video/mp4"/>
</video>
Autoplay 自动播放属性 loop循环播放
7.音频元素<audio src="音频路径" controls></video> [controls提供播放、暂停和音量的控件]
支持多个不同浏览器格式
<audio controls>
<source src="music/music.mp3" type="audio/mpeg"/>
<source src="music/music.ogg" type="audio/ogg"/>
你的浏览器不支持audio元素
</audio>
同视频元素
8.结构元素：（主要是用于将网页主体做一个简单地划分）header：标题头部区域的内容（用于页面或页面中的一块区域）
footer：标记脚部区域的内容（用于整个页面或页面的一块区域）
section：Web页面中的一块独立区域
<header><h2>网页头部</h2> </header>
<section><h2>网页主体部分</h2></section>
<footer><h2>网页底部</h2></footer>
9.内联框架：结合超链接使用，把整个内联框架作为一个新的窗口 设置超链接的target属性与iframe的name值相同 即可将其划分在一起<a href=”目标位置” target=” 框架标识名”>点我呀</a>
<iframe src="引用页面地址" name="框架标识名" ></iframe>
10．表单及表单元素1)<form method="post" action="result.html"> [method=” 常用值：get | post”]
</form>
2)<input type=" input元素类型" name=" input元素名称" value=" input元素的值"/>
3)type：指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、4)image 和 button，默认为 text
5)name：指定表单元素的名称
6)value：元素的初始值。type 为 radio时必须指定一个值
7)size：指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
8)maxlength：type为text 或 password 时，输入的最大字符数
9)checked：type为radio或checkbox时，指定按钮是否是被选中
10)列表框
<select name="列表名称" size="行数">
<option value="选项的值" selected="selected">…</option >
<option value="选项的值">…</option >
</select>
11)按钮 submit reset image button
12)多行文本域<textarea name="showText" cols="显示的列数" rows="显示的行数">文本内容 </textarea >
13)文件域><input type="file" name="files" />
14)新增[具备自动验证功能]：
邮箱:<input type="email" name="email"/>[会自动验证Email地址格式是否正确]
网址:<input type="url" name="userUrl"/> [会自动验证URL地址格式是否正确]
数字:<input type="number" name="num" min="0" max="100" step="10"/> [step合法的数字间隔]
数字滑块:<input type="range" name="range1" min="0" max="10" step="2"/>
搜索框:<input type="search" name="sousuo"/>
15)readonly只读文本框
16)disabled禁用
17)隐藏域<input type="hidden" value="666" name="userid">
11.表单的初级验证<input type="search" name="sousuo" placeholder="请输入要搜索的关键字"/>
<input type="text" name="username" required/> [required规定文本框填写内容不能为空]
<input type="text" name="tel" required pattern="^1[358]/d{9}" />[验证规则，正则表达式]
12. CSS基本语法结构<head>
<style type="text/css">
h1 {
font-size:12px;
color:#F00;
}
</style>
</head>
13.样式行内样式：使用style属性引入CSS样式<h1 style="color:red;">style属性的应用</h1>
内部样式表：CSS代码写在<head>的<style>标签中
<style>
h1{color: green; }
</style>
外部样式表：CSS代码保存在扩展名为.css的样式表中，HTML文件引用扩展名为.css的样式表，有两种方式：
链接式<link href="style.css" rel="stylesheet" type="text/css" />
导入式@import url("style.css");
链接式与导入式的区别<link/>标签属于XHTML，@import是属于CSS2.1
使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示
使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的
样式表的优先级：行内样式>内部样式表>外部样式表
最终是根据就近原则14.基本选择器: 标签[p、h1、a]、
类选择器[.类名]、
ID选择器[#ID名]
ID选择器>类选择器>标签选择器
15.高级选择器层次选择器：E F 后代选择器 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F子选择器
E+F相邻兄弟选择器 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E~F通用兄弟选择器 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素
结构伪类选择器：E:first-child作为父元素的第一个子元素的元素E
E:last-child作为父元素的最后一个子元素的元素E
E F:nth-child(n) 选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd
E:first-of-type选择父元素内具有指定类型的第一个E元素
E:last-of-type选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n) 选择父元素内具有指定类型的第n个F元素
属性选择器：E[attr] 选择匹配具有属性attr的E元素
E[attr=val] 选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）
E[attr^=val] 选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val] 选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr*=val] 选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配
16.字体样式：font-family设置字体类型 p{font-family:Verdana,"楷体";}
font-size设置字体大小 px（像素）、em、rem、cm、mm、pt、pc
font-style设置字体风格 normal、italic和oblique
font-weight设置字体的粗细 normal、bold、bolder、lighter、400等同于normal，700等同于bold
font在一个声明中设置所有字体属性
字体属性的顺序：字体风格→字体粗细→字体大小→字体类型p span{font:oblique bold 12px "楷体";}
17.文本样式:Color设置文本颜色
text-align设置元素水平对齐方式 left、right、center、justify[两端对齐]
text-indent设置首行文本的缩进
line-height设置文本的行高
text-decoration设置文本的装饰 none、underline下划线、overline上划线、line-through删除线
18.文本阴影text-shadow : color[阴影颜色] x-offset[X轴位移，用来指定阴影水平位移量] y-offset[Y轴位移，用来指定阴影垂直位移量] blur-radius;[阴影模糊半径，代表阴影向外模糊的模糊范围]
19.超链接伪类 CSS设置超链接 标签名:伪类名{声明;}
a:hover {
color:#B46210;
text-decoration:underline;
}
a:link未单击访问时超链接样式
a:visited单击访问后超链接样式
a:hover鼠标悬浮其上的超链接样式
a:active鼠标单击未释放的超链接样式
设置伪类的顺序：a:link->a:visited->a:hover->a:active
20.背景：background-color:背景颜色
background-image:url(“111.jpg”);背景图片
background-position:背景位置，从上下 左右 方向给值 可以百分比或者具体数值 或者直接属性（如center）
background-repeat:背景是否平铺 默认平铺 no-repeat(不平铺) 还可以单独沿X轴或者Y轴平铺
尺寸 background-sizeAuto默认值，使用背景图片保持原样
Percentage当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的
Cover整个背景图片放大填充了整个元素
Contain让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域
21. CSS3渐变线性渐变：linear-gradient ( position, color1, color2,…) position[渐变方向] 第一种颜色、第二种颜色、可以有多种颜色
渐变兼容:IE浏览器是Trident内核，加前缀：-ms-
Chrome浏览器是Webkit内核，加前缀：-webkit-
Safari浏览器是Webkit内核，加前缀：-webkit-
Opera浏览器是Blink内核，加前缀：-o-
Firefox浏览器是Mozilla内核，加前缀：-moz-
22.边框borderborder-width边框粗细thin、medium、thick、像素值
border-style边框样式none、hidden、dotted、dashed、solid、double
同时设置边框的颜色、粗细和样式 border:1px solid #3a6587;
margin外边距 网页居中对齐: margin:0px auto;
padding内边距
盒子模型总尺寸=border+padding+margin+内容宽度
box-sizing：content-box[默认值，盒子的总尺度] | border-box[盒子的宽度或高度等于元素内容的宽度或高度] | inherit[ 元素继承父元素的盒子模型模式];
23. 圆角边框border-radius: 20px 10px 50px 30px; 四个属性值按顺时针排列
利用border-radius属性制作圆形的两个要点: 元素的宽度和高度必须相同, 圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%
div{
width: 100px;
height: 100px;
border: 4px solid red;
border-radius: 50%;
}
24. 盒子阴影box-shadow:inset[阴影类型内阴影] x-offset[X轴位移，指定阴影水平位移量] y-offset[Y轴位移，用来指定阴影垂直位移量] blur-radius[阴影模糊半径阴影向外模糊的模糊范围] color[阴影颜色，定义绘制阴影时所使用的颜色];
25. 标准文档流组成块级元素（block）<h1>…<h6>、<p>、<div>、列表
内联元素（inline）<span>、<a>、<img/>、<strong>...
26. display属性Block块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符
Inline内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符
inline-block行内块元素，元素既具有内联元素的特性，也具有块元素的特性
none设置元素不会被显示（用来隐藏内容）
特性：
块级元素与行级元素的转变block、inline
控制块元素排到一行inline-block
控制元素的显示和隐藏none
27. 定位 position属性static：默认值，没有定位
relative：相对定位（会保留原来的位置）
absolute：绝对定位（不会保留原来的位置）
fixed：固定定位
28. CSS3变形是一些效果的集合transform:[transform-function] *; transform-function设置变形函数，可以是一个，也可以是多个，中间以空格分开
变形函数:
translate()：平移函数，基于X、Y坐标重新定位元素的位置 , translateX（tx）表示只设置X轴的位移 translateY（ty）表示只设置Y轴的位移
scale()：缩放函数，可以使任意元素对象尺寸发生变化 scale(sx,sy); 函数可以只接收一个值，也可以接收两个值，只有一个值时，第二个值默认和第一个值相等
rotate()：旋转函数，取值是一个度数值 rotate(a) 参数a单位使用deg表示 , 参数a取正值时元素相对原来中心顺时针旋转
skew()：倾斜函数，取值是一个度数值 skew(ax, ay); 可以仅设置沿着X轴或Y轴方向倾斜
skewX（ax）、skewY（ay）
29.CSS3过渡transition:[transition-property transition-duration transition-timing-function transition-delay ]
transition-property过渡或动态模拟的CSS属性 IDENT：指定的CSS属性（width、height、background-color属性等）all：指定所有元素支持transition-property属性的样式，一般为了方便都会使用all
transition-duration完成过渡所需要的时间定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒（s）
transition-timing-function指定过渡函数
指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式
ease：速度由快到慢（默认值）
linear：速度恒速（匀速运动）
ease-in：速度越来越快（渐显效果）
ease-out：速度越来越慢（渐隐效果）
ease-in-out：速度先加速再减速（渐显渐隐效果）
transition-delay过渡开始出现的延迟时间
指定一个动画开始执行的时间，当改变元素属性值后多长时间去执行过渡效果
正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发
负值：元素过渡效果会从该时间点开始显示，之前的动作被截断
0：默认值，元素过渡效果立即执行
例如：transition:all 3s ease-in-out 1s;
过渡的触发机制:
伪类触发hover、active、focus、checked
媒体查询：通过@media属性判断设备的尺寸，方向等
JavaScript触发：用JavaScript脚本触发
- CSS3动画的使用过程
一，设置关键帧@keyframes IDENT {
from {/*CSS样式写在这里*/}
percentage {/*CSS样式写在这里*/}
to {/*CSS样式写在这里*/}
}
@keyframes spread {
0% {width:0;}
33% {width:23px;}
66% {width:46px;}
100% {width:69px;}
}
二，调用关键帧 a:hover{
animation:spread 0.3s linear 5 alternate;
background: url("images/header_05.png") 0 0 no-repeat;
}
Animation:后面的常用值分别代表 1.关键帧的名字 2.动画持续时间 3.运行方式 4.执行次数 5.是否反向执行
@keyframes的浏览器兼容性, 写兼容的时候浏览器前缀是放在@keyframes中间
语法：animation:animation-name animation–duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-play-state animation-fill-mode;
animation-name由@keyframes创建的动画名称
animation–duration动画时间
animation-timing-function动画方式
animation-delay延迟时间
animation-iteration-count动画的播放次数
animation-direction动画的播放方向
animation-play-state动画的播放状态
animation-fill-mode动画开始之前和结束之后发生的操作
在线咨询
