CSS入门到实践（一）

CSS基础知识

• 基础语法

selector {
property:value;
}
例：h1{color:red; font-size:14px;}

• 高级语法

1. 选择器分组: h1,h2,a,p{color:red; font-size:14px;}
2. 继承样式

• 选择器

• 派生选择器 div p{color:red; font-size:14px;}
• 分组选择器 div,p{color:red; font-size:14px;}
• 子元素选择器 p>strong{color:red; font-size:14px;}
• 相邻兄弟选择器 h1+p{color:red; font-size:14px;} //不常用
• id选择器 #div{color:red; font-size:14px;}
• 类选择器
  .divstyle{color:red; font-size:14px;}
  a.class{color:red; font-size:14px;} //结合元素类选择器
  .class.class{color:red; font-size:14px;} //多类选择器
• 属性选择器
  [title]{color:red; font-size:14px;}
  [title=“value”]{color:red; font-size:14px;}

• 基本样式

背景：

• background-color: green 背景颜色
• background-image：url(“1.jpg”) 背景图片
• backrground-repeat: no-repeat 背景图片重复设置
• background-position: 0px 0px 背景起始位置
• background-attachment:fixed 背景图片是否随屏幕滚动
• background-size:100px 100px 背景图片的尺寸

文本：

• color:red 颜色
• text-align:left 文本对齐方式
• text-indent: -2em 文本首行缩进
• text-transform: capitalize 元素中字母转换
• text-shadow:5px 5px 5px #FF0000\” 文本添加阴影
• word-wrap:normal 设置自动换行,，需同时设置width样式属性

字体

• font-family 字体系列

• font-size 字体大小

• font-style 字体风格

• font-variant:small-caps 小型大写字母的字体显示

• font-weight 字体粗细

• 链接

• a:link 普通的，未被访问的链接

• a:visited 用户已访问的链接

• a:hover 鼠标只针位于链接上方

• a:active 链接被点击的时刻

• text-decoration:none 用于去掉链接下的下划线

• 列表

• list-style 列表项样式

• list-style-image:url(“1.jpg”) 列表项图片

• list-style-position:inside 列表项标志位置

• list-style-type:circle 列表类型

• 表格

• border:1px solid blue; 表格边框

• boder-collapse:collapse 折叠边框

• width/height:400px 表格宽高

• text-align:center 表格文本对齐

• padding:5px 表格内边距

• background-color:red 表格颜色

• 轮廓

• outline 轮廓属性

• outline-color 轮廓颜色

• outline-style:groove 轮廓样式

• outline-width:1px 轮廓宽度