css 笔记(二) 常用属性

文章目录

    • 常用属性
      • 字体属性
        • 字体缩进
      • 文本对齐方式属性
      • 文本修饰属性
      • 文本空白字符属性
      • 文本大小写
      • 字符间距
      • 背景属性
    • 写给看到最后的你

常用属性

字体属性

属性 含义
font-fimily 字体类型 : 可以写中文 比如 楷体 但这是不建议的 详细字体可以参考 html 常见字体
font-style 斜体: 常用3个值 normal正常显示 italic文本斜体显示 oblique文本斜体显示
font-size 字体大小: 常用单位 px 像素 em
font-weight 字体粗细: 设置粗体大小 normal默认字体 bold 粗体 number (数字不加px)

复合属性:body { font: font-style font-weight font-size/line-height font-fimily}

字体栈:当无法网字体栈上使用字体的可用性,可以提供一个字体栈 即使所有字体都不可用浏览器还会提供一个合适的选择

使用引号:当字体中存在空格是时候需要使用单引号包含
这里的顺序不可以改变
其他属性可以不加,但是font-size 以及font-famliy必须加

创建自定义字体

@font-face {
      font-family: 'cc';
      src: url('../fonts/cc-webfont.eot');
      src: url('../fonts/cc-webfont.eot?#iefix') format('embedded-opentype'),
           url('../fonts/cc-webfont.woff') format('woff'),
       url('../fonts/pingfang-webfont.ttf') format('truetype'),
       url('../fonts/pingfang-webfont.svg#pingfang') format('svg');
      font-weight: normal;
      font-style: normal;
   }

字体缩进

text-indent:px % em rem

单位 含义
px 像素 绝对大小 设置多大就是多大
% 相对大小 相对于父元素大小
Nem 相对大小 如果自身属性设置了字体大小区本身字体的N * 字体大小 如果没有设置 取父盒子字体大小 N * 字体大小
Nrem 相对大小 取根元素字体大小也就是html字体大小 N * 根元素字体大小

文本对齐方式属性

text-align:属性;

属性 含义
left 默认左
right
center 剧中

文本修饰属性

text-decoration:属性;

属性 含义
none 没有
underline 下划线
line-through 中划线
overline 上划线

文本空白字符属性

white-space:属性;

属性 含义
pre 格式化输出
normal 正常换行
nowrap 不换行 强制一行显示

文本大小写

text-transform:属性;

属性 含义
capitalize 首字母大写
lowercase 全部小写
uppercase 全部大写
none 默认

字符间距

letter-spacing:30px;

背景属性

属性 含义
backgrund-image:url(); 设置图片地址
background-repeat:; 是否平铺 repeat默认平铺 no-repeat 不平铺 repeat-x 在x 方向平铺 repeat-y 在y轴平铺
background-position:; 设置图片位置 可以使用方向 像素 百分比
background-color:; 设置颜色
background-size:; 背景大小, 尺寸(宽,高)px px/% %以背景盒子的宽高作为参考

写给看到最后的你

朋友,感谢你看到了最后,新手报道,技术不成熟的地方请多多指点,感谢!

公众号:Linux下撸python
期待和你再次相遇
愿你学的愉快

在这里插入图片描述

你可能感兴趣的:(css,html,python,java,css3)