javaEE -12（14000字 CSS2 入门级教程 -1）

导语： CSS 是啥？

css即层叠样式表 (Cascading Style Sheets)，CSS 也是一种标记语言，用于给 HTML 结构设置样式，例如：文字大小、颜色、元素宽高等等。

CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离.

在这里插入图片描述

CSS 语法规范由两部分构成：

选择器：找到要添加样式的元素。
声明块：设置具体的样式（声明块是由一个或多个声明组成的），声明的格式为：属性名: 属性值

在这里插入图片描述
示例代码如下：

<style>
  p {
    /* 设置字体颜色 */
    color: red;
    /* 设置字体大小 */
    font-size: 30px;
 }
</style>
<p>hello</p>

这代码设置<p>元素的样式，将<p>元素的字体颜色设置为红色（color: red），字体大小设置为30像素（font-size: 30px）。所以，你会在浏览器中看到一个红色字体、大小为30像素的"hello"文本。

在这里插入图片描述

注意：CSS 使用 /* */ 作为注释. (使用 ctrl + / 快速切换) .

一：引入方式

当我们在HTML文档中使用CSS来定义样式时，有三种不同的引入方式可以选择：内部样式表、行内样式和外部样式表。

1.1 行内样式表

行内样式是通过在HTML标签的style属性中直接定义CSS样式的一种方式。

示例：

<html>
  <body>
    <h1 style="color: blue;">Hello, world!</h1>
    <p style="font-size: 16px;">This is a paragraph.</p>
  </body>
</html>

通过 style 属性, 来指定某个标签的样式，这种方式只适合于写简单样式. 只针对某些标签生效.

这种样式的缺点是不能写太复杂的样式，而且这种写法优先级较高, 会覆盖其他的样式.

1.2 内部样式表

内部样式表是通过<style>标签放置在HTML文档的<head>标签中的一种CSS引入方式。

代码示例：

