首页 > 其他分享 >CSS (常用样式) 笔记05

CSS (常用样式) 笔记05

时间:2024-08-26 12:51:43浏览次数:13  
标签:repeat 颜色 background 05 text 笔记 设置 font CSS

一.字体相关

1.color:设置字体颜色

2.font复合属性:

①font-size 设置字体大小

②font-weight 设置字体粗细

③font-style 设置字体风格 e.g italic斜体 normal正常

3.文本:

①text-decoration 设置文本下划线(通常使用none值来消除超链接a的下划线)

②text-align 规定文本水平对齐方式(left向左,center居中,right靠右)

③line-height 设置行距

二. 背景相关

1.background复合属性

①background-color 设置颜色

②background-image: url("路径")设置背景为图片

(图片: object-fit:cover ;控制图片不变形)

【注:如果同时设置背景颜色和背景图片,背景图片会覆盖背景颜色】

③background-repeat 设置图片平铺 repeat平铺 no-repeat不平铺  repeat-x 只横向平铺  repeat-y纵向平铺

④background-size 控制背景图片大小 cover 表示铺满

⑤background-position 设置图片位置  e.g center居中

⑥background-attachment: fixed 设置图片内容不随滑动而变动

div{
    width:500px;
    height:1000px;
    font-weight:100px;
    font-style:italic;
    text-decoration: none;  
     /* 下划线无 */
    text-align: left;
    line-height: normal;  
    background-attachment: fixed; 
    /* 图片背景固定 */
    background-image:url(002.jpg) ;
    /* 导入图片背景 */
    background-size: cover;
    object-fit:cover;
   /* 全铺 */
    cursor: pointer;
   /* 防止图片变形 */
}

三.  颜色相关

1.用颜色名表示 :e.g red,blue,green;(表示范围小)

2.#+六位十六进制的数据表示颜色: #000000~#ffffff (两位一体分别表示红绿蓝三原色)

(即:每个颜色取值范围为:0~255)

【注:当表示#aabbcc等两位一体相同时,可简写为#abc】

3.rgb(red,green,blue)  取值范围为 :0~255  e.g rgb(20,40,50)

{特殊使用:【ctrl】+【alt】+【a】进入提取色块,按【c】提取色块}

4.rgba(red,green,blue,alpha)   alpha取值范围0~1,表示透明度(单代表颜色的透明度)

5.opacity 透明度 取值范围0~1 (表示背景的透明度,包括字体等)

6.background: linear-gradient(方向,颜色,颜色) 背景渐变

【注:background: linear-gradient(方向,颜色,颜色,transparent) 表示逐渐融入环境】

四. 其他样式

1. 列表 

li{
    list-style: none;
    /* 去除列表格式 */
}

2.border边框

 border-radius: 0 px; /* 取0无圆角 */
/* 指定边跨圆角的半径,半径越大,圆角程度越大 */

[注:以左上角开始顺时针旋转,可以结合上下左右单独对某一个角使用,e.g border-top-left-radius]

3. 阴影

①盒子阴影

boxshadow: 0px 0px 0px #000000; 
/* (水平位置,垂直位置,模糊度,阴影颜色) */

②文字阴影:text-shadow(类同盒子阴影)

③鼠标样式

div{
 cursor:pointer;
/* 箭头变小手 */ 
}

标签:repeat,颜色,background,05,text,笔记,设置,font,CSS
From: https://blog.csdn.net/m0_74977981/article/details/141560757

