手机版 欢迎访问it开发者社区(www.mfbz.cn)网站

当前位置: > 开发

CSS3学习笔记(很详细)

时间:2021/5/30 15:55:27|来源:|点击: 次

web发展历史

  • ajax在当前页面加载数据
  • HTML5 更新了部分方法和标签
  • CSS3 3是版本号 是CSS2的升级版

css3兼容

  • blink内核 大部分国产浏览器最新版
  • -webkit-兼容Chrome和Safari (以chorme浏览器为主)
  • -moz-兼容Firefox
  • -ms-兼容IE
  • -o-兼容opera

css3新增选择器

选择器

  • 元素选择器
  • 通配选择器 * 选定所有对象 eg:给所有对象的颜色设置为红色
*{
	color:red;
}
  • 类型选择器E 选定特定类型的元素
p{
 font-size:20px;
 }
  • ID选择器 E#id 选择具有id属性且值为attr的元素
p#content{
	dont-size=20px;
	}
<p id="content">正文</p>
  • 类选择器 E.class
.title {
	font-size: 20px;
}
<h1 class="title">标题</h1>
  • 多类选择器
.content.note {
	font-size: 30px;
}
<p class="content note">多类选择符的使用</p>
  • 关系选择器

  • 相邻选择符 E+F

  • 兄弟选择符 E~F

  • 包含选择符 E F

  • 子类选择符 E>F

  • 属性选择器

  • E[attr]E 元素 attr属性

  • E[attr=‘val’] 选择带有attr属性并且值为val的元素

  • E[attr~=‘val’]选择具有attr属性并且属性的值符合val的元素

  • E[attr^=‘val’]选择具有attr属性并且属性值以val开头的元素

  • E[attr$=‘val’]选择具有attr属性并且属性值以val结尾的元素,属性有多个值,要求最后一个属性值以val截止

  • E[attr*=‘val’]选择带有attr属性并且属性值里包含val的元素

  • E[attr|=‘val’]选择必须以attr开头,或者以attr开头的并且用连接符-隔开的元素eg. attr-xxx

  • 伪类:选择器

  • E:focus 当元素获取焦点时的样式

  • E:not(s) 选中E中不含有s选择器的元素

  • E:first-child 选中E 要求:E需要有一个父元素,并且E是父元素的第一个子元素 应用举例:给所有元素加上边框 去掉以一个元素的上边框

  • E:last-child 选中E 要求:E需要有一个父元素,并且E是父元素的最后一个子元素

  • E:only-child 选中E 要求: E是父元素中的唯一子元素

  • E:nth-child(n) 选择父元素中第n个子元素 选中奇数元素 (2n-1) 选中偶数(2n)

  • E:nth-last-child(n) 选择父元素中倒数第n个子元素

  • E:first-of-type 找到父元素中第一个E 元素

  • E:last-of-type 找到父元素中最后一个E 元素

  • E:only-of-type 找到父元素中唯一这种类型的元素

  • E:nth-of-type 找到父元素中第n个该类型的元素

  • E:empty 查找空的E元素

  • E:checked 用于表单元素被选中时的样式 仅用于单选框radio复选框checkbox disabled 该选项不可修改

  • E:enabled 可以修改的元素

  • E:disabled 不可以修改的元素

伪元素::选择器

  • 用途 购物网站300元 的yuan
  • E::after 在E 中插入最后一个子元素| content 设置元素内容| display 设置元素展示样式
  • E::before 在E 的开头加入一个元素 |content设置元素内容| display 设置元素展示样式
  • E::placeholder 表单中默认文案的样式 eg请输入用户名
  • E::selection 设置对象被选中时的样式 仅包含background-color\color\text-shadow
p::selection{background:#000;color:#f00;}
<p>你选中这段文字后,看看它们的文本颜色和背景色,就能明白::selection的作用。</p>

字体

网络字体

  • @font-face

单行文本溢出隐藏

  • 强制所有文本在一行显示
  • white-space:nowrap;
  • 溢出隐藏
  • overflow: hidden;
  • 文本溢出显示…
  • text-overflow:ellipsis

overflow

  • overflow:hidden;溢出隐藏

white-space

  • white-space:pre-line 与normal的值一致,但会保留文本输入使得换行
  • white-space:pre 保留输入时的空格回车换行
  • white-space:pre-wraper保留输入时的空格 回车换行 超出边界会换行显示
  • white-space:nowrap强制文本一行显示

text-overflow

  • 文本超出边界时的剪裁方式 需要配合white-space和overflow一起使用
  • text-overflow:clip 剪裁
  • text-overflow:ellipsis 显示…

text-shadow

  • 给文字加阴影
  • 第一个值:水平位置偏移程度 负数左移 正数右移
  • 第二个值:垂直位置偏移程度 负数上移 正数下移
  • 第三个值:阴影模糊程度 只能是正数 数值越大 阴影程度越大
  • 第四个值:阴影颜色

颜色

colorname

  • color:red;
  • back-ground:blue;
  • transparent透明

HEX

  • #000000 黑
  • #ffffff 白

RGB

  • red green blue
  • 0-255

RGBA

  • red green blue alpha(透明度)
  • RGB数值范围:0-255
  • A数值范围:0-1
  • background-color:rgba(0,0,255,0.5)

在这里插入图片描述兄弟萌,觉得有用就点个赞叭

Copyright © 2002-2019 某某自媒体运营 版权所有