WEB——CSS（1）

一、css基本知识

1.1  初识css

• css（cascading style sheet）层叠样式表
• 主要目的是用来装扮网页的
• 版本主要有css2或者css3

1.2  使用css的原因

1. 其内容和表现分离，易于维护和改版
2. 能够提高页面浏览速度
3. 符合W3C标准

二、css使用

2.1  如何使用？

CSS样式表的使用方式主要有以下三种：

1. 标签样式：把CSS样式表写在HTML对应的标记
2. 内联标签：把CSS样式表放在文档中
3. 外联标签：把CSS文档保存为".css"文件，然后定义在中

 

2.2 css语法

 CSS的定义是由三部分构成: 选择器，属性和属性值

body {
color:#006666;
font-size: 18px;
}

2.3  css选择器分类

1.id选择器

定义：根据元素ID来选择元素，具有唯一性。前面以”#”号来标志，如：

#demo{
color:#FF0000; 
} 

使用方法：在HTML中，标记可以定义一个id的属性来调用。如

 ....

2.标签选择器

定义：HTML页面是有很多不同的标签组成，标签选择器，则是决定对应标签采用相应的CSS样式。

使用方法：

p{ 
font-size:12px; 
background:#900; 
color:090; 
} 

页面里对应的p标记全部应用此样式。

3.类选择器

定义：类选择器根据类名来选择，前面以”.”来命名，如

.demo{
color:#FF0000;
}

使用方法：在HTML中，标记可以定义一个class的属性来调用。如

 ....

4.子代选择器

 定义：用于选择指定标签元素的第一代子元素。

使用方法：用大于符号(>),

4、后代选择器

通过依据元素在其位置的上下文关系来定义样式，可以使标记更加简洁。

#demo p {
color:#ff0000; 
size:14px;
}

5、通用选择器

通用选择器用*来表示。例如：

*{font-size: 12px;} 

表示所有的元素的字体大小都是12px。

7、逗号选择器

当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。

比如：

p, td, li {
line-height:20px;
  color:#ff0000;
} 

8.属性选择器
                [属性名称]
                [属性名称=值]
                [属性名称^=值]
                [属性名称$=值]
                [属性名称*=值]

三、CSS常见属性

3.1 字体

1. Css字体属性定义文本的字体系列，大小，加粗，风格(如斜体)和变形(如小型大写字母)
2. 常用属性:

• font:简写属性，作用是把所有针对字体的属性设置在一个声明中。【style size family】
• font-family:定义字体系列
• font-size:定义字体的尺寸
• font-style:定义字体风格

3.2 文本

1. CSS 文本属性可定义文本的外观。通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。
2. 常用属性

• color:定义文本颜色
• text-align:定义文本对齐方式
• letter-spacing:定义字符间隔

3.3  背景

1. CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。CSS 在这方面的能力远远在 HTML 之上。
2. 常用属性:

1. background:简写属性，作用是将背景属性设置在一个声明中
2. background-color:定义背景颜色
3. background-image:定义背景图片
4. background-position:定义背景图片的起始位置【left,center,right】
5. background-repeat:定义背景图片是否及如何重复

3.4  尺寸

1. CSS 尺寸  属性允许你控制元素的高度和宽度。
2. 常用属性:

1. width:设置元素的宽度
2. height:设置元素的高度

3.5  列表

1. CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。
2. 常用属性:

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

 

3.6  表格

1. CSS 表格属性可以帮助您极大地改善表格的外观
2. 常用属性:

• border-collapse:定义是否把表格边框合并为单一的边框。
• border-spacing:定义分隔单元格边框的距离
• caption-side:定义表格标题的位置【top,bottom】

3.7 轮廓

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

• outline:在一个声明中设置所有的轮廓属性
• outline-color:定义轮廓的颜色
• outline-style:定义轮廓的样式
• outline-width:定义轮廓的宽度

3.8 定位

1. CSS 定位 属性允许你对元素进行定位。
2. 定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置
3. CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
4. 常用属性:

• position:把元素放置到一个静态的,相对的，绝对的，或固定的位置中。
• top:定义了定位元素的上外边距边界与其包含块上边界之间的偏移量
• right: 定义了定位元素右外边距边界与其包含块右边界之间的偏移
• left: 定义了定位元素左外边距边界与其包含块左边界之间的偏移
• bottom: 定义了定位元素下外边距边界与其包含块下边界之间的偏移。

3.9 display      

1.  决定标签的属性（行内标签还是块标签，隐藏和显示标签）
2. 常用属性：

• none 此元素不会被显示。
• block  此元素将显示为块级元素，此元素前后会带有换行符。
• inliner 默认。此元素会被显示为内联元素，元素前后没有换行符。
• list-item 此元素会作为列表显示。