Amoniaa


千帆过尽，归来仍是少年

CSS3笔记(1)——基础+段落文字+项目列表+背景+表格+渐变

2020-11-02 分类于 前端 作者 Amoniaa ~8.03K 字 阅读 次

一、CSS3基础

1. CSS3基本语法

1
2
3
4
5
6
7
8
9
10
11
selector { property1:value1; proterty2:value2; }
/*或*/
selector { 
	property1:value1; 
	proterty2:value2;
}
/*多个选择器使用相同的声明区块*/
selector1, selector2 { 
	property1:value1; 
	proterty2:value2;
}

2. CSS引入方式

  1. 行内样式
    1
    2
    3
    4
    5
    <div style="
         width:100px;
         height:100px;
         background-color: red;
    "></div>
  2. 内部样式表
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <style type="text/css">
        div{
            width:100px;
            height:100px;
            background-color: greenyellow;
        }
    </style>
</head>
</html>
  1. 外部样式表
1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>
</html>
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <style>
    	@import url(test.css);
    </style>
</head>
</html>

3. 字体

属性：

  • font-family: 设置字体名称，可指定多个字体名称，用逗号隔开，在前面的字体名称优先级高
  • font-size: 设置字号大小 （1em = 16px）
  • font-style: 设置三种字体样式：normal（正常）italic（斜体）oblique（倾斜体）
  • font-variant: 默认值为normal，值为small-caps时小写英文字母以小型大写字母显示
  • font-weight: 设置字体粗细。有以下取值：normal(400)**、bold(700)、bolder、lighter、100, 200, … , 800, 900**
  • font-size-adjust: 设置字体宽高比
  • font: 依序设定属性值：style variant weight size family（省略某一项则使用默认值）
  • @font-face: 提供服务器端字体供浏览器下载

    4. 属性选择器

    用于将具有某种属性，不论其为何值的所有元素套用该样式。

语法

1
2
3
4
5
6
7
8
/*所有属性有classname字段的元素，不论classname值为何，均套用该样式，其中*可省略*/
*[classname] {
	...
}
/*为所有属性有classname字段值为value的元素套用该样式*/
*[classname="value"] {
	...
}

5. 虚拟选择器

1.链接虚拟类别 :link 和 :visited

  • :link: 尚未被单击时可以套用该样式
  • :visited: 已被单击时可以套用该样式

2.动作虚拟类别 :hover :active 和 :focus

  • :hover: 鼠标指针位于超链接字符或在此元素上时可以套用该样式
  • :active: 单击时可以套用该样式
  • :focus: 获得焦点时可以套用该样式

3.目的虚拟类别 :target

  • :target: 为移动的目标套用该样式

    二、段落文字编排

    1. 对齐方式 text-align 属性

    1
    text-align: left | right | center | justify | initial | inherit;
  • left: 靠左对齐
  • right: 靠右对齐
  • center: 居中对齐
  • justify: 左右（两端）对齐
  • initial: 使用默认设置
  • inherit: 继承父元素属性

    2. 首行缩排 text-indent 属性

    1
    text-indent: length | % | initial | inherit;
  • length: 使用cm、px、pt、em等单位设定固定长度，默认值为0
  • %: 缩排父元素宽度的百分比
  • initial: 使用默认设置
  • inherit: 继承父元素属性

    3. 行高 line-height 属性

    1
    line-height: normal | number | length | % | inherit;
  • normal: 默认值
  • number: 设置数值，将与当前字体尺寸相乘的结果作为行高值
  • length: 使用cm、px、pt等单位设定固定长度
  • %: 设置依照当前字体尺寸的百分比
  • inherit: 继承父元素属性

    4. 字符间距 letter-spacing 属性

    1
    letter-spacing: normal | length | initial | inherit;
  • normal: 默认值，没有额外空间
  • length: 设值固定的字符间距，可以为负值
  • initial: 使用默认设置
  • inherit: 继承父元素属性

    5. 文字间距 word-spacing 属性

    1
    word-spacing: normal | length | initial | inherit;
  • normal: 默认值，文字间距为 0.25em（4px)
  • length: 设值额外文字的间距，可以为负值
  • initial: 使用默认设置
  • inherit: 继承父元素属性

    6. 处理空格 white-space 属性

    1
    white-space: normal | nowrap | pre | pre-line | pre-wrap | initial | inherit;
  • normal: 默认值，浏览器会忽略空白
  • nowrap: 文本不换行，直到遇到 <br> 元素
  • pre: 保留空白，类似于html的 <pre> 元素
  • pre-line: 合并空白符，使文件正常换行
  • pre-wrap: 设定保留空白符，在浏览器中可以正常换行
  • initial: 使用默认设置
  • inherit: 继承父元素属性

    7. 大小写转换 text-transform 属性

    1
    text-transform: none | capitalize | uppercase | lowercase | initial | inherit;
  • none: 默认值，保留文字原本样式
  • capitalize: 第一个字母大写
  • uppercase: 字母全部转成大写
  • lowercase: 字母全部转成小写
  • initial: 使用默认设置
  • inherit: 继承父元素属性

