百度前端技术学院 第四天学习笔记（CSS边框、列表）（2）

总结

• 按照 top-right-bottom-left 的顺序设置（不同的四边样式/宽度）

  border-width: 15px 5px 15px 5px;

  border-style: solid dotted dashed double;/*实线上边框、点线右边框、虚线下边框和一个双线左边框*/

• border-style 的默认值是 none，如果没有声明样式，就相当于 border-style: none。必须记得设置边框样式border-style，否则边框就不会出现。（不管宽度设置了多少）

---

border简写三个属性

.box { 
  border: 1px solid black; 
} 

相当于

.box { 
  border-width: 1px; 
  border-style: solid; 
  border-color: black; 
} 

---

综合运用例子

.box {
  background-color: #567895;
  border: 5px solid #0b385f;/*宽度为5px ，solid 实线*/
  border-bottom-style: dashed;/*底部：dashed虚线,样式与颜色和其他三边一样*/
  color: #fff;
}

h2 {
  border-top: 2px dotted rebeccapurple;/*顶部：宽度为2px ，dotted 点线，rebeccapurple紫色*/
  border-bottom: 1em double rgb(24, 163, 78);/*底部双实线*/
}

<div class="box">
  <h2>Borders</h2>
  <p>Try changing the borders.</p>
</div>

---

边框样式border-style

border-style 的默认值是 none，如果没有声明样式，就相当于 border-style: none
注意：必须记得设置边框样式border-style，否则边框就不会出现。

定义不同的四边样式：

这里的值采用了top-right-bottom-left 的顺序：

.box {
  background-color: #567895;
  border-width:8px;
  border-style: solid dotted dashed double;/*实线上边框、点线右边框、虚线下边框和一个双线左边框*/
}

定义单边样式：

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

因此这两种方法是等价的：

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

注意：
如果要使用第二种方法，必须把单边属性放在简写属性之后，因为如果把单边属性放在 border-style 之前，简写属性的值就会覆盖单边值 none。

---

边框宽度 border-width

属性值：

长度值	关键字
比如 2px 或 0.1em	thin 、medium（默认值） 和 thick

注释：
CSS 没有定义 3 个关键字的具体宽度，所以一个用户代理可能把 thin 、medium 和 thick 分别设置为等于 5px、3px 和 2px，而另一个用户代理则分别设置为 3px、2px 和 1px。

定义不同边的宽度
按照 top-right-bottom-left 的顺序设置元素的各边边框：

1. border-width: 15px 5px 15px 5px;
2. 也可以简写为（这样写法称为值复制）：border-width: 15px 5px;

定义单边样式：

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

---

边框的颜色 border-color

属性值：
可以是命名颜色，也可以是十六进制和 RGB 值。

p {
  border-style: solid;
  border-color: blue rgb(25%,35%,45%) #909090 red;
  }

默认值：

• 默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。
• 如果元素没有任何文本，假设它是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色（因为 color 可以继承）。这个父元素很可能是 body、div 或另一个 table。

值复制：
如果颜色值小于 4 个，值复制就会起作用。例如下面的规则声明了段落的上下边框是蓝色，左右边框是红色(按照top-right-bottom-left 的顺序)：

p {
  border-style: solid;
  border-color: blue red;
  }

定义单边颜色：

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

透明边框transparent：
边框颜色值 transparent。这个值用于创建有宽度的不可见边框。

a:link, a:visited {
  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  }
a:hover {border-color: gray;}

完整例子

• 从某种意义上说，利用 transparent，使用边框就像是额外的内边距一样；此外还有一个好处，就是能在你需要的时候使其可见。这种透明边框相当于内边距，因为元素的背景会延伸到边框区域（如果有可见背景的话）。
• 重要事项：在 IE7 之前，IE/WIN 没有提供对 transparent 的支持。在以前的版本，IE 会根据元素的 color 值来设置边框颜色。

---

圆角border-radius

属性值：
一个或两个长度或百分比，第一个值定义水平半径，第二个值定义垂直半径。

border-radius: 10px; /*使一个框的所有四个角的半径为10px*/

border-top-right-radius: 1em 10%; /*使右上角的水平半径为1em，垂直半径为10％*/

例子:

.box {
  border: 10px solid rebeccapurple;
  border-radius: 1em;
  border-top-right-radius: 10% 30%;
}

<div class="box">
  <h2>Borders</h2>
  <p>Try changing the borders.</p>
</div>

---

列表简写list-style

• 这个属性可以在 <ul> 或 <ol> 或<li>元素上设置。
• 属性值可以任意顺序排列，你可以设置一个，两个或者三个值（该属性的默认值为 disc, none, outside）

  list-style-type的默认值是disc（实心圆）
  list-style-position的默认值是outside（标志出现在列表项内容之外）
  list-style-image的默认值是none

• 只要提供了一个值，其它的就会填入其默认值。如果指定了 type 和 image，如果由于某种原因导致图像无法加载，则 type 将用作回退。

  li {
  list-style : url(example.gif) square inside
  }

---

列表的项目符号的类型list-style-type

• 设置列表的项目符号的类型，例如无序列表的方形或圆形项目符号，或有序列表的数字，字母或罗马数字。
• 取值参考1

• 把无序列表中的列表项标志设置为方块:

  ul {list-style-type : square}

---

图像标志list-style-image

ul li {list-style-image : url(xxx.gif)}

---

列表标志位置list-style-position

• 决定标志出现在列表项内容之外还是内容内部。
• 默认值为 outside。
  

---

设置链接的样式

链接的四种状态：

• a:link - 普通的、未被访问的链接
• a:visited - 用户已访问的链接
• a:hover - 鼠标指针位于链接的上方
• a:active - 链接被点击的时刻

注意：

• a:hover 必须位于 a:link 和 a:visited 之后
• a:active 必须位于 a:hover 之后

举例：

a:link {color:#FF0000;}		/* 未被访问的链接 */
a:visited {color:#00FF00;}	/* 已被访问的链接 */
a:hover {color:#FF00FF;}	/* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}	/* 正在被点击的链接 */

常见的链接样式属性

文本修饰（下划线）text-decoration

• 大多用于去掉链接中的下划线
• underline、none

背景色background-color

• 规定链接的背景色

鼠标光标的样式cursor

• 不应该把这个关掉，除非你有非常好的理由。
• 属性值

文字的轮廓（框）outline

• 轮廓有点像边框，唯一的区别是边框占用了盒模型的空间，而轮廓没有； 它只是设置在背景图片的顶部。
• 语法：

  /* 宽度 | 样式 | 颜色 */
  outline: 1px solid white;

• 取值：
  任意顺序的1~3个属性值。

属性	值
outline-width	关键字（取决于用户代理）：thin/medium/thick 长度：10px/1rem 全局值:inherit
outline-style	关键字：none(默认值);auto; dotted;dashed; solid; double;groove; ridge;inset; outset; 全局值:inherit;initial; unset;

• 例子：

  <head>
  <style>
  a:link {/* 未被访问的链接 */
      background-color:yellow;
      outline: solid #000;/*黑色实线框*/
  }    
  </style>
  </head>
  
  <body>
  <p><b><a href="www.huanglizhu.github.io" target="_blank">点我点我</a></b></p>
  </body>

  

---