HTML/CSS网页样式笔记

最新推荐文章于 2023-05-10 16:50:12 发布

Kataware Doki

最新推荐文章于 2023-05-10 16:50:12 发布

阅读量193

点赞数

本文链接：https://blog.csdn.net/sy952016835/article/details/107071284

版权

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

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

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

选择器

标签名{
}

.类名{
}
#id名{
}

样式

字体样式

字体设置：
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；（不重复平铺）
background-attachment：scroll；（背景是否随滚动条滚动值为scroll（否）和fixed（是））
}
在这里插入图片描述