关于CSS的那点儿事!

前端看似简单,学起来并不容易,前端发展迅速,一个还没彻底弄懂又发展新的了,于是乎,就特意从基础开始学,这里总结一下关于CSS的,随时补充

part1

  1. 外部样式表插入方式:
    <link href="css文档地址" type="text/css" rel="stylesheet" >

  2. 字间距:letter-spacing(默认2px)
    单词间距:word-spacing
    首行缩进:text-indent:2em

  3. CSS3新增文字阴影属性:
    text-shadow:水平位置 垂直位置 模糊像素 透明色rgba(0,0,0,0.5)0.5表示程度

  4. 块级元素和行内元素区别
    · 块级元素:
    1)总是从新行开始
    2)height,line-height,margin,padding可控
    3)宽度默认为容器100%
    4)可以容纳内联元素和其他块元素
    · 行内元素
    1)和相邻行内元素在一行上
    2)高宽无效,但水平方向的margin,padding可控
    3)默认宽度就是本身内容的宽度
    4)行内元素只能容纳文本或其他行内元素
    · 行内块元素:<img/> <input/> <td>!!可以对他们设置宽,高和对齐属性!!
    1)和相邻行内元素(行内块)在同一行,但之间会有空隙
    2)默认宽度是本身内容宽度
    3)高,行高,margin,padding都可控

  5. 标题下的横线:<hr/>

  6. 网上字常用颜色 #3c3c3c,不是正常黑色

  7. font-weight:normal让标题不加粗

  8. CSS复合选择器:
    1)交集选择器:标签名.类名
    2)并集选择器:p,div,v,h1{ }同时修改这些标签的样式
    3)后代选择器:类名.标签名

  9. a标签中title属性表示鼠标悬停样式
    属性选择器 (标签内的属性)
    a[title=xxx]{}
    a[title*=xxx]{}属性名里包含xxx并且在任意位置
    a[title^=xxx]{}属性名里包含xxx并且在最开始的位置
    a[title$=xxx]{}属性名里包含xxx并且在最结束的位置

  10. 类选择器:.demo
    伪类选择器:first-child
    伪元素选择器:::first-letter 元素::first-line
    first-line>letter所以letter更优先
    虽然先改变首单词,再改变第一行,但是样式却没覆盖CSS&CSS3零碎知识点
    效果如下:CSS&CSS3零碎知识点
    元素::before/after {content:“添加的内容”}
    在盒子内部内容的前或后添加内容

  11. 在同一个盒子加多张图片,但若存在覆盖关系,上面图会盖在下层图上
    background:url(images/1.jpg) no-repeat left top(默认会在左上角),
    url(…/x.jpg) no-repeat right bottom;
    若添加背景色,则背景色在最后图片添加,否则会覆盖

  12. 对字体设置格式为font: 300(粗细) 60px(尺寸) “微软雅黑”

  13. 当盒子仅有一行文字时,设置行高等于块的高度,则文字水平居中

  14. 背景重复background-repeat :repeat(横纵都重复) repeat-x,横向重复 no-repeat 不平铺

  15. 背景附着:当文字出现很多,出现滚动条时,默认背景图片是会滚上去的,background-attachment:scroll/fixed建议背景设置的顺 序为颜色,图片,重复(平铺)与否?,位置,滚动背景半透明background:rgba(0,0,0,0.7)

  16. 插入的图片img 直接用width,height即可若改背景图片则用background-size:100px或者50%(可以设置宽,高但最好只更改一个)

  17. background-size:cover:满足高度和宽度,可自动调整比例,保证图片始终充满背景,如有溢出部分则被隐藏!!用的频率多一点 contain:保证图片完整显示,也是等比例缩放,如果图片高度或者宽有一个和盒子一样大了,就不缩放了,但会有部分背景色露出

  18. border:粗细(border-width:1px)样式(默认是none) 颜色
    border-collapse:collapse 合并边框
    圆角边框:border-radius:10px(圆半径四个角) ;两个值则表示左上和右下,左下和右上;如果设置的是盒子宽高的一半“50%”就会变成圆形

  19. nav标签是H5新增语义标签,表示包围导航栏部分

  20. 链接务必要转换为行内块元素,否则链接为行内元素不能设置大小,要让链接字数不同也有相同间隔,则需要不设置width仅仅设置高和padding

  21. 外边距实现盒子居中对齐有两个条件:1)块级元素2)已经设置了宽度。margin:随意 auto;

相关文章: