迁移html和css之二

乐之者java

于 2021-05-12 13:59:16 发布

阅读量374

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/xiaozhuangyumaotao/article/details/116705339

版权

前端专栏收录该内容

175 篇文章 2 订阅

订阅专栏

二十一、CSS3前缀

浏览器	厂商前缀
chrome、safari	-webkit-
opera	-o-
firfox	-moz-
internet explorer	-ms-

上标列出的是css前缀，为什么会有这些前缀呢？

新的css属性发布还未纳入w3c标准之前如果各个厂商想使用，一般加上自己的前缀，在新属性纳入标准之后，厂商除了需要支持标准属性以外，针对自己之前实现的私有属性可以选择继续保留，也可以选择剔除。比如我们学过的border-radius、border-shadow,opacity等。注意：标准属性写在最后边。

比如：

-webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

二十二、css里面的filter滤镜总结

filter属性只有ie支持，虽然只有ie才支持，有时候你要一点都不知道吧，看起来别人写的代码跟天书似的，总觉得看不懂有点信仰南桑。

filter（非行内元素才能使用，行内可转化后再使用）
alpha
属性	取值	备注
opacity	1-100	可见度
style	1,2,3	淡化方式
blur
add	true/false	是否是印象派
direction	0-360	模糊角度
strength	数值	模糊度
fliph():水平翻转/flipv
dropshadow：掉落的阴影
color	颜色	里面内容的颜色
offx	数值	x方向偏移
offy	数值	y方向偏移
glow():发光
color		发光的颜色
strength	数值	发光的强度
gray():黑白照/invert():反光照片/xray():x射线
shadow()阴影
color		发光的颜色
strength	数值	发光的强度
direction	0-360	模糊角度

举个例子：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
	.box{
		width:300px;
		height:300px;
		filter:dropshadow(color="yellow",offx=3,offy=3);
		/*filter:glow(color=yellow);*/
		/*filter:alpha(opacity=70);*/
	}
	
	.box2{
		width:300px;
		height:300px;
	}
</style>
</head>

<body>
	<div class="box">
    	我是div的内容我是div的内容
    </div>
	<div class="box2">
    	<img src="js.png">
    </div>
</body>
</html>

二十三、CSS3锐化边框效果border-radius的使用

border-radius:[border-top-left-radius] [border-top-right-radius][border-bottom-right-radius]

[border-bottom-left-radius]/[border-top-left-radius] [border-top-right-radius][border-bottom-right-radius][border-bottom-left-radius]

说明：

2个参数以“/”分隔，每个参数允许设置1~4个参数，对应关系如上所示，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数

bor-top-left-radius:提供2个参数，2个参数以空格分隔，每个参数允许设置1个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数

如设置border-top-left-radius:5px 10px;表示top-left这个角的水平圆角半径为5px，垂直圆角半径为10px。

举个例子：

代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>圆角</title>

<style>
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,
th,td{margin:0;padding:0}
div{
	width:300px;
	height:200px;
	background:yellow;
	border-top-left-radius:30px 30px;
	border-top-right-radius:60px;
}
</style>	 
</head>

<body>
<div id="div">
	 	twotwotwotwotwotwotwo<br>
		twotwotwotwotwotwotwo<br>
		twotwotwotwotwotwotwo<br>
</div>
</body>
</html>

二十四、CSS3文本效果

csss3中推出了3个以text-*开头的新的css属性,用来控制文本效果。

1.文本的阴影效果：

text-shadow: h-shadow v-shadow [blur] [color];分别表示水平方向阴影大小垂直方向阴影大小模糊的距离阴影的颜色

2.text-overflow已经讲过

3.文本描边：

-webkit-text-stroke:-webkit-text-stroke-width -webkit-text-stroke-color

我们来看个文本阴影效果的例子：

最终效果如下：

以下是css代码和html源码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>

p{
	text-shadow:5px 10px;
	text-shadow:5px 10px 3px;
		text-shadow:5px 10px 3px orange;
}
div{
-webkit-text-stroke:3px  red;	
}
</style>
</head>

