CSS常用样式

语法

p{
font-size: 12px;
color: blue;
}

选择器

• 标签 p,h <标签>
• 类别 .one <标签 class = "类名">
• id #one <标签 id = "id名">

使用方式

• 嵌套 p 空格 span{ }
• 集体 h 逗号 p{ }
• 全局 * { }
• 混合 多个class/class混id/id不可多个同时使用

css添加到html的方法

<p style = "color:red;">  /*行内*/
<style type = "text/css">...</style>  /*内嵌*/
<link rel = "stylesheet" href = "css/style.css"/}  /*单独文件*/

优先级：就近原则（默认：行内>内嵌>连接）

样式

单位

px,em,%

继承关系

html>head body>div div>h1 p

颜色

red,blue,green
rgb(***) 0-255
rgb(x% x% x%) 0%-100%
rgba 透明度 a:0.0-1.0

rrggbb (#rgb)

文本

color 文字颜色
letter-spacing 字符间距
line-height 行高
text-indent 首行缩进
text-align 对齐(center left right justify)
text-decoration 装饰线(none无下划线 overline上划线 underline下划线 line-through字体中间划线)

字体

font 所有字体属性 italic bold 16px '宋体';
font-family 字体系列
font-size 字号 px %
font-style 斜体 italic
font-weight 粗体 bold

背景

background 所有背景属性
background-color
background-image:url("logo.jpg")
background-repeat(repeat repeat-x repeat-y no-repeat)

链接

a:link 普通的，未被访问的链接
a:visited 用户已访问的链接
a:hover 鼠标指针位于链接的上方悬停
a:active 链接被点击的时刻

列表

无序 ul
有序 ol

列表属性

list-style 所有列表属性
list-style-image 设置图像
list-style-position 标志的位置
list-style-type 标志的类型

标志的类型

none 无标记
disc 空心圆
square 实心方块
decimal 数字
lower-roman 小写罗马数字
upper-roman 大写罗马数字
lower-Greek 小写希腊数字
lower-latin 小写拉丁数字
upper-latin 大写拉丁字母
lower-alpha 小写英文字母
upper-alpha 大写英文字母

表格

大小

table{
      500px;
      height:200px;
}

边框

table,td,th{
      border:1px solid #eee;
}

table{
border-collapse:collapes;
}

奇偶选择器

tr:nth-child (odd/even){ }