【Web--css】

文章目录

一、样式定义方式
- - 1.行内样式表
  - 2.内部样式表
  - 3.外部样式表
  - 4.注释
二、选择器
- - 1.标签选择器
  - 2.id选择器
  - 3.类选择器
  - 4.伪类选择器
三、颜色
- - 1.预定义的颜色值
  - 2.十六进制表示法
  - 3.RBG表示法
  - 4.RBGA表示法
  - 5.取色方式
四、文本
- - 1.text-align
  - 2.line-height
  - 3.letter-spacing
  - 4.text-indent
  - 5.text-decoration
  - 6.text-shadow
五、字体
- - 1.font-size
  - 2.font-style
  - 3.font-weight
  - 4.font-family
六、背景
- - 1.background-color
  - 2.background-image
  - 3.background-size
  - 4.background-repeat
  - 5.background-attachment
七、边框
- - 1.border-style
  - 2.border-width
  - 3.border-color
  - 4.border-radius
  - 5.border-collapse
八、元素展示格式
- - 1.display
  - 2.white-space
  - 3.text-overflow
  - 4.overflow
九、内边距与外边距
- - 1.margin
  - 2.padding

一、样式定义方式

1.行内样式表

直接定义在标签的style属性中。

作用范围：仅对当前标签产生影响。
例如：

<img src="/images/mountain.jpg" alt="" style="width: 300px; height: 200px;">

2.内部样式表

定义在style标签中，通过选择器影响对应的标签。

作用范围：可以对同一个页面中的多个元素产生影响。

3.外部样式表

定义在css样式文件中，通过选择器影响对应的标签。可以用link标签引入某些页面。

作用范围：可以对多个页面产生影响。

4.注释

注意不能使用//。
只有：

/* 注释 */

二、选择器

1.标签选择器

选择所有div标签

div {
    width: 200px;
    height: 200px;
    background-color: gray;
}

2.id选择器

选择ID为rect-1的标签：

#rect-1 {
    width: 200px;
    height: 200px;
    background-color: gray;
}

3.类选择器

选择所有rectangle类的标签：

.rectangle {
    width: 200px;
    height: 200px;
    background-color: gray;
}

4.伪类选择器

伪类用于定义元素的特殊状态。
链接伪类选择器：

:link：链接访问前的样式
:visited：链接访问后的样式
:hover：鼠标悬停时的样式
:active：鼠标点击后长按时的样式
:focus：聚焦后的样式

位置伪类选择器：
:nth-child(n)：选择是其父标签第n个子元素的所有元素。

目标伪类选择器：
:target：当url指向该元素时生效。

三、颜色

1.预定义的颜色值

black、white、red、green、blue、lightblue等。

2.十六进制表示法

使用6位16进制数表示颜色，例如：#ADD8E6。
其中第1-2位表示红色，第3-4位表示绿色，第5-6位表示蓝色。

简写方式：#ABC，等价于#AABBCC。

3.RBG表示法

rgb(173, 216, 230)

其中第一个数表示红色，第二个数表示绿色，第三个数表示蓝色。

4.RBGA表示法

rgba(173, 216, 230, 0.5)

前三个数同上，第四个数表示透明度。

5.取色方式

网页里的颜色，可以在chrome的调试模式下获取
其他颜色可以使用QQ的截图软件：

直接按c键，可以复制rgb颜色值
按住shift再按c键，可以复制16进制颜色值

四、文本

1.text-align

定义行内内容（例如文字）如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。

2.line-height

用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。

补充知识点：

3.letter-spacing

用于设置文本字符的间距。

4.text-indent

能定义一个块元素首行文本内容之前的缩进量。

5.text-decoration

是用于设置文本的修饰线外观的（下划线、上划线、贯穿线/删除线或闪烁）它是 text-decoration-line, text-decoration-color, text-decoration-style, 和新出现的 text-decoration-thickness 属性的缩写。

6.text-shadow

为文字添加阴影。可以为文字与 text-decorations 添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。

五、字体

1.font-size

指定字体的大小。因为该属性的值会被用于计算em和ex长度单位，定义该值可能改变其他元素的大小。

2.font-style

允许你选择 font-family 字体下的 italic 或 oblique 样式。

3.font-weight

指定了字体的粗细程度。一些字体只提供 normal 和 bold 两种值。

4.font-family

允许您通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。
属性值用逗号隔开。浏览器会选择列表中第一个该计算机上有安装的字体，或者是通过 @font-face 指定的可以直接下载的字体。

六、背景

1.background-color

设置元素的背景色, 属性的值为颜色值或关键字”transparent”二者选其一。

2.background-image

用于为一个元素设置一个或者多个背景图像。

3.background-size

设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

4.background-repeat

定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。

5.background-attachment

决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。

七、边框

1.border-style

用来设定元素所有边框的样式。

2.border-width

设置盒子模型的边框宽度。

3.border-color

是一个用于设置元素四个边框颜色的快捷属性： border-top-color, border-right-color, border-bottom-color, border-left-color。

4.border-radius

允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

5.border-collapse

用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。

八、元素展示格式

1.display

block:独占一行，width、height、margin、padding均可控制，width默认100%。
inline:可以共占一行，width与height无效，水平方向的margin与padding有效，竖直方向的margin与padding无效，width默认为本身内容宽度。
inline-block:可以共占一行，width、height、margin、padding均可控制，width默认为本身内容宽度

2.white-space

用来设置如何处理元素中的空白 (en-US)。

3.text-overflow

确定如何向用户发出未显示的溢出内容信号。它可以被剪切，显示一个省略号或显示一个自定义字符串。

4.overflow

定义当一个元素的内容太大而无法适应块级格式化上下文时候该做什么。它是 overflow-x 和overflow-y的简写属性。

九、内边距与外边距

1.margin

margin属性为给定元素设置所有四个（上下左右）方向的外边距属性。

可以接受1~4个值（上、右、下、左的顺序）
可以分别指明四个方向：margin-top、margin-right、margin-bottom、margin-left
可取值
length：固定值
percentage：相对于包含块的宽度，以百分比值为外边距。
auto：让浏览器自己选择一个合适的外边距。有时，在一些特殊情况下，该值可以使元素居中。
外边距重叠
块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。
父元素与后代元素：父元素没有上边框和padding时，后代元素的margin-top会溢出，溢出后父元素的margin-top会与后代元素取最大值。

2.padding

控制元素所有四条边的内边距区域。

可以接受1~4个值（上、右、下、左的顺序）
可以分别指明四个方向：padding-top、padding-right、padding-bottom、padding-left
可取值
length：固定值
percentage：相对于包含块的宽度，以百分比值为内边距。