Css 基础
Css的四种引入方式
1.行内式
<p style="background: green">这是一个p标签</p>
2.内嵌式
<head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background: green; } </style> </head>
3.外链式
<link type="text/css" rel="stylesheet" href="demo.css">
4.导入式
<style> @import "demo.css"; </style>
Css 选择器
1.基础选择器
| 选择器 | 描述 | 例子 |
| * | 匹配任何元素 | *{} |
| E | 匹配所有E标签的元素 | p{} |
| .class | 匹配所有class属性中包含info的元素 | .info{} |
| #id | 匹配所有id属性等于footer的元素 | #footer{} |
2.组合选择器
| 选择器 | 描述 | 例子 |
| E, F | 匹配所有E元素和F元素 | div,p{} |
| E F | 匹配所有E元素里面的F元素 | div p{} |
| E > F | 匹配所有E元素的子元素F | div > p{} |
| E + F | 匹配E元素后紧跟的F元素 | div + p{} |
3.属性选择器
| 选择器 | 描述 | 例子 |
| E[attr] | 匹配所有具有attr属性的E元素 | *[href] |
| E[attr=val] | 匹配所有具有attr属性等于val的元素 | *[target=_black] |
| E[attr~=val] | 匹配所有attr属性具有多个空格分隔的值，其中一个值等于“val”的E元素 | *[class~=a1] |
| E[attr*=val] | 匹配attr属性所有包含val值得元素 | *[class*=p-} |
| E[attr^=val] | 匹配attr属性值以val指定值开头的每个元素 | *[class^=nam] |
| E[attr$=val] | 匹配attr属性值以val指定值结尾的每个元素 | *[class$=ame] |
4.结构选择器
| 选择器 | 描述 | 例子 |
| :root | 匹配根标签(html) | :root |
| :not | 排除 | :not(h3) |
| :only-child | 匹配某父类只有一个子元素的标签 | div:only-child |
| :first-child | 选择父元素中的第一个子元素 | div:first-child |
| :last-child | 选择父元素中的最后一个子元素 | div:last-child |
| :nth-child(n) | 正选父元素的第n个子元素 | ul li:nth-child(n) |
| :nth-last-child(n) | 反选父元素的第n个子元素 | ul li:nth-last-child(n) |
| :nth-of-type(n) | 匹配父类下的特定类型的第n个子元素 | ul li:nth-of-type(odd) |
| :nth-last-of-type(n) | 匹配父类下的特定类型的倒数第n个子元素 | ul li:nth-last-of-type(even) |
5.伪类选择器
| 选择器 | 描述 | 例子 |
| :link | （没有接触过的链接）,用于定义了链接的常规状态。 | a:link{} |
| :hover | （鼠标放在链接上的状态）,用于产生视觉效果。 | a:hover{} |
| :visited | （访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。 | a:visited{} |
| :active | （在链接上按下鼠标时的状态）,用于表现鼠标按下是的链接状态。 | a:active{} |
| :before | 在元素前插入内容, 内容需用content来定义 | p:before{} |
| :after | 在元素后插入内容, 内容需用content来定义 | p:after{} |
Css常用属性
颜色属性
| 名称 | 功能 | 例子 | 例子描述 |
| color | 定义颜色 |
p{color: blue} p{color: #111} p{color: rgb(255, 0, 0)} p{color: rgba(255, 0, 0, 0.5)} |
使用英文 使用十六进制 使用rgb 使用rgba, 可调透明度 |
字体属性
| 名称 | 功能 | 例子 | 例子描述 |
| font-size | 字体大小 |
p{font-size: 20px/em} p{font-size: } |
以像素/倍率来设置字体大小 |
| font-family | 字体样式 | p{font-family: 'Lucida Bright'} | 字体样式，网上搜索然后使用 |
| font-weight | 字体粗细 |
p{font-weight: normal} p{font-weight: 700px} p{font-weight: bold} p{font-weight: bolder} p{font-weight: lighter} |
默认值 整数倍来定义, 100-900, 400等于normal, 700等于bold 定义粗体 定义更粗 定义更细 |
| font-style | 字体斜体 |
p{font-style: normal} p{font-style: nitalic | oblique} |
默认值 斜体 |
背景属性
| 名称 | 功能 | 例子 | 例子描述 |
| background-color | 背景颜色 | p{background-color: green} | 将背景颜色设为绿色 |
| background-image | 背景图片 |
p{background-image: url("demo.png")} p{background-imgage: linear-gradient(to right, #fff, #000)} |
根据传的图片 使用颜色浅变 |
| background-repeat | 背景方式 |
p{background-repeat: repeat} p{background-repeat: repeat-x} p{background-repeat: repeat-y} p{background-repeat: no-repeat} p{background-repeat: inherit} |
默认。背景图像将在垂直方向和水平方向重复。 背景图像将在水平方向重复。 背景图像将在垂直方向重复。 背景图像将仅显示一次。 规定应该从父元素继承 background-repeat 属性的设置。 |
| background-size | 背景尺寸 | p{background-size: 100px 20px} | 将背景图设为宽为100， 长为20px |
| background-position | 背景位置 | p{background-positon: 0 30px} | 左右不动，向下移动30px |
| background-attachment | 背景滚动 |
P{background-attachment: scroll} P{background-attachment: fixed} P{background-attachment: inherit} |
默认值。背景图像会随着页面其余部分的滚动而移动。 当页面的其余部分滚动时，背景图像不会移动。 规定应该从父元素继承 background-attachment 属性的设置。 |
| background(背景色 url 平铺 定位 固定) | 综合设置 |
p{background:red url("1.png") no-repeat 0 30px} |
背景色为红色，图像是1.png，不重复，向下30ox |
文本属性
| 名称 | 功能 | 例子 | 例子描述 |
| letter-spacing | 字间距 | p{letter-spacing: 20px} | 字间距大小 |
| word-spacing | 单词间距 | p{word-spacing: 16px} | 单词间距大小 |
| text-align | 对齐方式 |
p{text-align: left} p{text-align: center} p{text-align: right} |
左对齐（默认值） 居中对齐 右对齐 |
| line-height | 行间距 | p{line-height: 16px} | 行与行的间距 |
| text-decoration | 文本装饰 |
p{text-decoration: none} p{text-decoration: underline} p{text-decoration: overline} p{text-decoration: line-through} |
没有装饰 下划线 上划线 删除线 |
| text-transform | 文本转换 |
p{text-transform: none} p{text-transform: capitalize} p{text-transform: uppercase} p{text-transform: lowercase} |
不转换（默认值） 首字母大写 全部大写 全部小写 |
| text-indet | 首行缩进 | p{text-indet: 50px} | 缩进大小 |
| word-warp | 自动换行 |
p{text-wrap: normal} p{text-wrap: break-word} |
只在允许的断点换行(浏览器保持默处理) 在长单词或URL地址内部进行换行 |
| text-overflow | 文本溢出 |
p{text-overflow: clip} p{text-overflow: elipsis} |
不显示省略号 显示省略号, 但必须配合 overflow, white-space 使用 |
| white-space | 空白符处理 |
p{white-space: normal} p{white-space: pre} p{white-space: nowarp} |
空格空行无效，满行后自动换行 预格式化，保持原有样式 空格空行无效，满行后不自动换行 |
边框属性
| 名称 | 功能 | 例子 | 例子描述 |
| border-(top|right|bottom|left)-style | 边框样式 |
p{border-top-style: none} p{border-top-style: solid} p{border-top-style: dashed} p{border-top-style: dotted} p{border-top-style: double} |
没有边框(默认值) 实线 虚线 点线 双实线 |
| border-(top|right|bottom|left)-color | 边框颜色 |
p{border-top-color: black} |
边框颜色设为黑色 |
| border-(top|right|bottom|left)-width | 边框宽度 | p{border-top-width: 1px} | 边框宽度设为1px |
| border-radius | 边框圆角 |
p{border-radius: 3% 0 5% 10%} p{border-radius: 50%} |
分别为左上，右上，右下，左下 都设置为50% |
| border(四边宽度 四边样式 四边颜色) | 综合设置 | p{border: 1px solid black} | 四周宽度为1px的黑色实线 |
列表属性
| 名称 | 功能 | 例子 | 例子描述 |
| list-style-type（无序标签） | 项目符号类型 |
ul{list-style-type: disc} ul{list-style-type: circle} ul{list-style-type: square} ul{list-style-type: none} |
实心圆 空心圆 实心正方形 不使用项目符号 |
| llist-style-type（有序标签） | 项目符号类型 |
ol{list-style-type: decimal} ol{list-style-type: decimal-leading-zero} ol{list-style-type: lower-alpha} ol{list-style-type: upper-alpha} ol{list-style-type: none} |
阿拉伯数字 以0开头阿拉伯数字 小写英文字母 大写英文字母 不使用项目符号 |
| list-style-position |
符号位置 |
ul{list-sytle-position: inside} ul{list-style-position: outside} |
符号位于列表文本内 符号位于列表文本外 |
| list-style-image |
符号为图像 |
ul{list-style-image: url(demo.png)} | 符号设为demo.png |
| list-style(符号 位置 图像) |
综合设置 |
ul{list-style: circle} | 设为空心圆12e |
位置属性
| 名称 | 功能 | 例子 | 例子描述 |
| postion | 定位 |
p{position: static} p{position: relative} p{position: absolute} p{position: fixed} p{position: sticky} |
静态的(默认) 相对定位 绝对定位 固定定位 粘贴定位, 部分浏览器不支持 |
| float | 浮动 |
p{float: left} p{float: right} |
左浮动 右浮动 |
更多属性
| 名称 | 功能 | 例子 | 例子描述 |
| opacity | 透明度 |
p{opacity: 0} p{opacity: 1} |
完全透明 完成不透明 |
