定义和应用样式
-
使用元素内嵌样式
-
使用文档内嵌样式
-
使用外部样式表
html文件使用link引用css文件，css文件使用@import引用css文件，@import语句必须位于样式表顶端。
可以使用@chartset声明样式表的字符编码，只有@chartset可以位于@import前面。
css没有声明编码的话使用html声明的，HTML也没有的话使用默认的UTF-8。
以上三者统称作者样式。
样式还有两个来源：浏览器样式、用户样式（例如谷歌浏览器中用户可以编辑custom.css文件自定义样式）
样式层叠顺序
元素内嵌样式——文档内嵌样式——外部样式表——用户样式——浏览器样式
可以使用 !important设置重要样式用来调整层叠顺序，但如果作者样式和用户样式同时设置重要样式，则用户样式优先。
选择器优先级
- id值的数目
- 其他属性和伪类的数目
- 元素名和伪元素的数目
继承
与元素外观相关的样式会被继承，与元素在页面上的布局相关的样式不会被继承；
在样式中使用 inherit可以强行实施继承，明确指示浏览器在该属性上使用父元素样式中的值。
颜色
颜色名称、十进制、十六进制、函数
长度
-
绝对长度
in 英寸 cm 厘米 mm 毫米 pt 磅 pc pica -
相对长度
em 与元素字号挂钩 ex 与元素字体的“x高度”挂钩 rem 与根元素的字号挂钩 px css像素 % 另一属性的值的百分比 css的属性值还可以设置为算式，算是包含在关键字calc之后的括号中。
css角度单位
| deg | 度（0-360） |
|---|---|
| grad | 百分度（0-400） |
| rad | 弧度（0-6.28） |
| turn | 圆周（1 turn = 360 deg） |
css选择器
基本选择器
- *选取所有元素
- 选取指定类型的元素
- .类选择器
- #id选择器
- [attr]属性选择器，选取定义了attr属性，且属性值任意的元素
- [attr=“val”]属性值等于val
- [attr^=“val”]属性值以val开头
- [attr$=“val”]属性值以val结尾
- [attr*=“val”]属性值包含val
- [attr~=“val”]属性值有多个值，其中一个为val
- [attr|=“val”]属性值为连字符分割的多个值，其中第一个为val
复合选择器
- <选择器>,<选择器> 选择同时匹配所有选择器的元素
- <> <>后代选择器，目标元素是第一个选择器的元素的后代，且匹配第二个选择器
- <> > <>选择子元素，目标元素是第一个选择器的元素的直接后代，且匹配第二个选择器
- <> + <>相邻兄弟选择器，目标元素紧跟在匹配第一个选择器的元素之后，且匹配第二个选择器
- <> ~ <>普通兄弟选择器，目标元素跟在匹配第一个选择器的元素之后，且匹配第二个选择器
- 匹配的元素在指定元素之后，但不一定相邻
伪元素选择器
- ::first-line选取块级元素文本的首行
- ::first-letter选取块级元素文本的首字母
- :before :after选取元素之前或之后插入内容
- 两者经常跟css计数器特性一起使用，结合两者可生成数值内容
结构性伪类选择器
根据元素在文档中的为孩子匹配元素。
- :root选取文档中的根元素
- :first-child选取元素的第一个子元素
- :last-child选取元素的最后一个子元素
- :only-child选取元素的唯一一个子元素
- :only-of-type选取属于父元素的特定类型的唯一子元素
- :nth-child(n)选取父元素的第n个子元素，索引从1开始
- :nth-last-child(n)选取父元素的倒数第n个子元素
- :nth-of-type(n)选取属于父元素的特定类型的第n个子元素
- :nth-last-of-type(n)选取属于父元素的特定类型的倒数第n个子元素
UI伪类选择器
根据元素的状态匹配元素。
- :enabled选取已启用的元素
- :disabled选取被禁用的元素
- 以上两个匹配的是自带禁用状态的元素
- :checked选取所有选中的复选框和单选按钮
- :default选取默认按钮
- :valid :invalid选取基于输入验证判定的有效或者无效的input元素
- :in-range :out-of-range选取被限定在指定范围之内或者之外的input元素
- :required :optional根据是否允许使用required属性选取input元素
动态伪类选择器
根据条件的改变匹配元素。
- :link 选取未访问的链接元素
- :visited选取用户已访问的链接元素
- :hover选取鼠标指针悬停在其上面的元素
- :active选取被当前用户激活的元素，这意味着用户即将点击该元素
- :focus选取获得焦点的元素
其他伪类选择器
- :not(<>) 否定选择
- :empty选取不包含任何子元素或者文本的元素
- :lang(<语言>)选取lang属性为指定值的元素
- :target选取url片段标识符指定的元素
属性
边框和背景属性
- 使用border简写属性border，属性值包括宽度，样式，颜色[用空格隔开]，或者用以下三个具体属性：
- border-width定义边框宽度，属性值有长度值、百分数以及Thin、medium、thick，后三个值的具体意义由浏览器定义
- border-style的属性值有none，dashed[破折线边框]，dotted[圆点线边框]，double[双线边框]，groove[槽线边框]，inset[内嵌]，outset[外凸]，ridge[脊线]，solid[实线]
- 加上top，bottom，left，right任意一个就可以选择定义一条边框，例border-bottom-style，border-bottom-width，border-bottom-color
- border-radius简写属性创建圆角边框，属性值是长度或者百分数，或者用以下四个具体属性：
- border-top-left-radius
- border-top-right-radius
- border-bottom-left-radius
- border-bottom-right-radius
- border-image使用图像创建边框，在一条声明中设置以下所有值的简写属性【图片路径要写对】
- border-image-source设置图像来源
- border-image-slice设置切分图像的偏移，1~4个长度值或百分数
- border-image-width设置图像边框的宽度，auto或1~4个长度值或百分数
- border-image-outset边框图像向外扩展的部分，1~4个长度值或百分数
- border-image-repeat设置图像填充边框区域的模式，属性值如下：
- stretch拉伸切分图填满整个空间
- repeat平铺切分图填满整个空间
- round在不截断切分图的情况下，平铺切分图并拉伸填满整个空间
- space在不截断切分图的情况下，平铺切分图并在图片之间保留一定的间距以填满整个空间
- background简写，设置所有的背景相关属性
- background-color或background-image定义背景颜色或图像
- background-repeat设置图像的重复样式，属性值有repeat-x,repeat-y,repeat,space,round,no-repeat
- bakground-size设置背景图像的位置，属性值可以是长度、百分数以及预定义值cotain、cover、auto
- background-position定义背景图像的位置，属性值是长度单位或top，left，right，bottom，center
- background-attachment指定背景和元素滚动区域之间的关系，属性值有fixed，local，scroll
- local是背景附着在内容上，随内容一起滚动
- fixed背景固定到视窗上
- scroll背景固定到元素上，将浏览器调整至无法完整显示文本区域，scroll模式会启用浏览器的滚动条
- background-origin和background-clip属性指定背景绘制区域和可见裁剪区域
- 两者的属性值相同，border-box（边框盒子），padding-box（内边距盒子），content-box（内容盒子）
- box-shadow设置元素的盒子阴影
- hoffset阴影的水平偏移量
- voffset阴影的垂直偏移量
- blur模糊值
- spread阴影的延伸半径
- color阴影颜色
- inset阴影内嵌到盒子中
轮廓
边框和轮廓最大的区别是轮廓不属于页面，因此应用轮廓不需要调整页面布局
- 使用简写属性outline
- outline-color
- outline-style
- outline-offset设置轮廓距离元素边框边缘的偏移量
- outline-width
使用盒模型
-
padding设置盒子内边距区域的尺寸
-
margin设置盒子外边距区域的尺寸
-
width和height设置元素的尺寸
-
box-sizing设置尺寸应用到盒子的哪一部分
-
max-width、min-width、max-height、min-height为元素大小设置范围
-
overflow、overflow-x、overflow-y设置元素溢出内容的处理方式
- 属性值auto、hidden、visible、scroll
-
visibility设置元素的可见性
- collapse属性值，元素不可见，且在页面布局中不占据空间【只能应用到表相关元素】
- hidden属性值，元素不可见，但在页面中占据空间
- visible默认值，元素在页面上可见
-
display设置元素盒子的类型
- 取none值，可以设置元素的可见性
- block值，元素在垂直方向上区别于周围元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p id="toggle"> 此方法可以解决绝大多数情况的文本溢出问题，但是最后的省略号因为是定位到此处的，所以难免会出现将文字遮挡一半的情。 </p> <p> 为了解决这种突兀的现象，可以通过css改变背景渐变色或者直接添加背景图片的方法解决，此处我选择采用添加背景图片的方法。 </p> <button>Block</button> <button>None</button> <script> var buttons = document.getElementsByTagName('button'); for(var i=0; i < buttons.length; i++){ buttons[i].onclick = function(e){ document.getElementById('toggle').style.display = e.target.innerHTML; }; } </script> </body> </html>- inline值，元素显示为段落中的一个字
- inline-block，元素对外具有行内元素的属性，对内具有块元素的属性，不换行有宽高
- run-in值，显示方式依赖其周围的元素
- 如果相邻兄弟元素是块级元素，则它设置为行内元素
- 其他情况下作为块级元素对待
-
float将元素移动到其包含块的左边界或右边界，或者另一个浮动元素的边界
-
left移动元素，使其左边界挨着包含块的左边界，或者另一个浮动元素的右边界
-
right移动元素，使其右边界挨着包含块的右边界，或者另一个浮动元素的左边界
-
none元素位置固定
JS中提到float属性必须使用cssFloat ===>> **.style.cssFloat = xxxxxx
-
-
clear设置盒子的左边界、右边界或者左右两个边界，不允许出现浮动元素，阻止浮动元素堆叠
- left元素的左边界不能挨着另一个浮动元素
- right元素的右边界不能挨着另一个浮动元素
- both元素的左右边界都不能挨着另一个浮动元素
- none元素的左右边界都可以挨着另一个浮动元素
创建布局
定位内容
- position
- z-index指定元素显示的层叠顺序，值越小，在层叠顺序中就越靠后，默认值为0
多列布局
- column-count指定列数
- column-fill指定内容在列与列之间的分布方式，属性值有balance和auto
- column-gap指定列之间的距离
- column-rule在一条声明中设置column-rule-*的简写属性，包括列之间的宽度值、样式、颜色
- columns设置column-span、column-width的简写属性，包括元素横向跨多少列的数值和列宽长度值
弹性盒布局
使用弹性布局可以创建对浏览器窗口调整响应良好的流动界面。
-
-webkit-box必须先使用设置为display的属性值
-
-webkit-box-flex指定元素的可伸缩性数值，分配给多个元素时，按比例分配的是多于空间，不能改变首选尺寸，所以被分配的多个元素呈现的尺寸不一定成比例
-
-webkit-box-align如果内容元素的高度小于容器的高度，告诉浏览器如何处理多余的空间
- start沿容器顶边放置
- end沿容器底边放置
- center多于空间被平分为两部分，分别显示在元素的上方和下方
- strech调整元素的高度，填充可用空间
-
-webkit-box-pack如果可伸缩元素达到最大尺寸，告诉浏览器如何分配空间，属性值有start[靠左]、end[靠右]、center[居中]、justify[均匀分配]
可伸缩元素不能包含浮动元素
设置文本样式
- text-align和text-justify设置文本块对齐
- text-align属性值有start、end、left、right、center、justify
- white-space定义如何处理空白
- normal，压缩空白符，文本行自动换行
- nowrap，压缩空白符，文本行不换行
- pre，保留空白符，遇到换行符则换行
- pre-line，压缩空白符，在一行排满或遇到换行符时换行
- pre-wrap，保留空白符，在一行排满或遇到换行符时换行
- direction指定文本方向
- letter-spacing、word-spacing、line-height指定字母之间、单词之间、文本行之间的间隔
- word-wrap指定溢出文本如何断行
- normal，即使不能完全放入包含块，单词也不断开
- break-word断开单词，使其放入包含块
- text-indent指定文本缩进
- text-decoration和text-transform装饰文本或者转换文本大小写
- text-shadow为文本块应用阴影效果
- 设置字体
- font简写属性
- font-family字体名称
- font-size字体大小
- font-style字体样式
- font-variant是否以小型大写字母展示
- font-weight字体粗细
- @font-face使用自定义字体
- 字体资源网站有www.google.com/webfonts
过渡、动画和变换
过渡属性
- transition-delay指定过渡开始之前的延迟时间
- transition-duration指定过渡的持续时间
- transition-property指定应用过渡的属性
- transition-timing-function指定过渡期间计算中间值的方式
- transition简写属性，指定所有过渡细节
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
padding: 5px;
border: medium double black;
background-color: lightgray;
font-family: sans-serif;
}
#life{
font-size: large;
border: medium solid black;
/* 增加反向过渡 */
-webkit-transition-delay: 10ms;
-webkit-transition-duration: 3s;
}
#life:hover{
font-size: x-large;
border: medium solid white;
background-color: pink;
color: white;
padding: 4px;
/* 创建过渡 */
-webkit-transition-delay: 100ms;
-webkit-transition-property: background-color, color, padding, font-size, border;
-webkit-transition-duration: 500ms;
}
</style>
</head>
<body>
<p>
在最近时期，人类还遭受到另一种丧失，<span id="life">那就是原本作为其行为根基的传统迅速的消减。</span>丧失了告诉他必须做什么的本能，丧失了告诉他应该做什么的传统，有时人甚至连自己想做什么都不知道。这样，他要么去做别人所做的事（随大流），要么做别人希望他做的事（集权主义）
</p>
</body>
</html>
动画
- animation-delay设置动画开始前的延迟
- animation-direction设置动画循环播放的时候是否反向播放
- normal每次重复都向前播放，如果可以重复播放多次，每次动画都恢复初始状态，从头开始播放
- alternate动画先向前播放，然后反方向播放，相当于animation-iteration-count属性的值为2
- animation-duration设置动画播放的持续时间
- animation-iteration-count设置动画的播放次数
- animation-name指定动画名称[必写]
- animation-play-state允许动画暂停和重新播放
- 属性值为paused停止播放，属性值为playing开始播放
- 结合JS动态改变属性值
- animation-timing-function指定如何计算中间动画值
- 简写属性animation:
观察以上属性，发现没有“指定作为动画的css属性”的属性。这是因为动画需要两部分定义，一部分是定义动画的样式，一部分是使用@key-frames，定义应用动画的属性，例如下面代码示例就是寻找名叫”cc“的关键帧。
动画的局限是关键帧为属性定义的值只能在动画中应用。出现这种情况的原因是css动画只是驱动新样式的应用，并没有让自身出现任何持久性变化。想让外观保持动画结束时的状态，必须使用过渡。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
padding: 5px;
border: medium double black;
background-color: lightgray;
font-family: sans-serif;
}
#life{
font-size: large;
border: medium solid black;
}
#life:hover{
font-size: x-large;
border: medium solid white;
background-color: pink;
color: white;
padding: 4px;
/* 创建动画 */
-webkit-animation-delay: 100ms;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-name: 'cc';
}
@-webkit-keyframes cc {
from{
font-size: xx-small;
background-color: red;
}
50%{
background-color: yellow;
padding: 1px;
}
75%{
color: plum;
padding: 2px;
}
to{
font-size: x-large;
border: medium solid white;
background-color: pink;
color: white;
padding: 4px;
}
}
</style>
</head>
<body>
<p>
在最近时期，人类还遭受到另一种丧失，<span id="life">那就是原本作为其行为根基的传统迅速的消减。</span>丧失了告诉他必须做什么的本能，丧失了告诉他应该做什么的传统，有时人甚至连自己想做什么都不知道。这样，他要么去做别人所做的事（随大流），要么做别人希望他做的事（集权主义）
</p>
</body>
</html>
变换
- transform指定应用的变换功能
- translate、translateX、translateY在水平方向、垂直方向或者两个方向上平移元素
- scale、scaleX、scaleY在水平方向、垂直方向或者两个方向上缩放元素
- rotate旋转元素
- skew、skewX、skewY在水平方向、垂直方向或者两个方向上使元素倾斜一定的角度
- matrix指定自定义变换
- transform-origin指定变换的起点
- %指定x轴或y轴的起点
- 长度值指定距离
- left、center、right指定x轴上的位置
- top、center、bottom指定y轴上的位置
其他css属性和特性
- color
- opacity透明度从0~1
- 表格样式
- border-collapse设置相邻单元格的边框处理样式
- collapse不要边框
- separate要边框，可以配合border-spacing改变相邻元素边框的间距
- border-spacing设置相邻单元格边框的间距
- caption-side设置表格标题的位置
- top
- bottom
- empty-cells设置空单元格是否显示边框
- show显示
- hide不显示
- table-layout指定表格的布局样式
- auto根据每一列中最宽的单元格设置单元格的宽度，不过这意味着确定页面布局之前，浏览器必须获得所有的表格内容
- fixed表格的大小是由表格自身和单独每列的width值确定的，没有写width的话，浏览器会设置等距离的列宽
- border-collapse设置相邻单元格的边框处理样式
- 列表样式
- list-style简写属性
- list-style-type列表中使用的标记的类型
- list-style-image图像作为列表标记
- list-style-position标记相对于列表项目盒子的位置
- list-style简写属性
- 光标样式
- cursor
- 属性值有auto、crosshair、default、help、move、pointer、progress、text、wait、n-resize、s-resize、e-resize、w-resize、ne-resize、nw-resize、se-resize、sw-resize
- cursor
6310
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