8. 文字阴影 text-shadow 属性

1
text-shadow: h-shadow v-shadow blur-radius color | none | initial | inherit;
  • h-shadow: 水平阴影，右正左负，不可省略
  • v-shadow: 垂直阴影，下正上负，不可省略
  • blur-radius: 模糊范围，单位和h-shadow相同，可省略
  • color: 阴影颜色，可省略
  • none: 默认值，即无阴影
  • initial: 使用默认设置
  • inherit: 继承父元素属性

    9. 线条装饰 text-decoration 属性

    1
    text-decoration: none | underline | overline | line-through | initial | inherit;
  • none: 默认值，即正常显示
  • underline: 底线
  • overline: 顶线
  • line-through: 删除线
  • initial: 使用默认设置
  • inherit: 继承父元素属性

10. 制表符宽度 tab-size 属性

1
tab-size: number | length | initial | inherit;
  • number: 设置宽度数值，默认值为8，即8个英文字符宽度
  • length: 设值制表符长度
  • initial: 使用默认设置
  • inherit: 继承父元素属性

    11. 换行 word-wrap 属性

    1
    word-wrap: normal | break-word;
  • normal: 默认值，只在可以换行的地方换行，否则显示到结束为止
  • break-word: 可用于将较长的单字或URL网址中途换行

12. 溢出 text-overflow 属性

1
text-overflow: clip | ellipsis | string | initial | inherit;
  • clip: 超出显示区不予显示
  • ellipsis: 超出显示区以“…”显示
  • string: 使用给定的字符串替换被隐藏的文本
  • initial: 使用默认设置
  • inherit: 继承父元素属性

三、项目列表

1. 项目列表符号 list-style-type 属性

默认值： “disc” for <ul> and “decimal” for <ol>

2. 图片项目符号 list-style-image 属性

list-style-image 属性使用图像来替换列表项的标记。

3. 项目符号与编号位置 list-style-position 属性

4. 简易表示法 list-style 属性

1
list-style: list-style-type list-style-position list-style-image;

某个属性使用默认值时可省略

四、背景

1. 背景颜色 background-color 属性

1
background-color: color | transparent | inherit;

2. 背景图 background-image 属性

1
background-image: url | none | inherit;

3. 背景重复出现 background-repeat 属性

默认将图片以左上角为基准点放置

1
background-repeat: repeat | repeat-x | repeat-y | no-repeat | space | round | inherit;

  • space: 设定图片在水平和垂直重复出现时自动调节间距，使图片完整出现
  • round: 设定图片在水平和垂直重复出现时自行重设大小，使图片完整出现

4. 背景位置 background-position 属性

1
background-position: value;

5. 背景大小 background-size 属性

1
background-size: auto | length | percentage | cover | contain | initial | inherit;

  • auto: 默认选项，以原图大小显示，空间不够时只显示局部
  • initial: 使用默认设置

6. 背景随内容滚动 background-attachment 属性

设置背景图像是否固定或者随着页面的其余部分滚动