<html>
  <head>
    <style>
      h1 {
        color: blue;
      }
      p {
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

优点: 这样做能够让样式和页面结构分离.
缺点: 分离的还不够彻底. 尤其是 css 内容多的时候.

< style > 标签理论上可以放在 HTML 文档的任何地方，但一般都放在 < head > 标签中。

1.3 外部样式

外部样式就是把样式写在单独的 .css 文件中，随后在 HTML 文件中引入使用。

代码示例：

在一个名为styles.css的外部CSS文件中：

 h1 {
   color: blue;
 }
 p {
   font-size: 16px;
 }

在HTML文档中引入该外部样式表：

 <html>
   <head>
     <link rel="stylesheet" href="styles.css">
   </head>
   <body>
     <h1>Hello, world!</h1>
     <p>This is a paragraph.</p>
   </body>
 </html>

<link> 元素用于在 HTML 文档中链接外部资源，通过指定 rel="stylesheet" 属性，告诉浏览器该链接是一个样式表。href 属性指定了外部样式表文件的路径。

外部样式的优势：样式可以复用、结构清晰、可触发浏览器的缓存机制，提高访问速度，实现了结构与样式的完全分离，外部样式是实际开发中最常用的方式,

1.4 三种样式总结

分类	优点	缺点	使用频率	作用范围
行内样式	优先级最高	结构与样式未分离	很低	当前标签
内部样式	代码结构清晰	结构与样式未彻底分离	一般	当前页面
外部样式	结构与样式彻底分离	需要引入才能使用	最高	多个页面

1.5 样式表的优先级

优先级规则：行内样式 > 内部样式 = 外部样式

内部样式、外部样式，这二者的优先级相同，但是后面的会覆盖前面的（简记：“后来者居上”）。

二：样式格式

紧凑风格（项目上线时推荐，可减小文件体积。）

p { color: red; font-size: 30px;}

展开风格 ( 开发时推荐，便于维护和调试。)

p {
  color: red;
  font-size: 30px;
}

虽然 CSS 不区分大小写, 我们开发时统一使用小写字母

空格规范：

冒号后面带空格
选择器和 { 之间也有一个空格.

项目上线时，我们会通过工具将展开风格的代码，变成紧凑风格，这样可以减小文件体积，节约网络流量，同时也能让用户打开网页时速度更快。

三：选择器

选择器的功能是选中页面中指定的标签元素，要先选中元素, 才能设置元素的属性.

3.1 选择器的种类

我们将会学习8种选择器：

标签选择器
类选择器
id 选择器
通配符选择器
后代选择器
子选择器
并集选择器
伪类选择器

3.2 标签选择器

特点:

能快速为同一类型的标签都选择出来.
但是不能差异化选择

<style>
p {
  color: red;
}
div {
  color: green;
}
</style>
<p>咬人猫</p>
<p>咬人猫</p>
<p>咬人猫</p>
<div>阿叶君</div>
<div>阿叶君</div>
<div>阿叶君</div>

在这里插入图片描述

3.3 类选择器

特点:

差异化表示不同的标签
可以让多个标签的都使用同一个标签.

<!DOCTYPE html>
<html>
<head>
  <style>
    .my-class {
      color: blue;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <h1 class="my-class">这是一个标题</h1>
  <p class="my-class">这是一个段落。</p>
  <p>这是另一个段落。</p>
</body>
</html>

在这里插入图片描述

需要注意的点：

类名是用 . 开头的
如果是长的类名, 可以使用 - 分割.
不要使用纯数字, 或者中文, 以及标签名来命名类名.

3.4 id 选择器

和类选择器类似：

CSS 中使用 # 开头表示这个选择器是 id 选择器
id 是唯一的, 不能被多个标签使用 (是和类选择器最大的区别)

代码示例如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 使用 ID 选择器为元素添加样式 */
        #myElement {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p id="myElement">这是一个使用ID选择器添加样式的段落。</p>
    <p>这是一个普通的段落，没有使用ID选择器。</p>
</body>
</html>

在这里插入图片描述
类比：

姓名是类选择器, 可以重复.
身份证号码是 id 选择器, 是唯一的.

3.5 通配符选择器

使用 * 的定义, 选取所有的标签.：

* {
color: red;
}

页面的所有内容都会被改成红色 .不需要被页面结构调用.

3.6 后代选择器

又叫包含选择器. 选择某个父元素中的某个子元素.

基本格式：元素1 元素2 { 代码 }

元素 1 和元素 2 要使用空格分割
元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1

代码示例: 把 ol 中的 li 修改颜色, 不影响 ul

<!DOCTYPE html>
<html>
<head>
  <style>
    ol li {
      color: red;
      }
    </style>
</head>
<body>
 
<ul>    
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>

<ol>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
</ol>

</body>
</html>

代码示例: 不但可以选择儿子，还可以选择孙子

<!DOCTYPE html>
<html>
<head>
  <style>
      ul li a {
        color:red
       }
    </style>
</head>
<body>
  <ul>
    <li>aaa</li>
    <li>bbb</li>
    <li><a href="#">faf</a></li>
  </ul>
</body>
</html>

运行结果：
在这里插入图片描述

ul li a {
  color: red;
}

ul a {
  color: red;
}

这两种写法都可以

3.7 子选择器

和后代选择器类似, 但是只能选择子标签.

基本格式：元素1>元素2 { 样式声明 }

注意：

使用大于号分割
只能选亲儿子, 不能选孙子元素

代码示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 选中父元素下的直接子元素 */
        ul > li {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
        <li>列表项3</li>
    </ul>
</body>
</html>

3.8 并集选择器

用于选择多组标签. (集体声明)

基本格式：元素1, 元素2 { 样式声明 }

通过逗号分割等多个元素.
表示同时选中元素1 和元素2

代码示例:

<!DOCTYPE html>
<html>
<head>
    <style>
       div, h3 {
      color: red;
      }
    </style>
</head>
<body>
  <div>苹果</div>
  <h3>香蕉</h3>
  <ul>
    <li>鸭梨</li>
    <li>橙子</li>
  </ul>
</body>
</html>

在这里插入图片描述

3.9 伪类选择器

作用：选中特殊状态的元素。

如何理解“伪” ? — 虚假的，不是真的。
如何理解“伪类”？ — 像类( class )，但不是类，是元素的一种特殊状态。

3.9.1 动态伪类选择器

a:link 未被访问的状态。
a:visited 访问过的状态。
a:hover 鼠标悬停在元素上的状态。
a:active 元素激活的状态。(按下鼠标不松开。)

示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  color: blue;
}

a:visited {
  color: green;
}

a:hover {
  color: red;
}

a:active {
  color: purple;
}
</style>
</head>
<body>

<a href="#">未被访问的状态</a><br>
<a href="#" style="color: green">已经被访问过的链接</a><br>
<a href="#"> 鼠标悬停在元素上的状态</a><br>
<a href="#" style="color: purple">元素激活的状态。(按下鼠标不松开。)</a><br>

</body>
</html>

在这里插入图片描述

注意事项

按照 LVHA 的顺序书写, 例如把 active 拿到前面去, 就会导致 active 失效
浏览器的 a 标签都有默认样式, 一般实际开发都需要单独制定样式.

因为 CSS 样式规则具有优先级， CSS 规则是从上到下逐条解析的，越靠后的样式规则优先级越高，所以我们应该按照 LVHA 的顺序书写伪类选择器，即先是 :link，然后是 :visited，接着是 :hover，最后是 :active。

如果需要让一个已经被访问过的链接恢复成未访问的状态，清空浏览器历史记录即可. 快捷键：ctrl + shift + delete

3.9.2 focus 伪类选择器

focus 用于获取焦点的元素。（表单类元素才能使用）：

<!DOCTYPE html>
<html>
<head>
<style>
.three>input:focus {
 color: red;
 }
</style>
</head>
<body>

  <div class="three">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
  </div>
</body>
</html>

此时被选中的表单的字体就会变成红色.
在这里插入图片描述

3.9.3 结构伪类

:first-child 所有兄弟元素中的第一个。
:last-child 所有兄弟元素中的最后一个。
:nth-child(n) 所有兄弟元素中的第 n 个。
:first-of-type 所有同类型兄弟元素中的第一个。
:last-of-type 所有同类型兄弟元素中的最后一个。
:nth-of-type(n) 所有同类型兄弟元素中的第n个。

关于 n 的值：

写 0 或不写：什么都选不中 —— 几乎不用。
写 n ：选中所有子元素 —— 几乎不用。
写 1~正无穷的整数：选中对应序号的子元素。
写 2n 或 even ：选中序号为偶数的子元素。
写 2n+1 或 odd ：选中序号为奇数的子元素。
写 -n+3 ：选中的是前 3 个。

了解即可：

:nth-last-child(n) 所有兄弟元素中的倒数第 n 个。
:nth-last-of-type(n) 所有同类型兄弟元素中的倒数第n个。
:only-child 选择没有兄弟的元素（独生子女）。
:only-of-type 选择没有同类型兄弟的元素。
:root 根元素。
:empty 内容为空元素（空格也算内容）。

3.9.4 否定伪类

:not(选择器) 排除满足括号中条件的元素。

3.9.5 UI伪类：

:checked 被选中的复选框或单选按钮。
:enable 可用的表单元素（没有 disabled 属性）。
:disabled 不可用的表单元素（有 disabled 属性）。

3.10 伪元素选择器

作用：选中元素中的一些特殊位置。

常用伪元素：

::first-letter 选中元素中的第一个文字。
::first-line 选中元素中的第一行文字。
::selection 选中被鼠标选中的内容。
::placeholder 选中输入框的提示文字。
::before 在元素最开始的位置，创建一个子元素（必须用 content 属性指定内容）。
::after 在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）。

3.11 选择器的优先级（权重）

通过不同的选择器，选中相同的元素，并且为相同的样式名设置不同的值时，就发生了样式的冲突。

此时到底应用哪个样式，此时就需要看优先级了。

简单描述：

行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器。

3.11.1 通过计算权重知道优先级

计算方式：

每个选择器，都可计算出一组权重，格式为： (a,b,c)

a : ID 选择器的个数。
b : 类、伪类、属性选择器的个数。
c : 元素、伪元素选择器的个数。

例如：

选择器	权重
ul > li	0,0,2
div ul > li p a span	0,0,6
#atguigu .slogan	1,1,0
#atguigu .slogan a	1,1,1
#atguigu .slogan a:hover	1,2,1

比较规则

按照从左到右的顺序，依次比较大小，当前位胜出后，后面的不再对比，例如：

(1,0,0) > (0,2,2)
(1,1,0) > (1,0,3)
(1,1,3) > (1,1,2)

特殊规则：

行内样式权重大于所有选择器。

!important 的权重，大于行内样式，大于所有选择器，权重最高！

图示：
在这里插入图片描述
计算权重时需要注意：并集选择器的每一个部分是分开算的！

3.12 选择器小结

选择器	作用	特点或注意事项
标签选择器	能选出所有相同标签	不能差异化选择
类选择器	能选出一个或多个标签	根据需求选择, 最灵活, 最常用
id选择器	能选出一个标签	同一个 id 在一个 HTML 中只能出现一次
通配符选择器	选择所有标签	特殊情况下使用
后代选择器	选择后代元素	可以是孙子元素
子选择器	选择子元素	只能选亲儿子，不能选孙子
并集选择器	选择相同样式的元素	更好的做到代码重用
链接伪类选择器	选择不同状态的链接	重点掌握 a:hover 的写法
:focus 伪类选择器	选择被选中的元素	重点掌握 input:focus

四：CSS常用元素属性

4.1 字体属性

4.1.1 设置字体族

body {
  font-family: '微软雅黑';
  font-family: 'Microsoft YaHei';
}

字体名称可以用中文, 但是不建议.
多个字体之间使用逗号分隔. (按照从左到右的顺序逐个查找，找到就用，没有找到就使用后面的, 如果都找不到, 会使用默认字体 – 微软雅黑. 通常在最后写上 serif （衬线字体）或 sans-serif （非衬线字体）。)
如果字体名有空格, 使用引号包裹.
建议使用常见字体, 否则兼容性不好.

<style>
  .font-family .one {
    font-family: 'Microsoft YaHei';
 }
  .font-family .two {
    font-family: '宋体';
 }
</style>
<div class="font-family">
  <div class="one">
   这是微软雅黑
  </div>
  <div class="two">
   这是宋体
  </div>
</div>

在这里插入图片描述

4.1.2 字体大小

p {
  font-size: 20px;
}

注意：

Chrome 浏览器支持的最小文字为 12px ，默认的文字大小为 16px ，并且 0px 会自动消失。
不同浏览器默认的字体大小可能不一致，所以最好给一个明确的值，不要用默认大
小。
通常以给 body 设置 font-size 属性，这样 body 中的其他元素就都可以继承了。
标题标签需要单独指定大小

<style>
  .font-size .one {
    font-size: 40px;
 }
  .font-size .two {
    font-size: 20px;
 }
</style>
<div class="font-size">
  <div class="one">
   大大大
  </div>
  <div class="two">
   小小小
  </div>
</div>

4.1.3 字体粗细

属性名： font-weight
作用：控制字体的粗细。

weight 常用值：

lighter ：细
normal ：正常
bold ：粗
bolder ：很粗（多数字体不支持）

weight 数值：

100~1000 且无单位，数值越大，字体越粗（或一样粗，具体得看字体设计时的
精确程度）。
100~300 等同于 lighter ， 400~500 等同于 normal ， 600 及以上等同于
bold 。

div { 
  font-weight: bold;
}
div { 
  font-weight: 600;
}

4.1.4 字体样式

属性名： font-style
作用：控制字体是否为斜体。

style 常用值：

normal ：正常（默认值）
italic ：斜体（使用字体自带的斜体效果）
oblique ：斜体（强制倾斜产生的斜体效果）

我们很少把某个文字变倾斜，但是经常要把 em / i 改成不倾斜（em / i本身就是倾斜的）

<style>
  .font-style em {
    font-style: normal;
 }
  .font-style div {
    font-style: italic;
 }
</style>
<div class="font-style">
  <em>
   放假啦
  </em>
  <div class="one">
   听说要加班
  </div>
</div>

在这里插入图片描述

4.1.5 字体复合写法

编写规则：

字体大小、字体族必须都写上。
字体族必须是最后一位、字体大小必须是倒数第二位。
各个属性间用空格隔开。

实际开发中更推荐复合写法，但这也不是绝对的，比如只想设置字体大小，那就直接用 font-size 属性。

4.1.6 细说 font-size

由于字体设计原因，文字最终呈现的大小，并不一定与 font-size 的值一致，可能大，也可能小。

例如： font-size 设为 40px ，最终呈现的文字，可能比 40px 大，也可能比 40px小。

通常情况下，文字相对字体设计框，并不是垂直居中的，通常都靠下一些。

4.2 文本属性

4.2.1 设置文本颜色

属性名： color
作用：控制文字的颜色。

可选值：

颜色名
rgb 或 rgba
HEX 或 HEXA （十六进制）
HSL 或 HSLA

<style>
  .color {
    color: red;
  }
</style>
<div class="color">这是一段话</div>

在这里插入图片描述

开发中常用的是： rgb/rgba 或 HEX/HEXA （十六进制）。

4.2.2 文本对齐 - 水平

属性名： text-align 。
作用：控制文本的水平对齐方式。

常用值：

left ：左对齐（默认值）
right ：右对齐
center ：居中对齐

<style>
  .text-align .one {
    text-align: left;
 }
  .text-align .two {
    text-align: right;
 }
  .text-align .three {
    text-align: center;
    }
</style>
<div class="text-align">
  <div class="one">左对齐</div>
  <div class="two">右对齐</div>
  <div class="three">居中对齐</div>
</div>

在这里插入图片描述

注意：这个属性不光能控制文本对齐, 也能控制图片等元素居中或者靠右

4.2.3 文本装饰

属性名： text-decoration
作用：控制文本的各种装饰线。

常用取值:

underline 下划线. [常用]
none 啥都没有. 可以给 a 标签去掉下划线.
overline 上划线. [不常用]
line-through 删除线 [不常用]

<style>
  .text-decorate .one {
    text-decoration: none;
 }
  .text-decorate .two {
    text-decoration: underline;
 }
  .text-decorate .three {
    text-decoration: overline;
 }
  .text-decorate .four {
    text-decoration: line-through;
 }
</style>
<div class="text-decorate">
  <div class="one">啥都没有</div>
  <div class="two">下划线</div>
  <div class="three">上划线</div>
  <div class="four">删除线</div>
</div>

在这里插入图片描述

4.2.4 文本缩进

属性名： text-indent 。
作用：控制文本首字母的缩进。

单位可以使用 px 或者 em，使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小.

缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了)

<style>
  .text-indent .one {
    text-indent: 2em;
 }
  .text-indent .two {
    text-indent: -2em;
 }
</style>
<div class="text-indent">
  <div class="one">正常缩进</div>
  <div class="two">反向缩进</div>
</div>

在这里插入图片描述

4.2.5 行高

属性名： line-height
作用：控制一行文字的高度。

可选值：

normal ：由浏览器根据文字大小决定的一个默认值。
像素( px )。
数字：参考自身 font-size 的倍数（很常用）。
百分比：参考自身 font-size 的百分比。

4.2.5.1 字体设计

行高指的是上下文本行之间的基线距离，HTML 中展示文字涉及到这几个基准线:

顶线
中线
基线 (相当于英语四线格的倒数第二条线)
底线

内容区：底线和顶线包裹的区域，即下图深灰色背景区域

在这里插入图片描述

因为文字在设计的时候一般都是处于中间位置的，所以如果行高等与字体高度, 就可以实现文字居中对齐.

但是由于字体设计原因，文字在一行中，并不是绝对垂直居中，若一行中都是文字，不会太影响观感。

上下边距是相等的, 此处字体大小是 16px, 行高 40px, 上下边距就分别是 12px（大概可以这么算，因为字体的设计会有点误差）

<style>
  .line-height .one {
    line-height: 40px;
    font-size: 16px;
 }
</style>
<div class="line-height">
  <div>
   上一行
  </div>
  <div class="one">
   中间行
  </div>
  <div>
   下一行
  </div>
</div>

在这里插入图片描述

<style>
  .line-height .two {
    height: 100px;
    line-height: 100px;
 }
</style>
<div class="line-height">
  <div class="two">
   文本垂直居中
  </div>
</div>

在这里插入图片描述
注意：行高 = 上边距 + 下边距 + 字体大小

4.2.6 文本间距

字母间距： letter-spacing
单词间距： word-spacing （通过空格识别词）
属性值为像素（ px ），正值让间距增大，负值让间距缩小。

4.2.7 vertical-align

属性名： vertical-align 。
作用：用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式。

常用值：

baseline （默认值）：使元素的基线与父元素的基线对齐。
top ：使元素的顶部与其所在行的顶部对齐。
middle ：使元素的中部与父元素的基线加上父元素字母 x 的一半对齐。
bottom ：使元素的底部与其所在行的底部对齐。

特别注意： vertical-align 不能控制块元素。

4.3 背景属性

4.3.1 背景颜色

属性名：background-color: [指定颜色]

默认是 transparent (透明) 的. 可以通过设置颜色的方式修改.

<style>
  body {
    background-color: #f3f3f3;
 }
  .bgc .one {
    background-color: red;
 }
  .bgc .two {
    background-color: #0f0;
 }
  .bgc .three {
    /* 背景透明 */
    background-color: transparent;
 }
</style>
<div class="bgc">
  <div class="one">红色背景</div>
  <div class="two">绿色背景</div>
  <div class="three">透明背景</div>
</div>

在这里插入图片描述

4.3.2 背景图片

属性名：background-image: url(…);

注意:

url 不要遗漏.
url 可以是绝对路径, 也可以是相对路径
url 上可以加引号, 也可以不加.

<style>
  .bgi .one {
    background-image: url(C:/Users/86198/Pictures);
    height: 300px;
 }
</style>
<div class="bgi">
  <div class="one">背景图片</div>
</div>

在这里插入图片描述

4.3.3 背景平铺

属性名：background-repeat: [平铺方式]

重要取值:

repeat: 平铺（默认值）
no-repeat: 不平铺
repeat-x: 水平平铺
repeat-y: 垂直平铺

注意：背景颜色和背景图片可以同时存在. 背景图片在背景颜色的上方.

<style>
  .bgr .one {
    background-image: url(rose.jpg);
    height: 300px;
    background-repeat: no-repeat;
 }
  .bgr .two {
    background-image: url(rose.jpg);
    height: 300px;
    background-repeat: repeat-x;
 }
  .bgr .three {
    background-image: url(rose.jpg);
    height: 300px;
    background-repeat: repeat-y;
 }
</style>
<div class="bgr">
  <div class="one">不平铺</div>
  <div class="two">水平平铺</div>
  <div class="three">垂直平铺</div>
</div>

4.3.4 背景位置

属性名：background-position: x y;

修改图片的位置，参数有三种风格:

方位名词:

水平： left 、 center 、 right
垂直: top 、 center 、 bottom
如果只写一个值，另一个方向的值取 center

精确单位: 坐标或者百分比(以左上角为原点)

只写一个值，会被当做 x 坐标， y 坐标取center

混合单位: 同时包含方位名词和精确单位

<style>
  .bgp .one {
    background-image: url(C:/Users/86198/Pictures);
    height: 500px;
    background-repeat: no-repeat;
    background-color: purple;
    background-position: center;
 }
</style>
<div class="bgp">
  <div class="one">背景居中</div>
</div>

在这里插入图片描述

4.3.4.1 坐标系

计算机中的平面坐标系, 一般是左手坐标系(和高中数学上常用的右手系不一样. y轴是往下指的).
在这里插入图片描述

4.3.5 背景属性复合写法

没有数量和顺序要求

4.4 列表属性

属性名：list-style-type

功能：设置列表符号

常用值如下：

none ：不显示前面的标识（很常用！）
square ：实心方块
disc ：圆形
decimal ：数字
lower-roman ：小写罗马字
upper-roman ：大写罗马字
lower-alpha ：小写字母
upper-alpha ：大写字母

属性名：list-style-position

功能：设置列表符号的位置

常用值如下：

inside ：在 li 的里面
outside ：在 li 的外边

属性名：list-style-image

功能：自定义列表符号

常用值：

url(图片地址)

属性名：list-style

功能：列表的复合属性

没有数量、顺序的要求

4.5 表格属性

4.5.1 边框相关属性（其他元素也能用）

CSS 属性名	功能	属性值
border-width	边框宽度	CSS 中可用的长度值
border-color	边框颜色	CSS 中可用的颜色值
border-style	边框风格	none 默认值 solid 实线 dashed 虚线 dotted 点线 double 双实线
border	边框复合属性	没有数量、顺序的要求

4.5.1 表格独有属性（只有 table 标签才能使用）：

属性名	功能	属性值
table-layout	设置列宽度	auto：自动，列宽根据内容计算（默认值） fixed：固定列宽，平均分
border-spacing	单元格间距	CSS 中可用的长度值生效的前提：单元格边框不能合并。
border-collapse	合并单元格边框	collapse：合并 separate：不合并
empty-cells	隐藏没有内容的单元格	show：显示，默认 hide：隐藏生效前提：单元格不能合并。
caption-side	设置表格标题位置	top：上面（默认值） bottom：在表格下面

以上 5 个属性，只有表格才能使用，即： < table > 标签。

4.6 鼠标属性

属性名：cursor
功能：设置鼠标光标的样式

属性值：

pointer ：小手
move ：移动图标
text ：文字选择器
crosshair ：十字架
wait ：等待
help ：帮助

扩展：自定义鼠标图标

/* 自定义鼠标光标 */
cursor: url("./arrow.png"),pointer;

4.7 圆角矩形

我们可以通过 border-radius 使边框带圆角效果.

border-radius: length;

length 是内切圆的半径. 数值越大, 弧线越强烈

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
  width: 200px;
  height: 100px;
  border: 2px solid green;
  border-radius: 10px;
  }
  </style>
</head>
<body>
  <div>蛤蛤</div>
</body>
</html>

结果如下：
在这里插入图片描述
生成圆形：让 border-radius 的值为正方形宽度的一半即可.

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
  width: 200px;
  height: 200px;
  border: 2px solid green;
  border-radius: 100px;
  /* 或者用 50% 表示宽度的一半 */
  border-radius: 50%;
}
  </style>
