CSS-02

CSS-02

• 字体样式
  • font-family：设置字体类型
  • font-size：设置字体大小
  • font-style：设置字体风格
  • font-weight：设置字体粗细
  • font：设置所有字体属性
• 文本样式
  • color：设置文本颜色
  • text-align：设置文本水平对齐方式
  • text-indent：设置首行的缩进
  • line-height：设置文本行高
  • text-decoration：设置文本的装饰
• 背景样式
  • background-color：设置背景颜色
  • background-image：设置背景图片
  • background-repeat：设置背景图片重复方式
  • background-position：设置背景位置
  • background：设置所有背景样式
• 鼠标样式
  • cursor
• 列表样式
  • list-style-type
• 超链接伪类
  • a:link：未点击访问之前的超链接样式
  • a:visited：点击访问过后的超链接样式
  • a:hover：鼠标悬浮在超链接上时
  • a:active：鼠标单击未释放时的样式

fwefg

1. 字体样式

font-family:"楷书";  //设置字体类型为楷书
font-size:12px;   //设置字体大小为12px
font-style:italic;   //设置字体风格为斜体
font-weight:bold;  // 设置字体 为粗体   value：normal(default)  bold(粗体) bolder(更粗) lighter(更细)  也可以设置数值例如 12px
font:italic bold 12px "楷体";  //上面的同时设置

2. 文本样式

color:#000;  //设置文本字体颜色
text-align:right;  //设置文本右对齐  默认left  right center justify(设置俩端对齐)
text-indent:20px;  //设置首行缩进20px
line-height:25px;  //设置文本的行高为  20px
text-decoration:underline;  //设置文本下划线 none(默认)  underline(下划线)  overline(上划线)  line-through(删除线，简单来说就是在文字中间画一条线)

3. 背景样式

background-color:red;  //设置背景颜色为红色
background-image:url('/img/1.jpg');  //设置/img/1.jpg这张图片为背景
background-repeat:no-repeat;  //设置背景图片不平铺 repeat(default 沿水平与垂直方向 向俩边平铺) no-repeat(不平铺) repeat-x(向x轴平铺)  repeat-y(向y轴平铺)
background-position:12px 20px;  //向x轴平移12px  向y轴平移20px
background:#C00 url(../image/arrow-down.gif) 205px 10px no-repeat;  //很显然也能一次性设置

4. 鼠标样式

cursor:pointer; //设置鼠标样式为超链接的指针 pointer(超链接的指针) wait(程序正在忙时)  help(指示可用的帮助)  text(指示文本)  crosshair(鼠标呈现十字状)

//当然也可以使图片为鼠标样式 例如：
cursor: url('图片路径') ,pointer; //这里需要用俩个值 第一个是图片的路径 ，第二个是当图片显示不出来时就使用第二个样式
PS：图片大小不能超过25px

5. 列表样式

list-style-type:none;  //设置列表没有样式  none(清除样式)  disc(默认，实心圆)  circle(空心圆)  square(实心正方形)  decimal(数字)

PS：上面的需要仔细读一读并且去试一试才能完全理解