CSS基本样式
注意:
- css样式文件和html文件的编码格式一致,CSS样式中某些中文属性值才能正常生效
- 中文有中文字体,英文有英文字体,两种字体互不生效
- 字体样式属性值中斜体是选用斜体字体,如果字体中没有斜体字体就应该选用倾斜属性值来倾斜字体
字体样式
font-family 字体类型 font-family:“隶书”;
font-size 字体大小 font-size:12px;
font-style 字体风格 font-style:italic;
font-weight 字体粗细 font-weight:bold;
font 在一个声明中设置所有字体属性 font:italic bold 12px "隶书";
选用两种字体:
font-family:cursive,a,b,c,"微软雅黑";
系统从前往后筛选字体,英文的字体写在中文的字体前面,否则可能不起作用
字体样式的简写形式
font:多个属性; 有规定顺序
font:italic 25px cursive,“微软雅黑”;
文本样式
color 设置文本颜色 color:#00C;
text-align 设置元素水平对齐方式 text-align:right;
text-indent:(em是设置缩进多少字节的单位) 设置首行文本的缩进 text-indentL20px;
line-height 设置文本的行高 line-height:25px;
text-decoration 设置文本的装饰 text-decoration:underline;
CSS注释:/* */
CSS选择器:
选择器{
属性:值;
属性:值;
}
标签选择器:选择器写法和标签一致,如果有个别标签不想使用这个样式则不能使用标签选择器
h1{
font-size:22px;
}
类选择器:
.red{
color:red;
}
<h1 class="red"></h1>
ID选择器:
#green{
color:#00ff00;
}
<p id="green"></p>
CSS样式用法:
内联样式:<h1 style="font-size:22px;color:red;"></h1>
内部样式表:页面内css样式表写在<head><style></style></head>中(内部样式表,作用范围为本页面)
外部样式表: *.css文件,由<link/>标签引入,<link href="img/divcss5.css" rel="stylesheet" type="text/css" />
外部样式表的引入方法:
链接式:
<link href="img/divcss5.css" rel="stylesheet" type="text/css" />
导入式:
<style>
@import "css/types.css";
</style>
优先级:
ID选择器>类选择器>标签选择器
内联样式>内部样式>外部样式(就近选择)
选择器样式之间的关系是覆盖而不是替换
CSS伪类
设置超链接:
a:link 未单击访问时超链接样式
a:visited 单击访问后超链接样式
a:hover 鼠标悬浮其上的超连接样式
a:active 鼠标单击未释放的超链接样式
a:hover{
color:#B46210;
text-decoration:underline;
}
css设置鼠标形状
default 默认光标
pointer 超链接的指针
wait 是等待的效果
help 指示可用的帮助
text 指示文本
crosshair 鼠标呈现十字状
span{
cursor:pointer;
}
背景颜色:background-color:#B70447
背景图像
-图像路径:background-image:url(img/buy.png);
-重复方式:background-repeat:no-repeat;
-背景定位:background-position:10px 15px;