CSS

CSS作用

层叠样式表
作用:美化页面

引用方式

  • 内联样式:标签上
  • 内部样式:style标签内
  • 外部样式:src属性:地址 rel属性:类型
<link href="" rel="stylesheet" />
  • 引用优先级:就近原则(!important 强制改变样式 (一般测试用)

选择器

  • 引用优先级:特殊性原则
    id>class>标签>*
  • 后代选择器:标签之间加
    • 空格:所有后代(下级标签、下下级标签...)
    • :只选儿子(下级标签)

  • 结构选择器:div:nth-child(1) 选择第一个div标签
  • body>div:nth-child(3) p:nth-child(2) 选择body下第三个div下所有的第二个p标签
  • 兄弟选择器:
    • + 下一个兄弟
    • ~ 所有兄弟
  • 交集选择器 div.a: 既是div,class又是a
  • 属性选择器
    • [href]{}:标签属性中有href属性的标签
    • [hrdf$=html] 以html结尾的 *包含 ^开头
  • 伪类选择器:
    • div:nth-child 是第二个元素,并且是div
    • div:nth-of-type(2) 第二个div
    • li:last-of-type 最后一个类型为li
    • :after伪类,添加一个空元素,清除浮动
    • .a:after

属性

文本属性:

text-align: 水平位置
line-height:100px 垂直居中(和行高一致)
text-lndent: 20px 缩进
text-decoration: none 下划线
font: italic bold 20px/40px 仿宋
字体风格 粗细 大小/行高 类型

背景图片:

background:url() 120px 0px no-repeat
图片背景: 地址 坐标 不重复
background-size: 图片大小 背景渐变

盒子模型:div

margin 外边距 padding 内边距
float:left
clear:left 清除左浮动 both都清了
display:none 隐藏标签
display:block 块级元素显示
标准文档流
溢出处理(eg:图片溢出div空间)
overflow:hidden; 隐藏
visible:可见 scroll滚动条
div英文溢出:word-wrap:break-word
box-sizing:border-box 盒子大小不变,使用padding位置不变
content-box; 内容盒子 (默认)
boder-radius:10px 圆角

定位属性:position

  • flxed:固定定位 自身不占,相对左上角
  • relative:相对的 自身占位置,相对自身
  • absolute:绝对定位 自身不占,已经定位的最近父级元素
  • z-index z轴
  • opacity:透明度

特殊字符:

&lt:小于 &gt:大于 &nbsp:空格
&quot:双引号 &copy:版权 hearts:红桃

锚伪类:

a标签

  • a:link 访问前
  • a:visited:访问后
  • hover:鼠标浮动样式
  • active:点击不松开

焦点

  • input:focus 焦点 onblur 失去焦点

排除

  • ul li:not(#a) 根据id、class、结构等排除

CSS动画

平移:transform:translate(5px,5px);
旋转:transform:rotate(20deg);
缩放:transform:scale(1.5);
CSS过度:transition:all 3s;

设置动画:@keyframes name{0%{} 100%{}}
引用动画:animation:name 3s forwards infinite alternate;
动画名 播放时间 播放后的状态 播放次数(5) 交替播放

posted @ 2022-06-10 19:55  chahune  阅读(21)  评论(0)    收藏  举报