css常用属性与用法【精】

一、css选择器

1.元素选择器

2.ID选择器

3.CLASS选择器

4.组合选择器

5.分组选择器

h1,h2,p {             # 当多个选择器都是同样的样式时，为了减少代码量，可以使用一个分组，用,号隔开
    color:green;
}

6.嵌套选择器

当一个选择器无法确定元素样式时，可以使用嵌套以确定具体的元素样式。

• p{ }: 为所有 p 元素指定一个样式。
• .marked{ }: 为所有 class=”marked” 的元素指定一个样式。
• .marked p{ }: 为所有 class=”marked” 元素内的 p 元素指定一个样式。
• p.marked{ }: 为所有 class=”marked” 的 p 元素指定一个样式。

7.后代选择器

div p {      # 后代  空格
  background-color:yellow;
}

8.子元素选择器

div>p {     # 子代   >
  background-color:yellow;
}

9.相邻兄弟选择器

div+p {     # 相邻兄弟   +
  background-color:yellow;
}

10.后续兄弟选择器

div~p {      # 后续兄弟    ~
  background-color:yellow;
}

二、css引入方式

优先级：内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

三、CSS基础样式

1.背景

2.文本

3.字体

CSS字体属性定义字体，加粗，大小，文字样式。

4.链接

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

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

5.列表

6.表格

四、css盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素盒模型。允许我们在其它元素和周围元素边框之间的空间放置元素。它包括下面：

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

下面的图片说明了盒子模型(Box Model)：

当您指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距。

1.填充

2.边框

带bottom、left、rigtht、top的是单独设置一个边的样式。

3.轮廓

outline 属性在CSS中用于为元素添加轮廓线。与 border 属性不同，outline 不占用空间，因此不会影响布局。outline 属性通常用于在元素获得焦点时提供视觉反馈。

4.外边距

五、定位与显示

1.尺寸

CSS 尺寸属性允许你控制元素的高度和宽度。同样，它允许你增加行间距。

2.显示/隐藏元素

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

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

3.定位

position 属性指定了元素的定位类型。他有五种值

static

static 是默认的定位方式。元素按照正常的文档流进行布局，不会受到 top、bottom、left 和 right 属性的影响。

relative

relative 定位的元素相对于其正常位置进行定位。可以通过 top、bottom、left 和 right 属性来调整位置，但不会影响其他元素的布局。

fixed

fixed 定位的元素相对于视口进行定位，即使页面滚动，元素也不会移动。可以过 top、bottom、left 和 right 属性来调整位置。

absolute

absolute 定位的元素相对于最近的非 static 定位的祖先元素进行定位。如果没有这样的祖先元素，则相对于初始包含块（通常是视口）进行定位。可以通过 top、bottom、left 和 right 属性来调整位置。

sticky

sticky 定位的元素在滚动到特定阈值之前表现为 relative，之后表现为 fixed。通过 top、bottom、left 和 right 属性来设置阈值。（比如侧边栏随动功能）

所有的CSS定位属性

属性	说明	值
position	指定元素的定位类型	absolute、fixed、relative、static、inherit
top、bottom、left、right	定义了定位元素右外边距边界与其包含块上、下、左、右边界之间的偏移。	auto、length、%、inherit
overflow、overflow-x、overflow-y	设置当元素的内容溢出其区域、右/左边缘、顶部/底部边缘时发生的事情。	auto、hidden、scroll、visible……
z-index	设置元素的堆叠顺序	number、auto、inherit
clip	剪辑一个绝对定位的元素	……
cursor	显示光标移动到指定的类型	……

4.浮动

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

5.对齐

六、伪类与伪元素

是用来添加一些选择器的特殊效果。