css以前忽略的一些知识点(知识体系搭建)
一、选择器
基本选择器:
- 通用元素选择器
- 标签选择器
- 类选择器
- id选择器
组合选择器:
- 多元素组合选择器
- 后代元素选择器
- 子代元素选择器
- 毗邻元素选择器
属性选择器:
- [title] & P[title]
- [title=mk]
[title~
=
"mk"
]
- [title|=mk]
- [title^=Nick]
- [title$=Nick]
- [title*=Nick]
伪类选择器:
- link、hover、active、visited
- before、after
属性选择器
1.[title] & P[title]
设置所有具有title属性的标签元素;
设置所有具有title属性的P标签元素。
[title]
{
color: yellow;
}
p[title]
{
color: yellow;
} <div title>hello</div>
<p title>hello</p>
2.[title=mk]
设置所有title属性等于“mk”的标签元素。
[title="mk"]
{
color: yellow;
} <p title="mk">mk</p>
3.[title~
=
"mk"
]
设置所有title属性具有多个空格分隔的值、其中一个值等于“mk”的标签元素。
[title~="mk"]
{
color: yellow;
} <p title="mk Jenny">Mk</p>
<p title="Jenny mk">Mk</p>
4.[title|=mk]
设置所有title属性具有多个连字号分隔(hyphen-separated)的值、其中一个值以"mk"开头的标签元素。
例:lang属性:"en"、"en-us"、"en-gb"等等
[title|="mk"]
{
color: yellow;
} <p title="mk-Jenny">mk</p>
5.[title^=Nick]
设置属性值以指定值开头的每个标签元素。
[title^="mk"]
{
color: yellow;
} <p title="mkJenny">mk</p>
6.[title$=Nick]
设置属性值以指定值结尾的每个标签元素。
[title$="mk"]
{
color: yellow;
} <p title="Jenny mk">mk</p>
7.[title*=Nick]
设置属性值中包含指定值的每个元素。
[title*="mk"]
{
color: yellow;
} <p title="SmkJenny">mk</p>
伪类选择器:
1. link、hover、active、visited
- a:link(未访问的链接状态),用于定义了常规的链接状态。
- a:hover(鼠标放在链接上的状态),用于产生视觉效果。
- a:active(在链接上按下鼠标时的状态)。
- a:visited(已访问过的链接状态),可以看出已经访问过的链接。
2. before、after
- P:before 在每个<p>元素的内容之前插入内容;
- P:after 在每个<p>元素的内容之后插入内容。
二、属性
1.color
- HEX(十六进制色:color: #FFFF00 --> 缩写:#FF0)
- RGBA(红绿蓝透明度,A是透明度在0~1之间取值。使用方式:color:rgba(255,255,0,0.5))
- HSL(CSS3有效,H表示色调,S表示饱和度,L表示亮度,使用方式:color:hsl(360,100%,50%))
- HSLA(和HSL相似,A表示Alpha透明度,取值0~1之间。)
transparent
- 全透明,使用方式:color: transparent
2.文本属性:
white-space: 设置元素中空白的处理方式
- normal:默认处理方式。
- pre:保留空格,当文字超出边界时不换行
- nowrap:不保留空格,强制在同一行内显示所有文本,直到文本结束或者碰到br标签
- pre-wrap:保留空格,当文字碰到边界时换行
- pre-line:不保留空格,保留文字的换行,当文字碰到边界时换行
direction: 规定文本的方向
- ltr 默认,文本方向从左到右。
- rtl 文本方向从右到左。
vertical-align: 文本所在行高的垂直对齐方式
- baseline 默认
- sub 垂直对齐文本的下标,和<sub>标签一样的效果
- super 垂直对齐文本的上标,和<sup>标签一样的效果
- top 对象的顶端与所在容器的顶端对齐
- text-top 对象的顶端与所在行文字顶端对齐
- middle 元素对象基于基线垂直对齐
- bottom 对象的底端与所在行的文字底部对齐
- text-bottom 对象的底端与所在行文字的底端对齐
text-indent: 文本缩进
letter-spacing: 添加字母之间的空白
word-spacing: 添加每个单词之间的空白
text-transform: 属性控制文本的大小写
- capitalize 文本中的每个单词以大写字母开头。
- uppercase 定义仅有大写字母。
- lowercase 定义仅有小写字母。
text-overflow: 文本溢出样式
- clip 修剪文本。
- ellipsis 显示省略符号...来代表被修剪的文本。
- string 使用给定的字符串来代表被修剪的文本
text-decoration: 文本的装饰
- none 默认。
- underline 下划线。
- overline 上划线。
- line-through 中线。
text-shadow:文本阴影
- 第一个参数是左右位置
- 第二个参数是上下位置
- 第三个参数是虚化效果
- 第四个参数是颜色
- text-shadow: 5px 5px 5px #888;
word-wrap:自动换行
- word-wrap: break-word;
去掉li前的点:li{list-style:none}
三、背景属性
background-position 设置背景图像的位置坐标
- background-position: center center; 图片置中,x轴center,y轴center
- 1px -195px 截取图片某部分,分别代表坐标x,y轴
background-repeat 设置背景图像不重复平铺
- no-repeat 设置图像不重复,常用
round 自动缩放直到适应并填充满整个容器
- space 以相同的间距平铺且填充满整个容器
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
background 简写
- background: url("o_ns.png") no-repeat 0 -196px;
background: url("o_ns.png") no-repeat center bottom 15px;
background: url("o_ns.png") no-repeat left 30px bottom 15px;
四、列表属性
list-style-type: 列表项标志的类型
- none 去除标志
- decimal-leading-zero; 02.
- square; 方框
- circle; 空心圆
- upper-alph; & disc; 实心圆
list-style-image:将图象设置为列表项标志
list-style-position:列表项标志的位置
- inside
- outside
五、页面布局
visibility
- collapse 当在表格元素中使用时,此值可删除一行或一列,不会影响表格的布局。
clip 剪裁图像
rect 剪裁定位元素:
- auto 默认值,无剪切
- 上-右-下-左(顺时针)的顺序提供四个偏移值
- 区域外的部分是透明的
- 必须指定 position:absolute;
例:clip:rect(0px,60px,200px,0px);
overflow 设置当对象的内容超过其指定高度及宽度时如何显示内容
- visible 默认值,内容不会被修剪,会呈现在元素框之外。
- hidden 内容会被修剪,并且其余内容是不可见的。
- scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
- auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
outline 边框轮廓
- outline-width 轮廓宽度
- outline-color 轮廓颜色
- outline-style 轮廓样式
zoom 缩放比例 :100%/150%/200%
transform 转换,变形
- origin 定义旋转基点(left top center right bottom 坐标值) transform-origin: 50px 50px; transform-origin: left;。
- rotate 旋转 transform:rotate(50deg) 旋转角度可以为负数,需要先定义origin。
- skew 扭曲 transform:skew(50deg,50deg) 分别为相对x轴倾斜,相对y轴倾斜。
- scale 缩放 transform:scale(2,3) 横向放大2倍,纵向放大3倍;transform:scale(2) 横竖都放大2倍。
- translate 移动 transform:translate(50px, 50px) 分别为相对x轴移动,相对y轴移动
Transition 平滑过渡
- transition-property: 变换的属性(none(没有属性改变)、all(所有属性改变)、具体属性)
- transition-duration: 变换持续时间
- transition-timing-function: 变换的速率(ease:(逐渐变慢)、linear:(匀速)、ease-in:(加速)、ease-out:(减速)、ease-in-out:(加速然后减速)、cubic-bezier:(自定义时间曲线))
- transition-delay: 变换延迟时间
- transition: 缩写
cursor 鼠标的类型形状
url: 自定义光标
Auto: 默认
Default: 默认
e
-
resize
ne
-
resize
nw
-
resize
n
-
resize
se
-
resize
sw
-
resize
s
-
resize
w
-
resize
Crosshair
Pointer
Move
text
wait
help
css以前忽略的一些知识点(知识体系搭建)的更多相关文章
- Atitit 图像处理知识点 知识体系 知识图谱v2
Atitit 图像处理知识点 知识体系 知识图谱v2 霍夫变换(Hough Transform) 霍夫变换是图像处理中从图像中识别几何形状的基本方法之一,应用很广泛,也有很多改进算法.主要用来从图像 ...
- Atitit 图像处理知识点 知识体系 知识图谱
Atitit 图像处理知识点 知识体系 知识图谱 图像处理知识点 图像处理知识点体系 v2 qb24.xlsx 基本知识图像金字塔op膨胀叠加混合变暗识别与检测分类肤色检测other验证码生成 基本 ...
- Web前端知识体系精简
Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知 ...
- 从输入URL到页面加载的过程?如何由一道题完善自己的前端知识体系!
前言 见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正. 为什么要梳理这篇文章? 最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目. ...
- Web前端知识体系
看到一篇不错的文章,拿来收藏和分享. 原文:http://mp.weixin.qq.com/s/UFTfdE7LYhHquWEzwZKLCQ Web前端技术由html.css和 javascript三 ...
- web前端知识体系总结
1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...
- 自己总结的web前端知识体系大全【欢迎补充】
1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...
- github上最全的资源教程-前端涉及的所有知识体系
前面分享了前端入门资源汇总,今天分享下前端所有的知识体系. 个人站长对个人综合素质要求还是比较高的,要想打造多拉斯自媒体网站,不花点心血是很难成功的,学习前端是必不可少的一个环节, 当然你不一定要成为 ...
- web前端知识体系大全
1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...
随机推荐
- Ionic无法通过npm安装解决方案
http://www.jianshu.com/p/5a99334eb62d 一般从 node.js官网下载安装完之后,npm也会同时安装完. 如果通过 $ npm install -g cordova ...
- python全栈开发_day8_文件的多种读写方式及游标
一:文件的多种读写方式 主方式:w r a 从方式:t b + 了解方式:x u 1)按t(按照字符进行操作): with open("data_1.txt& ...
- json操作相关记录
json是javascript衍生的数据表示法,现在许多数据的处理都使用json. 平时用到的与json结构相似的有很多,如mongodb数据库,python的字典等.核心思想就是键值对. json的 ...
- Shiro源码解析-Session篇
上一篇Shiro源码解析-登录篇中提到了在登录验证成功后有对session的处理,但未详细分析,本文对此部分源码详细分析下. 1. 分析切入点:DefaultSecurityManger的login方 ...
- javascript 正则表达式校验方式写法
if(/[0-9]/.test(value)){return true; } if(/[a-z]/.test(value)){return true; } if(/[A-Z]/.test(value) ...
- 文献综述二十:基于UML技术的客户关系管理系统实现
一.基本信息 标题:基于UML技术的客户关系管理系统实现 时间:2015 出版源:电子设计工程 文件分类:uml技术的研究 二.研究背景 设计出可应用与银行和储户之间沟通的客户关系管理系统,从而实现对 ...
- https迁移实践手记
前言什么是公钥和私钥?使用OpenssL生成私钥.使用Keytool导出私钥.主流数字证书都有哪些格式?SSL证书类型注册SSL证书使用OpenSSL工具生成CSR文件使用keytool工具生成CSR ...
- Ubuntu 16.04安装SecureCRT替代XShell
XShell应该是最强大的,在Ubuntu下只有SecureCRT能实现跨平台(Linux/Windows/Mac),并且可以实现Tab的功能等.当然,还有其它的类似PuTTY这些.Windows下建 ...
- (转)Http状态码301和302概念简单区别及企业应用案例
Http状态码301和302的区别及企业应用案例 原文:http://blog.51cto.com/oldboy/1774260 1.什么是301重定向? 301重定向/跳转一般,表示本网页永久性转移 ...
- Struts中Validate()和validateXxx的使用
Struts中Validate()和validateXxx的使用 学习struts2之后,你会发现validate在之前是没有的!它是怎么实现的呢? validate和validateXxxx都是拦截 ...