CSS
作者：互联网
一、语法
p{//选择器（设置样式的范围）
//属性：值;
font-size:12px;//字号
color:blue;//字体颜色
font-weight:bold;//加粗
}
/*注释*/
二、样式添加方法
1.行内样式
<p style="color:red">//设置style属性
</p>
2.内嵌样式
head标签内设置style标签
只对当前页面有效
<head>
<style type="text/css">
p{
color:red;
}
</style>
</head>
3.链接样式
链接css文件
<head>
<link rel="stylesheet" href="路径" />
</head>
4.优先级
- 多重样式可以层叠，可以覆盖
- 样式的优先级按照“就近原则”
- 行内样式>内嵌样式>链接样式>浏览器默认样式
三、选择器
1.标签选择器
选择器的名字为标签的名字
h1{
font:"黑体";
font-size:12px;
}
2.类别选择器
p{font-size:12px;}
.one{font-size:18px;}
.two{font-size:24px;}
样式的引用：设置class属性
<p class="one">
类别1
</p>
<p class="two">
类别2
</p>
<p>
普通段落
</p>
3.ID选择器
#one{font-size:12px;}
#two{font-size:24px;}
样式的引用：设置id属性
<p id="one">
文字1
</p>
<p id="two">
文字2
</p>
4.声明
4.1嵌套声明
p span{
color:red;
}
<p><span>文字1</span>文字2</p>
4.2.集体声明
h1,p{text-align:center;}
4.3.全局声明
*{text-align:center;}
5.混合
//多个class选择器混用，用空格分开
<div class="one two"></div>
//id和class混用
<div id="my" class="one"></div>
id选择器不可以多个同时使用
四、样式
1.文字
1.1单位与颜色
| 单位 | 颜色 |
|---|---|
| px：像素 | red，blue，green：颜色名 |
| em：字符（自动适应用户字体） | rgb(x,x,x)：RGB值 |
| %：百分比 | rgb(x%,x%,x%)：RGB百分比值 |
| rgba(x,x,x,x)：RGB值，透明值 | |
| #rrggbb：十六进制数 |
1.2文本属性
| 属性 | 描述 | 取值 |
|---|---|---|
| color | 文本颜色 | red，rgb(x,x,x)··· |
| letter-spacing | 字符间距 | px,em |
| line-height | 行高 | px,em,% |
| text-align | 对齐 | center,left,right,justify |
| text-decoration | 装饰线 | none,overline,underline,line-through |
| text-indent | 首行缩进 | em |
1.3字体属性
| 属性 | 描述 | 取值 |
|---|---|---|
| font | 设置所有字体属性 | font:斜体 粗体 字号/行高 字体 |
| font-family | 字体系列 | font-family:"Microsoft YaHei",sans-serif;（依照顺序找到字体，有空格时需要加双引号） |
| font-size | 字号 | px,pt,% |
| font-style | 斜体 | italic |
| font-weight | 粗体 | bold |
2.背景
背景图片会覆盖背景颜色
| 属性 | 描述 | 取值 |
|---|---|---|
| background | 设置所有字体属性 | background:颜色 图片 repeat |
| background-color | 背景颜色 | reg,rgb(x,x,x)··· |
| background-image | 背景图片 | url("路径") |
| background-repeat | 背景图片的填充方式 | repeat,repeat-x,repeat-y,no-repeat |
3.超链接
超链接的状态，:伪类选择器
| 状态 | 描述 |
|---|---|
| a:link | 普通的、未被访问的链接 |
| a:visited | 用户已访问的链接 |
| a:hover | 鼠标指针位于链接的上方悬停 |
| a:active | 链接被点击的时刻 |
设置的顺序：a:link,a:visted>a:hover>a:active
a:link{
text-decoration:none;
color:#09f;
}
a:visited{
text-decoration:none;
color:#930;
}
a:hover{
text-decoration:underline;
color:#03c;
}
a:active{
text-decoration:none;
color:#03c;
}
4.列表
| 属性 | 描述 | 取值 |
|---|---|---|
| list-style | 设置所有列表属性 | |
| list-style-image | 为列表项标志设置图像 | url("路径") |
| list-style-position | 标志的位置 | inside,outside |
| list-style-type | 标志的类型 |
| list-style-type属性值 | 描述 |
|---|---|
| none | 无标记 |
| disc | 实心圆（默认） |
| circle | 空心圆 |
| square | 实心方块 |
| decimal | 数字 |
| lower-roman | 小写罗马数字 |
| upper-roman | 大写罗马数字 |
| lower-alpha | 小写英文字母 |
| upper-alpha | 大写英文字母 |
| lower-Greek | 小写希腊字母 |
| lower-latin | 小写拉丁字母 |
| upper-latin | 大写拉丁字母 |
5.表格
| 属性 | 描述 | 取值 |
|---|---|---|
| width | 宽 | px |
| height | 高 | px |
| border | 边框 | border:1px solid #eee（宽度 实线/虚线 颜色） |
| border-collapse | 表格重叠 | collapse |
奇偶选择器
隔行显示不同的颜色
标签:nth-child(数字/odd/even){//数字：第几行、odd：奇数、even：偶数
}
五、布局与定位
1.盒子模型
| 属性 | 描述 | 取值 |
|---|---|---|
| content | 内容 | |
| height | 高度 | px |
| width | 宽度 | px |
| padding | 内边距（-top、-bottom、-left、-right） | px,%（外层盒子的值） |
| border | 边框（-top、-bottom、-left、-right） | px,% |
| margin | 外边距（-top、-bottom、-left、-right） | px,%（外层盒子的值）、 |
| overflow属性（内容溢出的处理）值 | 描述 |
|---|---|
| hidden | 超出部分不可见 |
| scroll | 显示滚动条 |
| auto | 如果有超出部分，显示滚动条 |
| border属性 | 描述 | 取值 |
|---|---|---|
| border | 设置所有边框属性 | 宽度 样式 颜色 |
| border-width | 边框宽度 | px,thin,medium,thick |
| border-style | 边框样式 | dashed（虚线）、dotted（点）、solid（实线）、double（双实线） |
| border-color | 边框颜色 | red，rgb(x,x,x)··· |
水平分割线
.line{
height:1px;
width:500px;
border-top:1px solid #e5e5e5;
}
padding、margin属性：px,%（外层盒子的值）
margin属性：margin:px,px,px,px（上、右、下、左；省略时：上=下，右=左）
margin属性的合并：外边距合并成一个（取较大者）、垂直方向合并，水平方向不合并
水平居中：margin:任意值 auto；
2.定位机制
2.1文档流flow（默认）
从左到右，从上到下
| 元素分类 | 特点 | 常见元素 |
|---|---|---|
| block | 独占一行、元素的height、width、margin、padding都可设置 | div、p、h1...h6、ol、ul、table、form |
| inline | 不单独占用一行、width、height不可设置、有间隙问题 | span、a |
| inline-block | 不单独占一行、height、width、margin、padding都可设置 | img |
属性display：设置显示的属性
a{
display:block;
}
2.2浮动定位float
| float属性（设置浮动） | 描述 |
|---|---|
| left | 左浮动 |
| right | 右浮动 |
| none | 不浮动 |
| clear属性（清除浮动） | 描述 |
|---|---|
| both | 清除左右两边的浮动 |
| left/right | 只能清除一个方向的浮动 |
| none | 默认值 |
2.3层定位layer
| position属性 | 描述 |
|---|---|
| static | 没有定位（默认值） |
| fixed | 固定定位（相对于浏览器窗口） |
| relative | 相对定位（相对于直接父元素）、其在文档流中的原位置依然存在 |
| absolute | 绝对定位（相对于static以外的第一个父元素（最近定义的relative或者absolute），找不到则相对于body）、其在文档流中的原位置不再存在 |
z-index属性：大的在上层
六、CSS3
w3c制定标准慢，浏览器厂商快速加入新属性的支持，加前缀
w3c确定标准后，全面支持，去掉前缀
| 浏览器内核 | 浏览器 | CSS3前缀 |
|---|---|---|
| Webkit | Safari、Chrome | -webkit- |
| Gecko | Firefox | -moz- |
| Presto | Opera | -o- |
| Trident | IE | -ms- |
1.圆角边框
| border-radius属性 | 描述 |
|---|---|
| border-top-left-radius：水平值 垂直值 | 左上角形状 |
| border-top-right-radius：水平值 垂直值 | 右上角形状 |
| border-bottom-left-radius：水平值 垂直值 | 左下角形状 |
| border-bottom-right-radius：水平值 垂直值 | 右下角形状 |
2.阴影
| box-shadow属性 | 描述 |
|---|---|
| inset | 内部阴影 |
| outset | 外部阴影（默认） |
box-shadow:inset /outset（默认）水平偏移 垂直偏移 模糊距离 颜色
3.文字与文本
3.1文本阴影
text-shadow:水平偏移 垂直偏移 阴影大小 颜色
3.2长文本
允许长单词、URL强制进行换行
word-wrap：normal/break-word
3.3@font-face规则
利用@font-face规则，定义web字体，并引用
需要字体的四种文件格式，确保能在主流浏览器中都能正常显示改字体
| 字体文字后缀 | 适用于浏览器 |
|---|---|
| .TTF或.OTF | Firefox、Safari、Opera |
| .EOT | Internet Explorer 4.0+ |
| .SVG | Chrome、IPhone |
| .WOFF | Chrome、Firefox |
<style>
@font-face{
font-family:字体名字;
src:url("路径1"),
url("路径2"),
url("路径3"),
url("路径4");
}
P{
font-family:字体名字;
}
</style>
4.2D变换
transform属性
- 旋转：transform:rotate(度数deg);（顺时针）
- 缩放：transform:scale(x,y);（x,y：水平，垂直方向的缩放倍数）
5.过渡与动画
5.1过渡
transition属性：将元素的某个属性从“一个值”，在指定的时间内过渡到“另一个值”
| transition属性 | 描述 |
|---|---|
| transition | 属性名 持续时间 过渡方法 |
| transition-property | 属性名/all（对哪个元素进行变换） |
| transition-duration | 持续时间 |
| transition-timing-function | 过渡使用的方法 |
| transition-delay | 过渡效果何时开始 |
| transition-timing-function值 | 描述 |
|---|---|
| linear | 匀速 |
| ease | 慢快慢 |
| ease-in | 慢快 |
| ease-out | 快慢 |
| ease-in-out | 慢快慢 |
5.2动画
-
定义动画：@keyframes规则
@keyframes mycolor(动画名字) { 0%(关键帧的名字) {background-color：red;} 30% {background-color：blue;} 60% {background-color：yellow;} 100% {background-color：green;} } -
调用动画：animation属性
div:hover{ animation:mycolor(动画名字) 持续时间 过渡方法 }animation属性值 描述 animation 动画名 持续时间 过渡方法 animation-name 引用@keyframes动画的名称 animation-duration 动画完成的时间 animation-timing-function 规定动画的速度曲线（默认“ease”） animation-play-state running/paused（动画的播放状态）
6.3D变换
设置transform-style：preserve-3d；
-
旋转：transform属性
- rotateX(度数deg)
- rotateY(度数deg)
- rotateZ(度数deg)
-
透视：perspective属性
- 像素值（越小，离舞台越近）
标签：color,px,样式,font,border,CSS,属性 来源： https://www.cnblogs.com/cherish-0/p/16414322.html