css狂记
接着上一篇 html狂记,同样是DIV+CSS传统站点开发,同样只是收集、整理。。。
CSS 背景属性(Background)
属性 |
描述 |
CSS |
在一个声明中设置所有的背景属性。 |
1 |
|
设置背景图像是否固定或者随着页面的其余部分滚动。 |
1 |
|
设置元素的背景颜色。 |
1 |
|
设置元素的背景图像。 |
1 |
|
设置背景图像的开始位置。 |
1 |
|
设置是否及如何重复背景图像。 |
1 |
CSS 边框属性(Border 和 Outline)
属性 |
描述 |
CSS |
在一个声明中设置所有的边框属性。 |
1 |
|
在一个声明中设置所有的下边框属性。 |
1 |
|
设置下边框的颜色。 |
2 |
|
设置下边框的样式。 |
2 |
|
设置下边框的宽度。 |
1 |
|
设置四条边框的颜色。 |
1 |
|
在一个声明中设置所有的左边框属性。 |
1 |
|
设置左边框的颜色。 |
2 |
|
设置左边框的样式。 |
2 |
|
设置左边框的宽度。 |
1 |
|
在一个声明中设置所有的右边框属性。 |
1 |
|
设置右边框的颜色。 |
2 |
|
设置右边框的样式。 |
2 |
|
设置右边框的宽度。 |
1 |
|
设置四条边框的样式。 |
1 |
|
在一个声明中设置所有的上边框属性。 |
1 |
|
设置上边框的颜色。 |
2 |
|
设置上边框的样式。 |
2 |
|
设置上边框的宽度。 |
1 |
|
设置四条边框的宽度。 |
1 |
|
在一个声明中设置所有的轮廓属性。 |
2 |
|
设置轮廓的颜色。 |
2 |
|
设置轮廓的样式。 |
2 |
|
设置轮廓的宽度。 |
2 |
CSS 文本属性(Text)
属性 |
描述 |
CSS |
设置文本的颜色。 |
1 |
|
规定文本的方向 / 书写方向。 |
2 |
|
设置字符间距。 |
1 |
|
设置行高。 |
1 |
|
规定文本的水平对齐方式。 |
1 |
|
规定添加到文本的装饰效果。 |
1 |
|
规定文本块首行的缩进。 |
1 |
|
text-shadow |
规定添加到文本的阴影效果。 |
2 |
控制文本的大小写。 |
1 |
|
设置文本方向。 |
2 |
|
规定如何处理元素中的空白。 |
1 |
|
设置单词间距。 |
1 |
CSS 字体属性(Font)
属性 |
描述 |
CSS |
在一个声明中设置所有字体属性。 |
1 |
|
规定文本的字体系列。 |
1 |
|
规定文本的字体尺寸。 |
1 |
|
为元素规定 aspect 值。 |
2 |
|
收缩或拉伸当前的字体系列。 |
2 |
|
规定文本的字体样式。 |
1 |
|
规定是否以小型大写字母的字体显示文本。 |
1 |
|
规定字体的粗细。 |
1 |
CSS 外边距属性(Margin)
属性 |
描述 |
CSS |
在一个声明中设置所有外边距属性。 |
1 |
|
设置元素的下外边距。 |
1 |
|
设置元素的左外边距。 |
1 |
|
设置元素的右外边距。 |
1 |
|
设置元素的上外边距。 |
1 |
CSS 内边距属性(Padding)
属性 |
描述 |
CSS |
在一个声明中设置所有内边距属性。 |
1 |
|
设置元素的下内边距。 |
1 |
|
设置元素的左内边距。 |
1 |
|
设置元素的右内边距。 |
1 |
|
设置元素的上内边距。 |
1 |
CSS 列表属性(List)
属性 |
描述 |
CSS |
在一个声明中设置所有的列表属性。 |
1 |
|
将图象设置为列表项标记。 |
1 |
|
设置列表项标记的放置位置。 |
1 |
|
设置列表项标记的类型。 |
1 |
|
marker-offset |
2 |
内容生成(Generated Content)
属性 |
描述 |
CSS |
与 :before 以及 :after 伪元素配合使用,来插入生成内容。 |
2 |
|
递增或递减一个或多个计数器。 |
2 |
|
创建或重置一个或多个计数器。 |
2 |
|
设置嵌套引用的引号类型。 |
2 |
CSS 尺寸属性(Dimension)
属性 |
描述 |
CSS |
设置元素高度。 |
1 |
|
设置元素的最大高度。 |
2 |
|
设置元素的最大宽度。 |
2 |
|
设置元素的最小高度。 |
2 |
|
设置元素的最小宽度。 |
2 |
|
设置元素的宽度。 |
1 |
CSS 定位属性(Positioning)
属性 |
描述 |
CSS |
设置定位元素下外边距边界与其包含块下边界之间的偏移。 |
2 |
|
规定元素的哪一侧不允许其他浮动元素。 |
1 |
|
剪裁绝对定位元素。 |
2 |
|
规定要显示的光标的类型(形状)。 |
2 |
|
规定元素应该生成的框的类型。 |
1 |
|
规定框是否应该浮动。 |
1 |
|
设置定位元素左外边距边界与其包含块左边界之间的偏移。 |
2 |
|
规定当内容溢出元素框时发生的事情。 |
2 |
|
规定元素的定位类型。 |
2 |
|
设置定位元素右外边距边界与其包含块右边界之间的偏移。 |
2 |
|
设置定位元素的上外边距边界与其包含块上边界之间的偏移。 |
2 |
|
设置元素的垂直对齐方式。 |
1 |
|
规定元素是否可见。 |
2 |
|
设置元素的堆叠顺序。 |
2 |
CSS 打印属性(Print)
属性 |
描述 |
CSS |
orphans |
设置当元素内部发生分页时必须在页面底部保留的最少行数。 |
2 |
设置元素后的分页行为。 |
2 |
|
设置元素前的分页行为。 |
2 |
|
设置元素内部的分页行为。 |
2 |
|
widows |
设置当元素内部发生分页时必须在页面顶部保留的最少行数。 |
2 |
CSS 表格属性(Table)
属性 |
描述 |
CSS |
规定是否合并表格边框。 |
2 |
|
规定相邻单元格边框之间的距离。 |
2 |
|
规定表格标题的位置。 |
2 |
|
规定是否显示表格中的空单元格上的边框和背景。 |
2 |
|
设置用于表格的布局算法。 |
2 |
CSS 伪类(Pseudo-classes)
属性 |
描述 |
CSS |
向被激活的元素添加样式。 |
1 |
|
向拥有键盘输入焦点的元素添加样式。 |
2 |
|
当鼠标悬浮在元素上方时,向元素添加样式。 |
1 |
|
向未被访问的链接添加样式。 |
1 |
|
向已被访问的链接添加样式。 |
1 |
|
向元素的第一个子元素添加样式。 |
2 |
|
向带有指定 lang 属性的元素添加样式。 |
2 |
CSS 伪元素(Pseudo elements)
属性 |
描述 |
CSS |
向文本的第一个字母添加特殊样式。 |
1 |
|
向文本的首行添加特殊样式。 |
1 |
|
在元素之前添加内容。 |
2 |
|
在元素之后添加内容。 |
Css单位:
尺寸
单位 |
描述 |
% |
百分比 |
in |
英寸 |
cm |
厘米 |
mm |
毫米 |
em |
1em 等于当前的字体尺寸。 2em 等于当前字体尺寸的两倍。 例如,如果某元素以 12pt 显示,那么 2em 是24pt。 在 CSS 中,em 是非常有用的单位,因为它可以自动适应用户所使用的字体。 |
ex |
一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。) |
pt |
磅 (1 pt 等于 1/72 英寸) |
pc |
12 点活字 (1 pc 等于 12 点) |
px |
像素 (计算机屏幕上的一个点) |
颜色
单位 |
描述 |
(颜色名) |
颜色名称 (比如 red) |
rgb(x,x,x) |
RGB 值 (比如 rgb(255,0,0)) |
rgb(x%, x%, x%) |
RGB 百分比值 (比如 rgb(100%,0%,0%)) |
#rrggbb |
十六进制数 (比如 #ff0000) |
特别指出:
CSS选择器:
元素选择器
p {color:gray;}
选择器分组
用逗号分隔,逗号告诉浏览器,规则中包含两个不同的选择器
类选择器
为了将类选择器的样式与元素关联,必须将 class 指定为一个适当的值
.important {color:red;}
p.important {color:red;} 只有指定该类样式的段落显示为红色文本
ID 选择器
ID 选择器前面有一个 # 号 - 也称为棋盘号或井号,要引用 id 属性中的值
用于选取带有指定属性的元素。 |
|
用于选取带有指定属性和值的元素。 |
|
用于选取属性值中包含指定词汇的元素。 |
|
用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。 |
|
匹配属性值以指定值开头的每个元素。 |
|
匹配属性值以指定值结尾的每个元素。 |
|
匹配属性值中包含指定值的每个元素。 |
l 属性选择器
简单属性选择器,选择有某个属性的元素,而不论属性值是什么
*[title]
{color:red;}
a[href] {color:red;}
a[href][title] {color:red;}
总结:
l 后代选择器
h1 em {color:red;} 只对 h1 元素中的 em 元素应用样式
两个元素之间的层次间隔可以是无限的
l 子元素选择器
h1 > em {color:red;} 只选择某个元素的子元素
l 相邻兄弟选择器
选择紧接在另一个元素后的元素,而且二者有相同的父元素
h1 + p {color:red;}
加号(+),即相邻兄弟结合符
伪类(不同情况下调用的样式):
selector : pseudo-class {property : value;}
锚伪类:
链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态
a:link
{color: #FF0000} /* 未访问的链接 */
a:visited
{color: #00FF00} /* 已访问的链接 */
a:hover
{color: #FF00FF} /* 鼠标移动到链接上 */
a:active
{color: #0000FF} /* 选定的链接 */
a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的
a:active 必须被置于 a:hover 之后,才是有效的
伪类名称对大小写不敏感
:first-child 伪类:
最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素
必须声明 <!DOCTYPE>,这样 :first-child 才能在 IE 中生效
p:first-child {font-weight: bold;}
选择器匹配作为任何元素的第一个子元素的 p 元素
p>i:first-child {font-weight: bold;}
选择器匹配所有 <p> 元素中的第一个 <i> 元素
:lang 伪类
:lang 伪类使你有能力为不同的语言定义特殊的规则
q:lang(no){quotes: "~" "~"}
:lang 类为属性值为 no 的 q 元素定义引号的类型
总结:
向被激活的元素添加样式。 |
1 |
|
向拥有键盘输入焦点的元素添加样式。 |
2 |
|
当鼠标悬浮在元素上方时,向元素添加样式。 |
1 |
|
向未被访问的链接添加样式。 |
1 |
|
向已被访问的链接添加样式。 |
1 |
|
向元素的第一个子元素添加样式。 |
2 |
|
向带有指定 lang 属性的元素添加样式。 |
||
伪元素
selector : pseudo- element {property : value;}
"first-line" 伪元素用于向文本的首行设置特殊样式
p:first-line{color:#ff0000;font-variant:small-caps;}
"first-line" 伪元素只能用于块级元素
"first-letter" 伪元素用于向文本的首字母设置特殊样式
"first-letter" 伪元素只能用于块级元素
":before" 伪元素可以在元素的内容前面插入新内容
h1:before{content:url(logo.gif);}
":after" 伪元素可以在元素的内容之后插入新内容
总结:
向文本的第一个字母添加特殊样式。 |
1 |
|
向文本的首行添加特殊样式。 |
1 |
|
在元素之前添加内容。 |
2 |
|
在元素之后添加内容。 |
css狂记的更多相关文章
- html狂记
由于承接一部分站点优化工作,竟无节操地好几天没有喂博客,好了,今天完成交接工作,马上奉上DIV+CSS传统开发的干货一枚,内容绝非原创,仅是收集.学习.消化.总结.吐出... 基本结构标签: < ...
- html.css随便记
css 绝对定位:一个元素绝对定位时,浏览器首先将它从流中完全删除,然后浏览器再把这个元素放在属性指定的位置上,对其他元素没有影响 绝对定位要相对于最近的父级元素进行定位 position: ab ...
- CSS随记
在CSS中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.如果浮动非替换元素,则要指定一个明确的宽度:否则,它们会尽可能地窄. 注释:float属性不具有继承特性,就是说子元素 ...
- div+css布局记扎
实际开发网站过程中边碰壁边积累了一些div+css布局相关的小技巧,在这里做一些整理与大家一起探讨.本文章将间歇性更新. 1.div+css布局综述 div+css布局个人观点就是“盒子套盒子”的关系 ...
- CSS 随记
伪类选择符的顺序:L-V-H-A CSS提供了四种元素设置链接的颜色,包括:link.:visited.:hover.:active,它们的声明是有一定顺序的,我们简称这种顺序为L-V-H-A,即li ...
- 正则表达式regex狂记
正则.正则..往往在某个不经意间显示其强大的潜能 概念等基础知识不做介绍,直奔规则.格式.实例…… 元字符 描述 \ 将下一个字符标记为一个特殊字符.或一个原义字符.或一个向后引用.或一个八进制转义符 ...
- css随记02布局
布局 二栏布局 利用absolute, margin .container { position: relative; } nav { position: absolute; left: 0px; w ...
- css随记01编辑技巧,背景与边框
代码优化 一个按钮的例子,使其值同比例变化; button{ color: white; background: #58a linear-gradient(#77a0bb, #58a); paddin ...
- css 坑记
1. div 内容超出 (做换行处理) 要注意 white-space属性的运用 设置 div width:100%;(或者固定值) 设置换行 word-break: break-all; 设置 ...
随机推荐
- Android的Notification使用注意事项
看<Android开发-第一行代码>这本书,读到创建系统通知(Notification)的时候,发现若干主要方法均已经过期,于是找了一下官方的开发指南,进入此url:http://deve ...
- 关于vue.js中class与style绑定的学习
练习代码: html: <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- LEETCODE —— Populating Next Right Pointers in Each Node
Populating Next Right Pointers in Each Node Given a binary tree struct TreeLinkNode { TreeLinkNode * ...
- Linux内核@系统组成与内核配置编译
Linux系统由什么组成? 由用户空间(应用程序+GNU C标准库)和内核空间(系统调用接口+内核+内核架构代码)组成. Linux内核到底是什么?以及组成. ARM的七种操作级别? 内核网络协议栈( ...
- c#事件机制
namespace test { class Publisher//出版社 { public delegate void PubComputer(string magazineName);//声明事件 ...
- Python爬虫入门
Python爬虫简介(来源于维基百科): 网络爬虫始于一张被称作种子的统一资源地址(URLs)列表.当网络爬虫访问这些统一资源定位器时,它们会甄别出页面上所有的超链接,并将它们写入一张"待访列表",即 ...
- React Native For Android 环境搭建
一. 环境搭建 1. JDK更新 http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html 使用最新的 ...
- C#读写锁ReaderWriterLockSlim的使用
读写锁的概念很简单,允许多个线程同时获取读锁,但同一时间只允许一个线程获得写锁,因此也称作共享-独占锁.在C#中,推荐使用ReaderWriterLockSlim类来完成读写锁的功能. 某些场合下,对 ...
- Eclipse debug高级技巧(转)
Debug视图 认识debug视图,红色部分框为线程堆栈视图,黄色部分框为表达式.断点.变量视图,蓝色部分为代码视图. 线程堆栈视图 分别介绍一下这几个按钮的含义: 1.表示当前实现继续运行直到下一个 ...
- 解决duplicate symbols for architecture x86_64错误
duplicate symbols for architecture x86_64 两个不第三方SDK之间的文件里面内容重复了,类似 file.h+file.m 和 CHfile.h+CHfile.m ...