前端视频CSS基础总结:

  • 内联样式就这样写就好了,不用加test/css什么了。
  • div用处之一:把div的样式改了,里面内容的样式也会改。
  • 一个完整的站点一般的目录:
  • 外联式最大的优点:售后好,只用改一个css,所有引用它的页面都改了。
  • 选择器::选择标签用的。
  • 多个类名情况:与元素中类名先后顺序无关,与css样式中的顺序有关
  • 定义id主要是为了js所用。
  • 通配符电脑上有两个,一个是*代表所有 一个是?代码一个字符的意思,电脑自带的,但是通配符CSS中只有* ,几乎不用
  • 前端视频CSS基础总结:_第1张图片
  • 前端视频CSS基础总结:_第2张图片
  • 谷歌浏览器默认16px 微软雅黑
  • font-size属性:字体大小
  • font-weight属性:normal=400 bold=700 bolder lighter 100-900 字体粗细,css无语义   建议设置数字,解析快 b和strong标签
  • font-style属性:normal italic oblique斜体或正常,无语义  主要用normal来给i和em做恢复正常字体用比如em{font-style:normal;}
  • 字体连写:选择器{font:font-style font-weight font-size/line-height font-family;} h1{400 25px "宋体"};
  • 注意:不可以换顺序,不需要设置的可以忽略,但font-size和font-family必须要有。常用:font:12px "微软雅黑";
  • line-height:行间距 行高 px(常用) em % 一般设置成比字号大7 8 个像素左右
  • text-align:left right center文本内容水平对齐方式=HTML属性中的align 给h1居中是指里面内容居中,而不是h1 哦
  • text-indent:2pm 首行缩进 1em就是一个字宽 可以用其它的单位
  • text-decoration:none underline=ins标签(有语义) overline lint-through=s/del标签   通常用于给链接设置
  • F12调试代码,左边为HTML,右边为css会提示第几行出错,还可以设置颜色等,只不过单纯为了测试的有个插件,设置时实际页面也会改。拖动左上角的控件到元素上,可以检查错误,还可以测试手机界面。比如font-size值,可以按住上箭头,增大。测试方便。
  • 后代选择器div p     ul  li 
  • 子代选择器(亲儿子)    div>p    ul  li>a
  • 交集选择器:div.red=====既是div 又是red 使用较少
  • 并集选择器:div,p,span{color:red;}
  • 伪类选择器:添加特殊效果或选择特定的第1/n个元素
  • 链接伪类选择器:link未访问   :visited已访问过的    :hover鼠标经过    :active鼠标按下的  顺序要有 lvha(lv抱抱hao)真正开发一般只用hover
  • 显示模式:display:block/inline/inline-block;
  • block可以设置宽高对齐,
  • inline宽高无效,垂直发方向无效,水平可以margin padding inline可以容纳文本或其他行内元素 (a除外)
  • inline-block行内块元素,可以放在一行,但中间有缝隙,高度行高内外边距都可以设置
  • text-align在a中设置是让文字居中,div中设置让全部的a居中。
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • 小技巧:不建议使用_来为选择器命名。用- 因为js也有下划线,用下划线一般是为js来准备的。
  • div>p按下tab键,即:

     延伸:ul>li>ul>li 就会是几个的嵌套
  • 比较好看的黑色:#3C3C3C 或者 #333

你可能感兴趣的:(css)