Java Web Day03_CSS样式

发布时间:2023年12月19日

一、超级链接伪类

<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;

文章来源:https://blog.csdn.net/weixin_64646820/article/details/135069901
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。