CSS笔记

引入

外部样式表
<head>  
    <link rel="stylesheet" href="base.css">  
</head>
内部样式表
<head>  
    <style>  
        body{background-color: red;}  
        p{margin-left: 20px;}  
    </style>  
</head>
内嵌样式
<p style="color:red;margin-left:20px;">  
    this is a paragraph  
</p>

此方式不利于后期维护，较少使用此方法。

语法

选择器
属性声明=属性名:属性值
注释 /* */

@规则

@media 有动态样式时使用
@keyframes 动画过程
@font-face 引入外部字体

简单选择器

选择p标签：
p{color:blue;}

类选择器

.className
为标签赋予类
<p class="first">段落一</p>
可在CSS中用
.first{color:blue;}
来为这一类标签实现同样地样式
类选择器以“.”开头，可使用字母、数字、-、_，必须以字母开头，在同一个文件中可出现多次。

id选择器

idName

<p id="second">sdfjalsg</p>

second{color:blue;}

属性选择器

使用标签内的属性来选择。
[属性值]{样式}
[type=button]{样式}
[class~=sports]{样式}　　　　表示class中有sports的所有类
[href^="#"]{样式}　　选择以#开头的链接
[href$=pdf]{样式}　　选择以pdf结尾的链接
[href*="sports.com"]{样式}　　选择包含“sports.com”的链接

伪类选择器

<a href="http://www.amazon.cn">亚马逊中国</a>
使用伪类选择器
a:link{color:gray;} 选择href中有值的元素
a:visited{color:red;} 点击过后
a:hover 鼠标放在此处时
a:active 点击时的样式
:enabled 可用
:disabled 不可用
:checked 多选框中已选择的部分
:empty 选择空元素
:root 选择根标签
:not()
:target
:lang()

伪元素选择器

::first-letter{}
::first-line{}
::selection{} 被选中内容的样式

组合选择器
后代选择器和子选择器

<div class="txt">
<h3><a href="">电台名称</a></h3>
<div class="author">
<a href="">作者名称</a>
<i class="vip"></i>
</div>
<div class="info">
<p>共58期</p>
<p>订阅2533次</p>
</div>
<p>1</p>
<p>2</P>
</div>
.main a{样式} 选择main这个类之内的所有a元素
.main>a{样式} 选择main这个类之内第一级的a元素
div+p{样式} 选择与div相邻的p元素
div~p{} 选择div后面所有的p元素

选择器分组

p,h3,a{} 选择这三个元素

文本

字体
font:12px/2 arial;

此处表示字体是Arial，12像素大，行高是12px的2倍。

水平对齐

text-align:left|right|center|justify
左对齐、右对齐、居中、两端对齐。

垂直对齐

vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>
对应：基线、下标、上标、在此行最高点、在文本最高点、居中、此行最低点、文本最低点、行高百分比、以base line为基准向上移动的像素数量。

首行缩进

text-indent:<length> | <percentage>
写2em即两个字符，10px即缩进10像素，20%即缩进文本容器宽度的20%。
设置为极大的负值可以将文本隐藏。

white-space

定义空格、换行、tab是否保留。
white-space:normal | nowrap | pre | pre-wrap | pre-line
normal 空格、tab会被合并，换行被取消。
nowrap 在normal基础上，强制不换行直到遇到
标签。
pre 保留换行、空格、tab，不换行。
pre-wrap 保留空白符序列，正常换行。
pre-line 合并空白符，保留换行。
inherit 从父元素继承white-space属性值。

文本换行

word-wrap:normal | break-word
默认，允许单词换行。（对英文）
word-break:normal | keep-all | break-all
默认，不打断单词换行，任意单词均可以换行。

文本特效
阴影

text-shadow:none | [<length>{2,3}&&<color>?]#
text-shadow:1px 2px 3px #f00;
X轴偏移1px，Y轴偏移2px，模糊半径3px，阴影颜色#f00.

下划线

text-decoration:none | [underline || overline || line-through]
下划线、上划线、中划线。（这三个可以同时存在）

溢出字符隐藏

