一、选择器

基本选择器:

  • 通用元素选择器
  • 标签选择器
  • 类选择器
  • 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以前忽略的一些知识点(知识体系搭建)的更多相关文章

  1. Atitit 图像处理知识点  知识体系 知识图谱v2

    Atitit 图像处理知识点  知识体系 知识图谱v2 霍夫变换(Hough Transform) 霍夫变换是图像处理中从图像中识别几何形状的基本方法之一,应用很广泛,也有很多改进算法.主要用来从图像 ...

  2. Atitit 图像处理知识点  知识体系 知识图谱

    Atitit 图像处理知识点  知识体系 知识图谱 图像处理知识点 图像处理知识点体系 v2 qb24.xlsx 基本知识图像金字塔op膨胀叠加混合变暗识别与检测分类肤色检测other验证码生成 基本 ...

  3. Web前端知识体系精简

    Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知 ...

  4. 从输入URL到页面加载的过程?如何由一道题完善自己的前端知识体系!

    前言 见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正. 为什么要梳理这篇文章? 最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目. ...

  5. Web前端知识体系

    看到一篇不错的文章,拿来收藏和分享. 原文:http://mp.weixin.qq.com/s/UFTfdE7LYhHquWEzwZKLCQ Web前端技术由html.css和 javascript三 ...

  6. web前端知识体系总结

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  7. 自己总结的web前端知识体系大全【欢迎补充】

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  8. github上最全的资源教程-前端涉及的所有知识体系

    前面分享了前端入门资源汇总,今天分享下前端所有的知识体系. 个人站长对个人综合素质要求还是比较高的,要想打造多拉斯自媒体网站,不花点心血是很难成功的,学习前端是必不可少的一个环节, 当然你不一定要成为 ...

  9. web前端知识体系大全

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

随机推荐

  1. Ionic无法通过npm安装解决方案

    http://www.jianshu.com/p/5a99334eb62d 一般从 node.js官网下载安装完之后,npm也会同时安装完. 如果通过 $ npm install -g cordova ...

  2. python全栈开发_day8_文件的多种读写方式及游标

    一:文件的多种读写方式 主方式:w    r    a 从方式:t     b    + 了解方式:x    u 1)按t(按照字符进行操作): with open("data_1.txt& ...

  3. json操作相关记录

    json是javascript衍生的数据表示法,现在许多数据的处理都使用json. 平时用到的与json结构相似的有很多,如mongodb数据库,python的字典等.核心思想就是键值对. json的 ...

  4. Shiro源码解析-Session篇

    上一篇Shiro源码解析-登录篇中提到了在登录验证成功后有对session的处理,但未详细分析,本文对此部分源码详细分析下. 1. 分析切入点:DefaultSecurityManger的login方 ...

  5. javascript 正则表达式校验方式写法

    if(/[0-9]/.test(value)){return true; } if(/[a-z]/.test(value)){return true; } if(/[A-Z]/.test(value) ...

  6. 文献综述二十:基于UML技术的客户关系管理系统实现

    一.基本信息 标题:基于UML技术的客户关系管理系统实现 时间:2015 出版源:电子设计工程 文件分类:uml技术的研究 二.研究背景 设计出可应用与银行和储户之间沟通的客户关系管理系统,从而实现对 ...

  7. https迁移实践手记

    前言什么是公钥和私钥?使用OpenssL生成私钥.使用Keytool导出私钥.主流数字证书都有哪些格式?SSL证书类型注册SSL证书使用OpenSSL工具生成CSR文件使用keytool工具生成CSR ...

  8. Ubuntu 16.04安装SecureCRT替代XShell

    XShell应该是最强大的,在Ubuntu下只有SecureCRT能实现跨平台(Linux/Windows/Mac),并且可以实现Tab的功能等.当然,还有其它的类似PuTTY这些.Windows下建 ...

  9. (转)Http状态码301和302概念简单区别及企业应用案例

    Http状态码301和302的区别及企业应用案例 原文:http://blog.51cto.com/oldboy/1774260 1.什么是301重定向? 301重定向/跳转一般,表示本网页永久性转移 ...

  10. Struts中Validate()和validateXxx的使用

    Struts中Validate()和validateXxx的使用 学习struts2之后,你会发现validate在之前是没有的!它是怎么实现的呢? validate和validateXxxx都是拦截 ...