参考CSS模板

最新推荐文章于 2024-11-13 10:31:31 发布

最新推荐文章于 2024-11-13 10:31:31 发布 · 140 阅读

文章标签：

#CSS

本文介绍了一种用于网站开发的CSS模板，该模板包含常见的选择器及其常用样式属性，有助于提高开发效率并确保样式一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考CSS模板

如果我知道正在干着的网站会有大块大块的CSS来袭，我喜欢使用下面这个有几分类似飞机起飞前检查清单的模板，它确保我可以顾及所有基本的选择器。假使一个页面的不同区域的同一组选择器（比如无序列表）要使用不同的样式，我只需拷贝粘贴，并加上恰当的id和class。没有用到的话，我只需删掉。以下是CSS模板1的样例：

/* ----- IDS ----- */
#container{
}
#primaryContent{
}
#secondaryContent{
}
#navigation{
}
#footer{
}
/* ----- CLASSES ----- */
.hide{
}
.show{
}
/* ----- HEADINGS ----- */
h1{
}
h2{
}
h3{
}
h4{
}
/* ----- LISTS ----- */ li{
}
li p{
}
ol{
}
ul{
}
ol li{
}
ul li{
}
/* ----- IMAGES ----- */
img{
}
img a{
}
img a:hover{
}
/* ----- LINKS ----- */
a{
}
a:hover{
}
a:visited, a:active, a:focus{
}
a:visited{
}
a:active{
}
a:focus{
}
/* ----- FORMS ----- */
form{
}
fieldset{
}
legend{
}
label{
}
input{
}
textarea{
}
input, textarea{
}
select{
}
optgroup{
}
option{
}
/* ----- TABLES ----- */
table{
}
caption{
}
thead{
}
tbo***{
}
tfoot{
}
tr{
}
tr .alt{
}
th{
}
td{
}

CSS模板2
你知道什么遥不可及吗？记住并且填入所有CSS选择器恰当的性质（property，又译特性，属性）。留意我大部分的项目，我一遍又一遍地为选择器使用相同的性质。所以我创建另外一个基于CSS模板1的模板，在里面为所有CSS选择器添加经常会用的CSS性质。以下是CSS模板2的样例：

/* ----- CSS ----- */
*{
margin:;
padding:;
font-family:;
font-size:;
}
bo***{
margin:;
padding:;
background:;
}
/* ----- IDS ----- */
#container{
width:;
margin:;
padding:;
background:;
text-align:;
}
#primaryContent{
position:;
float:;
width:;
margin:;
padding:;
background:;
text-align:;
}
/* ----- CLASSES ----- */
.hide{
display:none;
} .show{
display:block;
}
/* ----- PARAGRAPHS ----- */
p{
font:;
color:;
font-size:;
font-family:;
font-style:;
font-weight:;
font-variant:;
text-align:;
text-indent:;
text-decoration:;
text-shadow:;
text-transform:;
letter-spacing:;
word-spacing:;
}
/* ----- LISTS ----- */
li{
listy-style:;
list-style-type:;
list-style-image:;
list-style-position:;
float:;
margin:;
padding:;
}
/* ----- LINKS ----- */
a{
font:;
color:;
text-decoration:;
border-bottom:;
}
a:hover{
color:;
background-color:;
border-bottom:;
}
a:visited, a:active, a:focus{
color:;
background-color:;
border-bottom:;
}