CSS学习总结

来源：互联网发布：linux exp导出数据库编辑：程序博客网时间：2024/06/07 22:16

CSS学习总结

1、什么是CSS?

CSS指层叠样式表(Cascading Style Sheets)；样式定义如何显示HTML元素样式通常存储在样式表中；把样式添加到 HTML 4.0中，是为了解决内容与表现分离的问题；外部样式表可以极大提高工作效率；外部样式表通常存储在CSS文件中；多个样式定义可层叠为一。

CSS声明总是以分号(;)结束，声明组以大括号({})括起来

CSS注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以 "/*" 开始, 以 "*/" 结束

2、选择器

id选择器

id 选择器可以为标有特定id的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器
CSS中id选择器以"#" 定义
以下的样式规则应用于元素属性 id="para1":
#para1 {

text-align:center;
color:red;

}

ID属性不要以数字开头，数字开头的ID在Mozilla/Firefox 浏览器中不起作用

class选择器

class选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用。class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

.center {text-align:center;}
类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

插入样式表的方法有三种:

外部样式表
内部样式表
内联样式

不要在属性值与单位之间留有空格

层叠次序

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。如果你使用了外部文件的样式在 <head>中也定义了该样式，则内部样式表会取代外部文件的样式。

链接样式

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。特别的链接，可以有不同的样式，这取决于他们是什么状态。

这四个链接状态是：

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

当设置为若干链路状态的样式，也有一些顺序规则：

a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面

CSS 列表

CSS列表属性作用如下：

设置不同的列表项标记为有序列表
设置不同的列表项标记为无序列表
设置列表项标记为图像

不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像

边框样式

边框样式属性指定要显示什么样的边界，border-style属性用来定义边框的样式

边框颜色

border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式

边框-简写属性，在"border"属性中设置：

border-width
border-style (required)
border-color

CSS 轮廓（outline）

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。CSS outline 属性规定元素轮廓的样式、颜色和宽度。

CSS Margin(外边距)

CSS Margin(外边距)属性定义元素周围的空间。

margin清除周围的元素（外边框）的区域。margin没有背景颜色，是完全透明的。margin可以单独改变元素的上，下，左，右边距。也可以一次改变所有的属性。

CSS Display(显示) 与 Visibility（可见性）

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。隐藏元素 - display:none或visibility:hidden

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局

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

CSS 的Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。

CSS组合选择符包括各种简单选择符的组合方式。

在 CSS3 中包含了四种组合方式:

后代选取器(以空格分隔)
子元素选择器(以大于号分隔）
相邻兄弟选择器（以加号分隔）
普通兄弟选择器（以破折号分隔）

后代选取器

后代选取器匹配所有值得元素的后代元素。以下实例选取所有 <p> 元素插入到 <div> 元素中:

div p
{

background-color:yellow;

}

子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。以下实例选择了<div>元素中所有直接子元素 <p> ：

div>p
{

background-color:yellow;

}

相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素:

div+p
{

background-color:yellow;

}

普通相邻兄弟选择器

普通兄弟选择器选取所有指定元素的相邻兄弟元素。以下实例选取了所有 <div> 元素的所有相邻兄弟元素 <p> :

div~p
{

background-color:yellow;

}

CSS教程

http://www.runoob.com/css/css-tutorial.html

CSS3教程

http://www.runoob.com/css3/css3-pagination.html#

CSS是一种控制如何呈现网页的程序语言，CSS3（CSS Level 3，CSS以Level区分，Level3包含Level1,Level2）
内部CSS、外部CSS
尺寸：px（像素、图点）、cm（公分）、mm（公厘）、in（英寸）、em（相对单位）
表格边框：border-collapse：collapse表示让两层边框重叠成为一条线，seperate：表示边框不重叠

元素的box由外到内包含：margin：最外圈的部分（边界）、border：边框、padding：内距、Content Area：内容区
http://blog.csdn.net/sweetyhyh/article/details/70946021?locationNum=7&fps=1

阅读全文

0 0