下载文档原格式
字体属性:（font)大小font-size：x—large；(特大) xx-small;(极小）一般中文用不到，只要用数值就可以,单位：PX、PD 样式font-style: oblique；（偏斜体）italic;（斜体) normal；（正常)行高line—height：normal；（正常）单位：PX、PD、EM粗细font—weight: bold;(粗体) lighter;（细体) normal;（正常)变体font-variant: small—caps;(小型大写字母) normal;(正常)大小写text-transform: capitalize;(首字母大写）uppercase；（大写）lowercase；（小写) none；（无）修饰text—decoration: underline;(下划线) overline；（上划线）line-through;（删除线) blink；(闪烁）常用字体:（font-family)”Courier New"，Courier，monospace, "Times New Roman"，Times, serif，Arial，Helvetica, sans-serif, Verdana背景属性：（background)色彩background-color: ＃FFFFFF; 图片background—image: url（）;重复background-repeat: no-repeat; 滚动background—attachment: fixed;（固定) scroll;（滚动)位置background-position：left（水平）top（垂直); 简写方法background：＃000 url（..）repeat fixed left top;区块属性：(Block)字间距letter-spacing: normal；数值对刘text—align：justify;(两端对齐）left；(左对齐) right；(右对齐）center；（居中）缩进text-indent：数值px;垂直对齐vertical-align: baseline;（基线) sub;(下标）super;(下标) top; text—top; middle；bottom; text-bottom；词间距word-spacing：normal；数值空格white—space：pre；(保留) nowrap；（不换行）显示display：block；（块）inline;(内嵌）list—item；（列表项）run-in;(追加部分）compact;（紧凑) marker；（标记) table; inline-table; table—raw-group；table—header—group；table-footer—group; table—raw；table —column-group；table-column；table-cell；table—caption；(表格标题）方框属性:(Box)width：; height:; float：；clear：both；margin:; padding：; 顺序：上右下左边框属性：(Border）border-style: dotted（点线); dashed（虚线); solid（实线）；double(双线)；groove（槽线）; ridge;（脊状）inset;(凹陷）outset;border—width：; 边框宽度border—color:＃；边框颜色简写方法border:width style color；列表属性：(List-style）类型list—style-type: disc;（圆点）circle;(圆圈) square;（方块）decimal;（数字）lower—roman；（小罗码数字）upper—roman；lower—alpha; upper—alpha;位置list—style—position: outside；(外) inside; 图像list—style—image：url（。
11种常用css样式之鼠标、列表和尺寸样式学习鼠标cursor常见样式crosshair;/*十字形状*/cursor:pointer;/*小手形状*/cursor:wait;/*等待形状*/cursor:text;/*默认文本形状*/cursor:default;/*箭头指示形状*/cursor:help;/*帮助形状*/ 列表(list-style-type):none/*把列表前面的选项去除*/disc/*实心*/circle/*空心*/square/*方块*/decimal/*序列*/lower-roman/*小写罗马*/upper-roman/*大写罗马*/lower-alpha/*小写字母*/upper-alpha/*大写字母*/尺寸:height;max-height;min-height;width;max-width;min-width/*屏幕自适应宽度,100%*/textarea文本框:resize:none/*文本框不能拖动*/width:500px;height:300px;样式继承:文字有关的样式会继承下来(阅读css常用样式font控制字体的多种变换)文本框resize:none文本框不能拖动)样式继承/*文字有关的样式会继承下来*/阅读"css常用样式font控制字体的多种变换"1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=device-width, initial-scale=1.0">6<title>11种常用css样式之鼠标、列表和尺寸样式学习</title>7<style type="text/css">8/*常见鼠标样式*/9 #ceshi{10/* width: 120px;11 height: 20px;12 line-height: 20px;13 text-align: center;14 border-radius: 5px;15 color: #fff;16 border: 1px inset red;17 background-color: green; */18 cursor: crosshair;/*十字架*/19 cursor: text;/*默认文本*/20 cursor: wait;/*等待加载*/21 cursor: help;/*请求帮助*/22 cursor:default;/*箭头指示*/23 cursor: pointer;/*小手*/24}25/*常见列表样式*/26 .box>ul li{27 list-style: none;/*把列表前面的选项去除*/28 list-style-type: disc;/*实心圆点*/29 list-style-type: circle;/*空心圆点*/30 list-style-type: square;/*方块*/31 list-style-type: decimal;/*序列123..*/32 list-style-type: lower-alpha;/*小写字母*/33 list-style-type: upper-alpha;/*大写字母*/34 list-style-type: lower-latin;/*小写字母*/35 list-style-type: lower-roman;/*小写罗马*/36 list-style-type: upper-roman;/*大写罗马*/37}38 .box>ul li>a{39 text-decoration: none;40}41/*拓展，字母大小写、文本默认方向;建议阅读“css常用样式对文本的处理演练”*/42 p{43 direction: ltr;44 text-transform: uppercase;/*全部大写*/45 text-transform: lowercase;46 text-transform: capitalize;47}48/* 尺寸如何清理浮动阅读https:///dhnblog/p/12313037.html*/49 .size{50 background-color: #000;51}52 .size>ul{53 width: 1920px;54 min-width: 1300px;/*屏幕自适应宽度100%*/55 padding-left: 0;56 padding-right: 40px;57 line-height: 40px;58}59 .size>ul>li{60 list-style-type: none;61 float: left;62 margin-left: 15px;63}64 .size>ul>li>a{65 text-decoration: none;66 color: #fff;67}68 .size::after{69 content: '';70 clear: both;71 display: block;72}/*清浮动*/73 #ueser{74 width: 100px;75 height: 100px;76 resize: none;/*不能拖动*/77}78</style>79<script>80 window.onload=function(){81var obj=document.getElementById('ceshi')82 obj.onclick=function(){83 console.log('123');84 alert('f12打开控制台');85 document.body.style.background='#f90'86 }87 }88</script>89</head>90<body>91<div id="ceshi">92点我有惊喜93</div>94<div class="box">95<ul>96<li><a href="#">列表abc1</a></li>97<li>列表abc2</li>98<li>列表abc3</li>99<li>列表abc4</li>100<li>列表abc5</li>101</ul>102</div>103<p>asAAAAdbc</p>104<!-- 尺寸使用ul制作一个导航菜单-->105<div class="size">106<ul>107<li><a href="#">百度</a></li>108<li><a href="#">新浪</a></li>109<li><a href="#">搜狐</a></li>110<li><a href="#">网易</a></li>111<li><a href="#">考拉</a></li>112</ul>113</div>114<!-- textarea文本框 -->115<form action="">116<p>用户名：</p><input type="text" name="">117<p>留言信息：</p>118<textarea name=""id="ueser"cols="30" rows="10"></textarea>119</form>120<!-- 样式继承文字有关的样式会继承下来 -->121</body>122</html>。
CSS样式总结范文CSS（层叠样式表）是一种用于描述网页样式和布局的标记语言。
它可以将样式应用到HTML元素上，进而控制网页的外观和格式。
1.文本样式属性- color：设置文本颜色- font-family：设置字体样式- font-size：设置字体大小- font-weight：设置字体粗细- text-align：设置文本对齐方式2.背景样式属性- background-color：设置背景颜色- background-image：设置背景图片- background-repeat：设置背景图片的重复方式- background-position：设置背景图片的位置3.边框样式属性- border：设置边框样式，包括边框宽度、边框颜色和边框样式- border-radius：设置边框圆角- box-shadow：设置盒子阴影效果4.布局样式属性- width：设置元素宽度- height：设置元素高度- margin：设置外边距- padding：设置内边距- display：控制元素的显示方式，如块级元素、内联元素等- position：设置元素的定位方式，如静态定位、相对定位、绝对定位等除了以上常用的CSS属性外，还有一些其他属性可以用来增强网页的视觉效果，如动画效果的transition属性、渐变背景的gradient属性、文本阴影的text-shadow属性等。
在应用CSS样式时，可以使用选择器来选择要应用样式的HTML元素。
常用的选择器有：-元素选择器：选择HTML元素类型，如h1、p、a等- 类选择器：选择具有相同类名的元素，用.开头，如.class- id选择器：选择具有相同id的元素，用#开头，如#id- 后代选择器：选择一些元素的后代元素，用空格分隔，如#id .class- 伪类选择器：选择元素的特殊状态，如:hover、:active、:first-child等通过将不同的选择器和CSS样式属性组合起来，可以灵活地控制网页的外观和格式。
CSS鼠标样式大全及使用方法（非常实用）
共计300种鼠标样式，根据网络资料整理而成，其应用代码格式为：<DIV style="CURSOR: url('你喜欢的鼠标地址')" align=center>你的日志或图片</DIV>。
有些新入门的博友对如何使用鼠标样式代码仍不是很清楚，我在这里告诉你，就是在你编写完日志后，点击“全部功能”，再点击“<>”进入HTML源代码编辑状态，将<DIV style="CURSOR: url('你喜欢的鼠标地址')"align=center>加在最前面，再将</DIV>放到最后，点击“发表日志”即可看到你喜欢的鼠标特效了。
鼠标样式代码一
到鼠标地址的红色部分，即得到相应的鼠标地址了。
本人觉得下面的样式还不错：001 004 008 010 011 014 017 020 036 037 042 04 7 058 060 062 066 070 084 093 091 092 114 121 135 132 131 139 077
鼠标样式代码二
到鼠标地址的红色部分，即得到相应的鼠标地址了。
鼠标样式代码三
说明：在上面的表格中挑选自己喜欢的样式，将对应的编号替换到鼠标地址的红色部分，即得到相应的鼠标地址了。
字体属性：(font)大小{font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD样式{font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)行高{line-height: normal;}(正常) 单位：PX、PD、EM粗细{font-weight: bold;}(粗体) lighter;(细体) normal;(正常)变体{font-variant: small-caps;}(小型大写字母) normal;(正常)大小写{text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)修饰{text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)常用字体：(font-family)"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana背景属性：(background)色彩{background-color: #FFFFFF;}图片{background-image: url();}重复{background-repeat: no-repeat;}滚动{background-attachment: fixed;}(固定) scroll;(滚动)位置{background-position: left;}(水平) top(垂直);简写方法{background:#000 url(..) repeat fixed left top;} /*简写·这个在阅读代码中经常出现，要认真的研究*/区块属性：(Block) /*这个属性第一次认识，要多多研究*/字间距{letter-spacing: normal;} 数值/*这个属性似乎有用，多实践下*/对齐{text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中)缩进{text-indent: 数值px;}垂直对齐{vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;词间距word-spacing: normal; 数值空格white-space: pre;(保留) nowrap;(不换行)显示{display:block;}(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group;table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题) /*display 属性的了解很模糊*/方框属性：(Box)width:; height:; float:; clear:both; margin:; padding:; 顺序：上右下左边框属性：(Border)border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;border-width:; 边框宽度border-color:#;简写方法border：width style color; /*简写*/列表属性：(List-style)类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;位置list-style-position: outside;(外) inside;图像list-style-image: url(..);定位属性：(Position)Position: absolute; relative; static;visibility: inherit; visible; hidden;overflow: visible; hidden; scroll; auto;clip: rect(12px,auto,12px,auto) (裁切)css属性代码大全一CSS文字属性：color : #999999; /*文字颜色*/font-family : 宋体,sans-serif; /*文字字体*/font-size : 9pt; /*文字大小*/font-style:itelic; /*文字斜体*/font-variant:small-caps; /*小字体*/letter-spacing : 1pt; /*字间距离*/line-height : 200%; /*设置行高*/font-weight:bold; /*文字粗体*/vertical-align:sub; /*下标字*/vertical-align:super; /*上标字*/text-decoration:line-through; /*加删除线*/text-decoration: overline; /*加顶线*/text-decoration:underline; /*加下划线*/text-decoration:none; /*删除链接下划线*/text-transform : capitalize; /*首字大写*/text-transform : uppercase; /*英文大写*/text-transform : lowercase; /*英文小写*/text-align:right; /*文字右对齐*/text-align:left; /*文字左对齐*/text-align:center; /*文字居中对齐*/text-align:justify; /*文字分散对齐*/vertical-align属性vertical-align:top; /*垂直向上对齐*/vertical-align:bottom; /*垂直向下对齐*/vertical-align:middle; /*垂直居中对齐*/vertical-align:text-top; /*文字垂直向上对齐*/ vertical-align:text-bottom; /*文字垂直向下对齐*/ 二、CSS边框空白padding-top:10px; /*上边框留空白*/padding-right:10px; /*右边框留空白*/padding-bottom:10px; /*下边框留空白*/ padding-left:10px; /*左边框留空白三、CSS符号属性：list-style-type:none; /*不编号*/list-style-type:decimal; /*阿拉伯数字*/list-style-type:lower-roman; /*小写罗马数字*/ list-style-type:upper-roman; /*大写罗马数字*/ list-style-type:lower-alpha; /*小写英文字母*/list-style-type:upper-alpha; /*大写英文字母*/list-style-type:disc; /*实心圆形符号*/list-style-type:circle; /*空心圆形符号*/list-style-type:square; /*实心方形符号*/list-style-image:url(/dot.gif); /*图片式符号*/list-style-position: outside; /*凸排*/list-style-position:inside; /*缩进*/四、CSS背景样式：background-color:#F5E2EC; /*背景颜色*/background:transparent; /*透视背景*/background-image : url(/image/bg.gif); /*背景图片*/ background-attachment : fixed; /*浮水印固定背景*/ background-repeat : repeat; /*重复排列-网页默认*/ background-repeat : no-repeat; /*不重复排列*/ background-repeat : repeat-x; /*在x轴重复排列*/ background-repeat : repeat-y; /*在y轴重复排列*/指定背景位置background-position : 90% 90%; /*背景图片x与y轴的位置*/ background-position : top; /*向上对齐*/background-position : buttom; /*向下对齐*/background-position : left; /*向左对齐*/background-position : right; /*向右对齐*/background-position : center; /*居中对齐*/五、CSS连接属性：a /*所有超链接*/a:link /*超链接文字格式*/a:visited /*浏览过的链接文字格式*/a:active /*按下链接的格式*/a:hover /*鼠标转到链接*/鼠标光标样式：链接手指CURSOR: hand十字体cursor:crosshair箭头朝下cursor:s-resize十字箭头cursor:move箭头朝右cursor:move加一问号cursor:help箭头朝左cursor:w-resize箭头朝上cursor:n-resize箭头朝右上cursor:ne-resize箭头朝左上cursor:nw-resize文字I型cursor:text箭头斜右下cursor:se-resize箭头斜左下cursor:sw-resize漏斗cursor:wait光标图案(IE6) p {cursor:url("光标文件名.cur"),text;} 六、CSS框线一览表：border-top : 1px solid #6699cc; /*上框线*/ border-bottom : 1px solid #6699cc; /*下框线*/ border-left : 1px solid #6699cc; /*左框线*/ border-right : 1px solid #6699cc; /*右框线*/以上是建议书写方式,但也可以使用常规的方式如下: border-top-color : #369 /*设置上框线top颜色*/ border-top-width :1px /*设置上框线top宽度*/ border-top-style : solid/*设置上框线top样式*/其他框线样式solid /*实线框*/dotted /*虚线框*/double /*双线框*/groove /*立体内凸框*/ridge /*立体浮雕框*/inset /*凹框*/outset /*凸框*/七、CSS表单运用：文字方块按钮复选框选择钮多行文字方块下拉式菜单选项1选项2八、CSS边界样式：margin-top:10px; /*上边界*/margin-right:10px; /*右边界值*/margin-bottom:10px; /*下边界值*/margin-left:10px; /*左边界值*/CSS 属性：字体样式(Font Style)序号中文说明标记语法1 字体样式{font:font-style font-variant font-weight font-size font-family}2 字体类型{font-family:"字体1","字体2","字体3",...}3 字体大小{font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}4 字体风格{font-style:inherit|italic|normal|oblique}5 字体粗细{font-weight:100-900|bold|bolder|lighter|normal;}6 字体颜色{color:数值;}7 阴影颜色{text-shadow:16位色值}8 字体行高{line-height:数值|inherit|normal;}9 字间距{letter-spacing:数值|inherit|normal}10 单词间距{word-spacing:数值|inherit|normal}11 字体变形{font-variant:inherit|normal|small-cps }12 英文转换{text-transform:inherit|none|capitalize|uppercase|lowercase}13 字体变形{font-size-adjust:inherit|none}{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit| narrower|normal|semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}文本样式(Text Style)序号中文说明标记语法1 行间距{line-height:数值|inherit|normal;}2 文本修饰{text-decoration:inherit|none|underline|overline|line-through|blink}3 段首空格{text-indent:数值|inherit}4 水平对齐{text-align:left|right|center|justify}5 垂直对齐{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub| super}6 书写方式{writing-mode:lr-tb|tb-rl}背景样式序号中文说明标记语法1 背景颜色{background-color:数值}2 背景图片{background-image: url(URL)|none}3 背景重复{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4 背景固定{background-attachment:fixed|scroll}5 背景定位{background-position:数值|top|bottom|left|right|center}6 背影样式{background:背景颜色|背景图象|背景重复|背景附件|背景位置}框架样式(Box Style)序号中文说明标记语法1 边界留白{margin:margin-top margin-right margin-bottom margin-left}2 补白{padding:padding-top padding-right padding-bottom padding-left}3 边框宽度{border-width:border-top-width border-right-widthborder-bottom-width border-left-width}宽度值：thin|medium|thick|数值4 边框颜色{border-color:数值数值数值数值}数值：分别代表top、right、bottom、left颜色值{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|gro ove}6 边框{border:border-width border-style color}上边框{border-top:border-top-width border-style color}右边框{border-right:border-right-width border-style color}下边框{border-bottom:border-bottom-width border-style color}左边框{border-left:border-left-width border-style color}7 宽度{width:长度|百分比| auto}8 高度{height:数值|auto}9 漂浮{float:left|right|none}10 清除{clear:none|left|right|both}分类列表序号中文说明标记语法1 控制显示{display:none|block|inline|list-item}2 控制空白{white-space:normal|pre|nowarp}3 符号列表{list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-a lpha|upper-alpha|none}4 图形列表{list-style-image:URL}5 位置列表{list-style-position:inside|outside}6 目录列表{list-style:目录样式类型|目录样式位置|url}7 鼠标形状{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-re size|se-resize|sw-resize}。
CSSHTML改变⿏标指针形状改变⿏标指针形状的⽅法有两种；第⼀种：⽤的来改变⿏标指针形状。
另⼀种是:利⽤第三⽅控件的⽅法,⽽我⾃⼰最常⽤的是第⼀种:⽤css样式表来改变⿏标指针形状我们先来看第⼀种：⽤来改变⿏标指针形状。
有些时候我们并不需要⽂字，图⽚加链接，⽽且还想要加链接时的⿏标样式。
这就⽤到了我们的css样式表来⿏标指针形状了。
请下⾯的css ⿏标指针css样式表的⼀些属性：默认default⽂字/编辑text⾃动auto⼿形pointer, hand(hand是IE专有)可移动对象move不允许not-allowed⽆法释放no-drop等待/沙漏wait帮助help⼗字准星crosshair向上改变⼤⼩(North)n-resize向下改变⼤⼩(South)s_resize 与n-resize效果相同向左改变⼤⼩(West)w-resize向右改变⼤⼩(East)e-resize 与w-resize效果相同向左上改变⼤⼩（NorthWest）nw-resize向左下改变⼤⼩（SouthWest）sw-resize向右上改变⼤⼩（NorthEast）ne-resize 与sw-resize效果相同向右下改变⼤⼩（SouthEast）se-resize 与nw-resize效果相同⾃定义光标url('光标地址')以上就是改变⿏标指针形状的css样式表。
如何应⽤呢？下⾯我们⽤实例来说明⼀下：<style type="text/css">.a{ cursor:hand } /*这⾥边的curusor的值可以是以上表中的任何值,或是你⾃⼰定义*/</style><div class=”a”>欢迎您到百洋软件研究实验室listly的博客来做客</div>也可以直接将样式表写在div标签中效果是⼀样的哟如:<div style=”cursor:help;”>欢迎您到百洋软件研究实验室listly的博客来做客</div>还有⼀种⽤法其原理是：利⽤了CSS2的⼀个cursor的属性cursor：url (url)，⿏标⽂件可以使⽤jpg、gif、ani和cur多种⽂件格式。
2019-关于css鼠标样式大全-范文模板
本文部分内容来自网络整理，本司不为其真实性负责，如有异议或侵权请及时联系，本司将立即删除！
== 本文为word格式，下载后可方便编辑和修改！ ==
关于css鼠标样式大全
巧合要用到鼠标样式效果，就顺便整理了下十五种CSS鼠标样式，下面是
小编收集的资料，希望大家喜欢!
巧合要用到鼠标样式效果，就顺便整理了下十五种CSS鼠标样式，小例子
供大家使用啊。
CSS鼠标样式语法如下：
任意标签中插入style="cursor:*"
例子：文本或其它页面元素文本或其它页面元素注意把*换成如下15个效
果的一种：
下面是对这15种效果的解释。
移动鼠标到解释上面，看看你的鼠标起了什么变化吧!
hand是手型
例子：CSS鼠标手型效果CSS鼠标手型效果
pointer也是手型，这里推荐使用这种，因为这可以在多种浏览器下使用。
例子：CSS鼠标手型效果CSS鼠标手型效果
crosshair是十字型
例子：CSS鼠标十字型效果CSS鼠标十字型效果
help是问号
例子：CSS鼠标问号效果CSS鼠标问号效果
下面写法都一样，这里就不一一写完了。
text是移动到文本上的那种效果
wait是等待的那种效果。
