一、选择器

基本选择器:

  • 通用元素选择器
  • 标签选择器
  • 类选择器
  • 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. Python处理json数据--世界国家维度数据

    1.准备国家的json数据 将准备好的json数据放在指定的目录下,此处可以重这里下载 2.测试编写python脚本处理json提取字段值 #coding:utf8 import time, re, ...

  2. 免费观看vip/要劵的电影

    免费观看vip/要劵的电影 1.在爱奇艺/腾讯视频中复制电影的连接 2.复制连接到这个网站中(http://www.qmaile.com/) 3.粘贴路径到这个网站相应的位置 4.点击go ,等待解析 ...

  3. 时间超限问题处理(c++)

    c++中 如果时间超上限 做题上: 考虑关于二进制的方法 比如说 find your present (2) 这道题 可以用异或运算 来发现不重复数 对于动态规划 状态压缩发面 方面应用更多 比如说p ...

  4. Pytorch学习笔记(一)——简介

    一.Tensor Tensor是Pytorch中重要的数据结构,可以认为是一个高维数组.Tensor可以是一个标量.一维数组(向量).二维数组(矩阵)或者高维数组等.Tensor和numpy的ndar ...

  5. lvm拉伸与快照

    一.拉伸 *用fdisk分区 *构建pv *将pv加入vg *将pv内的pe加入lv *通过resize将文件系统的容量增加 1.分区 [root@server3 ~]# fdisk /dev/vdb ...

  6. 分分钟钟学会Python -基础&运算符

    day002 基础&运算符 1.循环语句 ### 1.循环格式 while 条件: print('') ''' while True: print('人生苦短,我用Python.') ''' ...

  7. java 的继承

    1 为什么要使用继承? 为了提取两个类中公共的代码,可以使用继承抽取重复性的代码到一个公共类中,这个公共的类称为父类(super class).继承于父类的类称为子类(sub class). java ...

  8. Ubuntu 16.04安装SecureCRT替代XShell

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

  9. 我的Python升级打怪之路【六】:面向对象(二)

    面向对象的一些相关知识点 一.isinstance(obj,cls) 检查实例obj是否是类cls的对象 class Foo(object): pass obj = Foo() isinstance( ...

  10. document.frames与window.frames在不同浏览器中的使用

    问题: document.frames 只有 IE Opera 支持.等同于 window.frames.用来取得当前页面内 window 对象的集合. 在 Firefox Chorome Safar ...