WEB前端CSS学习笔记

Elements

Elements	Attributes
block element	div h1~h6 p table ul ol li dl dt dd
inline element	span a strong u em
changeable element	applet(Java Applet) button del iframe ins map object script
行内块级元素	img 表单

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

block element常用属性

边框

属性	例子
border	10px solid #6699cc 四边框 粗细 实虚 颜色
weight	10px solid
heght	10px solid

inline element常用属性

边框

属性	例子
border	10px solid/dotted/dashed #6699cc 四边框 粗细 实虚 颜色 border-top border-left border-right border-bottom
weight	10px solid
heght	10px solid

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

字体名称	英文名称	Unicode
宋体	SimSun	\5B8B\4F53
新宋体	NSimSun	\65B0\5B8B\4F53
黑体	SimHei	\9ED1\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼圆	YouYuan	\5E7C\5706
华文细黑	STXihei	\534E\6587\7EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

伪类选择器

伪类选择器名称	英文名称
链接伪类选择器	:link 未访问 :visited 已访问 :hover 鼠标移动 :active 已选择
结构伪类选择器	:first-child 第一个 :last-child 最后一个 :nth-child(n) 第n个 …
目标伪类选择器	:target 当前目标

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颜色

颜色的方式	例子
预定义	red green blue pink purple deeppink skyblue
十六进制	FF0000，#FF6600
RGB	rgb(255,0,0) < === >rgb(100%,0%,0%,a) rgba(255,0,0,0.5) a透明度

段落字体

属性	例子
text-align	text-align:center 文字水平
text-indent	text-indent:2em 首行缩紧2个汉字
line-height	line-height:30px 行间距
letter-spacing	letter-spacing:30px 字间距
word-spacing	word-spacing:30px 单词间距
font-weight	font-weight:400 normal 700加粗
text-decoration	text-decoration:overline上划线 underline上划线 line-through 删除线 none取消修饰

盒子模型

属性	例子
padding	内边距 padding-top padding-right padding-bottom padding-left 顺时针方向
margin	外边距 margin-top margin-right margin-bottom margin-left 左右可叠加 上下取最大
全局代码重置reset	*{padding:0 margin:0} margin:100px auto块级元素水平居中

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