加上最近在大佬的建议下搭个人博客,于是把自己的笔记整理了一下,捣鼓捣鼓,发点文章 心中的雷区 每次做项目写样式的时候,写到某些可以简写的属性,我仍然分开着去写,我当然知道简写的好处,但是我也有些害怕又去调试这种错误...因为要做勇士,就不能害怕黑暗,我们要主动出击 ---- 属性简写的作用 官方文档上面是这么说的 通常建议使用简写属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少...当你的项目中开始在项目中使用简写属性的时候,久而久之,会给你的样式文件减少很多的体积 而且更加雅观,更加整洁。...---- 常用有什么属性可以简写 我查了查,常用的一些简写属性大概是这些,如果有什么补充的,可以留言告诉我 margin、padding border、border-radius transition...background font list-style 下面我们以一个八拍的形式来说明一下这些属性的简写用法 ---- background /* backgroud:color image repeat
3transition-propertytransition-property 规定应用过渡效果的 CSS 属性的名称。(当规定的 CSS 属性改变时,过渡效果将开始)。...3 列表 元素描述版本liststylelist-style 简写属性在一个声明中规定所有的列表属性。...1list-style-typelist-style-type 属性规定列表项标记的类型。...1list-style-positionlist-style-position属性指示如何相对于对象的内容绘制列表项标记。...1list-style-imagelist-style-image 属性使用图像来替换列表项的标记。
一、CSS3 动画属性 1、CSS3 常见动画属性简介 CSS3 中动画使用 @keyframes 关键字 定义 动画 ; @keyframes element-move { 0% { transform...动画属性简写方式 ---- 1、CSS3 动画属性简写语法 CSS3 动画属性简写 语法 : animation: 动画名称 持续时间 运动曲线 开始时间 播放次数 播放方向 结束状态; animation...: name duration timing-function delay iteration-count direction fill-mode; 上述简写的各个属性之间 , 使用空格隔开 ; 动画属性中..., 除了 animation-play-state 属性之外 , 其它动画属性都可以简写到 animation 属性中 ; animation-play-state 属性 控制 动画开始暂停 , 一般需要根据代码逻辑单独控制...alternate backwards; 4、代码示例 - CSS3 动画属性简写示例 代码示例 : <!
列表属性 1.list-style-type 设置列表前缀样式,通常设置为none,去掉前缀 语法:list-style-type:none 示意图 ?...2.list-style-image 将列表前缀设置为自定义图片 语法:list-style-image:url(图片路径) 示意图 ?...应用场景:通常在网页中,使用的列表都是要去除前面的符号,并且去除左边和上边的空间,所以,样式如下: ul{ list-style:none; padding:0; margin:
在开发中背景属性 background 还是很常用的, background 有很多属性,如 background-color 背景颜色、 background-image 背景图像、 background-position...当然这些属性可以分开写,也可以连写(简写),规则(顺序)如下: background:color img_url repeat attachment position / size 颜色 图片地址 重复...声明:本文由w3h5原创,转载请注明出处:《CSS3背景图片background属性简写/连写》 https://www.w3h5.com/post/370.html
-- 简写 --> 这里三个值: export default { data
如下图是360浏览器主页的内容,上边有导航,下边是新闻列表,这种布局很常见,今天就来学习css列表属性之后并制作它。 列表属性 html有三种类型的列表:无序列表,有序列表和自定义列表。...设置列表标记有序号,圆点,圆圈,图片等多种形式。 list-style:简写属性,用于把下边三个属性声明到一起。...list-style-type : 属性指定列表项标记的类型(实心圆、空心圆、方框等)。 list-style-position : 设置列表中标记项的相对位置。...list-style-position的属性值 inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐。 outside:默认值,保持标记位于文本的左侧。...代码示例: /* list-style简写设置它的三个属性值 */ list-style: square inside url("bg.jpg") ; /* 等同于下边的样式 */ list-style-type
文章目录 一、背景简写 1、语法说明 2、代码示例 一、背景简写 ---- 1、语法说明 使用 CSS 样式设置 盒子 背景时 , 需要 设置多个 CSS 样式 , 设置 背景图片 , 平铺模式 ,...scroll; } 类似于 文本样式的字样样式综合写法 方式 , 选择器 { font:font-style font-weight font-size/line-height font-family;} CSS...背景也可以进行进行简写 , 语法格式如下 : background: pink url(image.jpg) no-repeat scroll center top ; background 属性值的...各种背景样式属性的顺序 没有进行强制定义 , 这里 建议按照如下顺序进行编写 : 背景颜色 背景图片 背景平铺 背景滚动 背景位置 2、代码示例 核心代码 : /* 背景简写方式 */ background... 背景简写测试 背景简写测试 显示效果 : 滚动后效果 :
CSS背景缩写、简写 不太会这个,到网上搜了下,发现写的都不中意,就想到自己写一个出来 背景共有8个属性: background-color 背景颜色 background-position...底部详细说明 */ background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-image 背景图像 background 简写属性...简写顺序: background:background-color background-image background-repeat background-attachment background-position...; 其余三个background-size,background-origin,background-clip是要单独写的 简写实例: body { background: #00FF00...是透明度, 例如: “ rgba(0,0,0,0.5) ” 半透明黑色背景 经常有人问能不能给背景颜色设置透明度,我也有过同样的想法 在这里普及一下,截止目前为止(2020-9-2),还没有准确的属性值可以改变背景图片的透明度
定义 列表(List)属性是一些适用于列表元素的CSS属性。...概述 列表属性允许定义列表标志的类型(list-style-type属性),如无序的原点、方框,有序的数字、字母,甚至是自定义的任意图像,以及列表标志的位置(list-style-position属性)...列表 元素 描述 liststyle list-style 简写属性在一个声明中规定所有的列表属性。...list-style-type list-style-type 属性规定列表项标记的类型。...list-style-image list-style-image 属性使用图像来替换列表项的标记。 变更点 CSS3没有增加新的列表属性。
我们知道 css 我们知道 css 作用是美化 HTML 网页和控制页面布局的,接下来我们来学习一下经常使用一些样式属性。1....布局常用样式属性width 设置元素(标签)的宽度,如:width:100px;height 设置元素(标签)的高度,如:height:200px;background 设置元素背景色或者背景图片,如:...文本常用样式属性color 设置文字的颜色,如: color:red;font-size 设置文字的大小,如:font-size:12px;font-family 设置文字的字体,如:font-family...小结设置不同的样式属性会呈现不同网页的显示效果样式属性的表现形式是: 属性名:属性值;作用是美化 HTML 网页和控制页面布局的,接下来我们来学习一下经常使用一些样式属性。1....小结设置不同的样式属性会呈现不同网页的显示效果样式属性的表现形式是: 属性名:属性值;
在HTML入门教程中,有序列表和无序列表的列表项符号都是使用type属性来定义的。我们先来回顾一下。...li>有序列表项 表2 无序列表type属性 type属性值 列表项的序号类型 disc 默认值,实心圆“●” circle 空心圆“○” square...实心正方形“■” 二、CSS中定义列表项符号 type属性来定义列表项符号,那是在元素属性中定义的。...但是我们之前说过,标签和样式是应该分离的,那在CSS中怎么定义列表项符号呢? 在CSS中,不管是有序列表还是无序列表,都统一使用list-style-type属性来定义列表项符号。...在CSS中,我们可以使用list-style-image属性来自定义列表项符号。
html> css...在CSS中,我们可以使用border-collapse属性来去除单元格之间的空隙。 语法: border-collapse:属性值; 说明: border-collapse是表格独有的属性。...border-collapse属性取值如下: 表1 border-collapse属性取值 border-collapse属性值 说明 separate 默认值,边框分开,不合并 collapse...DOCTYPE html> border-collapse属性 css"> table,th,td{border:1px solid gray;} table{border-collapse
颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如: red 还有rgba(255,0,0,0.3...background-repeat: no-repeat; 背景位置 /*背景位置*/ background-position: right 20px top 20px ; 支持简写...#i1 { border-width: 2px; border-style: solid; border-color: red; } 通常使用简写方式: #i1 { border: 2px...六、css盒子模型 margin: 用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的。...,第二个用于左-右; 如果提供三个,第一个用于上,第二个用于左-右,第三个用于下; 提供四个参数值,将按上-右-下-左的顺序作用于四边; 九、float浮动 在 CSS 中,任何元素都可以浮动。
背景属性 1.1 背景颜色 如果背景一直都是一成不变的,对于一个网页还是挺无趣的,为了让背景更加的生动,可以修改它的颜色。...总结 css的背景属性对于提高网页美观是非常重要的。 往期文章:前端
属性解释 background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: background-color...设置背景图片如何重复平铺 background-position 设置背景图片的位置 background-attachment 设置背景图片是固定还是随着页面滚动条滚动 实际应用中,我们可以用background属性将上面所有的设置项放在一起...写完上来几个属性,如果每个都要单独写的话就比较费劲,下面介绍一下如何生成一行。...简写 background 属性示例 “background:cyan url(bg.jpg) repeat-x”,横向平铺盒子,盒子其他部分显示背景颜色“cyan”。 ? 简写如下: ?
CSS 层叠式样式表 从审美的角度负责页面样式。 JS JavaScript 从交互的角度描述页面行为。...css整体感知 css是cascading style sheet 层叠式样式表的简写。“层叠式”的意思,我们将慢慢的去理解。...后面的课程你将知道,css也可以写在单独的文件里面,现在我们先写在style标签里面 1css”> type表示“类型” , text就是“纯文本”...css也是纯文本的。 css对换行不敏感,对空格也不敏感。但是一定要有标准的语法。冒号,分号都不能省略。...CSS常见属性 字符颜色: 1color:red; color属性的值,可以是英语单词,比如red、blue、yellow等等;也可以是rgb、十六进制,不要着急,后几天讲。
text-align:水平对齐方式 text-align属性用于设置文本内容的水平对齐,相当于html中的align对齐属性。...其可用属性值如下: left:左对齐(默认值) right:右对齐 center:居中对齐 text-indent:首行缩进 text-indent属性用于设置首行文本的缩进,其属性值可为不同单位的数值...其属性值可为不同单位的数值,允许使用负值,默认为normal。 word-spacing:单词间距 word-spacing属性用于定义英文单词之间的间距,对中文字符无效。...颜色半透明(css3) 文字颜色到了CSS3我们可以采取半透明的格式了语法格式如下: color: rgba(r,g,b,a) a 是alpha 透明的意思 取值范围 0~1之间 color...: rgba(0,0,0,0.3) 文字阴影(CSS3) Shadow 影子 text-shadow:水平位置 垂直位置 模糊距离 阴影颜色; ?
boder-style, border-width, border-color outline 表格 border-spacing, border-collapse, empty-cells 列表...其他 border-radius cursor filter will-change -webkit-overflow-scrolling :设置为 touch 滚动会带惯性 更多 -webkit- CSS...CSS参考手册 CSS 属性 按字母排序 CSS的未来:一些试验性CSS属性