CSS5再学习笔记更新结束

最近公司要使用前端，因此再次学习一遍。此笔记是看《疯狂HTML 5+CSS 3+JavaScript讲义》后的个人笔记

#引入样式
<link type="text/css" rel="stylesheet" href=""/>

#导入样式
<style type="text/css">
@import "outer.css";
@import url("outer.css");
</style>

1.选择器

元素选择器
*{
border:1px black solid;
}

div{...}

属性选择器
div[id]{} 对有id属性的div起作用
div[id=xx]{} 属性id值为xx
div[id*=xx]{} 属性id值包含xx
div[id^=xx]{} 属性id值开头为xx
div[id$=xx]{} 属性id值结尾是xx

ID选择器
#name{...} ##所有id="name"元素
p#name{...} ## 所有id="name"的p元素

class选择器
.name{...} ##所有class="name"元素
p.nname{...} ## 所有class="name"的p元素

包含选择器
div p .name{...} ##在div中，所有class="name"的p元素

子选择器
div>.name{...} ##只有是在"div子元素"且class="name"的元素
与包含选择器区别:包含选择器只要在内部即可，即便是子孙。子选择器必须是子代

兄弟选择器
#ssd ~ .name{...} ##先定位到id="ssd"的元素，他后面的兄弟节点且class="name"都可以被选择到，不包括他本身
eg:
<div id="1" class="name">
<div id="ssd" class="name">
<div id="2" class="name">
<div id="3" class="name">
2与3的元素会被选择到

选择器组合
selector1,,selector2,selector3...{...}

伪元素选择器
#name:first-leter{...} ##第一个字母 eg:<div id="name">this is test</div>,只有第一个字母t会被选中
:first-line{...} ##第一行
:before ##指定对象内部的前端插入内容
:after ##指定对象内部的尾端添加内容
:first-child
:last-child
:nth-child(n) ##必须是父类元素的第n个子节点用在<ul> <tr>中比较合适，找子元素
:nth-last-chid(n) ##必须是其父类元素的倒数第n个子节点
...
...

内容相关属性 ##先不了解，用到不多
content : 指定该属性的值
quotes : 该属性为content指定open-quote和close-quote
counter-increment: 该属性用于定义一个计数器
counter-reset: 该属性用于对指定的计数器值复位

list-style-type list属性: 自定义编号常用值
decimal :阿拉伯数字，默认
disc : 实心圆
circle : 空心圆
square : 实心方块
lower-roman : 小写罗马
low-alapha : 小写英文字母

UI元素状态伪类选择器
:link
:visited
:active
:hover
:focus
:enabled
:disabled
:checked
:read-only
:required
:in-range
:out-on-range
:optional ##用于匹配没有“必填”要求的元素
:valid ##校验通过的元素
:invalid
...
...

eg:
a:hover{}

浏览器专属的属性
-ms- IE
-moz- FireFox
-webkit- Chrome

:tartget伪类选择器 ##没看懂