<body>
<p>我是段落</p>
<div>我是被描边的文字</div>
</body>
</html>

二十五、CSS3动画效果

设置对象中动画效果

animation: animation-name animation-duration [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-fill-mode];

animation-property:自己起的名字，比如 abc

animation-duration：过渡效果持续时长，比如1s .5s

animation-timing-function:动画效果,比如 linear ease ease-in ease-out ease-in-out

animation-delay:过渡开始延时时长比如 1s .5s

animation-iteration-count:动画循环次数比如 3，infinite表示无限循环

animation-fill-mode:设置对象动画时间之外的状态none | forwards(结束时) | backwards(开始时) | both

@keyframes：指定动画名称和动画效果(跟jquery的动画只能设置数值类型属性不同)

@keyframes   abc{
     from{opacity:0}
     to{opacity:1}	
} 
@keyframes   abc{
                       0%{transform:translate(0,0);opacity:0}
	20%{transform:translate(20,20);}
	40%{transform:translate(40,0);opacity:1}
	60%{transform:translate(60,20);color:red}
	80%{transform:translate(80,0);}
	100%{transform:translate(100,20);}	
}

二十六、linear-gradient()线性渐变的使用

线性渐变linear-gradient()是css3中的新增属性，语法格式如下：

linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)

side-or-corner的可用值： [left | right] || [top | bottom]

color-stop格式： <color> [ <length> | <percentage> ]?

光看这个东西是看不懂的，我们直接来个例子：

如何使用linear-gradient()来作出一个这样有渐变色的按钮呢？这里既然是渐变色，是背景，我们还需要使用到background-image属性，这个属性可以使用linear-gradient()作为css的属性值。

html代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试页面</title>		
	</head>
	<body>
			<input id="login" type="button" class="btn" value="登录">
	</body>
</html>

只有一个按钮，很简单吧，css也不多：

