样式表 CSS:
三种使用方式:
1、内嵌样式表:
结构:
<body>
<标签名 style="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