selector1:not(selector2)伪类选择器 ##匹配selector1的，不匹配selector2的
eg:
li:not(#ajax){...}

#在js中修改样式
document.body.style.backgroundColor="#912";
document.getElementById("up").className="solid";

2.字体与文本相关属性
font一类属性
font-style normal,italic(斜体) bold bolder
font-variant 大写字母格式 normal small-caps(小型大写字母)
font-weight 是否加粗 normal bold bolder
font-size 数值，百分比 xx-small x-small small medium(默认，正常字体) large x-large xx-large larger smaller
font-height
font-family 设置字体
font-size-adjust 进行微调每种字体的宽度不同，需要相同时，需设置此属性的aspect参数，eg:<div style="font-family:Roma;font-size:12px;font-size-adjust:0.41">this is the test!</div>
font-stretch 改变文字的横向拉伸 normal narrower(横向压缩) wider(横向拉伸)

text-decoration 是否修饰 none blink(闪烁) underline line-through overline(上画线)
text-transform 设置文字的大小 none capitalize(首字母大写) uppercase(全部大写) lowercase(全部小写)
line-height 设置字体行高
letter-spacing 设置字符之间的间隔 normal/12px
word-spacing 设置单词之间的间隔 normal/12px
text-shadow 是否有阴影效果 color xoffset（指定阴影在横向上偏移） yoffset(指定阴影纵向上偏移) radius(模糊半径)
eg:1. <p style="text-shadow:15px 15px 2px gray">this is the test</p>
2.添加多个阴影<p style="text-shadow:15px 15px 2px gray,-6px 15px 2px green">this is the test</p>

color 指定字体颜色
eg: color:white / color:#FF0000 /color:rgb(255,255,255) /color:rgba(255,255,255,0.3) /hsla函数表示:色调，饱和度，亮度，透明度 color:hsla(120,80%,50%,0.5)

文件相关属性
text-index 设置段落缩进
text-overflow 控制溢出文本的处理方法
text-overflow:clip:指定overflow:hidden有文本溢出时，只是简单的剪切掉溢出文本
text-overflow:ellipsis:指定overflow:hidden有文本溢出时，裁剪溢出文本，并标记(...)
vertical-align 设置目标元素里内容的垂直对其方法
auto（自动）,baseline，sub，supper（文本上标），top，middle，bottom，length
text-align 水平对其方法 left,right,center,justify
direction 文本方向 ltr/rtl
white-space 文本对空白的处理
normal，nowrap（文本不会换行，遇到br为止），pre-wrap(保留空序列符，可自动换行),pre-line(合并空序列符号),inherit（指定父元素继承white-wrap属性）
word-break 目标文本的换行方式
normal(使用浏览器自动换行规则) ，keep-all(只在办空格或连字符处换行)，break-all(允许单词中换行)
word-wrap 目标文本的换行方式，控制长单词或url地址换行
normal，break-word

#使用服务器字体（从服务器上下载的），优先使用客户端字体
@font-face{
font-family: CrazyIt; //字体名称
src:url("Blazed.ttf") format("TrueType"); //url字体的绝对路径 format字体格式
font-weight:bold; //定义粗体，可选属性
font-style:italic; //定义斜体，可选属性
}
@font-face{ //当在客户端找不到Goudy Stout字体时，才会通过url("Blazed.ttf")下载服务端字体
font-family: CrazyIt; //字体名称
src:local("Goudy Stout"),url("Blazed.ttf") format("TrueType"); //local指定客户端字体名称
}

背景相关的属性
background-color
background-image eg:background-image:url(1.jpg);
background-repeat
repeat,no-repeat,repeat-x,repeat-y
background-attachment 图片随元素里的内容滚动而滚动还是固定
scroll(图片随元素里的内容滚动而滚动，默认)，fixed
background-position 图片位置
eg:background-position:12px 20px; background-position:center botton;

background-origin: 设置背景覆盖的起点。与background-position类似
1.border-box 指定从边框区开始覆盖
2.padding-box 指定背景从内填充区开始覆盖
3.content-box 从内容区开始覆盖
background-size: 设置背景的大小
1.长度值 background-size:60px 30px
2.百分比 background-size:100px 80px
3.auto(指定一个值，另一个值为auto) background-size:auto 20px; background-size:80% auto;
background-clip：设置背景的覆盖范围
1.border-box 覆盖盒子模型的 border，padding content
2.no-clip 覆盖盒子模型的 border，padding content
3.padding-box 覆盖盒子模型的 padding content
4.content-box 覆盖盒子模型的 content
background-repeat: 新增的space和round。如果不指定的时候，有的图片超出边境，会自动剪切
1.space 调整图片的大小，使图片完整的显示出来
2.round 调整图片的边距，使图片完整的显示出来

#多背景图片
eg:
background-image:url("1.jpg"),url("2.jpg"),url("3.jpg");
background-repeat:repeat-y,repeat-x,repeat;
background-position:center top,left center,left top;

##使用渐变背景（p226）
background:linear-gradient(方向?颜色列表) 设置线性渐变
方向：to top;to button; tp right; to left top; top right bottom,Ndeg（指定角度）
background:linear-gradient(to top,red,blue);
background:linear-gradient(45deg,red,blue);
background:linear-gradient(45deg,red 20%,blue 40%,green 40%);

background:repeating-linear-gradient 设置循环线性渐变
background:repeating-linear-gradient(45deg,red 10%,blue 20%,green 10%);

background:radial-gradient(形状? 大小? at x坐标 y坐标, 颜色列表) 设置径向渐变
形状： circle（圆） ellipse（椭圆）
大小可以是数值也可以是：closest-side:渐变大小到最近的边，farthest-side:...最远边，closest-corner:渐变大小到最近的角，farthest-corner:...
圆心：必须以at关键词开始
eg:background:radial-gradient(cricle 50px at 150px 30px,red 20%,blue 40%，green 40px);
background:radial-gradient(ellipse 100px 30px at 150px 30px,red 20%,blue 40%，green 40px);

background:repaeting-radial-gradient 设置循环径向渐变

##边框相关属性
border 复合属性，可以设置边框的粗细，线性，颜色
eg:border:5px double #555;
border-color: 四个值:上，右，下，左三个值:上，左右，下两个值：上下，左右
border-style
none（无边框） hidden（隐藏边框） dotted（点线边框） dashed（虚线边框）
solid double（双线边框） groove（3D凹槽边框） ridge（3D凸曹边框） inset(3D凹入边框) outset(3D凸出边框)
border-width

border-top
border-top-color
border-top-style
border-top-width

#渐变边框(p241)
border-top-colors
eg:-moz-border-top-colors:#555 #666 #777;

##圆角边框
border-radius
eg:border:3px solid black;border-radius:10px 20px 30px 40px;
border-top-radius

##图片边框
border-image-source:url()
border-image-slice: 该属性可指定1-4个数值或百分比，用于如何对边框图片进行切割
border-image-width：图片边框的宽度 1-4个值或百分比或auto
border-image-repeat
eg:-webkit-border-image:url(1.jpg) 27/27px repeat;

##使用opacity控制透明度
0-1,0完全透明，1完全不透明

##padding和margin相关属性
padding：内填充相关属性
margin：外边距相关属性

3.大小、定位、轮廓相关的属性

#width、height相关
height
max-height 对象目标的最大值
min-height
width
max..
min..

#box-sizing属性
content-box 设置width，height控制元素的内容宽度和高度
border-box 设置width，height控制元素的内容区加内填充区加边框区的宽度和高度
inherit 指定从父元素继承box-sizing属性功能

eg:
div的 content为：200px,100px
<div style="width:200px;height:100px;background-color:#ddd;
background-clip:content-box;
border: 20px solid #555;
padding:20px;
box-sizing:content-box">
<div>
div的边框+content为：200px,100px
<div style="width:200px;height:100px;background-color:#ddd;
background-clip:content-box;
border: 20px solid #555;
padding:20px;
box-sizing:border-box">
<div>

#resize属性指定是否允许用户通过拖动来改变元素的大小
none 不允许拖动
both 允许拖动改变宽和高
horizontal 不允许....宽度
vertical 不允许....高度
inherit 继承父元素的resize属性值（默认）

eg:
<div style="width:200px;height:100px;background-color:#eee;
resize:both;
overflow:auto;
border:2px solid #555;">
</div>

##calc函数，根据父类框大小，动态计算长宽
可用在border margin padding font-size width height等属性中
eg:
div->div{
border:1px solid black;
display:inline-block;
margin:5px;
box-sizing:border-box;
width:calc(50%-14px);
height:calc(100%-10px)
}
宽度子类中每个div占50%并减去14px
高度子类中每个div占100%并减去10px

##定位先关属性
position 目标定位方式
absolute：允许将该对象漂浮于页面至上
relative：目标对象的位置将参照前一个对象的位置进行定位
static：目标对象仅为页面作为参考
z-index 设置目标对象的漂浮层的层序，该值越大，漂浮层越漂浮于上面
此属性仅当position属性为：absolute和relative时有效
top
right
bottom
left

eg：
<div style="position:absolute;left:100px;top:80px;
width:80px;height:88px;z-index:1;background-color:#888">
</div>

##轮廓先关的属性
outline: 复合属性，可全面设置目标对象轮廓的颜色，线型，线宽三个属性
outline-color
outline-style: ...与border-style一样
outline-width: 目标元素的轮廓宽度
outline--offset：目标元素的轮廓偏移距(轮廓与边框之间的距离)

eg:
outline:rgba(50,50,50,0.5) solid 10px;

##用户界面和滤镜属性 (先不要了解)

#appearance 允许将HTML元素设置成元素看上去像标准的用户界面元素

#使用filter属性应用滤镜
blur 设置模糊滤镜
brightness 设置高亮滤镜
....

4.盒模型和布局相关属性

#盒模型和display属性

两张基本盒模型：
display:block 这种盒模型默认占据一行,可以设置宽度和高度
display:inline 这种盒模型的元素不会占据一行(默认允许再一行放置多个元素)

eg:
body>span{
display:block; /inline;
}

display:none值和visibility属性
display:none 对目标对隐藏进行隐藏，一旦隐藏，页面内容也会释放
visibility visible/hidden 当值为hidden时，元素所占的空间仍然会被保留
eg:
span{
display:none;
}
span{
visibility:hidden;
}

inline-block 类型的盒模型
display:inline-block 是block和inline的综合体，即不会占据一行，又可以设置宽度和高度

eg:
div>div{
border:1px solid #aaf;
display:inline-block;
box-sizing: border-box;
vertical-align:top; #默认是在底部对其，设置在top对齐
padding:5px;
}

inline-table 类型的盒模型
display:inline-table 这个盒模型允许表单通过width、height设置宽度和高度，而且允许它的左边、右边出现其他内容

#使用table类型的盒模型实现表单(使用div+css实现表单，感觉作用不大)
table table-caption table-column....

list-item 类型盒模型 (使用不多)
使用dev+css实现ul标签
eg:
div{
display:list-item;
list-style-type:square;
margin-left: 20px;
}
<div>this is one</div>
<div>this is two</div>
<div>this is three</div>

run-in类型盒模型（使用不多）
1.如果run-in元素包含一个block类型元素，那么该run-in类型的元素自动变成block元素
2.如果run-in类型元素的相邻兄弟是block类型元素，那么run-in类型的元素将变成inline，且自动插入作为兄弟元素的第一个元素
3.其他情况，run-in类型当成block
span{
display:run-in;
border:1px solid black;
}

##对盒模型添加阴影也可以对表单和单元格添加阴影

box-shadow属性复合属性，为所有盒模型的元素整体添加阴影
box-shadow: hOffset vOffset blurLength spread color inset;
hOffset: 该属性控制阴影在水平的偏移
vOffset: .... 垂直的偏移
blurLength:控制阴影的模糊程度
spread:控制阴影的缩放程度
color:
inset:该属性用于将外部阴影改为内部阴影
eg:
div{
box-shadow:10px 8px 20px 15px red;
}
div{
box-shadow:10px 8px 20px 15px red inset;
}
table{
box-shadow:10px 8px 20px 15px red;
padding:5px;
}

##布局相关的属性
visibility：用于设置目标对象是否显示
visible/hidden
dispaly:设置目标对象是否显示以及如何显示
float: 控制目标HTML元素是否浮动以及如何浮动，当设置此属性，该元素当做block元素处理，相当于添加display:block;
float:left;
clear:清除浮动特性
clip：控制元素如何剪切
overflow:
overflow-x 只控制水平方向
overflow-y 只控制垂直方向
overflow-style

#使用clear属性实现换行
clear属性设置清除HTML元素的"浮动"
none:默认值 HTML元素左右都支持浮动特性
left: 清除左边的浮动特性
right:
both:清除左右的浮动特性

overflow设置滚动条
visible:指定不剪切内容也不添加滚动条
auto:不够容纳时自动添加滚动
hidden:自动剪切那些不够的空间显示的内容
scroll：指定元素总是显示滚动条

overflow-style （不要使用此属性）
该属性用于设置溢出内容的滚动方式
auto:让浏览器自动选择滚动方式
scrollbar:让元素选择添加滚动条
move:允许用户移动元素中的内容
marquee:元素中的内容自动滚动播放

#使用clip属性控制元素剪切（需要看此剪切图）
clip(A B C D) 四个值都可以设置为auto
eg:clip(16px 400px auto 30px);

column-count 实现多栏布局
会根据内容中是否有<br/>换行，进行分栏
div#content{
column-count:2;
-moz-column-count:2;
}
<div id="content">
this is one<br/>
this is two
</div>