text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
表示文本溢出时用省略号表示，多出的字符隐藏，并且不换行。

定义鼠标形状

cursor:[<uri>,]*[auto | default | none | help | pointer | zoom-in | zoom-out | move]
default:指针
none:消失
help:带问号的指针
pointer：手形
zoom-in:放大镜
zoom-out:缩小镜
move:十字箭头
cursor:url(cur.cur),pointer; 写两个，以防所设置图无法显示。

inherit

强制继承父元素的属性。

盒模型

盒模型概念

CSS盒模型是CSS规范的一个模块，它定义了一个长方形的盒子，每个盒子拥有各自的内边距和外边距，并根据视觉格式化模型来对元素进行布局。

width

width:<length> | <percentage> | auto | inherit
使用像素个数或百分比定义（相对父元素的值）。
max-width设置最大宽度，min-width设置最小宽度

height

大体与width类似

padding

padding:[<length> | <percentage>]{1,4} | inherit
赋予4个值时，按顺序分别是上(T)、右(R)、下(B)、左(L)的填充(顺时针方向)。
.sample1{padding: 40px 30px 20px 10px;}
.sample2{padding-top: 40px;padding-right: 30px;padding-bottom: 20px;padding-left: 10px;}
上面这两条padding的定义实现的效果是一样的。
margin/border也具有类似的特点。

缩写：对面相等，后者省略；4面相等，只写一个。
padding:20px;　　padding:20px 20px 20px 20px;
padding:20px 10px;　padding:20px 10px 20px 10px;
padding:20px 10px 30px;　padding:20px 10px 30px 10px;

margin

用来设置所有四个（上下左右）方向的外边距属性，除了有一个默认值auto外其余语法与padding相同
只有一个值时，这个值会被指定给全部的四个边.
两个值时，第一个值被匹配给上和下, 第二个值被匹配给 左和右.
三个值时，第一个值被匹配给上,第二个值被匹配给 左和右, 第三个值被匹配给下.
四个 值时，会依次按 上、右、下、左 的顺序匹配 (即顺时针顺序).

margin合并
相邻元素的边距值会被合并成较大者。

border

CSS的border属性是一个用于设置各种单独的边界属性的简写属性。border可以用于设置一个或多个以下属性的值： border-width, border-style, border-color。

border: [border-width ||border-style ||border-color |inherit] ;

border-radius
overflow

overflow:visible | hidden | csroll | auto
默认是显示的，hidden会隐藏超出部分，scroll将使区块可以滚动，auto会自动在内容超出区域时增加滚动功能。

可以使用overflow-x和overflow-y分别设置水平和垂直方向上的多余内容显示方式。

box-sizing

默认情况width和height设置的是content-box的属性
content-box
border-box

box-shadow
box-shadow:none | <shadow>[,<shadow>]*  
<shadow>:inset? &&<length>{2,4} && <color>?

举例：box-shadow:4px 5px 3px 0px black;
表示水平向右便宜4px，垂直向下偏移5px，阴影边缘的3px（边缘向外1.5，向内1.5）会模糊，阴影大小0px。
当不设置颜色时，阴影颜色与文字相同。

box-shadow:3px 3px 5px 2px, inset 0px 0px 5px purple;

内外阴影可以叠加,使用逗号隔开。
阴影只是修饰，不占用空间。

outline

描绘轮廓。不占用空间。位置在border以外。
outline:[<outline-width>||<outline-style>||<outline-color>] | inherit

outline-width:<length> | thin | medium | thick | inherit (后面几个不常用，一般只用<length>)
outline-style:solid | dashed | dotted |...| inherit
outline-color:<color> | invert | inherit

width、height、padding、margin(水平居中)、border、border-radius、overflow、box-sizing、box-shadow、outline

背景

background-color

背景颜色设置。transparent表示全透明。

background-image

<bg-image>[,<bg-image>]*
url("http://.....")
background-image:url(red.png),url(blue.png)
两个背景图会都出现，靠前写的会在上面一层。

background-repeat

