html css菜鸟,CSS菜鸟教程阅读笔记

一. 选择器

下列选择器列表优先级逐级增加：

通用选择器(*)

元素选择器

类选择器

属性选择器

伪类

ID 选择器

内联样式

1. id 选择器

ID 选择器(ID selector，IS)：使用 # 标识，语法格式：#S{...}(S为选择器名)。例：id为name的标签会匹配下面的样式

#name{

color:red;

}

red text

2. 类选择器

类选择器(class selector，CS)：使用 . 标识，语法格式：.S{...}(S为选择器名)。例：class属性值为value的标签会匹配下面的样式

.value{

text-align:center;

}

center text

或者可以这样写以指定特定的HTML元素使用class：

p.center {text-align:center;}

这个标题不受影响

这个段落居中对齐。

3. 标签选择器

标签选择器(element selector，ES)：又叫元素选择器，使用标签名作为selector名，语法格式：S{...}(S为选择器名)。例：所有的p标签都会匹配以下的样式

p{

font-style:italic;

}

italic text

4.属性选择器

属性选择器(attribute selector，AS)：ES其实是AS的一个特例，在AS基础上还能对selector描述得更具体，语法格式为 E[attr[~=][|=][^=][$=][*=]VALUE]{...}，是并没有得到所有浏览器支持的选择器，因此不举例

5. 包含选择器

包含选择器(package selector，PS)：指定目标选择器必须处在某个选择器对应的元素内部，语法格式：A B{...}(A、B为HTML元素/标签，表示对处于A中的B标签有效)。例：以下div内的p标签和div外的p标签分别匹配不同的样式

p{

color:red;

}

div p{

color:yellow;

}

red text

yellow text

6. 子选择器

子选择器(sub-selector，SS)：类似于包含选择器，指定目标选择器必须处在某个选择器对应的元素内部，两者区别在于PS允许"子标签"甚至"孙子标签"及嵌套更深的标签匹配相应的样式，而SS强制指定目标选择器作为 包含选择器对应的标签 内部的标签，语法格式：A>B{...}(A、B为HTML元素/标签)。例：以下div内的p标签匹配样式，div内的table内的p不匹配

div>p{

color:red;

}

red text

no red text;

7. 兄弟选择器

兄弟选择器(brother selector，BS)：BS是CSS3.0新增的一个选择器，语法格式：A~B{...}(A、B为HTML元素/标签，表示A标签匹配selector的A，B标签匹配selector的B时，B标签匹配样式)

div~p{

color:red;

}

no red text

no red text

red text

二. 样式表

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

外部样式表(External style sheet)

内部样式表(Internal style sheet)

内联样式(Inline style)

优先级如下：

(内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式

1. 外部样式表

——外部定义导入使用

使用如下：

存储如下：

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url("/images/back40.gif");}

2. 内部样式表

——

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url("images/back40.gif");}

3. 内联样式

——行内定义混合使用

这是一个段落。

注：

1.不要在属性值与单位之间留有空格(如："margin-left: 20 px" )，正确的写法是 "margin-left: 20px"

2.如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。如下：

/* 内部样式 */

h3{color:green;}

测试！

三. 背景

当使用简写属性时，属性值的顺序为：

background-color(背景颜色)

background-image(背景图片)

background-repeat(背景图片是否平铺)

background-attachment(背景图像是否固定)

background-position(图片位置)

如下所示：

body {background: #ffffff url('img_tree.png') no-repeat right top;}

CSS 背景属性

Property

描述

background

简写属性，作用是将背景属性设置在一个声明中。

background-attachment

背景图像是否固定或者随着页面的其余部分滚动。

background-color

设置元素的背景颜色。

background-image

把图像设置为背景。

background-position

设置背景图像的起始位置。

background-repeat

设置背景图像是否及如何重复。

四. 文本

1. 颜色：

十六进制值 - 如: ＃FF0000

一个RGB值 - 如: RGB(255,0,0)

颜色的名称 - 如: redbody {color:red;}

示例如下：

h1 {color:#00ff00;}

h2 {color:rgb(255,0,0);}

或

2. 对齐方式

有居中、对齐到左或右、两端对齐三种方式，示例如下：

h1 {text-align:center;}

p.date {text-align:right;}

p.main {text-align:justify;}

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐(比如杂志和报纸的排版)。

3. 文本缩进

指定文本的第一行的缩进

p {text-indent:50px;}

所有CSS文本属性

属性

描述

color

设置文本颜色

direction

设置文本方向。

letter-spacing

设置字符间距

line-height

设置行高

text-align

对齐元素中的文本

text-decoration

向文本添加修饰

text-indent

缩进元素中文本的首行

text-shadow

设置文本阴影

text-transform

控制元素中的字母

unicode-bidi

设置或返回文本是否被重写

vertical-align

设置元素的垂直对齐

white-space

设置元素中空白的处理方式

word-spacing

设置字间距

五. 字体

1. 字体系列

为了严谨，font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

p{font-family:"微软雅黑", Times, serif;}

2. 字体样式

p.normal {font-style:normal;}//正常

p.italic {font-style:italic;}//斜体

3. 字体大小

能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。

请务必使用正确的HTML标签，例如

-

表示标题和

表示段落：

字体大小的值可以是绝对或相对的大小。

绝对大小：

设置一个指定大小的文本

不允许用户在所有浏览器中改变文本大小

确定了输出的物理尺寸时绝对大小很有用

相对大小：

相对于周围的元素来设置大小

允许用户在浏览器中改变文字大小

另外，虽然可以通过浏览器的缩放工具调整文本大小，但是，这种调整是整个页面，而不仅仅是文本

注：如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素(16px=1em)

示例如下：

h1 {font-size:40px;}

h2 {font-size:30px;}

p {font-size:14px;}

所有CSS字体属性

Property

描述

font

在一个声明中设置所有的字体属性

font-family

指定文本的字体系列

font-size

指定文本的字体大小

font-style

指定文本的字体样式

font-variant

以小型大写字体或者正常字体显示文本。

font-weight

指定字体的粗细。

六. 链接

链接样式：

a:link {background-color:#B2FF99;}//- 正常，未访问过的链接

a:visited {background-color:#FFFF85;}/用户已访问过的链接

a:hover {background-color:#FF704D;}//当用户鼠标放在链接上时

a:active {background-color:#FF704D;}//链接被点击的那一刻

删除下划线：

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

简写属性。用于把所有用于列表的属性设置于一个声明中

list-style-image

将图象设置为列表项标志。

list-style-position

设置列表中列表项标志的位置。

list-style-type

设置列表项标志的类型。

八. 表格

1. 使用下列方式添加单一框线的表格

table, td, th{

border: 1px solid black;

border-collapse: collapse;

}

2. 表格宽度和高度

table

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

3. 文字对齐

td.a

{ text-align:right; }/*水平对齐*/

td.b

{ height:50px;

vertical-align:bottom; }/*垂直对齐*/

九. 盒子模型

a.png