column-width 指定栏宽度
columns 复合属性可以设置栏目的宽度、栏目·数量两个值
column-width 指定每个栏目的宽度
column-rule 复合属性可以同时指定分隔条的宽度、样式、颜色
column-rule:2px solid red;
column-rule-width
column-rule-style 与border-style的style可选值一样
column-rule-color
column-gap 指定各栏之间的间距
column-fill 控制栏目的高度
auto 各栏目的高度随着其内容的多少变化
balance 各栏的高度会统一成内容最多的那一栏高度
column-span 为了设置如：标题这样的内容，不进行跨栏。设置元素跨栏的列数
1,默认值，只跨一栏
all,设置元素跨栏所有列

##使用弹性盒布局（p290）（先不深入研究）
分栏布局与使用flex进行分栏是不同的，前着是在一篇文章中，无法控制，后者是在多个div中，可控
display:flex

flex-flow 弹性盒子用于控制容器内子元素的排列方式和换行方式 = flex-direction + flex-wrap
flex-direction 指定弹性盒内子元素的排列方向
row：横向从左到右排列
row-reverse 横向从右到左排列
column 纵向从上到下排列
column-reverse
flex-wrap 子元素的换行方式
nowrap 不换行（默认值）
wrap 换行
wrap-reverse 反向换行
order 指定子元素的排列顺序
用在子元素中
flex 用于控制子元素的缩放比例 = flex-grow + flex-shrink +flex-basis
align-items 控制子元素的排列方向的垂直方向上的对齐方式
flex-start：顶部（或左）对其
flex-end ：底部（或右）对其
center ：居中对其
baseline ：顶部（或左）对其，但以元素的底部作为对齐基线
stretch ：拉伸子元素，让他们占满父容器
align-self 控制该子元素自身在排列方向的垂直方向上的对齐方式
justify-content 控制子元素如何分布，从而充分利用这些多余的空间。该属性用于控制子元素在排列方向上的分布方式
flex-start
flex-end
center
space-between
space-around
align-content 控制各行的分布方式
flex-start
flex-end
center
space-between
space-around

