CSS一些小结
1.css简介
css 指层叠样式表(Cascading Style Sheets)
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
1.浏览器缺省设置
2.外部样式表
3.内部样式表（位于 <head> 标签内部）
4.内联样式（在 HTML 元素内部）
2.css三种引入方式
1.内联样式
style="font-size: larger; background-color: darkred;"
2.内部样式表
.nav{
width: 400px;
height: 200px;
background-color: darkgray;
margin: 20px auto;
}
3.外部样式表
<link rel="stylesheet" type="text/css" href="mystyle.css">
3.css选择器
1.选择器分组
被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开
h1,h2,h3{
color: darkviolet;
}
2.派生选择器(后代)
通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。
.content img{
width: 90px;
height: 80px;
}
3. 子元素选择器（Child selector）
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。
如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器
.content > img{
width: 90px;
height: 80px;
}
4.相邻兄弟选择器(Adjacent sibling selector)
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器
div + p{
color: red;
margin-top: 20px;
}
5.id选择器
id 选择器以 "#" 来定义
被标注为 (id选择器) 的元素只能在文档中出现一次，不能重复
#section{
font-size: x-large;
color: yellow;
}
6.类选择器
class选择器 可以重复
.nav{
width: 400px;
height: 200px;
background-color: darkgray;
margin: 20px auto;
}
7.属性选择器
可以为拥有指定属性的 HTML 元素设置样式
[href]{
color: red;
}
根据部分属性值选择，如果忽略了波浪号，则说明需要完成完全值匹配。
p[class~="important"] {color: red;}
8.元素选择器
最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
div{
width: 400px;
height: 200px;
}
5. * 通配符选择器
* {
color:red;
}
3.css样式
1.背景
1.背景色
使用 background-color 属性
background-color: yellowgreen;
2.背景图片
使用 background-image 属性
background-image: url(1.jpg);
background-repeat: no-repeat;
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-position:top;
background-position: 50% 10%
background-position:50px 100px;
background-attachment: fixed;
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失
可以通过 background-attachment 属性防止这种滚动
将所有背景属性在一个声明之中
background: url(2.jpg) repeat fixed;
2.文本
1.像素
在css中单位长度用的最多的是px,em,rem,这三个的区别是:
px是固定的像素，一旦设置了就无法因为适应页面大小而改变。
em和rem相对于px更具有灵活性,他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。
对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。
2.缩进文本
text-indent: 5em;
3.水平对齐
text-align: center;
值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。
4.字符转换
text-transform: uppercase;
默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，
uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后，capitalize 只对每个单词的首字母大写。
5.文本装饰
text-decoration: line-through;
text-decoration 有 5 个值：
none 默认none对文本不做任何改动
underline 对文本加下划线
overline 文本的顶端画一个上划线
line-through 在文本中间画一个贯穿线
blink 会让文本闪烁
6.处理空白符
white-space: normal;
丢掉多余的空白符。如果给定这个值，换行字符（回车）会转换为空格，一行中多个空格的序列也会转换为一个空格。
3.字体
1.指定字体系列
font-family: Georgia;
2.字体风格
font-style: italic;
normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示
3.字体加粗
font-weight: 900;
font-weight 属性设置文本的粗细。100 ~ 900 为字体指定了 9 级加粗度
4.字体大小
font-size: 40px;
4.链接
设置链接的样式
链接的四种状态
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻
a:link {color:#FF0000;}
a:visited {color:#00FF00;}
a:hover {color:#FF00FF;}
a:active {color:#0000FF;}
4.css框模型
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
element : 元素。
padding : 内边距，也有资料将其翻译为填充。
border : 边框。
margin : 外边距
1.border边框
border-color: royalblue; 边框颜色
border-width: 10px; 边框宽度
border-style: solid; 边框类型
dotted 点
solid 实线
double 双线
dashed; 虚线
也可以在一块写 简写属性 border: royalblue 10px solid;
2.padding 内边距
padding:10px; 上 右 下 左
padding: top right bottom left
3.margin 外边距
margin:10px; 上 右 下 左
margin: top right bottom left
4.外边距合并
外边距合并指的是，当两个垂直外边距相遇时，他们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
5.css定位
csss 有三种基本的定位机制：普通流、浮动和相对定位
通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式
position 属性值的含义：
1.static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
.pos_abs{
position: static;
}
2.relative 相对定位
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
img {
position: relative;
left: 10px;
top:1000px;
}
3.absolute 绝对定位
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
.pos_abs{
position: absolute;
left: 500px;
top: 500px;
}
4.fixed 固定定位
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
所有主流浏览器都支持 float 属性。
值 描述
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
行框和清理
clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。
clear: both;
display属性
display 属性规定元素应该生成的框的类型。
可能的值
值 描述
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
6.css高级
1.css对齐
对齐块元素
使用margin属性水平对齐
p {
width:70%;
margin:auto;
}
如果宽度是 100%，则对齐没有效果。
使用position属性进行左和右对齐
.cent {
position:absolute;
right:0px;
width:300px;
}
使用float属性来进行左、右对齐
.cent {
float: right;
width:300px;
}
2.css尺寸
行间距
.cent .s1{
line-height: 10px;
}
css尺寸属性
属性 描述
height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。
3.改变光标
当把鼠标移动到元素上，可以看到鼠标指针发生变化
cursor属性
cursor: auto; 自动
cursor:cell 加号
cursor:Pointer 小手
cursor:wait 圆环
cursor:help ？号
cursor:Move 移动符号
4.分类属性
属性 描述
clear 设置一个元素的侧面是否允许其他的浮动元素。
cursor 规定当指向某元素之上时显示的指针类型。
display 设置是否及如何显示元素。
float 定义元素在哪个方向浮动。
position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
visibility 设置元素是否可见或不可见。
.visible {visibility:visible}
.invisible {visibility:hidden}
5.图片透明度
使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小，越透明。(IE9以上)
img{
opacity: 0.5;
}
6.边框
圆角边框 border-radius:25px;
边框阴影 box-shadow: 20px 10px 50px #888888;
边框图片 border-image:url(2.jpg) 30 30 round;
新的边框属性
属性 描述 CSS
border-image 设置所有 border-image-* 属性的简写属性。
border-radius 设置所有四个 border-*-radius 属性的简写属性。
box-shadow 向方框添加一个或多个阴影。
7.文本
文本阴影
text-shadow 可向文本应用阴影。
text-shadow: 5px 10px 15px #ff0000;
8.动画
transition: width 5s;
要加上鼠标悬浮效果
.tran{
float: left;
width: 100px;
height: 100px;
background-color: #bebebe;
transition: width 5s;
}
.tran:hover{
width: 300px;
}
如果时长未规定，则不会有过渡效果，因为默认值是 0。
多项改变
如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开：
7.css权重
在css层叠样式，如果想要使用优先级别低样式，就需要在该样式后面追加 !important
.tran{
width: 100px;
height: 100px !important;
}
.tran{
height: 300px;
}
205
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