<style>
.btn{
	width: 200px;
	height: 40px;
	background-image: linear-gradient(-90deg, #1862CD 0%, #5BB6F3 55%, #70D1FF 98%);
	box-shadow: 0 6px 12px 0 rgba(175,201,229,0.90);
	border-radius: 100px;
	color: #fff;
	font-size: 14px;
	border: 0px;
}
.btn:focus{
	outline: none;
}
</style>

只需要简简单单的几行就做出了效果绚丽的按钮。

解释：

linear-gradient(-90deg, #1862CD 0%, #5BB6F3 55%, #70D1FF 98%)，这里-90deg，就是“angle”角度了，定义了渐变线-90deg，意味着从右向左渐变，角度的计算画了个示意图，凑活着看吧：

-90deg就是逆时针数了（即x轴的反方向）。后边的#1862CD 0%, #5BB6F3 55%, #70D1FF 98%分别通过百分比的方式定义了color-stop。

二十七、z-index属性详解

z-index语法：

z-index: auto | 整数，其中auto为默认值。

适用范围：使用了position定位（且position的属性值不为默认的static）的元素

作用：

定义html元素在文档中的层叠顺序。

01.z-index用于确定元素在当前层叠上下文中的层叠级别，值越大堆叠级别越高，越显示在前面。

02.每个元素层叠顺序由所属的层叠上下文和元素本身的层叠级别决定（每个元素仅属于一个层叠上下文）。

03.同一个层叠上下文中，层叠级别大的显示在上面，反之显示在下面。

04.同一个层叠上下文中，层叠级别相同的两个元素，依据它们在HTML文档流中的顺序，写在后面的将会覆盖前面的。

05.不同层叠上下文中，元素的显示顺序依据祖先的层叠级别来决定，与自身的层叠级别无关。

解释：

auto：元素在当前层叠上下文中的层叠级别是0。元素不会创建新的局部层叠上下文，除非它是根元素。

整数值：用整数值来定义堆叠级别，值越大堆叠级别越高，越显示在前面。可以为负值。

关于z-index一个经典的例子，效果图如下：

实现html代码很简单，定义三个div：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>z-index</title>
</head>
<body>
<div class="z1">z-index 1</div>
<div class="z2">z-index 2</div>
<div class="z3">z-index 3</div>
</body>
</html>

css代码：

<style>
	.z1,.z2,.z3 {
		position: absolute;
		width: 200px;
		height: 100px;
		padding: 5px 10px;
		color: #fff;
		text-align: right;
	}
	.z1 {
		z-index: 1;
		background: #9004ff;
	}
	.z2 {
		z-index: 2;
		top: 30px;
		left: 30px;
		background: red;
	}
	.z3 {
		z-index: 3;
		top: 60px;
		left: 60px;
		background: orange;
	}
</style>

二十八、定位属性值之top

top格式：

top: auto | <length> | <percentage>,percentage是百分比的意思。比如：top:100px,top:50%

默认值：auto

适用的html元素：position为非static的定位元素

top的作用：

top定义了元素的上外边距边界与其包含块上边界之间的偏移量。

该属性用来指定盒子参照相对物顶边界向下的偏移量。相对定位元素的相对物是自身，绝对定位和居中定位元素是从包含块的padding边界开始计算偏移值

例子，效果图：

html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>z-index</title>
</head>
<body>
<div class="test">距离顶部100px</div>
</body>
</html>

css:

<style>
.test {
	position: absolute;
	top: 100px;
	width: 200px;
	height: 200px;
	padding: 5px 10px;
	background: #ccc;
	color: blue;
	line-height: 12;
}
</style>

二十九、web请求里面的曲折故事

什么是web请求，就是客户端（浏览器）向服务器发送的http(s)请求。它是服务器与客户端（浏览器）之间你来我往的对话。基本上，这个请求可以用下面的对话来模拟：

客户端：我想知道http://www.roadjava.com/上有什么，去登门造访一下吧，看看有什么新消息。[互联网连接静静地建立起来]
服务器：你好，新来的Web客户端！我是托管http://www.roadjava.com/的服务器。你想看哪个页面？
客户端：现在还早，我想看一看s/spjc/html5ycss3/下面的页面中有什么html与css的教程。
服务器：没问题，稍等。（一串数字代码从服务器传输到浏览器。）
客户端：收到了。谢谢！
服务器：不客气！我非常愿意跟您在线多聊一会儿，不巧又来新请求了。再见！

客户端连接到服务器并发送请求，而服务器响应数据。可到底什么是服务器，什么是客户端？

服务器是连在互联网上的计算机，运行着 Web 服务器软件。之所以称其为 Web 服务器，正是因为它们会根据请求来提供网页，像个服务员似的。服务器一般 24 小时运行，而且永远在线。有时候，Web 开发人员也会在本地计算机上运行 Web 服务器软件，当然你也可以。本地是什么意思？就是你这台电脑啊，远程指就是其他电脑，或者说除了你眼前这台电脑之外的其他电脑。有很多现成的服务器软件，比如 Apache，tomcat等。

相对而言，Web 浏览器就赏心悦目多了，我们每天都盯着它看个没完。大家一般都听说过 Firefox、Safari、Chrome，还有 Internet Explorer，这些都是浏览器，也就是客户端了。

理论上讲，每个网页都有一个唯一的 URL（Uniform Resource Locator，统一资源定位符），也叫 URI（(Uniform Resource Identifier，统一资源标识符）。大多数人不知道 URL 是怎么回事，但看见就能认出来。URL 一般以 www 开头，比如 http://www.roadjava.com/s/spjc/html5ycss3/2018/05/dwsxzztop.html。但服务器如果做过配置，那么“www.”这几个字符完

全可以省掉不写。

完整的 URL 由以下 4 部分构成：

01.通信协议，如 HTTP 或 HTTPS；

02.资源所在的域名，如 roadjava.com；

03.端口号，表示要连接到服务器的哪个端口上；

04.其他定位信息，如所请求文件的路径或查询参数。

于是，一个比较完整的 URL 就是这个样子的：http://www.roadjava.com:80/s/spjc/html5ycss3/2018/05/dwsxzztop.html。平时一般不用指定端口号，因为浏览器默认会连接服务器的 80 端口。因此，前面的URL 与下面这个功能完全一样：http://www.roadjava.com/s/spjc/html5ycss3/2018/05/dwsxzztop.html

URL 开头的协议名跟后面的域名之间是一个冒号和两个斜杠。为什么是两个斜杠？没有为什么，这就么规定的。可以算个失误吧，Web 的发明人也为这个失误后悔不迭。

HTTP 代表 Hypertext Transfer Protocol（超文本传输协议），是服务器与客户端之间传输 Web 内容最常用的协议。HTTPS 后面的“S”代表 Secure（安全）。因此，HTTPS 一般用于传输加密信息，比如在线交易或电子商务。

web上http请求的详细流程：

1. 用户打开自己的浏览器，在地址栏中输入 URL，例如 http://www.roadjava.com/s/spjc/html5ycss3/2018/05/dwsxzztop.html。

2. 浏览器尝试通过互联网连接roadjava.com 所在的服务器，连接其 80 端口（这是 HTTP 连接的默认端口）。

3. 与 roadjava.com 关联的服务器同意连接，并准备接收浏览器的请求。（ “我会等你一晚上，不见不散。 ” ）

4. 浏览器请求访问位于目录 s/spjc/html5ycss3/2018/05/下的页面。

5. 服务器把那个页面的 HTML 内容发给浏览器。

6. 浏览器收到 HTML 后，根据其中引用的其他文件（包括 CSS 样式表和图片）再聚合并显示出完整的页面。为此它还要再连接到同一台服务器，每次请求并取得一个文件。

7. 服务器响应，根据请求发回每个文件。

8. 网页文档传输完毕。浏览器履行它最费劲的职责——渲染内容。首先通过解析HTML 确定内容的结构，然后根据 CSS 选择符为匹配的元素应用样式，最后把图片插入到页面中，并执行 JavaScript 代码。

或许你不敢相信，每单击一次链接都会经历上述步骤。这些步骤比大多数人想象的要复杂，但却是理解客户端与服务器对话的基础，也是理解 Web 运行原理的基础。

三十、如何理解网页中结构与样式的分离

现在网页上有这样一段话：

菜单各个页面不同：都一样。搜索结果每条下面的徽章是什么，打的标记吗？如何显示？打标按钮点击后该显示什么？后台添加好的，已经
加好了，后期给我，直接sql加，默认今天排前面。贷款信息表格还需要分页？高亮的问题，要分页。高级搜索上边的xx显示的是已经勾选
的吗

如果没猜错，这应该是一个问题列表，但是由于内容没有分出结构来，所以读起来很费劲。而添加了结构之后，就可以区分哪里是标题，哪里是正文，列表有哪些？

1.菜单各个页面不同：都一样
2.搜索结果每条下面的徽章是什么，打的标记吗？如何显示？打标按钮点击后该显示什么？   ：后台添加好的，已经加好了，
  后期给我，直接sql加，默认今天排前面
3.贷款信息表格还需要分页？高亮的问题，要分页。
4.高级搜索上边的xx显示的是已经勾选的吗

这样子是不是好多了？文字还是那些文字，但加上结构之后，可读性就不一样了。HTML 就是为内容添加语义结构（或者说层次、关系和含义）的这么一种手段。HTML 不考虑文档的外观（或者叫做样式），那是 CSS 的事，而如何使用html来改变内容的结构呢？这里就是html中标签的作用。

乐之者java

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
迁移html和css之二

二十一、CSS3前缀浏览器厂商前缀 chrome、safari -webkit- opera -o- firfox -moz- internetexplorer -ms- 上标列出的是css前缀，为什么会有这些前缀呢？新的css属性发布还未纳入w3c标准之前如果各个厂商想使用，一般加..
复制链接

扫一扫

专栏目录