css笔记之样式 -凯发k8官方网
总结一下css样式,做如下的笔记。
css样式
1.背景
background-color 背景色
可以接受任何合法的颜色值,其默认值是 transparent(透明)
background-image 背景图像
如body {background-image: ;},默认值是 none
background-repeat 背景重复
repeat-x(x轴方向)、repeat-y(y轴方向)、no-repeat(不平铺)
background-position 背景定位
可以接受关键字(top、bottom、left、right 和 center),接受长度(100px 或 5cm),可以接受百分比(50%)
background-attachment 背景关联
可以接受值:fixed 估计背景图片,使得不随页面进行滚动,默认值为 scroll,是指随着页面进行滚动
2.文本
text-indent 缩进文本
可以接受长度,百分比 且可以被继承,子标签可以继承父标签的该属性。
text-align 水平对齐
可以接受关键字 left、right、center、justify、nherit 其中left是默认属性
text-align:center与center标签的区别,其中center标签不仅影响文本,还会把整个元素全部居中,而text-align:center只会影响文本。
word-spacing 字间隔
改变字(单词)之间的标准间隔,其默认值normal 与设置值为 0 是一样的。
可以接受一个正长度值(间隔增加)或一个负长度值(拉近距离)。
letter-spacing 字母间隔
可以接受任何长度值,与word-spacing的区别在于,字母间隔修改的是字符或字母之间的间隔,同样默认值normal与设置为0是一样的
text-transform 字符转换
接受的关键字为 none、uppercase、lowercase、capitalize,其中none是不做改动,capitalize只对每个单词的首字母大写
text-decoration 文本装饰
接受的关键字为none、underline、overline、line-through、blink(会让文字闪烁,不常用)
white-space 处理空白符
可以接受下面的关键字
3.字体
font-family 定义文本的字体系列
有两种不同类型的字体系列 1.通用字体(拥有相似外观的字体系列) 2.特定字体(具体的字体),其中通用字体定义了5中类型(serif 字体、sans-serif 字体、monospace 字体、cursive 字体、fantasy 字体)
font-style 字体风格
可以接受3个值(normal - 文本正常显示、italic - 文本斜体显示、oblique - 文本倾斜显示)
font-variant 设置小型大写字母(采用不同大小的大写字母)
可以接受3个值 1.normal(默认值)、2.small-caps(显示小型大写字母)3.inherit(使用父元素的font-variant)
font-weight 字体加粗
可以接受1.normal(默认值,相当于400)2.bold(相当于700)3.bolder(定义更粗的字符。)4.lighter(定义更细的字符)5.100~900(定义由粗到细的字符)6.inherit(继承父元素的属性)
font-size 字体大小
font-size值可以是绝对或相对值
可以通过像素来设置字体的大小
通过像素设置文本大小,可以对文本大小进行完全控制(在ie中,使用该方法会有问题)
使用 em 来设置字体大小
1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素,那么对于该元素,1em 就等于 16 像素。在设置字体大小时,em 的值会相对于父元素的字体大小改变。
4.链接
链接有如下4种状态,其中需要注意的是a:hover 必须位于 a:link 和 a:visited 之后;a:active 必须位于 a:hover 之后
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻
链接,主要从text-decoration(文本修饰)、background-color(背景色)、color(颜色)、font(字体)等方面进行样式设置
5.表格
border-collapse 为表格设置合并边框模型 接受如下的值
border-spacing 属性设置相邻单元格的边框间的距离(仅用于“边框分离”模式),接受如下的值
caption-side 设置表格标题的位置 可以接受如下的值
empty-cells 设置是否显示表格中的空单元格 可以接受如下的值
table-layout 显示表格单元格、行、列的算法规则 可以接受如下的值
6.列表
list-style 简写属性,把所有的列表属性都放在一起。
list-style-image 将图象设置为列表项标志
可以接受值 url(图像的路径)、none(默认值)、inherit(从父元素继承)
list-style-position 设置列表中列表项标志的位置
可以接受值 inside、outside(默认值)、inherit(继承父元素) 其中inside表示为列表项目标记放置在文本以内,且环绕文本根据标记对齐
list-style-type 设置列表项标志的类型 可以接受disc(默认 实心圆)、circle(空心圆)、none(无标识)等。
7.轮廓
outline 在一个声明中设置所有的轮廓属性
可以接受如下的值 outline-color(边框的颜色)、outline-style(边框的样式)、outline-width(边框的宽度)、inherit(继承父元素)
outline-color 轮廓的颜色
可以接受各种颜色属性
outline-style 轮廓的样式 可以接受如下的值
outline-width 轮廓的宽度
可以接受的值 thin(细轮廓)、medium(默认,中等的轮廓)、thick(粗的轮廓)、length(规定轮廓粗细的值)、inherit(继承父类)
转载于:https://www.cnblogs.com/nash-test/p/4704794.html
总结
- 上一篇: 部队文职招聘咨询电话
- 下一篇: doom 规律 大数