HTML网页样式笔记

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

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

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

选择器

标签名{
}

.类名{
}
#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(图层)