CSS简介

1、什么是CSS

1、CSS：Cascading Style Sheet 层叠样式表

是一组样式设置的规则，用于控制页面的外观样式

2、为何使用CSS

1、让页面外观美化
2、布局和定位

3、CSS选择器

功能：实现HTML标签样式

id选择器：：
功能：在id选择器的 { } 中输入你需要的样式，便能使 标有此id 的HTML元素的样式改变。
语法：id 选择器以 # 来定义。例如，
css中代码为#red {color:pink;}
html中代码为 <p id="pink">这个段落是粉色。</p> 便能实现含有id=“pink”的标签的样子为粉色。
属性选择器：
功能：可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
语法：[ ] 括号中自定义。例如，

css代码：

[title] { color:red; }

html中代码

<h1 title="Hello world">Hello world</h1>
hello worl字体颜色将会以red红色显示。

块

块框： div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。
行框： span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。

CSS列表

CSS 列表属性作用如下：
设置不同的列表项标记为有序列表ul { list-style-image: url('sqpurple.gif'); }
设置不同的列表项标记为无序列表ul.a {list-style-type: circle;} ul.b {list-style-type: square;}
设置列表项标记为图像（暂不做介绍）

而在 HTML中，有两种类型的列表：
无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
有序列表 ol - 列表项的标记有数字或字母

CSS表格

Width和height属性定义表格的宽度和高度。
下面的例子是设置100％的宽度，50像素的th元素的高度的表格：

table 
{
    width:100%;
}
th
{
    height:50px;
}

表格颜色：

table, td, th
{
    border:1px solid green;
}
th
{
    background-color:green;
    color:white;
}

表格文字对齐：

td
{
    text-align:right;
}

CSS 文本格式
文本颜色
颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

文本的对齐方式：

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

CSS连接：
不同的链接可以有不同的样式。
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
特别的链接，可以有不同的样式，这取决于他们是什么状态。
这四个链接状态是：
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻a:link {color:#000000;} /* 未访问链接*/ a:visited {color:#00FF00;} /* 已访问链接 */ a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */ a:active {color:#0000FF;} /* 鼠标点击时 */
CSS padding
填充- 单边内边距属性：

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

CSS Display(显示) 与 Visibility（可见性）
隐藏元素 - display:none或visibility:hidden：

h1.hidden {visibility:hidden;}

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

关于CSS的更多，可以参考菜鸟教程进行学习。