Css 笔记

选择器{属性:值； 属性:值;}

属性	解释
Width:20px;	宽
Height:20px;	高
Background-color:red;	背景颜色
font-size:24px;	文字大小
text-align:left | center| right	内容的水平对齐方式
Vertical-align:middle居中| top bottom	垂直对齐方式
text-indent:2em;	首行缩进
Color:red;	文字颜色
line-height: 80px;	行高

 

CSS嵌入式 

<style type="text/css">
</style>

CSS链入式

<link rel="stylesheet" href="11css.css">

display块元素、行内元素

块级元素（block） <h1>...<h6>,<p>,<div>,列表

内联元素(inline)  <span>,<a>,<img>,<strong> ...

块元素转行内元素display:inline; 

行内元素转块元素display:block;块元素的默认值 元素会显示为块元素 前后带换行符

块和行内元素转行内块元素display:inline-block;

None  不会被显示

inline; 内联元素的默认值 元素会显示内联元素 前后无换行符

block;块元素的默认值 元素会显示为块元素 前后带换行符

inline-block; 行内块元素 元素既具有内联元素特征 也有块元素特征

 

继承 h系列不能继承文字大小。a标签不能继承文字颜色。

链接伪类

a:link{属性:值;}       链接默认状态  

a:active{属性:值;}      链接激活的状态

a:hover{属性:值;}      鼠标放到链接上显示的状态  

a:visited{属性:值;}     链接访问之后的状态

 ：focus{属性:值；}     获取焦点

文本修饰

text-decoration: none  去除修饰|  underline  添加下划线 |   line-through 添加删除线 | overline 设置文本的上划线

文本阴影

  Text-shadow: color x-offset y-offset blur-radius;

Color颜色 x-offset X轴位移，用来制定阴影水平位移量

y-offset Y轴位移，用来指定阴影垂直位移量 

blur-radius 阴影模糊半径，代表阴影向外模糊的模糊范围

浏览器兼容性 IE+  Firefox 3.5+  Chrome 2.0+  Opera 9.6+  Safari 4.0+

看兼容性网址 caniuse.com

背景属性

background-color 背景颜色

  background-color: rgba(80,80,80, 0.2);透明度

background-image    背景图片

背景平铺

Background-repeat  repeat(默认) | no-repeat 不重复| repeat-x  | repeat-y  

背景定位

Background-position  left 左 | right |  center  中|  top  | bottom |

背景颜色渐变

Background: Linear-gradient(position,color1 ,color2,....)

列 Background: Linear-gradient(to left,color1 ,color2,....)

从右（color1）到左（color2）

Position 渐变方向

兼容Webkit内核的阅览器

-webkit- Linear-gradient(position,color1 ,color2,....)

背景图片的大小控制

 Background-size:auto 自动 | 100px  | 50% |  percentage | cover  | contain

percentage 当使用百分值时，不是相对于背景的尺寸大小来计算的，而是

相对于元素的宽度来计算的

Cover 整个背景图片放大填充了整个元素

Contain 让背景图片图片保存本身的身高比列，将背静图片缩放到宽度或者

高度正好适应所定义背景的区域

 列：background-position:left bottom;

background-position:20px 30px;  左右  上下

       background: url("../img/cc.jpg") red no-repeat 0px 30px ;

行高

浏览器默认文字大小：16px

行高：是基线与基线之间的距离

行高=文字高度+上下边距

列

    div{
            line-height: 80px;
            height: 80px;
            border:1px solid red;
        }

边框

Border-top-style:  solid   实线

               dotted  点线

               dashed  虚线

double 双线

None 无 hidden隐藏

Border-top-color   边框颜色

Border-top-width   边框粗细

边框属性的连写   特点：没有顺序要求，线型为必写项。

border-top:2px blue dotted;

四个边框值相同的写法

border:1px red solid;

边框合并border-collapse:collapse;

禁止边框撑大

box-sizing: border-box禁止边框撑大 | ontent-box 默认的

圆角边框