<repeat-style>[,<repeat-style>]*
<repeat-style>=repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
沿x轴、y轴平铺，space表示平铺图形之间有空隙，round表示通过缩放使图案充满区域。
举例：
background-image:url(red.png)
background-repeat:space;

background-attachment

用来设置背景图是否跟随页面滚动。

background-attachment:scroll | local | fixed

scroll表示背景图不跟着内容滚动，local即背景图会跟着滚动。

background-position

background-position:

按钮
linear-gradient

线性渐变。

radial-gradient
background-origin
background-origin:border-box | padding-box | content-box

即设置背景的边界在容器的哪个盒模型边界。

background-clip

设置背景显示的区域。
background-clip:border-box | padding-box | content-box

background-size
<bg-size>[,<bg-size>]*  
<bg-size>=[<length> | <percentage> | auto]{1,2} | cover | contain

可设置为像素数，百分比，或其他关键字。百分比是相对容器来说的。cover表示背景充满容器，contain表示背景填满容器但是不超过容器。

布局

布局简介、display(水平居中、居中导航)、position(轮播头图、固定顶栏、遮罩、三行自适应布局)、float(两列布局)、flex(三行两列自适应)

display

设置元素的显示方式。
display:block | inline | inline-block | none

display:block

默认是父元素的宽度，可设置宽高，换行显示。
默认display:block元素——div,p,h1-h6,ul,form...

display:inline

默认宽度是内容宽度，不可设置宽高，同行显示。
默认行级元素：span,a,label,cite,em...

display:inline-block

默认宽度为内容宽度，可设置宽高，同行显示，整块换行。
默认行内块级：input,textarea,select,button...

display:none

设置元素不显示。
使用visibility:hidden也可以隐藏元素，但是后续元素并不会显示在隐藏元素的位置，只是空出来这一块。

块级元素居中

margin:auto

居中导航

在容器处设置 text-align:center,每个导航项设置为inline-block

position

