CSS

目录

CSS

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
内联样式（在 HTML 元素内部）拥有最高的优先权
CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的

语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

body,h1,h2 {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  }

id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。

#red {color:red;}
#green {color:green;}
使用：
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

类选择器

在 CSS 中，类选择器以一个点号显示

.center {text-align: center} //居中显示
使用：
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>

属性选择器

对带有指定属性的 HTML 元素设置样式。
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器

[title~=hello] { color:red; }
input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

创建CSS

3种方式，外部，内部，内联

外部:每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部；
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
不要在属性值与单位之间留有空格，如20 px，建议直接20px。

内部：可以使用 <style> 标签在文档头部定义内部样式表
<head>
<style type="text/css">
  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>

CSS样式

CSS背景

 background-color 属性为元素设置背景色
 p {
 background-color: gray; padding: 20px;
 background-repeat: repeat-y; //背景重复，no-repeat
 background-position:center;//位置，top、bottom、left、right 和 center
 background-attachment:fixed//可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响
 }其默认值是 transparent

body {
background-image: url(/i/eg_bg_04.gif);
}背景图片，注意url写法

CSS文本

p {text-indent: 5em;} //文本缩进
color   设置文本颜色
text-align  对齐元素中的文本。
word-spacing    设置字间距。

CSS字体

 font-family 属性 定义文本的字体系列
 <p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,
 'New York', serif;">...</p>
 只有当字体名中有一个或多个空格（比如 New York），或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号。
 font-style 属性最常用于规定斜体文本
 p.thick {font-weight:bold;}

CSS链接

a:link {color:#FF0000;}     /* 未被访问的链接 */
a:visited {color:#00FF00;}  /* 已被访问的链接 */
a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}   /* 正在被点击的链接 */

CSS列表

list-style  简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image    将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。

CSS表格

border-collapse 设置是否把表格边框合并为单一的边框。
border-spacing  设置分隔单元格边框的距离。
caption-side    设置表格标题的位置。
empty-cells 设置是否显示表格中的空单元格。
table-layout    设置显示单元、行和列的算法。

CSS内边距，外边距

内边距（padding）是元素和边框的距离，边框以外是外边距（margin），外边距默认是透明的，因此不会遮挡其后的任何元素。
详细说明

posted @ 2016-06-02 15:50  toto怎么会喝醉  阅读(177)  评论(0)  编辑  收藏  举报