5表格、列表相关属性及media query

#表单相关属性
border-collapse 控制单元格的边框是否合并在一起
separate 分开
collapse 合并
border-spacing 当border-collapse:separate时，控制边框之间的距离
caption-side 设置表格标题位于表格哪边必须有<caption>元素一起使用
top,bottom,left,right
empty-cells 该属性控制单元格内没有内容时，是否显示单元格边框，当border-collapse:separate时有效
show 显示
hide 隐藏
table-layout 用于设置表格宽度分布方式
auto 默认自动
fixed 固定值，当为fixed时，table的宽度有三种情况
1.通过<col..>或<colgroup...>设置宽度，table宽度等于所有column的和
2.设置第一行，table等于第一行总和
3.直接平均分配每列的宽度，忽略单元格中内容的实际宽度
eg
<table style="border-collapse:collapse;">
<tr>
<td style="width:80px"></td>
<td style="width:80px"></td>
</tr>
<tr>
<td ></td>
<td ></td>
</tr>
</table>

#列相关的属性
list-style 复合属性，可以同时指定下面三个属性
list-style-position 指定列表项标记出现的位置
outside 列表项标记放在列表元素之外
inside .....之内
list-style-image 指定列表项标记的图片
list-style-type 指定列表项标记样式
decimal 阿拉伯数字
disc 实心圆
circle 空心圆
square 实心方块
lower-roman
lower-alpha
...

