HTML网页样式笔记

模板网站： 后台数据库模板 https://www.mycodes.net/154/10311.htm

模板之家 http://www.cssmoban.com/cssthemes/html5moban/

源码之家 https://www.mycodes.net/

目录

选择器标签样式字体样式 文本样式伪类列表背景渐变色盒子模型display浮动overflowz-index(图层)

选择器

标签名{ }

.类名{ } #id名{ }

标签

span标签大多用来突出主题类的字体

样式

字体样式

字体设置： font-family:宋体;

字体大小： font-size:20px;

字体粗细： font-weight:bold; lighter; bolder;

字体颜色： color：red；

文本样式

文本左右居中： text-align:center; right(居右) left(居左)

首行缩进： text-indent:2em;(2em为占两个字母位)

行高(行高和块的高度一致才可以上下居中)： line-height：20px;

a标签，超链接去除下划线： text-decoration:none;

下划线： text-decoration：underline；

中划线： text-decoration:line-through;

上划线： text-decoration:overline;

图片文字在同一行时，文字在图片水平中线显示： img，span{ vertical-align:middle; }

背景： background：#ffffff；

圆角设置： border-radius：1px；

伪类

鼠标悬浮效果： 类，id，标签名:hover{ color：red； ··· }

鼠标单击但未释放时： 类，id，标签名:active{ color：yellow； ··· }

阴影： 类，id，标签名{

text-shadow: h v b c; h:水平阴影的位置 v：垂直阴影的位置 b：模糊距离（可不选） c：阴影颜色（可不选）

}

列表

假设要选择ul标签里的所有li标签： ul li{

height:30px;（行高） list-style:none;(去除点和有序列表的数字) circle；（空心圆） square；（正方形） text-indent:1em;（缩进1字符）

}

背景

将背景图放到样式中：

类，id，标签名{

border：1px solid red； 边框（ 1像素 实线 颜色） background-image:url(“图片地址”)； 默认全部平铺的； background-repeat：repeat-x；（水平平铺） background-repeat：repeat-y；（垂直平铺） background-repeat：no-repeat；（不平铺）

}

渐变色

渐变色网站： https://www.grabient.com/

background-color: #FFFFFF; background-image: linear-gradient(180deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%);

盒子模型

margin：外边距

padding：内边距

border：边框

display

bllock 块元素 inline 行内元素 inline-block 块元素，但是可以内联，在一行

display：block；

浮动

左右浮动 fioat： rgiht；left

清除浮动： clear：both；

overflow

overflow：hidden； overfiow：auto；

z-index(图层)