CSS HTML | 青训营

86 阅读2分钟

pseudo-classes 伪类选择器(元素自身

a:link a:hover a:first-child

pseuso-elements 伪类元素(元素内容

p::first line p::first-letter p::before

HTML 中
<! doctype html>代表html版本,使用特定的渲染模式

DOM文档对象模型
DOM树是把html代码分为树形的结构
image.png

html列表

  • 无序列表
        有序列表
        标题+列表型标签

        input标签

        其中的type属性有:range number date checkbox radio(单选,前提是name属性相同) 提供选择选项

        多行代码可以用pre code标签包起来
        strong和em标签强调的内容不同

        HTML语义化指的是 HTML中的元素,属性,属性值都拥有含义
        在写代码的时候,避免大篇幅的使用无语义的标签。
        好处:代码可读性,可维护性,搜索引擎优化,提高无障碍性


        CSS

        包在*里的可以将不可继承属性变为可继承属性

        初始值:CSS中每一个属性都有一个初始值

        比如background-color的初始值为transparent等等

        content-box
        image.png
        border-box
        image.png

        标签选择器 全局生效 覆盖广 类选择器 伪类选择器 用来选择特定状态元素 a:hover 伪元素选择器 .a::before 给元素内部 开头或结尾添加内容 属性选择器 包含该属性的所有元素或者该属性被赋为某值的元素 通配选择器 * 页面所有元素

        组合选择器 A B代表A类中的B A> B代表A的直接子元素B AB代表既是A又是B的元素 A,B 代表分别选中A和B A+B选择A下一个相邻的元素B A~B选择A相邻的所有的B

        CSS选择器的优先级

        !important > 内联样式 > 选择器设置样式

        浏览器默认样式 > 来自继承的样式
        优先级相同 则前面覆盖后面

        继承属性:设置后自动继承给后代元素
        • color、 font-size、font-family、line-height ...
        • 非继承属性:只对当前元素生效
        • border、background、margin、padding、display ...

        font-size
        • font-size: 20px; 中文最小12px;
        • font-size: 2em; 设置为来自继承的font-size的2倍
        • font-size: 2rem; 设置为html根节点(默认16px)font-size的2倍
        除了font-size 其他有关字体的属性若用到2em均是此时当前属性的字体大小的两倍

        margin collapse

        上下两div(上定义有margin-bottom, 下有margin-top): 叠加取较大的margin值

        margin collapse发生在父元素和子元素之间,前提是垂直边距间不存在padding(内边距)和边框。所以可以通过增加padding属性,或边框,防止叠加。