如果使用<ol>且又使用list-style-type，则会自动变为有序状态
eg:
<ul style="list-style-type:square;list-style-position:inside;">

</ul>

#控制光标的属性
cursor 改变光标在目标元素上的形状
all-scroll 十字箭头光标
col-resize 水平拖动线光标
crosshair 十字线光标
move 移动十字箭头光标
help
no-drop 禁止光标
not-allowed 禁止光标
pointer 手形光标
progress 进度环的箭头光标
row-resize 垂直拖动光标
text 文本编辑光标
vertical-text 垂直文本编辑光标
wait 进度光标
*-resize 代表各种方向上拖动光标支持(N S W E) w-resize s-resize ne-resize...
eg
<div style="corsor:all-scroll;">this is the test</div>

#media query和响应式布局
@media not|only 设备类型 [ and 设备特性 ]*

设备类型列表
screen，tty, tv, projection（投影仪）, handheld（小型手持设备）,all...
设备特性列表
width 匹配浏览器窗口的宽度
height 600px
aspect-ratio 16/9 匹配浏览器窗口的宽高比例
device-width 600px 匹配设备分辨率的宽度
device-height
color 匹配使用多少位的色深
...
eg：
@media screen and (min-width:480px){
#container{
text-align:center;
}
}
@media screen and (min-width:1000px){
#container{
text-align:left;
}
}
<div id="container"> this is the test!</div>
当屏幕看度大于1000px，使用下面样式，当屏幕宽度小于480px,使用上面样式

