Elements

tips:
inline element 加上dispaly:block 可以定义为块状显示
继承性：子元素会继承父级元素的文字相关样式
覆盖性：和选择器的优先级有关
继承的样式<浏览器的默认样式<通用选择器<标签选择器<类选择器

block element常用属性

边框

inline element常用属性

边框

DEMO

一级标题h1{color:pink; font-size:30px; font-family:'Microsoft YaHei',tahoma;font:italic 700 14px "\5FAE\8F6F\96C5\9ED1";}
盒子
span{font-weight:700;font-style:italic;
}
div
.u-seller {display: flex;   #填充方式flex-direction: column;  #填充方向flex-basis: 400px!important;  # 填充宽度
}
id选择器
#btn{***:***
}
通配符选择器
*{color:pink
}
交叉选择器
p.hd {color:blue;font-size:30px;
}
子代选择器
p span{color:blue;font-size:30px; 
}
p .hd {color:blue;font-size:30px;
}
群组选择器
p span,p .hd{color:blue;font-size:30px;
}

Unicode

伪类选择器

DEMO

链接伪类选择器(love hate)
a:link{color:red;font:18px
}a:visited{color:red;font:18px
}a:hover{color:red;font:18px
}a:active{color:red;font:18px
}

DEMO

结构伪类选择器
li:nth-child(n){color:pink;
}li:nth-child(2n){       选择偶数color:skyblue;
}li:nth-child(2n+1){     选择奇数color:deeppink;
}

DEMO

目标伪类选择器
:target {color:red;font-size:13px;
}

CSS颜色

段落字体

盒子模型

Tips:
display:inline 转成行级元素
display:block 转成块级元素
display:inline-block 转成行内块级元素
display:none 隐藏元素
float:left 让块级元素水平排列
overfloat:hidden 溢出隐藏 scroll滚动条 auto需要的时候自动加

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！