</head>
<body>
  <div>蛤蛤</div>
</body>
</html>

在这里插入图片描述
生成圆角矩形：
让 border-radius 的值为矩形高度的一半即可

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
  width: 200px;
  height: 100px;
  border: 2px solid green;
  border-radius: 50px;
}
  </style>
</head>
<body>
  <div>蛤蛤</div>
</body>
</html>

在这里插入图片描述
展开写法：
border-radius 是一个复合写法. 实际上可以针对四个角分别设置.

border-radius:2em;

等价于

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

border-radius: 10px 20px 30px 40px;

等价于

border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:30px;
border-bottom-left-radius:40px;
比特

4.8 颜色表示的多种方式

4.8.1 颜色名

直接使用颜色对应的英文单词，编写比较简单，例如：

红色：red
绿色：green
蓝色：blue
紫色：purple
橙色：orange
灰色：gray

颜色名这种方式，表达的颜色比较单一，所以用的并不多。

4.8.2 rgb 或 rgba

编写方式：使用红、黄、蓝这三种光的三原色进行组合。

r 表示红色
g 表示绿色
b 表示蓝色
a 表示透明度

举例：

/* 使用 0~255 之间的数字表示一种颜色 */
color: rgb(255, 0, 0);/* 红色 */
color: rgb(0, 255, 0);/* 绿色 */
color: rgb(0, 0, 255);/* 蓝色 */
color: rgb(0, 0, 0);/* 黑色 */
color: rgb(255, 255, 255);/* 白色 */