#响应手机浏览器
手机浏览器为了兼容网页，将宽度都设置为980px,为了改变浏览器宽度，可以在<meta>改变

6变形与动画相关的属性（p325）

#transform设置形变，四种基本变形
位移变换 translate和translate开头的函数
旋转变换 rotate和以rotate开头的函数
缩放变换 scale和以scale开头的函数
倾斜变换 skew和以skew开头的函数

eg:

<div style="transform:translate(120px);"></div>
<div style="transform:translate(120px,-80px);"></div>
<div style="transform:translateZ(-80px);"></div> 

<div style="transform:rotate(30deg);"></div>
<div style="transform:rotateX(30deg);"></div>
<div style="transform:rotateX(30deg) routeZ(30deg);"></div>

<div style="transform:scale(0.8,,2.1);"></div>
<div style="transform:scaleY(0.4);"></div>

<div style="transform:skewX(30deg);"></div>
<div style="transform:skew(45deg,30deg);"></div>

#可以同时指定多个变形：
<div style="transform:rotate(30deg) translate(120px,-80px) scale(0.8,,2.1);"></div>

#transform-orgin 设置变形的中心点，该属性指定为xCenter yCenter或xCenter yCenter zCenter
left 指定左边界该属性只指定xCenter
top ...yCenter
right
bottom
center .... xCenter yCenter
长度值指定中心点距离左边界、右边界长度
百分比中心点据x轴、y轴的百分比
eg：
<div style="transform-orgin:left buttom;transform:scale(0.8,,2.1);"></div>
<div style="transform-orgin:left center;transform:scale(0.8,,2.1);"></div>

#matrix(m11,m12,m21,m22,dx,dy) 使用矩阵变换（先不了解,p333）
前面几个函数都可以用matrix()函数表示

##css3 3D变换 (不深入了解)

perspective属性设置3D透视点的距离，作用与父元素
eg:
<body style="perspective:500px">
<div style="transform:translateZ(-80px);"></div>
<div style="transform:skewZ(30deg);"></div>
</body>

transform-style 指定是否在3D空间正确呈现元素的“遮挡”等嵌套关系
flat: 不保留子元素的3D位置
preserve-3d: 子元素将保留3D位置

backface-visibility 设置HTML元素转到背面时是否可见
visible：背面可见
hidden: 背面不可见

#CSS3 提供Transition动画
transition 指定动画
transition-property 指定哪些HTML元素的哪个CSS属性进行平滑处理。可以指定background-color，width，height等标准属性
transition-duration 指定属性平滑渐变的持续时间
transition-timing-function 指定渐变的速度
ease 慢加速匀速
linear 慢加速
ease-in 慢速度加快
ease-out 速度快速度变慢
ease-in-out 慢快慢
transition-delay 指定延迟时间
eg：
<div style="background-color: red; transition: background-color 4s linear;"></div>

#CSS3 提供Animation动画
animation 指定动画，本身可以指定下面五个属性值
animation-name 指定动画名称
animation-duration 指定动画的持续时间
animation-timing-function 指定动画的变化速度
animation-delay 指定动画的延时
animation-iteration-count 指定动画的循环执行次数

animation-name是一个关键帧的定义，满足如下格式
@keyframes 关键帧名称{
from | to | 百分比{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
...
}
}
from 开始，to 结束帧，百分比关键帧出现位置
eg:
@keyframes xichuan{
0% {
left:100px;
transform: rotate(0edg) scale(1);
}
40% {
left:150px;
transform: rotate(720edg) scale(0.1);
}
60% {
left:75px;
transform: rotate(1080edg) scale(4);
}
100% {
left:100px;
transform: rotate(0edg) scale(1);
}
}

div{
}
div:hover{
animation-name:xichuan;
animation-duration:4s;
animation-iteration-count:1;
}

CSS5再学习笔记 更新结束

猜你喜欢

CSS5再学习笔记更新结束