标签：color px 样式 font border 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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。