Css代码

• 1
• 1,225 views
• A+

所属分类：技术

〓注意事项〓说明仅供参考，因浏览器显示差异或属性覆盖等问题可能看不到效果，具体使用请自行摸索，欢迎各位提供纠正完善，更多属性代码参考请到W3school，谢谢。 以下是通用代码(即红色部分)，你可以利用它修改你想修改的区域(即下面蓝色的部分)的属性，即：区域{通用代码} ＊如body{font:italic bold 105% small-caps"Times New Roman",Georgia,Serif;} 记得删除类似①②③的标识。 〓字体属性〓font: ①italic ②bold ③105% ④small-caps ⑤"Times New Roman",Georgia,Serif; 说明:①italic /*字体风格为斜体。normal:默认值，oblique:倾斜文字*/②bold /*字体浓淡为粗体。normal:默认值，bold:粗体，bolder:更粗，lighter:更细，100~900:定义由粗到细的字符，400等同于 normal，而700等同于 bold*/③105% /*字体尺寸为默认的105%。通过百分比或12px等控制，由实际情况而定*/④small-caps /*字体为小型大写字母。若要正常值删除该部分即可*/⑤"Times New Roman",Georgia,Serif /*字体系列。通常字体系列名称有"serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"。提示：建议使用多个，浏览器将使用其可识别的第一个值。使用逗号分割每个值，并始终提供一个通常字体系列作为最后的选择*/ color:①white;说明:①white /*字体颜色。可用颜色代码如#000或#668547或red等*/〓背景属性〓background:①url(背景图地址) ②no-repeat ③scroll ④right ⑤bottom ⑥#002255;background-size:⑦cover;说明:①url(背景图地址) /*加背景图*/②no-repeat /*背景图片重复属性。默认为图片既横向重复，又竖向重复，repeat-x:背景图片横向重复，repeat-y:背景图片竖向重复，no-repeat:背景图片不重复*/③scroll /*背景图随网页下拉而滚动*/④right /*背景图水平位置居右。left:居左，居中:center，也可以用1%-1008%表示与左端距离大小*/⑤bottom /*背景图垂直位置位于底部。top:居顶部，center:居中，也可用1%-100%表示与顶端距离大小*/⑥#002255/*背景颜色*/⑦cover /*背景图尺寸。cover:保持原图宽高比例，缩放到正好完全覆盖定义区域 contain:保持原图宽高比例，缩放到宽度或高度正好适应指定区域，或用像素如320px 480px或百分比如80% 90%表示*/ 〓边框属性〓border:①5px ②solid ③red;说明:①5px /*边框宽度*/②solid /*边框样式*/③red /*边框颜色*/ 添加文字下划线(即下边框) border-bottom:2px solid red;说明:同上(border部分)边框宽度(可单独设置各框宽度) border-width:2px 3px 0 5px;说明:/*分别为上右下左框*/边框颜色(可单独设置各框颜色) border-color:red white green #660022;说明:/*分别为上右下左框*/〓内边距属性〓padding:10px 5px 15px 20px;说明:/*分别为上右下左内边距*/〓外边距属性〓margin:10px 5px 15px 20px;说明:/*分别为上右下左外边距*/〓文本属性〓文本对齐 text-align: ①center;说明:①center /*文字居中。left:把文本排列到左边，默认值：由浏览器决定，right 把文本排列到右边，justify 实现两端对齐文本效果。*/规定当文本溢出包含元素时发生的事情 text-overflow: ①ellipsis;说明:①ellipsis /*clip:修剪文本，ellipsis:显示省略符号来代表被修剪的文本，string:使用给定的字符串来代表被修剪的文本*/ 文本文字阴影 text-shadow: ①5px ②5px ③6px ④#FF0000;说明:①5px /*水平阴影的位置，允许负值*/②5px /*垂直阴影的位置，允许负值*/③6px /*模糊的距离*/④#FF0000 /*阴影的颜色*/ 允许长单词换行到下一行 word-wrap: ①break-word;说明:①break-word /*允许长单词换行到下一行*/ 〓圆角属性〓border-radius:①1px 1px 5px 5px;说明:①1px 1px 5px 5px /*分别为左上角，右上角，右下角，左下角*/建议也加上下面两段，即复制上面那段在前面分别加上-moz-和-webkit-(如-moz-border-radius:1px 1px 5px 5px;-webkit-border-radius:1px 1px 5px 5px;)〓阴影属性〓box-shadow:①inset ②-2px ③2px ④10px ⑤#06c;说明:①inset /*阴影类型。默认为投影效果，inset:内阴影效果。*/②-2px /*阴影水平偏移值(即控制左右阴影。正数值控制左边，负数值控制右边)*/③2px/*垂直偏移值(即控制上下阴影。正数值控制上边，负数值控制下边)*/④10px /*模糊值*/⑤#06C /*阴影颜色*/;建议也加上下面两段，即复制上面那段在前面分别加上-moz-和-webkit-(如-moz-box-shadow:inset -2px 2px 10px #06C;-webkit-box-shadow:inset -2px 2px 10px #06C;) 〓轮廓属性〓outline:①2px ②black ③solid;说明:①2px /*轮廓宽度*/②black /*轮廓颜色*/③solid /*轮廓样式。边框线的类型有九个确定值: none:无边框线，dotted:由点组成虚线，dashed:由短线组成的虚线，solid:实线，double:双线，groove:3D沟槽状的边框，ridge:3D脊状的边框，inset:3D内嵌边框,颜色较深，outset:3D外嵌边框,颜色较浅。*/ 〓尺寸属性〓height:102%;/*元素的高度*/line-height:2px;/*行高*/max-height:240px;/*元素的最大高度*/max-width:320px;/*元素的最大宽度*/min-height:100px;/*元素的最小高度*/min-width:100px;/*元素的最小宽度*/width:240px;/*元素的宽度*/⊙伪元素在某区域前面添加内容 ①#whole_body:before{content:②"要显示的文字";}说明:①#whole_body /*填要定义的区域*/②填显示文字 在某区域后面添加内容 .file_list li:after{content:"显示文字";}说明:同上用于给文本的首行设置特殊样式 .file_list:first-line{填通用代码}伪类在元素获得焦点时向元素添加特殊的样式 a:focus{通用代码}★属性选择器★说明:利用这个选择器可以对带有指定属性的 HTML 元素设置样式。 如想定义某个文字链接的颜色大小的等属性可以用a[href="链接"]{通用代码}，定义"分类名"属性可用a[href^="/cat/"]{通用代码}或input[type="text"]等等。[属性] {通用代码} /*用于选取带有指定属性的元素。*/[属性=值] {通用代码} /*用于选取带有指定属性和值的元素。*/[属性~=值] {通用代码} /*用于选取属性值中包含指定词汇的元素。*/[属性|=值] { 通用代码} /*用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。*/[属性^=值] {通用代码} /*匹配属性值以指定值开头的每个元素。*/[属性$=值] {通用代码} /*匹配属性值以指定值结尾的每个元素。*/[属性*=值] {通用代码} /*匹配属性值中包含指定值的每个元素。*/ 完整代码复制时，注意带上该段开头部分与结尾部分(如body{和})，如发现不能使用可删除/*文字注释*/看看，建议结合上面的通用代码使用 网页主页定义 body { background-color: green; /*网页背景色*/ color: red; /*默认字颜色*/ padding: 2px 3px 2px 4px /*网页主体与边缘的距离，分别为上右下左方*/ text-align: center; /*内容居中显示*/ font-size: 120%; /*字体尺寸大小*/ font-weight: bold; /*字体浓淡*/ font-style: Italic; /*文字风格*/ font-variant: small-caps; /*字体为小型大写字母*/ font-family:"Times New Roman",Georgia,Serif; /*字体系列*/ line-height: 18px; /*文字行距大小*/ background: url(图片链接) no-repeat; /*背景图链接及重复属性*/ background-size: cover; /*背景图尺寸*/ position: relative; /*元素定位。absolute:绝对定位 fixed:相对于浏览器窗口进行定位 relative:相对于其正常位置进行定位 static:默认值，没有定位*/ } 扩展名及首页上页下页末页区域定义 span { background-color: white; /*扩展名和"首页上页下页末页"区域背景色*/ color: orange; /*位置同上，文字颜色*/ border-style: groove; /*位置同上，边框样式*/ border-color: red; /*位置同上，文字边框颜色*/ border-width: 1px 1px; /*位置同上，文字边框粗细，左为横框架，右为竖框架*/ outline: 2px black solid; /*位置同上，轮廓宽度、颜色、样式*/ box-shadow: inset -2px 2px 10px #06c; /*位置同上，阴影类型、水平偏移值、垂直偏移值、模糊值、颜色*/ border-radius: 2px 2px 5px 5px; /*位置同上，圆角属性，分别为左上角，右上角，右下角，左下角*/ background: url(背景图地址) no-repeat scroll; background-size: cover; /*背景图属性*/ padding: 2px 3px 2px 3px; /*位置同上，内边距，分别为上右下左*/ margin: 2px 3px 2px 3px; /*位置同上，外边距，分别为上右下左*/ } 链接文字定义 a { border-style: solid; /*链接文字边框样式*/ border-width: 1px 1px; /*链接文字的边框粗细，左为横框，右为竖框*/ border-color: blue; /*链接文字的边框颜色*/ color: red; /*同上位置，文字颜色*/ background-color: black; /*链接文字的背景颜色*/ text-decoration:overline; /*链接文字添加上划线*/ outline: 2px black solid; /*链接文字的轮廓宽度、颜色、样式*/ box-shadow: inset -2px 2px 10px #06c; /*链接文字阴影，阴影类型、水平偏移值、垂直偏移值、模糊值、颜色*/ border-radius: 2px 2px 5px 5px; /*链接文字外部，圆角属性，分别为左上角，右上角，右下角，左下角*/ background: url(背景图地址) no-repeat scroll; background-size: cover; /*链接文字背景图属性*/ padding: 1px 1px 1px 1px; /*链接文字内边距，分别为上右下左*/ margin: 1px 2px 1px 2px; /*链接文字外边距，分别为上右下左*/ } a:link { color: #FF0000; /*未访问链接文字颜色*/ } a:visited { color: #00FF00; /*已访问链接文字颜色*/ } a:hover { color: #FF00FF; /*鼠标悬停处的链接文字颜色*/ } a:active { color: #0000FF; /*被选择的链接文字颜色*/ } 评论区域定义 form{ background-color: #000011; /*评论区背景色*/ background: url(图片链接) no-repeat scroll; /*评论区背景图*/ color: red; /*评论区字体颜色*/ outline:1px green dashed; /*评论区的轮廓宽度、颜色、样式*/ box-shadow: outset -2px 2px 5px green; /*评论区的阴影类型、水平偏移值、垂直偏移值、模糊值、颜色*/ border-radius: 2px 2px 5px 5px; /*评论区的圆角属性，分别为左上角，右上角，右下角，左下角*/ padding: 2px 3px 2px 3px; /*评论区内边距，分别为上右下左*/ margin: 2px 3px 2px 3px; /*评论区外边距，分别为上右下左*/ } 文件列表区域定义 .file_list{ font-size: 18px; /*文件列表区文字尺寸大小*/ background-color: white; /*文件列表区域背景颜色*/color: #556688; /*扩展名字体颜色 ★若前面已用了span部分修改将优先显示span部分*/ border: 2px solid red; /*文件列表区域边框属性，分别为宽度，样式，颜色*/ outline: 1px black solid; /*文件列表区的轮廓宽度、颜色、样式*/ box-shadow: inset -2px 2px 3px black; /*文件列表区阴影，阴影类型、水平偏移值、垂直偏移值、模糊值、颜色*/ border-radius: 2px 2px 2px 2px; /*文件列表区的圆角属性，分别为左上角，右上角，右下角，左下角*/ background: url(背景图地址) no-repeat scroll; background-size: cover; /*文件列表区的背景图属性*/ padding: 1px 1px 1px 1px; /*文件列表区内边距，分别为上右下左*/ margin: 1px 2px 1px 2px; /*文件列表区外边距，分别为上右下左*/ max-width: 98%; /*文件列表区的最大宽度*/ } .file_list li{ background-color: lightskyblue; /*文件名背景色*/ border-bottom: 1px solid lime; /*文件名下边框线(即下划线)粗细 样式 颜色*/ background: url(图片链接) no-repeat scroll; background-size: cover; /*文件名背景图*/ } .file_list span{ color: white; /*扩展名颜色*/ background-color: black; /*扩展名背景色*/ border: 1px solid red; /*扩展名边框*/ outline: 0px black solid; /*扩展名轮廓宽度、颜色、样式*/ box-shadow: inset 1px 1px 3px #062; /*扩展名阴影，阴影类型、水平偏移值、垂直偏移值、模糊值、颜色*/ border-radius: 2px 2px 1px 1px; /*扩展名外部，圆角属性，分别为左上角，右上角，右下角，左下角*/ background: url(背景图地址) no-repeat scroll; background-size: cover; /*扩展名背景图属性*/ padding: 1px 1px 1px 1px; /*扩展名内边距，分别为上右下左*/ margin: 1px 2px 1px 2px; /*扩展名外边距，分别为上右下左*/ text-shadow: 0px 0px 3px gray; /*扩展名文字阴影，分别为水平阴影、垂直阴影、阴影距离、阴影颜色*/ } .file_list span:before{ content:"插入内容"; /*文件扩展名前面插入内容*/ color: red; /*文件扩展名前面插入内容的颜色*/ background: black; /*文件扩展名前面插入内容的背景色*/ text-shadow: 0px 0px 3px gray; /*扩展名前面插入内容的文字阴影，分别为水平阴影、垂直阴影、阴影距离、阴影颜色*/ } 网页边框内定义 div { color: red; /*默认字颜色为红*/ border-style: double; /*边框样式*/ border-color: #ff5566 #446600 #0033ff #1122ff; /*网页边框颜色，分别为上右下左框*/ border-width: 4px 1px; /*网页边框粗细，左为横框，右为竖框*/ padding: 3px; /*文字与网页边框的距离*/ background-color: green; /*网页边框内的颜色。如果与body{background-color:red;}同时存在，则网页边框外为红色，边框内为绿色*/ margin: 3px 1px; /*分类中用到div的部分与周边距离*/ } 首页上页下页末页区域定义 p { margin: 2px 1px 2px 1px; /*与外边缘的距离，分别为上右下左外边距*/ background-color: white; /*"首页上页下页末页"区域背景色*/ color:red; /*"首页上页下页末页"区域字体颜色*/ text-shadow: 0px 0px 3px gray; /*"首页上页下页末页"的文字阴影，分别为水平阴影、垂直阴影、阴影距离、阴影颜色*/ } 网页主体定义 #whole_body { background: url(背景图链接) no-repeat scroll,url(logo地址) no-repeat scroll right bottom; /*背景图属性，右下角logo属性*/ border-radius: 12px; -moz-border-radius: 12px; -webkit-border-radius: 12px; /*圆角边框。-moz-适用于Firefox浏览器，而-webkit-则是用于Safari/Chrom浏览器 */ background-size:320px; /*背景图尺寸*/ box-shadow : inset -3px 3px 15px #111; -webkit-box-shadow :inset -3px 3px 15px #111; -moz-box-shadow :inset -3px 3px 15px #111; /*阴影效果*/ max-width : 640px; /*网页主体宽度最大值*/ text-align : center; /*文字居中*/ margin: auto; /*网页主体的外边距*/ padding : 10px 5px; /*主体网页内文字与边缘距离*/ margin: 5px 2px; /*网页边框与网页边缘距离*/ width: 640px; /*网页主体宽度*/ } 输入框定义 textarea,input[type="input"],input[type="text"] { background: black; /*输入框填充颜色*/ color: white; /*输入框内字体颜色*/ padding: 2px; /*输入文字与输入框条距离*/ } 提交按钮定义 button,input[type="button"],input[type="submit"]{ /*submit用于提交表单，button用于JavaScript执行。若要区别开来用，把其中一个移开再新建即可*/ background: #333; /*按钮背景色*/ color: #EEE; /*字体颜色为白*/ border: 1px solid transparent; /*按钮大小*/ box-shadow: 0 0; /*按钮阴影*/ }图片属性 img { max-width:98%; /*图片显示最大宽度*/ } "分类名"区域定义 各个分类名定义 a[href="/cat/"]{ background: blue; /*各个分类名的背景颜色*/ color: white; /*各个分类名的字体颜色*/ border: 1px groove green; /*各个分类名的边框宽度、样式、颜色*/ background: url(背景图链接) no-repeat scroll;background-size: cover; /*各个分类名的背景图*/