选择器
id 选择器 以#定义
<p id="red">红色</p>
#red{color:red}
派生选择器
#sidebar p{...}
类选择器 以.显示
派生选择器
.fancy td{...} td.fancy{...} <td class="fancy">
属性选择器
带title属性的所有元素设置
[title=hello]{...} title为hello的所有元素设置样式
[title~=hello]{...} 包含hello的title属性的所有元素
[lang|=en]{...} 包含指定值的lang属性的所有元素
input[type = "text"]{...} 不带class和id的表单
外部样式表
<link>标签链接样式表 放在文档的头部
<link rel = "stylesheet" type = "text/css" hred="mystyle.css" />hr
hr{...}
内部样式表
当单个文档需要特殊的样式时 使用<style>标签在文档头部定义内部样式表
<head>
<style type="text/css">
hr{...}
</style>
</head>
内联样式
仅需在一个元素上应用
<pstyle="color:red;margin-left:20px">...</p>
多重样式
没有重复的继承外部样式 有重复的以内部为准
CSS背景
background-color
background-image : url(...);
background-repeat:repeat-x;
background-position:center;
background-position:50% 50%;
background-position:50px 100px
缩进文本
p{text-indent:5em;} 段落的首行缩进 5 em 可以为百分号负值
水平对齐
text-align：center
水平对齐
justify
字间隔
wprd-spacing 可以为负值
字符转换
text-transform: none; uppercase//全大写; lowercase//全小写 capitalize//每个单词首字母大写
文本装饰
text-decoration:none; underline;//下划线 overline;//上划线
line-through;//贯穿性 blink;//闪烁
如果多种装饰 {text-decoration: underline overline}
处理空白符
white-space:normal 合并空白符 忽略换行符 自动换行
white-space:pre 空白符不会被忽略 保留换行符 不允许自动换行
white-space:nowrap 不能换行 除非使用br元素 合并空白符 忽略换行符
white-space:pre-wrap 保留空白符 正常换行 保留换行符
white-space:pre-line 合并空白符 保留换行符 自动换行
文本方向
direction:ltr;//左到右 rtl//右到左
字体风格
font-style:normal 文本正常显示
italic 文本斜体显示
oblique 文本倾斜显示
字体变形 设定小型大写字母
font-variant:small-caps
字体加粗
font-weight:bold
字体大小
font-size 默认大小是16px 1em = 16px 推荐用em
CSS链接
a:link {color:...;text-dection:...;background-color:...} //未被访问的链接
a:visited{...} //已被访问的链接
a:hover{...} //鼠标指针移动到链接上
a:active{...} //链接被点击的时刻
a:hover必须位于a.link和a:visited之后
a:active必须位于a:hover之后
CSS列表
列表类型
list-style-type:circle //圆形
square //方块
upper-roman //阿拉伯数字
lower-alpha //字母
......
列表项图像
list-style-image:url("...")
列表标志位置
list-style-position:inside; //内部 插入列表内容最前面
outside //外部 离列表像边框边界一定距离处
简写列表样式
{list-style:squareinside url(...)}
CSS表格
表格边框
border:1px solid blue;
折叠边框
border-collapse:collapse;
表格宽度和高度
width : ...; heigt:...;
表格文本对齐
text-align:right //水平对齐方式
vertiacl-align:bottom //垂直对齐方式
表格内边距
padding:15px;
表格颜色
table,td,th
{
boder:1px solid green;
}
th
{
background-color:green;
color:white;
}
CSS轮廓
outline：#00ff00 dotted thick; //颜色 样式 宽度
CSS框模型概述
width和height指内容区域的宽和高
内边距
{padding:10px 0.25em 2ex 20%} //可以使用不同单位或百分比
CSS边框
样式
border-style:none; //无边框 (默认值 如果要设置边框宽度要先设置样式)
hidden; //与none相同 用于解决边框冲突
dotted; //点状 在大多数浏览器中呈现为实线
dashed; //虚线 在大多数浏览器中呈现为实线
solid; //实线 double; //定义双线宽度等于border-color的值
groove; //3D凹槽边框 ridge; //3D垄状边框
inset; //3D inset边框 outset //3D outset边框
inherit; //规定从父元素继承边框样式
可单独设置border-top-style border-right-style border-bottom-style border-left-style
宽度(要先设置边框样式)
border-width border-top-width border-right-width border-bottom-width border-left-width
颜色 (要先设置边框样式)
border-color border-top-color border-right-color border-bottom-color border-left-color
透明边框
{border-color:transparent}
CSS外边距
{margin:...}
CSS外边距合并
当两个垂直边距相遇时 取最大的外边距的高度
CSS定位
position:static; //默认值 没有定位
position:absolute; //绝对定位 相对于static定位以外的第一个父元素进行定位
position:fixed; //绝对定位 相对于浏览器窗口
position:relative; //相对定位
position:inherit; //从父元素继承position属性的值
CSS浮动
float:none; //默认值 不浮动
left; //向左浮动 right; //向右浮动
inherit; //从父元素继承float属性
阻止浮动框
clear:none; //默认值 允许浮动元素出现在两侧
left; //左侧不允许 right; //在右侧不允许
both; //两侧都不允许 inherit; //从父类继承
CSS元素选择器
用,分隔 h2,p{...}
通配符选择器 每个元素 * {....}
声明分组 h1{....;....;}
CSS多类选择器
.XX.XX{...}
ID选择器
ID选择器前面要有一个#号 唯一 不能结合使用 不允许用空格分隔
#intro{...}
简单属性选择
[title]{...} 所有包含title的元素
a[href]{...} 只对有href属性的锚(a元素)
a[href][title]{...} 对同时有href和title的属性
ul em {...}
CSS子元素选择器
h1>strong{...} h1元素子元素的strong元素
CSS相邻兄弟选择器
h1 + p {...}
CSS:first-child伪类
p:first-child{...}
lang伪类
q:lang(no){ quotes: "~" "~" }
<p>文字<qlang="no">段落中的引用的文字</q>文字</p>
文字段落中的引用的文字
文字
CSS伪元素
first-line 用于向文本的首行设置特殊样式 只用于块级元素
p:first-line{...}
first-letter 用于向文本的首字母设置特殊样式
before 在元素的内容前插入新内容
h1:before{content:url(...)}
after 在元素的内容后插入新内容
CSS导航栏
li{display:inline} 一行中显示
a{display:block;width:60px} 块元素在整个区域内可以点击 不仅仅是文本 同时可设置宽度
CSS透明度
img{ opacity:0.4； 从0到1 值越小越透明(IE9)
filter:alpha(opacity=40) } IE8及更早版本 从0到100 值越小越透明
hover效果
img{opacity:0.4;filter:alpha(opacity=40);}
img:hover{opacity:1;filter:alpha(opacity=100);} 当指针移动到图像时 变不透明
-webkit-border-image：苹果；谷歌，等一些浏览器认，因为他们都用的是webkit内核；
-moz-border-image：moz这个属性 主要是专门支持MozillaFirefox 火狐浏览器的CSS属性。
-o-border-image：Opera
boder-radius:...; boder-top-left-radius:...; //圆角
box-shadow:h-shadow(必需 水平阴影 允许负值) v-shadow(必需 垂直阴影 允许负值)blur(可选 模糊距离)spread(可选 阴影尺寸)color(可选 阴影颜色)inset(可选 将外部阴影(outset)改为内部); //阴影
CSS3background-clip 属性
规定背景的绘制区域
div{background-color:yellow;background-clip:content-box;}
border-box 背景被裁剪到边框盒
padding-box 背景被裁剪到内边距框
content-box 背景被裁剪到内容框
CSS3background-origin属性
相对于内容框来定位背景图像
border-box 背景图像相对于边框盒来定位
padding-box 背景图像相对于内边距框来定位
content-box 背景图像相对于内容框来定位
CSS3文本阴影
text-shadow:5px 5px 5px #FF0000;
CSS3自动换行
p{word-wrap:break-word;} 允许对长单词进行拆分 并换到下一行
CSS3创建多列
div{column-count:3｝ 分隔成三列
column-gap:40px; 规定列之间40像素的间隔
column-rule:3px outset #ff0000; 设置列之间的宽度 样式 颜色
1350
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