设置定位方式
top,right,bottom,left(用来定位元素边缘各方向对参照物边缘的距离）
z-index
定义元素在z轴的排序，默认值是0。
z-index栈
父元素的z-index值优先级更高。

position:static | relative | absolute | fixed
position:relative

相对定位，仍在文档流中，其参照物为元素本身。使用场景：绝对定位元素的参照物。

position:absolute

绝对定位：元素默认宽度是内容宽度，脱离文档流显示，其参照物是第一个定位祖先/根元素。

布局：轮播头图
position:fixed

固定定位：默认宽度是内容宽度，脱离文档流。参照物为视窗（当前浏览器窗口）

布局：固定顶栏
.top{position:fixed;top:0;width:100%;height:50px;}

将顶栏固定在视窗的顶部。

布局：遮罩
.mask{position: fixed;top: 0;left: 0;z-index: 999;width: 100%;height: 100%;background-color: #000;opacity: 0.3;}

说明：定位在左上角，宽高值设置成100%覆盖全屏，然后设置了颜色和透明度。

布局：三行自适应布局
.head{position: absolute;top: 0;left: 0;width: 100%;height: 100px;background-color: #ccc;}
.body{position: absolute;top: 100px;left: 0;bottom: 100px;right: 0;overflow: auto;}
.content{height: 2000px;}
.foot{position: absolute;bottom: 0;left: 0;width: 100%;height: 100px;background-color: #ccc;}

顶栏在top处，页脚固定在bottom，同时设置内容区top/left/bottom/right属性，撑开页面，使顶栏和页脚放在两头。

float
float：left|right|none|inherit

默认宽度是内容宽度，脱离文档流，会向指定的方向一直移动。float的元素在同一文档流。

float元素半脱离文档流

对于元素脱离文档流，对内容在文档流。

<style>
    body{width: 300px;padding: 5px;line-height: 1.6;border: 1px dashed blue;}
    .sample{height: 100px;margin-right: 5px;padding: 0 5px;line-height: 100px;background-color: pink}
    .sb{background-color: #eee;}

    .sb{outline: 1px dashed red;}

    .sample{float: left;}
</style>

<body>
    <div class="sample">float: left;</div>
    <div class="sb">A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the 'clear' property). </div>
</body>

可以看到sample元素对于sb元素是脱离文档流的，但是内容并不脱离文档流。

clear
clear:both | left | right | none | inherit

清除浮动效果。

.clearfix:after{content:'.';display: block;clear: both;height: 0;overflow: hidden;visibility: hidden;}
.clear
布局：两列布局
<style>
    html, body, .body, .main, .side{margin: 0;padding: 0;height: 100%;}
    .body{width: 960px;margin: 0 auto;}
    .main{background-color: pink;}
    .side{background-color: #eee;}

    .main{float: left;width: 660px;}
    .side{float: right;width: 300px;}
    .clearfix:after{content:'.';display: block;clear: both;height: 0;overflow: hidden;visibility: hidden;}
</style>


<body>
<div class="body clearfix">
    <div class="main">main</div>
    <div class="side">side</div>
</div>
</body>

flex

display：flex

在文档流中的子元素才是弹性元素。

flex-direction
flex-direction: row|row-reverse|column|column-reverse

安行弹性排列、反向行方向、列方向、反向列

flex-wrap
flex-wrap: wrap|wrap-reverse

换行、反向换行

order
.item2{order: 1;}
.item1{order: 10;}
.item3{order: -1;}

定义元素顺序，不是绝对值。定义的值越小则元素越靠前。

弹性
flex-basis
flex-basis:main-size|<width>

设置flex item的初始宽/高。

flex-grow
flex-grow:<number>
initial:0

设置元素分配剩余空间的比例

flex-shrink
flex-shrink:<number>
initial:1（默认值）

当空间不足时，用flex-shrink设置各个元素分摊的缩小比例。设置数值越大，缩小的越多。

flex
flex:<'flex-grow>'||<'flex-shrink'>||<'flex-basis'>
initial:0 1 main-size(默认值)
对齐
justify-content
justify-content:flex-start|flex-end|center|space-between|space-around

用来元素在有剩余空间时的对齐效果。（主轴）

align-items

设置辅轴的对齐方式。

align-items:flex-start|flex-end|center|baseline|stretch

分别表示上对齐、下对齐、居中、基线和拉伸。

align-self
align-self:auto|flex-start|flex-end|center|baseline|stretch

设置单个元素在辅轴的对齐方式

align-content
align-content:flex-start|flex-end|center|space-between|space-around|stretch

设置cross-axis方向（辅轴）上多行的对齐方式

三行两列自适应布局

flex ie9及以下不支持，目前主要用于移动web页面中

变形

transform
transform:none|<transform-function>
transform:rotate 旋转
transform:rotate(<angle>)

定义元素旋转的角度（顺时针方向）。

transform:translate 平移
transform:translate（x轴值，Y轴值）

当使用百分比填写时，是相对元素原来的位置移动百分比。

transform:scale 缩放
transform:scale（横向值，纵向值）

设置元素放大倍数（小于1时缩小）当只填写一个值时，两个值都是所写的那个。

transform:skew 缩放
transform:skew(ax[,ay])

元素在X轴和Y轴方向以指定的角度倾斜。如果ay未提供，在Y轴上没有倾斜。

transform-origin

定义变形的坐标原点，相对于原来元素的位置。默认值是元素的中心点。只写一个值的时候表示只移动x轴方向。

perspective

立体透视效果。

.m-demo-1 pre{transform:rotateY(45deg);}
.m-demo-1{perspective:2000px;}

沿Y轴旋转，值越小透视效果越明显。

.m-demo-1{perspective:500px;perspective-origin:50% 50%;}
.m-demo-1 pre{transform:rotateY(45deg);}

perspective-origin用来定义透视的观察角度。

transform:translate3d

定义元素在3D空间的三个方向移动的值。也可以使用translateZ单独定义Z轴缩放。

transform: scale3d

三个方向的缩放比例。也可以使用scaleZ单独定义Z轴缩放。(缩放Z轴本身)

transform:rotate3d
transform:rotate3d(0,0,1,45deg);

以0,0,1和原点的连线为轴旋转45度。

transform-style

transform-style属性指定了，该元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。

transform-style: preserve-3d
transform-style: flat

默认是flat。

backface-visibility

关键字，指定元素背面是否可见，可为以下值：
visible 表示背面可见，允许显示正面的镜像。
hidden 表示背面不可见。

动画

transition-property

定义动画内容

.m-demo:hover pre{left:500px;color:#000;}
.m-demo-1 pre{transition-property:none;}
.m-demo-2 pre{transition-property:all;}
.m-demo-3 pre{transition-property:left;}
.m-demo-4 pre{transition-property:left,color;padding:20px 0;line-height:30px;}
transition-duration

定义动画时长

.m-demo{width:600px;height:550px;outline:2px dashed;margin:20px auto;}
.m-demo pre{transition:2s;width:100px;height:100px;padding:0;line-height:100px;border-radius:50%;text-align:center;font-size:20px;}
.m-demo:hover pre{left:500px;color:#000;}
.m-demo pre:nth-child(1){transition-duration:0s;top:0;}
.m-demo pre:nth-child(2){transition-duration:1s;top:150px;}
.m-demo pre:nth-child(3){transition-duration:2s;top:300px;}
.m-demo pre:nth-child(4){transition-duration:3s;top:450px;}
transition-timing-function
.m-demo{width:600px;height:700px;outline:2px dashed;margin:20px auto;}
.m-demo pre{transition:2s;width:100px;height:100px;padding:0;line-height:100px;border-radius:50%;text-align:center;font-size:20px;}
.m-demo:hover pre{left:500px;color:#000;}
.m-demo pre:nth-child(1){transition-timing-function:ease;top:0;}
.m-demo pre:nth-child(2){transition-timing-function:linear;top:150px;}
.m-demo pre:nth-child(3){transition-timing-function:ease-out;top:300px;}
.m-demo pre:nth-child(4){transition-timing-function:cubic-bezier(0.8,0,0,0.8);top:450px;padding:30px 0;line-height:20px;font-size:12px;}
.m-demo pre:nth-child(5){transition-timing-function:steps(3,start);top:600px;padding:30px 0;line-height:20px;font-size:16px;}
transition-delay
.m-demo{width:600px;height:550px;outline:2px dashed;margin:20px auto;}
.m-demo pre{transition:2s;width:100px;height:100px;padding:0;line-height:100px;border-radius:50%;text-align:center;font-size:20px;}
.m-demo:hover pre{left:500px;color:#000;}
.m-demo pre:nth-child(1){transition-delay:0s;top:0;}
.m-demo pre:nth-child(2){transition-delay:1s;top:150px;}
.m-demo pre:nth-child(3){transition-delay:2s;top:300px;}
.m-demo pre:nth-child(4){transition-delay:3s;top:450px;}

动画效果延迟触发。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 159,015评论 4赞 362
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,262评论 1赞 292
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,727评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,986评论 0赞 205
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,363评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,610评论 1赞 219
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,871评论 2赞 312
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,582评论 0赞 198
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,297评论 1赞 242
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2赞 246
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1赞 260
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,385评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,035评论 3赞 236
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0赞 195
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2赞 274
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2赞 270

推荐阅读更多精彩内容

  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    love2013阅读 2,279评论 0赞 11
  • 【CSS】笔记
    （这是15年初学css时记的笔记） 选择器 简单选择器 标签选择器 直接把标签名加前面。 类选择器 用.+ cla...
    burningalive阅读 838评论 0赞 0
  • CSS基础笔记
    CSS（Cascading Style Sheets），层叠样式表。 基本格式 CSS注释 引入样式表 行内样式表...
    猛独阅读 260评论 1赞 0
  • CSS笔记
    CSS学习笔记 HTML与CSS布局 1、html布局标签： 推荐使用有具体语义的标签，而不是一味的使用div。 ...
    林云流水阅读 353评论 0赞 1
  • CSS相关总结
    一、CSS入门 1、css选择器 选择器的作用是“用于确定（选定）要进行样式设定的标签（元素）”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,540评论 0赞 6