四、HTML+CSS

懒洋洋大魔王

已于 2024-09-03 09:01:21 修改

阅读量1.1k

点赞数 7

分类专栏： HTML 文章标签： html css 前端

于 2024-09-03 08:57:07 首次发布

本文链接：https://blog.csdn.net/QAZ412803/article/details/141845951

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、字体样式

font-family 字体类型
font-size 字体大小
    px像素
    em根据容器字体大小改变（em*父级字体大小px）可以有小数点
    rem根据根元素字体大小改变（rem*根元素字体大小px）根元素：就像html里<html>标签一样是最根本的元素
font-style 字体风格（倾斜）
font-weight 字体粗细
简写：
font：风格 粗细 大小 类型    （大小，类型按顺序写，必须写）

二、文本样式

color 文本颜色
      单词，十六进制，rgb,rgba(透明度从0-1)
/*color:rgb(0,0,0,);        color:rgba(0,0,0,0）最后一个是透明度，可以小数点*/
text-align 内容是水平移动（在块级元素中生效）
        left左（默认）  right右 center居中
line-height 设置行高
text-decor ation 文本装饰
    none 默认，不要下划线
    underline 下划线
    overline 上划线
    line-through 删除线 （也可以使用del标签）
vertical-align 垂直对齐方式
    vertical-align 属性：middle居中、top上、bottom下
text-shadow 文字阴影
    color颜色 x-offset坐标 y-offset坐标 blur-radius模糊程度;

三、伪类样式

a:link 未单击访问时超链接样式 a:link{color:#9ef5f9;}

a:visited 单击访问后超链接样式 a:visited {color:#333;}

a:hover 鼠标悬浮其上的超链接样式 a:hover{color:#ff7300;}

a:active 鼠标单击未释放的超链接样式 a:active {color:#999;}

设置伪类的顺序：a:link->a:visited->a:hover->a:active

四、列表样式

list-style：none 去除UL或OL前缀（就是li的小圆点）

五、背景样式

1.背景颜色

badckgrond-color

2.背景图片

background-image背景图片 url路径

background-repeat是否平铺

repeat：沿水平和垂直两个方向平铺

no-repeat：不平铺，即只显示一次

repeat-x：只沿水平方向平铺

repeat-y：只沿垂直方向平铺

background-position图像位移

background-pssition:x y 
水平方向的关键词：
left、center、right
垂直方向的关键词
top、center、bottom

background简写背景颜色背景图像路径背景位置是否平铺

background-size图像大小（简写不能包括图像大小）

auto    默认值，使用背景图片保持原样
percentage  当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的
cover   整个背景图片放大填充了整个元素
contain 让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域
使用百分比%

background：linear-gradient背景颜色渐变

background:lineargradient(方向，颜色,颜色....)
background：-webkit-linear-gradient（left top，颜色,颜色....）

IE浏览器是Trident内核，加前缀：-ms-

Chrome浏览器是Webkit内核，加前缀：-webkit-

Safari浏览器是Webkit内核，加前缀：-webkit-

Opera浏览器是Blink内核，加前缀：-o-

Firefox浏览器是Mozilla内核，加前缀：-moz-

当然可以截图然后用背景图片平铺直接有效果