相关文章

  • 网站提示505 HTTP Version Not Supported:服务器不支持请求的HTTP版本怎么办
    当遇到“505HTTPVersionNotSupported”错误时,这意味着服务器不支持客户端请求中使用的HTTP版本。这种情况通常发生在客户端尝试使用较新的HTTP版本,而服务器仅支持老版本的协议时。解决方案检查客户端使用的HTTP版本确认客户端使用的HTTP版本。如果客户端使用的是HTTP/......
  • 网站提示405 Method Not Allowed:请求行中指定的请求方法不被允许怎么办
    当网站提示 405MethodNotAllowed 时,这意味着服务器理解了您的请求,但是拒绝了请求中指定的HTTP方法(如GET、POST、PUT等)。这通常是因为服务器被配置为仅接受特定类型的请求方法,而您使用的请求方法不在允许的范围内。以下是解决 405MethodNotAllowed 错误的一些常见方......
  • 谷粒商城实战笔记-259-商城业务-消息队列-可靠投递-发送端确认
    文章目录一,确认机制简介二,ConfirmCallback三,returnCallback事务消息的问题一,确认机制简介RabbitMQ的消息确认机制主要包括以下几种:发布者确认(PublisherConfirm):在发布者和代理之间建立一个确认协议。当发布者发送一条消息到代理时,代理会返回一个确认信息给发布者......
  • 谷粒商城实战笔记-260-商城业务-消息队列-可靠投递-消费端确认
    文章目录一,Ack消息确认机制简介1,简介2,两个常用的Api二,消费者端消息确认实战三,RabbitMQ可靠性保障总结1,生产者2,消费者一,Ack消息确认机制简介消费者端的确认机制(ACK/NACK)是RabbitMQ中一种重要的特性,它允许消费者告知Broker它们是否成功处理了接收到的......
  • LeetCode刷题笔记8.19-8.24
    LeetCode刷题笔记8.19-8.2476.最小覆盖子串(8.19)算法常见技巧——滑动窗口滑动窗口即维护一个窗口(特定数据结构),来替代暴力遍历子结构这种“笨办法”窗口所涉及到的元素由left和right两个指针选定,选定范围从(left,right]开始,随着right指针向后遍历,寻找符合题意的某个可行解......
  • 《数据资产管理核心技术与应用》读书笔记-第五章:数据服务(二)
    《数据资产管理核心技术与应用》是清华大学出版社出版的一本图书,全书共分10章,第1章主要让读者认识数据资产,了解数据资产相关的基础概念,以及数据资产的发展情况。第2~8章主要介绍大数据时代数据资产管理所涉及的核心技术,内容包括元数据的采集与存储、数据血缘、数据质量、数据监控与......
  • 05 自回归积分滑动平均模型 (ARIMA)
    1、基本介绍自回归积分滑动平均模型(ARIMA)是一种常用的时间序列预测模型,能够处理非平稳的时间序列数据。ARIMA模型的基本思想是通过对时间序列数据进行差分操作,使其变得平稳,然后使用自回归(AR)和移动平均(MA)模型来进行预测。2、ARIMA模型的组成ARIMA模型由三个主要部分组成:......
  • B站宋红康JAVA基础视频教程个人笔记chapter08-09(异常处理+多线程)
    文章目录1.异常处理方式1:try-catch-finally2.异常处理方式1:throws3.程序,进程,线程的区别4.线程的创建4.1线程的创建方式1:4.2线程的创建方式2:5.线程类的常用方法和生命周期5.1线程的生命周期jdk5之前6.线程的安全问题和同步机制6.线程之间的通信6.1为什么需要线程之间......
  • Web API 学习笔记 第四弹
    1.时间戳获取时间戳的方法①date.getTime()②+newDate()2.定时器console.log(111)setTimeout(()=>{console.log(222)},1000)console.log(333)console.log(111)setTimeout(()=>{console.log(222)},0)console.log(333)这两段代码打印结果分......
  • CMake构建学习笔记6-giflib库的构建
    前面构建的zlib、libpng、libjpeg和libtiff都提供了CMakeList.txt文件,因此都可以通过CMake进行构建。不过有的依赖库是并没有CMakeList.txt文件,也就是官方没有提供CMake的构建方式,例如本篇要说的GIFLIB。GIFLIB是一个开源的C库,用于处理GIF(图形交换格式)图像文件。GIFLIB是个典型的......