第二章 CSS基本属性

1、CSS：层叠样式表

一个元素允许同时应用多种样式，页面元素最终的样式即为多种样式的叠加效果。

2、CSS样式优先级
行内样式表>内部样式表>外部样式表【就近原则】
id选择器>类选择器>标签选择器

3、文本属性：（缩写形式）
font：风格 粗细 大小/行高  字体1，字体2，字体3；
font-weight（粗细100-900）
font-size（大小）
font-family（字体）font-style（风格）

行距、对齐等：
line-height （行高）
text-align （对齐）  text-decoration(文本修饰）
letter-spacing （字符间距）white-space （空白处理）

【注意事项】

• @charset "utf-8";    作用是为了避免样式中存在中文，打开时出现乱码的情况
• 字体大小单位：px 固定值  相对值em（响应式布局）  转换关系16px=1em

4、背景相关属性： background （缩写形式）：color image repeat attachment position ;
background-color（背景色）
background-image（背景图 ）
background-repeat（背景图重复方式）
background-position（位置坐标、偏移量）【右下为正】
background-size（背景图大小）【cover覆盖、contain原图按比例拉伸、百分比】

background-attachment （背景图像是否固定）【scroll默认随页面滚动、fixed固定、inherit继承】

5、列表相关属性：列表（li）常用属性
list-style （列表风格）
属性值 方式 语法实现 示例
none 无风格 list-style:none; 刷牙
洗脸
disc 实心圆 <ul>list-style:disc; ● 刷牙
● 洗脸
circle 空心圆 list-style:circle; ○ 刷牙
○ 洗脸
square 实心正方形 list-style:square; ■ 刷牙
■ 洗脸
decimal 数字 <ol>list-style:decimal 1. 刷牙
2. 洗脸

6.处理溢出（overflow）：
?overflow 的取值可以是 visible | hidden | scroll | auto ， 其中 visible 是默认值。
?值 visible 表示不裁减内容，也不添加滚动条，强制显示元素内容；
?hidden 表示裁减内容，而且不显示超出对象尺寸的内容；
?scroll 表示裁减内容，同时提供滚动条；
?auto 表示只有在必要时才裁减内容并添加滚动条。
注：如果我们要使用 overflow 属性，那么该元素的 position 属性必须指定
为绝对定位（absolute）
例：position: absolute;overflow: scroll;

7.指定裁剪区域（clip）：
?clip属性可以确定定位对象的裁减区域
?取值为 rect (top right bottom left) | auto
?其中 top、 right、 bottom 和 left用于指定上、 右、 下、 左 4 个方向上的裁减长度
?取值为长度值或 auto。 如果任意一边使用 auto，则相当于该边没有进行裁减。
注：如果我们要使用 clip 属性，那么该元素的 position 属性必须指定
为绝对定位（absolute）
例：clip: rect(50px 200px auto auto);

8、元素可见性（display 属性和 visibility 属性）：
?display 属性确定一个元素是否应显示在页面上以及如何显示。
?它的取值包括： none、 block、 inline等。
?none：元素在页面隐藏起来，不仅元素看不见，而且元素也将退出当前的页面布局层，不占用任何空间。
?block（块级）： 可以强制将 HTML中的内嵌元素变为块级元素，从而引起后续对象换行
?inline（内嵌级）：CSS强制将 HTML 中的块级元素变为内嵌元素。
?visibility 属性控制定位的元素是否可见。
?取值包括： visible（可见）、hidden（隐藏）和inherit（继承），默认值为 inherit（即继承父级元素的显示属性）。
?visibility 属性与 display 属性的不同之处在于：
?visibility当隐藏元素时，visibility 属性定义的元素仍然为保留原有的显示空间。
?display 当隐藏元素时，display 属性定义的元素在页面隐藏起来，不仅元素看不见，而且元素也将退出当前的页面布局层，不占用任何空间。