Border-radius:10px 20px 30px 40px; 左上 右上 右下 左下

左半圆Border-radius:10px 0px 0px 10px;

上半圆Border-radius:10px 10px 0px 0px;

盒子的阴影

Box-shadow:inset x-offset y-offset blur-radius color;

Inset 阴影的类型 内阴影

x-offset  X轴位移 指定阴影水平位移量

y-offset  Y轴位移 用来指定阴影垂直位移量

blur-radius  阴影模糊半径阴影向外模糊的模糊范围

Color 阴影颜色 定义绘制阴影时所用的颜色

内边距

 Padding-left 左 |   right 右 |  top 上 |  bottom下

Padding 连写

Padding: 20px;   上右下左内边距都是20px

Padding: 20px 30px;   上下20px   左右30px

Padding: 20px  30px  40px;   上内边距为20px  左右内边距为30px   下内边距为40

Padding:  20px  30px   40px  50px;   上20px 右30px  下40px  左  50px

外边距

margin-left  左 | right 右 |  top 上 |  bottom 下

外边距连写

Margin: 20px;    上下左右外边距20PX

Margin: 20px 30px;   上下20px  左右30px

Margin: 20px  30px  40px;     上20px  左右30px   下  40px 

Margin: 20px  30px   40px  50px; 上20px   右30px   下40px  左50px

浮动

Float: left 左浮动

Float:right 右浮动

Float:none 无浮动 默认值。元素不浮动，并会显示在其文本中出现的位置

清除浮动clear

  Clear:left 在左侧不允许有浮动

Clear:right 在右侧不允许有浮动

Clear:both 在左右两侧不允许有浮动

Clear:None 默认值 允许浮动元素出现在两侧

After方法

 列：<style  type="text/css">
     .clear:after{
         content: "";/*在clear后面添加内容为空*/
         display: block;/*把添加的内容转化为块元素*/
         clear: both;/*清除这个元素两边的浮动*/
    }</style>

 

<div class="clear">
     <div></div>
    </div>

 

Overflow溢出处理  overflow:Visible

Visible 默认值 内容不会修剪 会呈现在盒子之外

Hidden 内容会修剪 并且其余内容是不可见的

Scroll 内容会被修剪 但是浏览器会显示滚动条以便查看其余内容

Auto 如果内容被修剪 则浏览器会显示滚动条以便查看其余的内容

Position定位

Absolute 绝对定位

Relative 相对定位

选择器

选择器	类型	功能描述
E F	后代选择器	选择匹配的F元素，并且匹配的F元素包含在匹配的E元素内
E>F	子选择器	选择匹配的F元素，并且匹配的F元素是匹配的E的子元素
E+F	相邻元素选择器	选择匹配的F元素，并且匹配的F元素位于匹配的E元素后面
E~F	通用兄弟选择器	选择匹配的F元素，并且匹配的E元素后面的所有F元素

 

结构选择器

选择器	功能描述
F E:first-child	作为父元素（F）的第一个子元素的元素E
F E:last-child	作为父元素（F）的最后一个子元素的元素E
F E:nth-child(n)	选择父级元素F的第n个子元素E，（n可以使1,2,3）关键字为even odd
E:first-of-type	选择父元素内具有指定类型的第一个E元素
E:last-of-type	选择父元素内具有指定类型的最后一个E元素
F E:nth-of-type(n)	选择父级元素F的第n个子元素E

 

属性选择器

 

选择器	功能描述
E[attr]	选择匹配具有属性att的E元素
E[attr=val]	选择匹配具有属性attr的E元素，并且属性值为val（其中val区分大小写）
E[attr^=val]	选择匹配元素E，且E元素定义了属性attr,其属性是以val开头的任意字符串
E[attr$=val]	选择匹配元素E，且E元素定义了属性attr,其属性是以val结尾的任意字符串
E[attr*=val]	选择匹配元素E，且E元素定义了属性attr,其属性包含了val ，换句话说，字符串val与属性值中的任意位置相匹配