/* 混合出任意一种颜色 */
color:rgb(138, 43, 226) /* 紫罗兰色 */
color:rgba(255, 0, 0, 0.5);/* 半透明的红色 */

/* 也可以使用百分比表示一种颜色（用的少） */
color: rgb(100%, 0%, 0%);/* 红色 */
color: rgba(100%, 0%, 0%,50%);/* 半透明的红色 */

小规律：

若三种颜色值相同，呈现的是灰色，值越大，灰色越浅。
rgb(0, 0, 0) 是黑色， rgb(255, 255,255) 是白色。
对于 rbga 来说，前三位的 rgb 形式要保持一致，要么都是 0~255 的数字，要么都是百分比。

4.8.3 HEX 或 HEXA

基本格式为：# rrggbb

HEX 的原理同与 rgb 一样，依然是通过：红、绿、蓝色进行组合，只不过要用 6位（分成3组）来表达。

每一位数字的取值范围是： 0 ~ f ，即：（ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c,d, e, f ），所以每一种光的最小值是： 00 ，最大值是： ff

color: #ff0000;/* 红色 */
color: #00ff00;/* 绿色 */
color: #0000ff;/* 蓝色 */
color: #000000;/* 黑色 */
color: #ffffff;/* 白色 */
/* 如果每种颜色的两位都是相同的，就可以简写*/
color: #ff9988;/* 可简为：#f98 */
/* 但要注意前三位简写了，那么透明度就也要简写 */
color: #ff998866;/* 可简为：#f986 */

4.8.4 HSL 或 HSLA

HSL 是通过：色相、饱和度、亮度，来表示一个颜色的

格式为： hsl(色相,饱和度,亮度)

色相：取值范围是 0~360 度，具体度数对应的颜色如下图：

在这里插入图片描述

饱和度：取值范围是 0%~100% 。（向色相中对应颜色中添加灰色， 0% 全灰， 100% 没有灰）
亮度：取值范围是 0%~100% 。（ 0% 亮度没了，所以就是黑色。 100% 亮度太强，所以就是白色了）

HSLA 其实就是在 HSL 的基础上，添加了透明度。

4.9 CSS 长度单位

px ：像素。
em ：相对元素 font-size 的倍数。
rem ：相对根字体大小，html标签就是根。
% ：相对父元素计算。

注意： CSS 中设置长度，必须加单位，否则样式无效！

五：CSS三大特性

层叠性

概念：如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆盖）。

继承性

概念：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。

规则：优先继承离得近的。

常见的可继承属性：

text-??
font-??
line-??
color

参照MDN网站，可查询属性是否可被继承。

优先级

简单聊： !important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * > 继承的样式。

详细聊：需要计算权重。