CSS
选择器
*
全部选择器*{}
标签选择器
div{}
ID选择器
#divId{}
类选择器(class)
具有同样样式的使用类,需要重复使用的.divClass{}
符合选择器
后代选择器:ul li 使用空格(嵌套)
交集选择器:直接连接(第一个选择器必须是标签选择器 标签+class 符合这两个条件的),且的关系(JQuery的交集选择器中第一个选择器没有要求)
并集选择器:使用逗号
- 伪类选择器
p:first
[class*="col-"]
选择所有类名中含有”col-“的元素[class^="col-"]
选择所有类名中以”col-“开头的元素[class$="-col"]
选择所有类名中以”-col”结尾的元素- 优先级
ID选择器优先级 高于 类选择器
类选择器 高于 标签选择器
常用属性
background:
background-color:
颜色background-image:
url(“”)
背景图片可以有多个-重叠效果,用’,’连接background-repeat:
no-repeat/repeat-x/repeat-y/
背景图片的重复background-position:
bottom/center/top/left/right
背景图片位置background-attachment:
fixed/scroll
背景图片固定/随页面滚动background-size:
100% 100% / 100px 100px
背景图片大小background-origin:
padding-box/border-box/content-box对齐方式,边框对齐/内容对齐
background-origin 属性规定 background-position 属性相对于什么位置来定位。
注释:如果背景图像的 background-attachment 属性为 “fixed”,则该属性没有效果。background-clip:
padding-box/border-box/content-box
背景绘制区域,背景图片修剪(包含padding区域/包含border区域/不包含border和padding区域)padding:
数值(上下,左右) 标签内部留白margin:
数值 与外层元素边距
ul-li
list-style-image:
url(“”)list-atyle-position:
inside/outside
列表项目符号的位置(默认outside)list-style-type:
工程中项目符号一般用背景图片
font
font-size:
字体大小(单位 px em)font-style:
normal/italic/oblique
字体样式(正常 倾斜)font-width:
bold/bolder/lighter/数值
字体粗细(加粗400/更粗700/细)font-family:
字体类型
text
color:
red/#ff0000/rgb(r,g,b)/rgba(r,g,b,a)
字体颜色(英文单词/十六进制数/rgb(0-255)/rgba(红,绿,蓝,透明度)text-align:
left/right/center/justify
文本对齐方式(左/右/居中/两端对齐)text-indent:
首行缩进(单位 em/px)lin-height:
文本的行高text-decoration:
none/underline/overline/line-through/blink
文本装饰vertical-align:
文本垂直对齐方式,图文混排,属性加在图片上word-spacing:
单词间距letter-spacing:
字间距,字母间间距white-space:
nowrap 换行text-shadow:
文字阴影
border
border-style:
solid/double/dotted/dashed/grove/ridge/inset/outset
边框线样式(实线/双线/点线/虚线/3D沟槽/脊边框)border-top-style:
border-radius:
圆角(左上,右上,右下,左下)box-shadow:
盒子阴影(inset内部阴影)border-color:
border-width:
(上右下左)(上下,左右)- border-img:url() 30 30 30 30 round;
使用该样式时,border-style必须存在
(上,右,下,左)切割大小
显示/隐藏
- display:block/inline/none;
显示为块级元素/显示为行内元素(内联元素)/不显示 - visibility:visible/hidden;
可视/隐藏
用diaplay隐藏时,元素会消失在文档流中,不保留原本位置(二级导航)。而用visibility隐藏时,只是不显示该元素,元素原本位置会保留
超出部分显示…
white-space:nowarp; 不换行
overflow:hidden; 超出部分隐藏
teat-overflow:ellipsis; 超出部分省略
盒子模型
- Margin(外边距) - 清除边框区域。Margin没有背景颜色,它是完全透明
- Border(边框) - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
- Padding(内边距) - 清除内容周围的区域。会受到框中填充的背景颜色影响
- Content(内容) - 盒子的内容,显示文本和图像
轮廓线—outline
轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用,同border一样,有宽度,颜色,样式。但是outline的宽度不占盒子宽度,不会影响布局。
- opacity:0-1;透明度
- cursor:pointer;光标样式:手指
总结
CSS布局
display显示
- visibility:hidden 隐藏元素,但是元素仍然占据空间并影响布局。
- display:none 隐藏元素,并从布局中删除元素。
position定位
float浮动
column列布局(瀑布流)
- column-count:设置列数
- column-gap:指定列间距
- column-rule:列规则,包括宽度、样式、颜色
- column-rule-style:样式
- column-rule-color:颜色
- column-rule-width:宽度
响应式布局
max-width:480px 当最大宽度为480px时(即屏幕宽度小于480px时)的布局
min-width:768px 当最小宽度为768px时(即屏幕宽度大于768px时)的布局
@media only screen and (max-width:480px){
}
picture-source 实现响应式图片
1234567<picture><source media="(max-width:480px)" srcset="img/480x320.gif"><source media="(max-width:640px)" srcset="img/640x427.gif"><source media="(max-width:720px)" srcset="img/720x480.gif"><source media="(max-width:900px)" srcset="img/900x600.gif"><img src="img/900x600.gif"/></picture>img-srcset实现响应式图片
123456<img sizes="(min-width:900px) 900px,100vw"srcset="img/480x320.gif 480w,img/640x427.gif 640w,img/720x480.gif 720w,img/900x600.gif 900w"src="img/480x320.gif"
box-sizing
- box-sizing: content-box|border-box|inherit:
content-box:这是CSS2.1指定的宽度和高度的行为。指定元素的宽度和高度(最小/最大属性)适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外
border-box:并排放置两个带边框的框,这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中
javascript:https://github.com/zhubangbang/zhubangbang-javascript-notes
https://github.com/lin-xin/blog
Adroid:https://github.com/zhujun2730/Android-Learning-Resources