Java Web Day03_CSS样式

一、超级链接伪类

<a href=”#”>超级链接

a:link 未点击前
a:hover 鼠标悬停
a:active 鼠标正在点击（左键按着不放）
a:visited 点击后

加载顺序一般我们是按照：link -> visited -> hover -> active
列表样式

list-style 列表样式 none | disc | decimal | square | circle
list-style-type 列表样式none | decimal
list-style-image 为列表设置图片样式等价于disc
list-style-position 设置列表属性的位置 insade(在li之内) | outside (在li之外)

二、网页背景

background-color 背景颜色
background-image: url() 设置背景图片
background-repeat(设置背景重复方式): no-repeat(不重复) | repeat-x(横向重复) | repeat-y(纵向重复)
background-position(背景定位)：

三、x轴 y轴 颜色渐变

• 水平方式(left center right px像素) 垂直方式(top center bottom px像素)
  X轴百分比 y轴百分比
  background-size(设置背景的尺寸): auto | cover | contain | percentage(x像素 y像素)
• 线性渐变
  background-image: linear-gradient(控制方向,颜色1,颜色2,颜色3……)
  控制方向：to left | to right | to top | to bottom | 40deg(代表多少度)
• 径向渐变
  background-image:radial-gradient(颜色1,颜色2,颜色3……)

四、盒子模型

HTML里的所有标签（元素）都是一个平面结构、由立体结构组成。这称为盒子模型
盒子模型的三要素
border 边框
margin 外边距
padding 内边距

• 使用经验：结合left | right | top | bottom 来控制
  border-width: 边框粗细（thin | medium | thick | px）
  border-style: 边框风格（solid(细线) | dashed(虚线) | dotted(点线) | double(双实线)）
  border-color: 边框颜色

• margin实现网页居中：
  margin: 0px auto;
  margin-left: auto;
  margin-right: auto;

五、盒子三要素

参数都遵循顺时针方向： 上 右 下 左 | 上下 左右
margin: 可以为负数 如： margin-top: -10px;
padding: 不可以为负数
盒子计算（box-sizing）
box-sizing:
content-box
border-box

1、 content-box含义：

content-box默认，盒子设置width属性之后，内容的宽度就等于width属性，
实际的宽度=border + padding + width

2、 border-box含义：

盒子设置width属性后，实际的宽度等于width。如果设置border | padding 它自动的将内容的width减缩。
实际的宽度=width
圆角边框
border-radius: 百分比 | 像素
给左上盒子设置圆角边框
border-top-left-radius: 50%;
盒子阴影
box-shadow: 盒子阴影类型 x轴阴影偏移量 y轴阴影偏移量 阴影模糊半径 颜色;
盒子阴影类型: inset(向内)
box-shadow: inset 0px 0px 5px blue;