zoukankan      html  css  js  c++  java
  • CSS的常用属性(一)

    文本属性

    font-size: 16px 文字大小

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

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

    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,与默认样式一样;权重可以叠加

  • 相关阅读:
    webkit浏览器常见开发问题
    解密H264、AAC硬件解码的关键扩展数据处理
    Bitmap那些事之内存占用计算和加载注意事项
    android apk 防止反编译技术第三篇-加密
    linux设备驱动第五篇:驱动中的并发与竟态
    如何简单快速调试高大上的谷歌浏览器
    Asp.net Mvc对比Php的4大误解
    Python初学记录
    SQL循环+游标
    Nico Game Studio 3.地图纹理编辑 物体皮肤编辑
  • 原文地址:https://www.cnblogs.com/yushangzuiyue/p/8341939.html
Copyright © 2011-2022 走看看