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需要的时候自动加

你可能感兴趣的:(前端)