博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS的常用属性(一)
阅读量:4842 次
发布时间:2019-06-11

本文共 1669 字,大约阅读时间需要 5 分钟。

文本属性

font-size: 16px 文字大小

font-weight: 700 文字粗细 值从100-900 (值为700看上去加粗了) 不推荐使用font-weight: bold

font-family: microsoft yahei 字体(可以用中文如:宋体,或者英文:如simsun,或用unicode编码:如\5B8B\4F53)

font-style: normal 文字风格(如:normal是默认, italic:斜体)

line-height: 20px 行高

文本属性连写:font: font-style font-weight font-size/line-height font-family (最好按照顺序)

注意:文本属性连写时文字大小和字体为必写项,其他可以不写

line-height

行高: 是基线和基线之间的距离(自行百度什么是基线)

注意: 一行文字的行高和其设置的height属性高度一致时,文字垂直居中

行高的单位有以下几个(推荐使用px为单位):

行高单位 文字大小 行高值
px(如 20px) 20px 20px
em(如 2em) 20px 40px
%(如 150%) 20px 30px
数字(如 2) 20px 40px

 

 

 

 

 

 

 

总结: 单位除了px之外,其余的都是与文字大小的乘积

 

行高单位 父元素文字大小 子元素文字大小 行高值
px(如 10px) 20px 30px 10px
em(如 2em) 20px 30px 40px
%(如 150%) 20px 40px 30px
数字(如 2) 20px 30px 60px

 

 

 

 

 

 

 

 

总结: 不带单位时,行高是与子元素大小相乘;em和%是行高是与父元素大小相乘;以px为单位,就是直接定义行高值(所以推荐使用px为单位)

 

文本修饰

text-decoration: none(默认,a标签使用这个能除去下划线) /  underline(下划线) /  line-through(删除线)

 

背景属性

background-color: #000 背景颜色

background-image: url(路径) 背景图片

background-repeat: repeat 背景平铺   repeat(背景图像将在垂直方向和水平方向重复) /  no-repeat(不平铺) /  repeat-x(沿x轴) /  repeat-y(沿y轴)

background-position: left top 背景定位

注意: 方位值只写一个时,另一个值默认居中;用数字(或百分号%)表示方位时,第一个值代表水平方向,第二个值代表垂直方向

background-attachment:  scroll 背景是否滚动  scroll(默认 滚动) /  fixed(固定)

背景属性连写: background: #fff url(路径) no-repeat 30px 40px fixed

注意: 连写没有顺序要求,但url为必写项

 

链接伪类

a:link { 属性:值;}  链接的默认状态

a:hover { 属性:值; }  鼠标放在链接上显示的状态

a:visited { 属性:值; }  链接访问之后的状态

a:active { 属性:值; }  链接激活的状态(鼠标点击不松)

补充: :focus选择器(用于选取获得焦点的元素)  如 标签:focus { 属性:值; }

 

补充:CSS三大特性

层叠性: 当多个样式作用于同一个标签,样式发生冲突时,总是执行后面的代码(和标签调用选择器的顺序没有关系)

继承性: 文字的所有属性都可以被继承

特殊情况: h系列不能继承文字大小; a标签不能继承文字颜色

优先级: 默认样式<标签样式<类选择器<ID选择器<行内样式< !important

注意: 继承的权重为0,与默认样式一样;权重可以叠加

 

转载于:https://www.cnblogs.com/yushangzuiyue/p/8341939.html

你可能感兴趣的文章
资治通鉴-司马光
查看>>
js拖动效果
查看>>
海信POS机可编程键值定义
查看>>
git
查看>>
2018湘潭大学程序设计竞赛【C】
查看>>
Mybatis的CRUD操作
查看>>
46.纯css实现瀑布流(flex)
查看>>
Jmeter学习过程中遇到的那些坑
查看>>
PHP程序员的技术成长之路规划
查看>>
poj 2887 Big String(块状链表)
查看>>
BZOJ 2002: [Hnoi2010]Bounce 弹飞绵羊(LCT裸题)
查看>>
lintcode-101-删除排序数组中的重复数字 II
查看>>
【BZOJ1925】 [SDOI2010] 地精部落(带有一堆性质的动态规划)
查看>>
python中urllib的urlencode与urldecode
查看>>
JS-基础-01.变量、基本数据类型
查看>>
iOS ---------NSURLSession/NSURLConnection HTTP load failed (kCFStreamErrorDomainSSL, -9813)
查看>>
命名空间“System.Web”中不存在类型或命名空间名称“Optimization”(是否缺少程序集引用?)...
查看>>
Python异常 --Python
查看>>
Struts数据验证
查看>>
第十二章 动态内存
查看>>