1
background-attachment: scroll | fixed | local | initial | inherit;

  • local: 效果与scroll相同，但在inframe显示时，背景图不滚动

    7. 背景显示区域 background-clip 属性

    指定背景绘制区域。
    1
    background-clip: border-box | padding-box | content-box;

8. 背景显示基准点 background-origin 属性

盒子模型左上角为基准点，设定关于background-position属性的相对位置

1
background-origin: border-box | padding-box | content-box;

9. 简易表示法 background 属性

1
2
background: background-color background-position background-size background-repeat 
			background-origin background-clip background-attachment background-image;

各值之间用空格分隔，不分先后顺序，可以只有其中的某些值

五、表格

1. 表格标题

使用 caption 元素的 caption-side 属性指定表格标题的位置

1
caption-side: top | bottom | inherit;

2. 表格底色

实例：

1
2
3
4
<style>
	th {background-color: aqua;}
	td {background-color: aliceblue;}
</style>

3. 表格框线

实例：

1
2
3
4
5
<style>
	table {border: 3px solid blue;}
	th {border: 2px solid green;}
	td {border: 1px solid red;}
</style>

4. 单元格框线

使用 table 元素的border-collapse 属性指定单元格框线模式

1
border-collapse: separate | collapse | inherit;


在separate框线模式下，可以使用 table 元素的border-spacing 属性设定单元格与单元格间或单元格与表格间框线的距离
1
border-spacing: length [length];

5. 单元格内边距

实例：

1
2
3
4
<style>
	th {padding: 5px;}
	td {padding: 5px;}
</style>

6. 显示或隐藏空白单元格

使用 table 元素的empty-cells 属性显示或隐藏空白单元格

1
empty-cells: hide | show | inherit;

7. 单元格内容排版

可以使用 text-align 属性以不同方式对齐单元格内容

8. 表格版面排版

使用 table 元素的table-layout 属性表格版面排版方式

1
table-layout: hide | show | inherit;

9. 设置表格奇偶行不同的样式

使用以下选择器：

1
n:nth-child(n) /*将设置套用在第n个子元素的p元素*/

则

  • 奇数行：tr:nth-child(2n+1)
  • 偶数行：tr:nth-child(2n)

    六、渐变

    1. 线性渐变 linear-gardient()

1
background-image: linear-gradient(direction, color-stop, ... , color-stop);
  • direction: 设定色彩方向，可以用角度或英文表示
           **上->下**：to bottom | 180deg
  **下->上**：to top | 0deg
  **左->右**：to right | 90deg
  **右->左**：to left | 270deg
  • color-stop: 设定色彩驻停点，可以在颜色后指定位置，如 red 50%，所有百分比之和等于100%

css 不均匀渐变百分比表示指定颜色的标准中心线位置，百分比之间是过渡色，如果百分比位置之间有重叠会失去渐变过渡色。比如：

1
background: linear-gradient(red 10%, green 85%, blue 90%)

其中：

  • 10% 表示 red 的颜色中心线在线性渐变方向的 10% 的位置。
  • 85% 表示 green 的颜色中心线在线性渐变方向的 85% 的位置。
  • 90% 表示 blue 的颜色中心线在线性渐变方向的 90% 的位置。
  • 10% 到 85% 是 red-green 的过渡色，85%-90% 是 green-blue 的过渡色。

2. 放射渐变 radial-gardient()

默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

1
background-image: radial-gradient(shape length position, color-stop, ... , color-stop);
  • shape: 设定色彩放射形状，如圆形(circle)、椭圆(ellipse)
  • length: 设定渐变大小，可以通过数值或以下关键词设定渐变大小
    closest-side | farthest-side | closest-corner | farthest-corner：
  • position: 设定渐变中心，可以使用数值、％或以下关键词设定渐变中心
    top | right | bottom | left

    3. 重复线性渐变 repeating-linear-gardient()

    通过设定其实色彩驻停点与结束色彩驻停点的长度来决定重复的次数。当长度为20%时，渐变重复5次。

    4. 重复放射渐变 repeating-radial-gardient()

    通过设定其实色彩驻停点与结束色彩驻停点的长度来决定重复的次数。当长度为20%时，渐变重复5次。
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可
,
最后编辑：2021-02-21