【原创】网页CSS样式设置的一些规则
一、常用的几种居中对齐
1、方框居中(左右自动,方框居中)
【方框】左、右边界:自动(margin-left: auto; margin-right: auto;)
注:通常合写为(margin: 0 auto;),其中auto为左、右边界,而0(px)为上、下边界,可根据需要设置
2、文字水平居中
【区块】文本对齐:居中(text-align: center;)
注:也可设置文本左对齐(text-align: left;)或文本右对齐(text-align: right;)
3、单行文字垂直居中(两高相等,垂直居中)
【方框】高度:40px(height: 40px;)
【类型】行高:40px(line-height: 40px;)
注:必须是单行文字!多行文字只设行高,不设高度
二、标题、段落样式的设置(共4类8项)
(1)初始化,去掉上下的空行
【方框】边界:0、填充:0(margin: 0; padding: 0;)
(2)单行文字垂直居中(不是单行时,只设行高不设高度)
【方框】高度:40px(height: 40px;)
【类型】行高:40px(line-height: 40px;)
(3)文字的基本设置(根据需要,可省略)
【类型】大小:16px(font-size: 16px;)
粗细:正常(font-weight: normal;)
颜色:#999(color: #999;)
(4)文字的对齐方式(默认为左对齐,还可设置为居中或右对齐)
【区块】文本对齐:居中(text-align: center;)
三、列表样式的设置(分两部分)
1、列表ul的设置(初始化,共3项)
【方框】边界:0、填充:0(margin: 0; padding: 0;)
【列表】类型:无(list-style-type: none;)
2、列表项li的设置(文字类)
(1)单行文字垂直居中
【方框】高度:40px(height: 40px;)
【类型】行高:40px(line-height: 40px;)
(2)文本基本设置(根据需要,可省略,图片列表不需要)
【类型】大小:16px(font-size: 16px;)
粗细:正常(font-weight: normal;)
颜色:#999(color: #999;)
(3)排成一行(可选项)
【方框】宽度:100px(width: 100px;)
浮动:左对齐(float: left;)
四、超级链接样式的设置
超级链接有四种状态:正常状态(未访问)、已访问状态(已访问)、鼠标指向链接时(悬停时)、鼠标点击链接时(点击时),这四种状态通常分为两组:静态(未访问、已访问)、动态(悬停时、点击时),我们在设置超级链接的样式时,通常也需要设置两次。
1、文字超链接的一般状态(a)(或a:link,a:visited)
【类型】大小:16px(font-size: 16px;)
粗细:正常(font-weight: normal;)
颜色:#999(color: #999;)
修饰:无(text-decoration: none;)(去掉下划线)
2、文字超链接的悬停状态(a:hover)(或a:hover,a:active)(只需设置和上面不同的)
【类型】颜色:#00F(color: #00F;)
3、图片超链接的样式(a img)
【边框】宽度:0(border-width: 0;)(去掉图片边框)
4、导航类超链接(#nav a)
(1)显示为块 + 浮动左对齐
【区块】显示:块(display: block;)
【方框】浮动:左对齐(float: left;)
注:浮动左对齐仅限横向导航,纵向导航不需要浮动
也有设置为内联块的
【区块】显示:内联块(display: inline-block;)
(2)文字基本设置:
【类型】大小:16px(font-size: 16px;)
粗细:粗体(font-weight: bold;)
颜色:#999(color: #999;)
修饰:无(text-decoration: none;)(去掉下划线)
(3)通过宽度和对齐生成块状效果
【方框】宽度:100px(width: 100px;)
【区块】文本对齐:居中(text-align: center;)
(4)单行文字垂直居中
【方框】高度:36px(height: 36px)
【类型】行高:36px(line-height: 36px)
(3)(4)项也可使用填充生成块状效果
【方框】填充:上下10px、左右20px(padding: 10px 20px;)
(5)块状圆角效果
添加属性:border-radius: 5px;
(6)添加鼠标悬停效果(#nav a:hover)
【背景】背景颜色:#00F
【类型】颜色:#FFF
五、大小相同,均匀排列
1、外框
【方框】宽度:1000px、高度:570px(width: 1000px; height: 570px;)
左、右边界:自动(margin-left: auto; margin-right: auto;)
2、内框(左上边界,均匀排列)
【方框】宽度:320px、高度:270px(width: 320px; height: 270px;)
边界:上、左各10px(margin-top: 10px; margin-left: 10px;)
浮动:左对齐(float: left;)
注:外框宽度=内框宽度*列数+左边界值*(列数+1)
外框高度=内框高度*行数+上边界值*(行数+1)
如:1000px = 320px*3 + 10*(3+1)
570px = 270px*2 + 10*(2+1)