常用CSS样式及属性代码

常用CSS样式及属性代码

  • 前言
  • 1.常用css样式
    • 1.1. 背景属性:background
    • 1.2. 字体属性:font
    • 1.3. 边框属性:Border
    • 1.4. 盒子属性:Box
    • 1.5. 列表属性:List-style
    • 1.6. 定位属性:Position
    • 1.7. 区块属性:Block
  • 2.常用css属性代码
    • 2.1. 文字属性设置
    • 2.2. 边框空白设置
    • 2.3. 背景样式设置
    • 2.4. 指定背景位置
    • 2.5. 符号属性设置
    • 2.6. 链接属性设置
    • 2.7. 边框线属性设置
    • 2.8. 其他边框线属性设置
    • 2.9. 边界样式设置
  • 3.其他
    • 3.1. button按钮样式的4种状态
    • 3.2. flex弹性布局
    • 3.3. justify-content
    • 3.4. initial

前言

  • 微信小程序的样式与css样式基本一致。
  • 常用css样式:背景、字体、边框、盒子、列表、定位、区块
  • 常用css属性:背景样式、文字属性、边界样式、边框空白、符号属性、连接属性、表单运用、框线一览表

1.常用css样式

1.1. 背景属性:background

色彩:{background-color: #FFFFFF;} 白色
图片:{background-image: url();}
重复:{background-repeat: no-repeat;}
滚动:{background-attachment: fixed;} (固定) scroll;(滚动)
位置:{background-position: left;} (水平) top(垂直);
简写方式:{background: #000 url(…) repeat fixed left top;} /阅读代码中常出现简写方式/

1.2. 字体属性:font

大小:{font-size: x-large;}(特大) xx-small;(极小),单位:PX、PD
样式:{font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)
行高:{line-height: normal;}(正常) 单位:PX、PD、EM
粗细:{font-weight: bold;}(粗体) lighter;(细体) normal;(正常)
变体:{font-variant: small-caps;}(小型大写字母) normal;
大小写:{font-transform: capitalize;}(首字母大写) uppercase;lowercase;none;
修饰:{text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
常用字体:{font-family: “Microsoft YaHei”;}(微软雅黑), “MicrosoftJhengHei”(华文细黑)

1.3. 边框属性:Border

边框样式:{border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;}
边框宽度:{border-width: 1px;}
边框颜色:{border-color: #ccc;}
边框圆角:{border-radius: 10px;}(圆角半径)
简写方式:{border: width style color;}

1.4. 盒子属性:Box

box-sizing:border-box的作用:
想要清楚这个属性的作用,首先要理解盒子模型,盒子模型是指:外边距(margin)+ 边框(border)+ 内边距(padding)+ 内容(content),可以把每一个容器,比如div,都看作是一个盒子模型。
比如给一个DIV设置了宽高为500px,实际上只设置了content,之后我们又设置了边框和内边距(padding:10px;border:1px solid red;),那么最终这个元素的宽高就是544px(500px + 40px + 4px),就是说一个元素的实际宽高是由 border + padding + content 组成。
如果没有设置box-sizing:border-box属性,元素的宽高会加上border和padding,那么为了不超过给定的宽高,需要我们手动去计算减去相应的border和padding值,如果设置了box-sizing:border-box属性,盒子模型就会自动调整content的值,不需要手动调整。

1.5. 列表属性:List-style

类型:{list-style-type: disc;}(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗马数字) upper-roman;(大罗马数字) lower-alpha; upper-alpha;
位置:{list-style-position: outside;}(外) inside;
图像:{list-style-image: url(…);}

1.6. 定位属性:Position

position-relative; 相对定位
position-absolute; 绝对定位
position-static; 默认定位,使元素定位于常规流(自然流)中,且忽略任何top、bottom、left或right声明
visibility: hidden; 将元素隐藏,但在页面中该占的位置还是占着。
display: none; 将元素显示设为无,且在页面中不占任何的位置。
visibility: inherit; 继承上一个父对象的可见性。
visibility: visible; 对象可视
overflow属性规定当内容溢出时的处理方式:
overflow: visible; 不裁剪超出盒子的部份
overflow: hidden; 将超出盒子部份的内容隐藏
overflow: scroll; x轴和y轴都有滚动条
overflow-x: scroll; x轴强制出现滚动条
overflow-y: scroll; y轴强制出现滚动条
overflow: auto; 自动判断是否出现滚动条
overflow: inherit; 从父元素继承overflow的属性
clip裁剪绝对定位元素
clip 属性允许定义一个元素的可见尺寸,当一幅图像的尺寸大于包含此元素时,此图像就会被修剪并显示为这个元素定义的形状。
position: absolute;
clip: rect(0px,165px,200px,34px) (裁切)
clip:rect(0px,165px,200px,34px)中的0px,165px,200px,34px分别对应图片的上,右,下,左四个方位 ;clip:rect()需要配合position属性使用,才能对图像进行裁剪。
注意:
● 如果先有"overflow:visible"定义了元素,clip属性就不起作用。
● css中的clip:rect()只能在绝对定位的元素上使用,包括fixed属性的元素,因为fixed也算绝对定位

1.7. 区块属性:Block

对齐:{text-align: justify;}(两端对齐) left; right; center;
垂直对齐:{vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;
字间距:{letter-spacing: normal | length | inherit ;} normal: 相当于0,length: 数值可为负数
词间距:{word-spacing: normal | length | inherit ;}
缩进:{text-indent: 数值px;}
空格:{white-space: pre;}(保留) nowrap;(不换行)
显示:{display: block;}(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记)

2.常用css属性代码

2.1. 文字属性设置

color : #999999; /文字颜色/
font-family : 宋体,sans-serif; /文字字体/
font-size : 9pt; /文字大小/
font-style:itelic; /文字斜体/
font-variant:small-caps; /小字体/
letter-spacing : 1pt; /字间距离/
line-height : 200%; /设置行高/
font-weight:bold; /文字粗体/
vertical-align:sub; /下标字/
vertical-align:super; /上标字/
text-decoration:line-through; /加删除线/
text-decoration: overline; /加顶线/
text-decoration:underline; /加下划线/
text-decoration:none; /删除链接下划线/
text-transform : capitalize; /首字大写/
text-transform : uppercase; /英文大写/
text-transform : lowercase; /英文小写/
text-align:right; /文字右对齐/
text-align:left; /文字左对齐/
text-align:center; /文字居中对齐/
text-align:justify; /文字分散对齐/
vertical-align 属性
vertical-align:top; /垂直向上对齐/
vertical-align:bottom; /垂直向下对齐/
vertical-align:middle; /垂直居中对齐/
vertical-align:text-top; /文字垂直向上对齐/
vertical-align:text-bottom; /文字垂直向下对齐/

2.2. 边框空白设置

padding-top:10px; /上边框留空白/
padding-left:10px; /左边框留空白/
padding-bottom:10px; /下边框留空白/
padding-right:10px; /右边框留空白/

2.3. 背景样式设置

background-color:#F5E2EC; /背景颜色/
background:transparent; /透视背景/
background-image : url(/image/bg.gif); /背景图片/
background-attachment : fixed; /浮水印固定背景/
background-repeat : no-repeat; /不重复排列/
background-repeat : repeat; /重复排列-网页默认/
background-repeat : repeat-x; /在x轴重复排列/
background-repeat : repeat-y; /在y轴重复排列/

2.4. 指定背景位置

background-position : top; /向上对齐/
background-position : left; /向左对齐/
background-position : buttom; /向下对齐/
background-position : right; /向右对齐/
background-position : center; /居中对齐/
background-position : 90% 90%; /背景图片x与y轴的位置/

2.5. 符号属性设置

list-style-type:none; /不编号/
list-style-type:decimal; /阿拉伯数字/
list-style-type:lower-alpha; /小写英文字母/
list-style-type:upper-alpha; /大写英文字母/
list-style-type:lower-roman; /小写罗马数字/
list-style-type:upper-roman; /大写罗马数字/
list-style-type:disc; /实心圆形符号/
list-style-type:circle; /空心圆形符号/
list-style-type:square; /实心方形符号/
list-style-image:url(/dot.gif); /图片式符号/
list-style-position: outside; /凸排/
list-style-position:inside; /缩进/

2.6. 链接属性设置

a /所有超链接/
a:link /超链接文字格式/
a:visited /浏览过的链接文字格式/
a:active /按下链接的格式/
a:hover /鼠标转到链接/

2.7. 边框线属性设置

border-top-color : #369 /设置上框线top颜色/
border-top-width :1px /设置上框线top宽度/
border-top-style : solid/设置上框线top样式/
可使用简写方式如下:
border-top : 1px solid #6699cc; /上框线/
border-bottom : 1px solid #6699cc; /下框线/
border-left : 1px solid #6699cc; /左框线/
border-right : 1px solid #6699cc; /右框线/

2.8. 其他边框线属性设置

solid /实线框/
dotted /虚线框/
double /双线框/
groove /立体内凸框/
ridge /立体浮雕框/
inset /凹框/
outset /凸框/

2.9. 边界样式设置

margin-top:10px; /上边界/
margin-right:10px; /右边界值/
margin-bottom:10px; /下边界值/
margin-left:10px; /左边界值/

3.其他

3.1. button按钮样式的4种状态

  1. 普通状态
  2. hover 鼠标悬停状态
  3. active 点击状态(按下弹起)
  4. focus 取得焦点状态(按下不弹起)
    .btn:focus{outline:0;}:可以去除按钮或a标签点击后的蓝色边框

3.2. flex弹性布局

display:flex 意思是弹性布局,是css中常用的一种布局手段,可以使元素具有弹性,让页面中的元素随着页面大小的改变而改变。
以下几个属性都是加在父元素身上:

  1. flex-directory:row 布局排列方向
    row: 默认值,按行排列,水平方向从左至右
    row-reverse: 按行排列,水平方向从右至左
    column: 按列排列,方向为垂直方向从上至下
    column-reverse: 按列排列,方向为垂直方向从下至上
  2. flex-wrap:nowrap 是否换行处理
    nowrap: 默认值,不换行处理
    wrap: 换行处理
    wrap-reverse: 反向换行
    flex-flow: flex-directory flex-wrap 复合写法,顺序一定不能乱
  3. align-items: 每一行中子元素的上下对齐方式
    center: 居中对齐

3.3. justify-content

justify-content属性用于描述弹性盒子容器的对齐方式。它包含沿着分布在浏览器中的 flex 容器的主轴的内容项之间和周围的空间。
注意:此属性不能用于沿垂直轴描述项目或容器。为了垂直对齐项目,我们可以使用align-items 属性
在应用了 lengths 和 auto margins 属性后,对齐是可能的,即,如果在Flexbox 布局中至少有一个具有flex-grow 属性而不是 0 的灵活元素,那么它不会影响并且有任何影响不会有任何可用空间。
句法:

justify-content: flex-start|flex-end|center|space-between|
space-around|space-evenly|initial|inherit;

属性值:
flex-start:它是用于从容器开始对齐弹性项目的默认值。
句法:

justify-content: flex-start;

flex-end:用于对齐容器末端的弹性项目。
句法:

justify-content: flex-end;

justify-content:space-between:指两端对齐,项目之间的间隔都相等

3.4. initial

initial 关键字用于设置CSS属性为它的默认值,可作用于任何CSS样式(IE不支持该关键字)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/22453.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

springboot整合mongodb如何通过事务保障数据的完整性

在Spring Boot中整合MongoDB并利用事务来保障数据的完整性与一致性,主要是通过Spring Data MongoDB和MongoDB自身的事务支持来实现的。以下是详细的步骤和说明: 1. 确保MongoDB版本和支持 确保你的MongoDB服务器版本在4.0及以上,因为MongoD…

让你的博客实现负载均衡

零、缘起 有时候博客突然挂了,发现服务器厂商出了问题,很忧伤,我正在写着或查阅自家博客那种不可xx的内容。这时想着,如果这个博客有负载均衡就好了,空了想着实现下。 一分钟了解负载均衡的一切 选择第二种【反向代…

python_04

37、列表推导式 # 作用:快速生成列表 # 列表变量名 [x for x in range(开始值,结束值,步长) if 条件] # 注意:左闭右开 list1 [i for i in range(0,100)] print(list1) # list1 [i for i in range(0,100)] # print(list1)list…

MoE 大模型的前世今生

节前,我们星球组织了一场算法岗技术&面试讨论会,邀请了一些互联网大厂朋友、参加社招和校招面试的同学。 针对算法岗技术趋势、大模型落地项目经验分享、新手如何入门算法岗、该如何准备、面试常考点分享等热门话题进行了深入的讨论。 合集&#x…

Vue3整合Tailwindcss之padding样式类

04 常用基础样式 padding 样式类 什么是内边距 基础样式 ClassPropertiesp-0padding: 0px;px-0padding-left: 0px; padding-right: 0px;py-0padding-top: 0px; padding-bottom: 0px;ps-0padding-inline-start: 0px;pe-0padding-inline-end: 0px;pt-0padding-top: 0px;pr-0pa…

kafka-生产者监听器(SpringBoot整合Kafka)

文章目录 1、生产者监听器1.1、创建生产者监听器1.2、发送消息测试1.3、使用Java代码创建主题分区副本1.4、application.yml配置----v1版1.5、屏蔽 kafka debug 日志 logback.xml1.6、引入spring-kafka依赖1.7、控制台日志 1、生产者监听器 1.1、创建生产者监听器 package co…

图片批量纵向拼接神器:轻松插入间隔像素,生成真彩绚丽长图,让你的创意无限延伸!

在数字艺术的世界里,图片拼接早已不再是简单的组合,而是创意与技术的融合。如果你正在寻找一款能够快速将图片进行纵向拼接,并且能轻松插入间隔像素,同时保证色彩绚丽的神器,那么,我们首助编辑高手的长图拼…

如何实现单例模式及不同实现方法分析-设计模式

这是 一道面试常考题:(经常会在面试中让手写一下) 什么是单例模式 【问什么是单例模式时,不要答非所问,给出单例模式有两种类型之类的回答,要围绕单例模式的定义去展开。】 单例模式是指在内存中只会创建…

React 中的 ForwardRef的使用

React 中的 forwardRef Hooks 是指将子组件的 Dom 节点暴露给给父组件,在 React 中如果想要访问 Dom 节点是通过 useRef 这个 hooks,而 forwardHook 在 useRef 做了扩展。useRef 是当前组件中间中的节点,而 forwardRef 相当于做了一层封装将父…

springAOP 使用aop代替SqlsessionUtil业务层操作

在Maven框架pom配置文件中导入spring相关依赖&#xff1a; <dependencies><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.33</version></dependency><dependency…

【前端每日基础】day36——vue组件的通信方式

在Vue.js中&#xff0c;组件通信是一个重要的概念&#xff0c;它允许组件之间进行数据传递和事件处理。Vue.js提供了多种方式来实现组件之间的通信&#xff0c;适用于不同的场景和需求。以下是Vue组件通信的几种常见方式及其详细介绍&#xff1a; 父子组件通信 父组件向子组件…

6、资产评估专家指引第9号—数据资产评估

本专家指引是一种专家建议。评估机构执行资产评估业务,可以参照本专家指引,也可以根据具体情况采用其他适当的做法。中国资产评估协会将根据业务发展,对本专家指引进行更新。 第一章 引言 第一条 针对数据资产特点,结合目前实际操作中的部分难点和要点,中国资产评估协会…

mac配置Personal Access Tokens

背景 在macbook环境中&#xff0c;使用idea、android studio、xcode时&#xff0c;使用gitlab需要登录&#xff0c;而直接使用文明密码是不允许登录的&#xff0c;这时就需要换种方式&#xff0c;这里有两种&#xff1a;ssh、Access Tokens&#xff0c;在公用电脑上推荐使用Ac…

第一个SpringBoot项目

目录 &#x1f4ad;1、新建New Project IDEA2023版本创建Sping项目只能勾选17和21&#xff0c;却无法使用Java8&#xff1f;&#x1f31f; 2、下载JDK 17&#x1f31f; &#x1f4ad;2、项目创建成功界面 1、目录 &#x1f31f; 2、pom文件&#x1f31f; &#x1f4ad;3、…

前K个高频元素-力扣

本题想到的解法是使用哈希表首先统计数组中每个元素出现的次数&#xff0c;然后对出现次数进行排序&#xff0c;最后进行输出。看了题解学习到使用优先级队列 小顶堆来完成&#xff0c;小顶堆的排序规则由自己来定义。 代码如下&#xff1a; class Solution { public:class My…

ctfshow 年CTF web

除夕 Notice: Undefined index: year in /var/www/html/index.php on line 16 <?phpinclude "flag.php";$year $_GET[year];if($year2022 && $year1!2023){echo $flag; }else{highlight_file(__FILE__); } 弱比较绕过很简单&#xff0c;连函数都没有直…

代码随想录算法训练营Day59 | 503.下一个更大元素II 42. 接雨水

代码随想录算法训练营Day59 | 503.下一个更大元素II 42. 接雨水 LeetCode 503.下一个更大元素II 题目链接&#xff1a;LeetCode 503.下一个更大元素II 思路&#xff1a; class Solution { public:vector<int> nextGreaterElements(vector<int>& nums) {// …

【数据分享】中国民政统计年鉴(1949-2022)

大家好&#xff01;今天我要向大家介绍一份重要的中国民政统计数据资源——《中国民政统计年鉴》。这份年鉴涵盖了从1949年到2022年中国民政统计全面数据&#xff0c;并提供限时免费下载。&#xff08;无需分享朋友圈即可获取&#xff09; 数据介绍 从1949年到2022年&#xf…

程序员的职业素养

在当今这个快速发展的技术世界中&#xff0c;程序员的职业素养已经成为了一个热门话题。随着技术的不断进步&#xff0c;程序员不仅需要掌握强大的技术能力&#xff0c;更需要具备一系列的职业素养来确保他们能够在职业生涯中取得成功。 《程序员的职业素养》一书由著名的软件工…

云原生架构案例分析_4.某电商业务云原生改造

名称解释&#xff1a; AHAS&#xff1a;应用高可用服务&#xff08;Application High Availability Service&#xff09;是一款专注于提高应用高可用能力的SaaS产品&#xff0c;主要包含多活容灾、故障演练和流量防护三个独立的功能模块。其中流量防护已迁移至微服务治理服务MS…