网站icp申请,桂林象鼻山门票多少钱,faq插件 wordpress,wordpress容易被黑吗css常用属性 1. css颜色表示方式1.1 颜色名1.2 rgb 和 rgba1.3 hex 和 hexa1.4 hsl 和 hsla 2. css 常用属性2.1 常用的文本属性2.2 常用的列表属性2.3 常用的边框属性2.4 表格独有属性2.5 常用的背景属性2.6 常用的鼠标属性 1. css颜色表示方式
1.1 颜色名
在css中定义了一些… css常用属性 1. css颜色表示方式1.1 颜色名1.2 rgb 和 rgba1.3 hex 和 hexa1.4 hsl 和 hsla 2. css 常用属性2.1 常用的文本属性2.2 常用的列表属性2.3 常用的边框属性2.4 表格独有属性2.5 常用的背景属性2.6 常用的鼠标属性 1. css颜色表示方式
1.1 颜色名
在css中定义了一些颜色名可以直接使用颜色名来表示颜色。
选择器 {color: red;
}点击跳转到mdn查看css支持的颜色名
1.2 rgb 和 rgba
/* 红、绿、蓝 */
选择器 {color: rgb(186, 186, 186);
}/* 红、绿、蓝、透明度 */
选择器 {color: rgba(186, 186, 186, 0.5);
}1.3 hex 和 hexa
/* 1-2位代表红范围是00-ff*/
/* 3-4位代表绿范围是00-ff*/
/* 5-6位代表蓝范围是00-ff*/
选择器 {color: #000000;
}/* 7-8位代表透明度范围是00-ff*/
选择器 {color: #00000011;
}1.4 hsl 和 hsla
/* 色相0deg 360deg*/
/* 饱和度0100% */
/* 亮度0100% */
选择器 {color: hsl(色相, 饱和度, 亮度);
}/* 透明度0100% */
选择器 {color: hsla(色相, 饱和度, 亮度, 透明度);
}2. css 常用属性
2.1 常用的文本属性 font-size文字大小 font-family字体族 font-style字体风格 font-weight字体粗细取值 100-1000 color字体颜色 letter-spacing字符间距一个中文就是一个字符 word-spacing单词间距 text-decoration文本装饰 /* 划线位置overline上划线、line-through中划线、underline下划线、none不加装饰 */
/* 划线类型dotted虚线、wavy波浪线 */
/* 划线颜色支持所有颜色表示方式 */
选择器 {text-decoration: 划线位置 划线类型 划线颜色;
}text-align文本水平对齐 line-height行高 vertical-align同一行元素之间或表格单元格内文字的垂直对齐方式 /* baseline使元素的基线与父元素的基线对齐 */
/* top使元素的顶部与其所在行的顶部对齐 */
/* middle使元素的中部与父元素的基线加上父元素字母x的一半对齐 */
/* bottom使元素的底部与其所在行的底部对齐 */
/* 不能控制块元素 */
选择器 {vertical-align: 划线位置 划线类型 划线颜色;
}text-shadow文本阴影 htmlstyle.outer {width: 500px;height: 500px;background-color: gold;/* 参数一水平阴影的位置必填 *//* 参数二垂直阴影的位置必填 *//* 参数三模糊距离可选 *//* 参数四阴影的颜色可选 */box-shadow: 10px 10px 10px red;}/stylediv classouter/div
/htmlwhite-space文本换行方式 text-overflow文本溢出 htmlstyle.outer {width: 100px;background-color: aqua;/* 文本不换行 */white-space: nowrap;/* 溢出的用...代替 */text-overflow: ellipsis;/* text-overflow 需要设置这个属性才有效 */overflow: hidden;}/stylediv classouterhello world hello world hello world hello world hello world hello world/div
/html2.2 常用的列表属性
list-style-type指定类别的符号类型list-style-position列表的符号位置list-style-image采用指定的图片作为列表符号
2.3 常用的边框属性
border-width边框的宽度border-color边框的颜色border-style边框的线条类型border-radius: 边框的圆角半径
2.4 表格独有属性
table-layout控制表格的列宽border-spacing控制单元格的间距border-collapse合并相邻单元格的边框empty-cells隐藏没有内容的单元格caption-side设置标题的位置
2.5 常用的背景属性 background-color设置背景色 background-image设置背景图 background-repeat设置背景图片重复的方式 background-positon设置背景图片的位置 backgorund-origin设置背景图的原点 选择器 {/* 从 padding 区域开始显示背景图默认值*/backgorund-origin: padding-box;/* 从 context 区域开始显示背景图 */backgorund-origin: content-box;/* 从 border 区域开始显示背景图 */backgorund-origin: border-box;
}backgroud-clip设置背景的向外剪裁的区域 选择器 {/* 从 border 区域外开始剪裁默认值 */background-clip: border-box;/* 从 padding 区域外开始剪裁 */background-clip: padding-box;/* 从 content 区域外开始剪裁 */background-clip: content-box;/* 背景只呈现在文字上text 为实验性需要加前缀 */background-clip: text;
}background-size设置背景图的大小 选择器 {/* 通过长度指定背景图的大小 */background-size: 100px 100px;/* 通过百分比指定背景图的大小相对于父元素 */background-size: 100% 100%;/* auto默认值背景图的真实大小 */background-size: auto;/* contain将背景图等比例缩放当图片的宽高比与父元素的宽高比不一样时会出现没有背景图的区域 */background-size: contain;/* cover将背景图等比例缩放当图片的宽高比与父元素的宽高比不一样时会出现背景图显示不完整 */background-size: cover;
}多背景图 选择器 {background: url(/path) no-repeat left top, url(/path) no-repeat righttop, url(/path) no-repeat left bottom, url(/path) no-repeat rightbottom;
}2.6 常用的鼠标属性
cusor设置鼠标光标的样式
ps博文中是常用的css属性更完整的css属性使用可以访问mdn网站。 https://developer.mozilla.org/zh-CN/
