样式表
Posted 斐雪
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了样式表相关的知识，希望对你有一定的参考价值。
样式表 CSS：
三种使用方式：
1、内嵌样式表：
结构：
<body>
<标签名 style="width:100px;height:50px;font-size:30px; margin-left:50px"></标签名>
</body>
margin 与其他元素的距离
2、内联样式表
结构
<head>
<style type="text/css">
.class的分组依据{
样式的属性
}
#id的值{
样式的属性
}
标签名{
样式的属性
}
</style>
</head>
<body>
<标签 class="分组依据"id="值"></标签>
</body>
3、外部样式表
在解决方案里右键自己的网站名，选择添加，添加样式表。
随后把鼠标放在建好的样式表上，拖进html代码编辑的页面的head里，自动生成一行链接（link）代码<link href="" rel="" />
三种标记选择方法：
.class的分组依据{
样式的属性
}
#id的值{
样式的属性
}
标签名{
样式的属性
}
选择器：
1、标签选择器：
<head>
<style tyle="text/css">
p --格式对p标签起作用
{
样式
}
</style>
</head>
2、class选择器：
可以重复，可以多个class，用空格隔开
<head>
<style tyle="text/css">
.main /*定义样式*/
{
wight:100%;
height:42px;
text-align:center;
}
</style>
</head>
<body>
<div class="main">
</div>
</body>
3、id选择器：
唯一，不能重复
<head>
<style tyle="text/css">
#main /*定义样式*/
{
wight:100%;
height:42px;
text-align:center;
}
</style>
</head>
<body>
<div id="main">
</div>
</body>
4、用 ， 隔开，表示并列
<head>
<style tyle="text/css">
p,span /*标签p、span两者同样的样式*/
{
样式
}
</style>
</head>
5、用 空格 隔开，表示后代
<head>
<style tyle="text/css">
.main p /*找到使用样式“main”的标签，在该标签里的p标签使用该样式*/
{
样式
}
</style>
</head>
6、用 点 ，筛选
<head>
<style tyle="text/css">
p.sp /*在标签p中class="sp"的标签，执行以下样式*/
{
样式
}
</style>
</head>
id的优先等级最高，其次是class，最后是标签名
背景与前景
background-color:#颜色编号 ; 背景色 编程三基色是红绿蓝
background-image:url(路径); 设置背景图片
background-attachment:fixed; fixed,背景是固定的，不随字体滚动。scroll，背景随字体滚动。
background-repeat:no-repeat; no-repeat不平铺，repeat平铺，repeat-x横向平铺，repeat-y纵向平铺
background-position:center; 设置背景图位置时，repeat必须为no-repeat。center背景图居中，right top 背景图放在右上角，left 100px top 200px 离左边100像素，离上边200像素（可设为负值）
字体
font-family; 字体样式
font-size; 字体大小
font-wight:bold; bold是加粗，normal是正常
font-style:italic; italic是倾斜，normal是正常
coloc:#颜色编号 颜色
text-decoration:underline; 下划线，overline是上划线，line-through是删除线，none是去掉下划线
text-align:center; 水平居中对齐，left是左对齐，right是右对齐
text-indent:28px; 首行缩进量
vertical-align:middle; 垂直居中对齐，top是顶部对齐，bottom是底部对齐，一般设置行高后使用
line-height:24px; 行高
display：none; none不显示，不占位置。inline-block显示为块，不自动换行，宽高可设
visibility：hidden; 可视性。hidden，隐藏但是占空间。visible显示
边界和边框
border：5px solid bule; 四边框：5像素宽度、实线、蓝色（相当于以下三行）
border-width：5px;
border-style：solid;
border-color：bule;
border-top 5px solid bule; 上边框：5像素宽度、实线、蓝色（分写同上）
border-bottom 5px solid bule; 下边框：5像素宽度、实线、蓝色（分写同上）
borderr-left 5px solid bule; 左边框：5像素宽度、实线、蓝色（分写同上）
borderr-right 5px solid bule; 右边框：5像素宽度、实线、蓝色（分写同上）
超链接属性
a:link { text-decoration: none;color: blue}
a:active { text-decoration:blink}
a:hover { text-decoration:underline;color: red}
a:visited { text-decoration: none;color: green}
其中：
a:link 指正常的未被访问过的链接；
a:active 指正在点的链接；
a:hover 指鼠标在链接上；
a:visited 指已经访问过的链接；
text-decoration是文字修饰效果的意思；
none参数表示超链接文字不显示下划线；
underline参数表示超链接的文字有下划线
查询网站：www.css88.com
以上是关于样式表的主要内容，如果未能解决你的问题，请参考以下文章