css-基础-语法&背景&文本&字体&链接&列表&表格
CSS
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
`<style>`
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>
<body>
<h1>CSS 实例!</h1>
<p>这是一个段落。</p>
</body>
</html>
语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明
选择器是需要改变的html元素，声明由属性和值组成；
例子
p {color:red;text-align:center;}
为了增强可读性，可以每行只写一个属性
p
{
color:red;
text-align:center;
}
注释
/*这是个注释*/
p
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}
Id 和 Class
id选择器，可以为特定id的html元素指定样式；
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义；
#para1
{
text-align:center;
color:red;
}
class选择器可以在多个元素中使用
在html是class属性，类选择器以.显示
.center {text-align:center;}
例子中，所有center类的html元素均居中；
p.center {text-align:center;}
例子中所有p元素并且类为center的元素居中
样式表
外部样式表
标签链接到外部表，该标签在文档的头部 ```html ``` 会从mystyle.css中读取样式 外部表是.css格式，不能包含html标签 ```html hr {color:sienna;} p {margin-left:20px;} body {background-image:url("/images/back40.gif");} ``` 不能出现空格；内部样式表
<style>标签，在文档头部定义内部样式表
<head>
`<style>`
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
内联样式
不建议使用，只能改变一次；
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
多重样式
已经在内部表定义的元素，引入了外部表，不会覆盖内部表内容；
外部样式3个属性
h3
{
color:red;
text-align:left;
font-size:8pt;
}
内部样式两个属性
h3
{
text-align:right;
font-size:20pt;
}
内部样式表与外部样式表连接，得到
color:red;
text-align:right;
font-size:20pt;
同一个元素被多个样式定义时，新的样式表层叠规则
优先级由低到高
浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）
背景
background-color
body {background-color:#b0c4de;}
颜色定义方式
十六进制 - 如："#ff0000"
RGB - 如："rgb(255,0,0)"
颜色名称 - 如："red"
例子
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
background-image
背景图像进行平铺重复显示，以覆盖整个元素实体
body {background-image:url('paper.gif');}
background-repeat
背景水平平铺与垂直平铺
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
不平铺
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
background-position
设定位置且不平铺
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
background-attachment
背景固定或者随着滚动
body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
文本
颜色
十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
对齐方式
text-align
center居中，right右侧，justify宽度相等展开
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
文本修饰
text-decoration删除文本的装饰，链接的下划线
a {text-decoration:none;}
可以这样装饰
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
文本转换
修改大侠写字母，或者单词首字母
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
文本缩进
p {text-indent:50px;}
字体
CSS字型
Serif Serif字体中字符在行的末端拥有额外的装饰
Sans-serif "Sans"是指无 - 这些字体在末端没有额外的装饰
Monospace 所有的等宽字符具有相同的宽度
font-family作为一种后备机制，前面的不好使，会使用后面的
超过一个字，需要加引号
p{font-family:"Times New Roman", Times, serif;}
web安全字体组合：
http://www.runoob.com/cssref/css-websafe-fonts.html
字体样式
正常 - 正常显示文本
斜体 - 以斜体字显示的文字
倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
例子
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
字体大小
可设置绝对或者相对大小
绝对大小
设置一个指定大小的文本
不允许用户在所有浏览器中改变文本大小
确定了输出的物理尺寸时绝对大小很有用
相对大小
相对于周围的元素来设置大小
允许用户在浏览器中改变文字大小
如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
em单位可以避免ie无法调整文本的问题
1em和当前字体大小相等，浏览器默认字体大小16px，1em就是16px
em：px/16=em
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
如果使用em就可以在所有浏览器中调整大小，但是ie会过大或过小
使用百分比+em
可以在body中设置默认字体大小的百分比
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
链接
链接可以有不同的样式
链接的四个状态
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
例子
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后面
其他的链接样式:text-decoration去下划线
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
背景颜色：指定链接背景颜色
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
列表样式
列表的作用如下：
- 设置不同的列表项标记为有序列表
- 设置不同的列表项标记为无序列表
- 设置列表项标记为图像
不同的列表项标记
list-style-type属性指定列表项标记类型
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
列表项标记图像
ul
{
list-style-image: url('sqpurple.gif');
}
但是这样在不同浏览器显示效果不同，兼容性方案如下
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}
ul
设置列表样式类型为没有删除列表项标记
设置填充和边距0px（浏览器兼容性）
li
设置图像的URL，并设置它只显示一次（无重复）
您需要的定位图像位置（左0px和上下5px）
用padding-left属性把文本置于列表中
列表 -缩写属性
ul
{
list-style: square url("sqpurple.gif");
}
使用缩写，顺序
list-style-type
list-style-position (有关说明，请参见下面的CSS属性表)
list-style-image
丢失一个没关系，按照顺序
table
表格边框
指定css表格边框，使用border属性
例子指定表格th和td元素黑色边框
table, th, td
{
border: 1px solid black;
}
折叠边框
border-collapse属性设置表格的边框是否折叠成一个单一的边框后隔开,有空隙(1层或者两层边框)
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
表格宽度和高度
table
{
width:100%;
}
th
{
height:50px;
}
文字对齐
文字对齐和垂直对齐属性
text-align为水平对齐方式
td
{
text-align:right;
}
垂直对齐属性
td
{
height:50px;
vertical-align:bottom;
}
表格填充
td
{
padding:15px;
}
表格颜色
指定边框的颜色，和th元素的文本和背景颜色
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
浙公网安备 33010602011771号