【转载】原文地址：https://blog.csdn.net/weixin_42029090/article/details/80722545盒子模型(Box Model)
![]()
设置页面内容是html 编码格式是utf-8:
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="txt/html; charset=utf-8" />
<title>Document</title>
</head>
<body>
</body>
</html>
超链接各种状态设置：
在源代码的<head>和<head>之间加上如下的CSS语法控制：
<style type="text/css">
<!--
a:link { text-decoration: none;color: blue}
a:active { text-decoration:blink}
a:hover { text-decoration:underline;color: red}
a:visited { text-decoration: none;color: green}
-->
</style>
其中：
a:link 指正常的未被访问过的链接；
a:active 指正在点的链接；
a:hover 指鼠标在链接上；
a:visited 指已经访问过的链接；
text-decoration是文字修饰效果的意思；
none参数表示超链接文字不显示下划线；
underline参数表示超链接的文字有下划线
页面跳转方法： 常用短语元素样式：abbr：缩略语
br：换行
em：标志着重强调一段文字
i：表示与周边内容兼容不同的一段文字，比如来自另一种语言
span：一个没有自己语意的通用元素，可以用在希望引入一些全局属性却又不想引入额外语义的情况
strong：表示重要内容
wbr：表示可安全换行的地方
blockquote：表示引自他处的大段内容
nav：表示有意集中一起的导航元素
canvas：生成一个动态的图形画布
progress：嵌入目标进展或任
Web安全字体组合：Serif 字体（有衬线字体）字体 | 文本示例 | | Georgia, serif | This is a heading | | "Palatino Linotype", "Book Antiqua", Palatino, serif | This is a heading | | "Times New Roman", Times, serif | This is a heading |
sans - serif字体（没有衬线的字体）字体 | 文本示例 | | Arial, Helvetica, sans-serif | This is a heading | | Arial Black, Gadget, sans-serif | This is a heading | | "Comic Sans MS", cursive, sans-serif | This is a heading | | Impact, Charcoal, sans-serif | This is a heading | | "Lucida Sans Unicode", "Lucida Grande", sans-serif | This is a heading | | Tahoma, Geneva, sans-serif | This is a heading | | "Trebuchet MS", Helvetica, sans-serif | This is a heading | | Verdana, Geneva, sans-serif | This is a heading |
Monospace 字体（等宽字体）字体 | 文本示例 | | "Courier New", Courier, monospace | This is a heading | | "Lucida Console", Monaco, monospace | This is a heading |
WEB安全色：
WEB SAFE COLORS 颜色的三种表示方式：- 十六进制色 color:#0000ff; //若能简化可简化为#00f
- RGB 颜色 color:rgb(255,0,0);
- RGBA 颜色 color:rgba(255,0,0,0.5);//alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）
- HSL 颜色 color:hsl(120,65%,75%);//HSL 指的是 hue（色调）、saturation（饱和度）、lightness（亮度）
- HSLA 颜色 color:hsla(120,65%,75%,0.3);//alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）
- 预定义/跨浏览器颜色名
检查网页背景是否和文本/链接颜色有较好的对比度WebAIM Color Contrast Checker CSS的三种引入方式一、行内样式：使用style属性引入CSS样式。
示例：
<h1 style="color:red;">style属性的应用</h1>二、内部样式表：在style标签中书写CSS代码。style标签写在head标签中。 示例：
<head>
<style type="text/css">
h3{
color:red;
}
</style>
</head>
三、外部样式表：CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。
语法：
1、链接式
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
2、导入式
<style type="text/css">
@import url("css文件路径");
</style>
用图片代替列符号向列表<ul>,<ol>添加list-style-image属性： ul {list-style-image:url(xx.jpg)}收藏图标(favorites icon)设置用于网页标题栏前小图标，例如： <link rel="icon" href="haitun.jpg" type="image/x-icon">背景设置
body{
/*加载背景图*/
background-image：url（./images/background.jpg）;
/* 背景图垂直、水平均居中 */
background-position: center center;
/* 背景图不平铺 */
background-repeat: no-repeat;
/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
background-attachment: fixed; //此条属性必须设置否则可能无效/
/* 让背景图基于容器大小伸缩 */
background-size: cover;
/* 设置背景颜色，背景图加载过程中会显示背景色 */
background-color: #CCCCCC;
}
或简写为如下CSS样式：
body{
background:url(./images/background.jpg) no-repeat center center;
background-size:cover;
background-attachment:fixed;
background-color:#CCCCCC;
}
相对链接方式1、直接使用当前目录或当前子文件夹下的文件： href="index.html" href="img/c.jpg" 2、使用../返回当前目录上级目录 href="../index.html" 或先返回上级目录，在向下选用文件 href="../img/c.jpg"
做一个对话框
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
.chat-msg{
width: 300px;
height: 80px;
border:1px solid #ccc;
position: relative;
filter: drop-shadow(0 0 2px #999);
background-color: #FFFFFF;
}
.chat-msg:before{
content: "";
position: absolute;
left: -10px;
top:34px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 10px solid #ccc;
}
.chat-msg:after{
content: "";
position: absolute;
left: -8px;
top: 34px;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 10px solid #fff;
}
</style>
</head>
<body>
<div class="chat-msg">hi,Q!</div>
</body>
</html>
减少代码耦合 一个参数在多个文件中使用，修改一个地方会影响全局。防止耦合可使用传参的方式。 减少重复代码 将重复代码封装成一个函数（模块、插件、类等）。 页面元素推拽
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1, #div2
{float:left; width:198px; height:66px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault(); /*调用 preventDefault() 来避免浏览器对数据的默认处理*/
}
function drag(ev) /*drag(event)，它规定了被拖动的数据。*/
{
ev.dataTransfer.setData("Text",ev.target.id); /*dataTransfer.setData() 方法设置被拖数据的数据类型和值*/
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text"); /*通过 dataTransfer.getData("Text") 方法获得被拖的数据。*/
ev.target.appendChild(document.getElementById(data)); /*把被拖元素追加到放置元素（目标元素）中*/
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> /*ondragover 事件规定在何处放置被拖动的数据。*/
/*为了使元素可拖动，把 draggable 属性设置为 true*/
<img src="/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" id="drag1" />
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> /*ondrop 属性调用了一个函数，drop(event)：*/
</body>
</html>
样式规则的权重计算方式
样式规则 权重
!important 最高
内联 1000
id 100
.class 10
name 1 绝对定位层下margin:auto会失效 定位就不能用margin了, 要用left/top/right/bottom等。如设置left:50%，然后margin-left的值为层的宽度的一半，就可在达到margin:auto的效果。 元素居中设置 在父元素中设置align="center"属性。在文字类元素中可设置style="text-align: center"。 内容不能被选中
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
transform同时设置多个样式 transform元素可以按照设定的值变形、旋转、缩放、倾斜，当设置多个样式式，直接用空格隔开即可。 边框阴影效果 基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}
对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色}
段落首行文字缩进 让每个段落首行开头文字缩进，如缩进2个文字距离样式，我将用到text-indent属性样式。 cssText的用法以及特点 cssText 的本质就是设置 HTML 元素的 style 属性值。 document.getElementById("d1").style.cssText = "color:red; font-size:13px;"; 但是，这样会有一个问题，会把原有的cssText清掉，比如原来的style中有’display:none;’，那么执行完上面的JS后，display就被删掉了。
为了解决这个问题，可以采用cssText累加的方法：
Element.style.cssText += ‘width:100px;height:100px;top:100px;left:100px;’ 因此，上面cssText累加的方法在IE中是无效的。
Element.style.cssText += ‘;width:100px;height:100px;top:100px;left:100px;’ 最后，可以在前面添加一个分号来解决这个问题： 获取鼠标坐标
var eve = e || window.event;
var x = eve.clientX, // 鼠标指针相对客户端（即浏览器文档区域）的水平坐标。
y = eve.clientY, // 鼠标指针相对客户端（即浏览器文档区域）的垂直坐标。
x1 = eve.screenX, // 鼠标指针相对计算机屏幕的水平坐标。
y1 = eve.screenY; // 鼠标指针相对计算机屏幕的垂直坐标。
|
收藏
淘帖
踩
