CSS基础语法
CSS
基础语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; … declarationN }
选择器通常是你需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是你希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
selector {property: value}
常见的选择器
ID选择器—-可以为标有特定 id 的 HTML 元素指定特定的样式，以 “#” 来定义
#red {color:red;}
#green {color:green;}
id 选择器和派生选择器
在现代布局中，id 选择器常常用于建立派生选择器
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
class选择器—-以一个点号显示
.center {text-align: center;}
class 也可被用作派生选择器：
.fancy td {
color: #f60;
background: #666;
}
【注意】类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
标签选择器(元素选择器)
这种是最常见的，换句话说，文档的元素就是最基本的选择器。
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
属性选择器—-对带有指定属性的 HTML 元素设置样式
<!--设置样式-->
[title]
{
color:red;
}
<a title="W3School" href="http://w3school.com.cn">W3School</a>
CSS设置背景(background)
背景颜色 background-color
背景图片 background-image
背景重复 background-repeat:repeat-x/repeat-y
背景位置 background-position:bottom/left/top/right/center
背景关联 background-attachment:fixed/scroll
综合写法：
.tagName{background:#ffffff url(“aa.jpg”) no-repeat right left;}
CSS设置文本格式
通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。
文本缩进 ：Text-indent:2em
文本对齐方式：Text-align:left/right/center/ justify
文本修饰：Text-decoration:underline/line-through/overline/none
字符间距：Word-spacing:px/em 英文单词之间的间隔；
Letter-spacing:px/em汉字和英文字母之间的间隔；
文本转换：Text-transform:uppercase/lowercase/ capitalize
行与行间距：Line-height:px/%
垂直对齐图像： vertical-align：text-top/text-bottom
文本阴影：text-shadow:水平偏移，垂直偏移 颜色
字体
字体类型:font-family:”sans-serif”;
字体样式:font-style:normal ;
字体大小:font-size:20px/3.75em/100%;默认大小为16px,字体为宋体
字体加粗:font-weight:normal;
字体的转变:font-variant:normal/smallcaps;
CSS链接
链接的四种状态
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
【注意】当为链接的不同状态设置样式时，请按照以下次序规则：
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后
去掉a链接默认的下划线
text-decoration:{none/underline}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
创建链接块
display:block;
列表样式
在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。
要修改用于列表项的标志类型，可以使用属性 list-style-type：
ul {list-style-type : square;}
上面的声明把无序列表中的列表项标志设置为方块。
列表项图像
你可能想对各标志使用一个图像，这可以利用 list-style-image 属性做到：
ul li {list-style-image : url(xxx.gif);}
1
列表标志位置
ul{
list-style-position:inside;
}
CSS表格
表格边框
table,th,td{border:1px solid red;}
折叠边框
border-collapse:collapse;
表格的宽度和高度
width,height
表格的文字水平对齐
text-align:center/right/left;
表格的文字垂直对齐
vertical-align:bottom;
表格的内边距
padding
表格的背景颜色
background
