CSS学习总结

学习CSS的总结

通过此次对CSS的学习,大致对此有一个粗略的了解,可以使用它来对页面进行美化。

1. 语法基本说明

  • 一条CSS样式规则由两个主要的部分构成:选择器,以{}包裹的一条或多条声明:
    1. 选择器是需要改变样式的对象;
    2. 每一条声明由一个属性和一个值组成,属性和值之间用冒号分开,声明之间用分号分开;
  • 元素选择器,id选择器前有#号,class选择器前有.

2. 如何让CSS对页面生效

  • 外部样式表;
  • 内部样式表;
  • 内联样式。

3. 尺寸和对齐

  • heightwidth来设定元素内容所占据的尺寸。常见单位px(绝对大小)和%(相对大小)等;
  • px,em,rem的区别:
  1. px是固定的像素;

  2. em相对于父元素;

  3. rem相对于根元素。

  • text-align属性为left,center,right

4. 盒子模型

从内到外,这个盒子是由内容 content, 内边距 padding, 边框 border, 外边距 margin构成的

CSS学习总结_第1张图片

因此一个元素真正占据的宽度应该是:

左外边距 + 左边框宽度 + 左内边距 + 内容宽度 + 右内边距 + 右边框宽度 + 右外边距

  • content

在用width属性设置元素的宽度时,实际上只设置了其内容的宽度。

  • padding

padding-top,padding-right,padding-bottom,padding-left:内边距上右下左;

  • border

border-top,border-right,border-bottom,border-left:边框上右下左;
border-radius:边框圆角

  • margin

margin-top,margin-right,margin-bottom,margin-left:外边距上右下左;

(简写时为顺时针上右下左或上下,左右)

5. 定位

position属性有以下四个值(设置了此属性,才能使用top,bottom,left,right属性,否则定位无效)

  • static静态

position:static元素默认定位方式

  • relative相对

position:relative相对于静态正常位置进行偏移
CSS学习总结_第2张图片

  • fixed固定

position:fixed使得元素固定不动

  • absolute绝对

position:absolute相对于其最近设置了定位元素(非static)的父元素进行偏移。若父元素没有设置定位属性,则相对于这个父元素
CSS学习总结_第3张图片

6. 溢出

overflow属性处理溢出部分,其属性有以下四个值

  • visible默认值,溢出部分不被裁减,在区域外面显示
  • hidden裁剪溢出部分且不可见
  • scroll裁剪溢出部分,提供上下左右滚动条供显示
  • auto裁剪溢出部分,视情况提供滚动条

7. 浮动

float属性让某元素水平方向上向左向右进行一定,其周围其他元素也会重新排列;

一个浮动元素会尽量向左或向右移动,直到外边缘碰到包含框或者另一个浮动框的边框为止;

一个元素浮动后,其后的元素将尽可能包围它,或者说出现在这个浮动元素的左或右方。如果希望浮动元素后面的元素在其下方显示,可使用clear: both样式来进行清除。

8. 不透明度

opacity属性对任何元素设置不透明度,值在[0.0~1.0]之间,值越低,越透明。

9. 组合选择器

  • 后代选择器


  


  

Paragraph 1 in the div .haha.

Paragraph 2 in the div .haha>.

Paragraph 3 in the div .haha.

Paragraph 4. Not in a div .haha.

Paragraph 5. Not in a div .haha.

空格作为分隔,如:.haha p 代表在div元素内有.haha这种类的所有元素。

段落1、2、3都将有黄色的背景,而段落4、5没有。

  • 子选择器


  


  

Paragraph 1 in the div .haha.

Paragraph 2 in the div .haha.

Paragraph 3 in the div .haha - it is descendant but not immediate child.

Paragraph 4. Not in a div .haha.

Paragraph 5. Not in a div .haha.

也称为直接后代选择器,以>作为分隔,如:.haha > p 代表在有.haha类的元素内的直接

元素。

虽然段落3在.haha类中,但它的直接父元素是span,不是.haha的直接后代,所以不能选择。只有段落1、2有黄色背景。

  • 相邻兄弟选择器(了解,以+分隔)
  • 普通兄弟选择器(了解,以~分隔)

10. 伪类和伪元素

pseudo-class(伪类)或pseudo-element(伪元素),用于定义元素的某种特定的状态或位置等。

使用伪类/伪元素的语法:

/* 选择器后使用 : 号,再跟上某个伪类/伪元素 */
selector:pseudo-class/pseudo-element {
  property:value;
}

以上是我对此次学习CSS的简单总结,可用于简单且快速的复习,详细内容请点击以下链接CSS

你可能感兴趣的:(css,学习,html)