CSS 基础2
心事重重的一天，寂静慌张,不快乐
一、CSS引入方式
| 内部样式 | <style> </style>可任意放置,多放在<head>里 |
|---|---|
| 行内样式 | 在元素标签内部的style属性 |
| 外部样式 | 1.新建CSS样式文件 2.在html中使用<link>标签引入 <link rel="stylesheet"> href="css文件位置" |
使用外部样式通常被称为“外链式”或“链接式”引入 ,rel定义当前文档与链接文档之间的关系 “stylesheet”表示被链接的文档是一个样式表文件
二、Chrome调试工具
F12 检查 选中元素
1.Emmet语法前身是Zen Coding使用缩写来提高html/css编写速度
| 生成标签 | Tab快速输出 |
| 生成多个相同标签 | 加上* div*3 |
| 父子级关系 | 使用> ，如 ul>li 按Tab即可 |
| 兄弟级关系 | 使用+ |
| 生成带有类名或ID名字的 | .+名字或者#+名字+Tab ，如 span.grgy |
| 生成div类名有顺序 | 可用$，如 .demo$*5 默认的是div |
| 生成标签内部可以写内容 | 可用{}，如 div{小可爱}*5 |
三、复合选择器
1.后代选择器 ：比如只更改<ol>中的<li> ,只要是孩子关系都可一层层查找。
ol li {
color: pink;
}
2.子选择器：只能选择作为某元素的最近一级子元素
div > p {样式}
/*选择div里面最近一级P标签元素*/
3. 并集选择器：任何形式选择器都可以并。可选择多组标签为他们定义相同的样式。
div,p {
color: pink;
}
/*,是英文状态*/
4. 伪类选择器：链接伪类选择器，focus伪类选择器
链接伪类选择器
a:link | 选择未被访问的链接 |
|---|---|
a:visited | 选择所有以被访问的链接 |
a:hover | 选择鼠标指针位于其上链接 |
a:active | 选择鼠标正在点击未弹起链接 |
1.确保生效按照LVHAs顺序声明
2.链接a在浏览器具有默认样式，实际工作需要给链接单独指定样式，常用
a {color: grar;}/*之前一个色
a:hover {color: red;}/*鼠标放上就变色
focus伪类选择器
用于选取获得焦点的表单元素
input：focus {
background-color：pink;
}
四、CSS的元素显示模式
块元素：<h> ,<p>,<div>,<ul>,<ol>,<li>...
块
元
素
{
独
占
一
行
高
、
宽
、
内
、
外
边
距
可
调
整
宽
度
默
认
容
器
宽
度
是
一
个
盒
子
可
放
行
内
或
块
级
元
素
(
文
字
类
的
元
素
内
不
能
使
用
块
级
元
素
)
块元素\left\{ \begin{array}{lcl} 独占一行\\ 高、宽、内、外边距可调整 \\ 宽度默认容器宽度\\ 是一个盒子可放行内或块级元素(文字类的元素内不能使用块级元素) \end{array} \right.
块元素⎩⎪⎪⎨⎪⎪⎧独占一行高、宽、内、外边距可调整宽度默认容器宽度是一个盒子可放行内或块级元素(文字类的元素内不能使用块级元素)
<p>标签不能放<div>
<h1>...<h6>不能放其他块级元素
行内（内联）元素：<a> ,<strong>,<b>,<i>,<em>,<del>,<s>,<ins>,<u>,<span>..
行 内 元 素 { 一 行 可 放 多 个 高 、 宽 设 置 无 效 宽 度 本 身 内 容 宽 度 只 能 容 纳 文 本 或 其 他 行 内 元 素 信 息 ( 链 接 里 面 不 能 在 放 链 接 特 殊 情 况 可 放 < a > 可 放 块 级 元 素 ， 但 给 它 转 换 一 下 块 级 模 式 更 安 全 ) 行内元素\left\{ \begin{array}{lcl}一行可放多个\\ 高、宽设置无效\\ 宽度本身内容宽度\\ 只能容纳文本或其他行内元素信息(链接里面不能在放链接 特殊情况可放<a>可放块级元素，但给它转换一下块级模式更安全) \end{array} \right. 行内元素⎩⎪⎪⎨⎪⎪⎧一行可放多个高、宽设置无效宽度本身内容宽度只能容纳文本或其他行内元素信息(链接里面不能在放链接特殊情况可放<a>可放块级元素，但给它转换一下块级模式更安全)
行内块元素:<img/> <input/> <td>
行
内
块
元
素
{
一
行
可
放
多
个
宽
度
本
身
内
容
宽
度
高
度
行
高
内
外
边
距
可
调
整
行内块元素\left\{ \begin{array}{lcl}一行可放多个 \\宽度本身内容宽度\\ 高度行高内外边距可调整 \end{array} \right.
行内块元素⎩⎨⎧一行可放多个宽度本身内容宽度高度行高内外边距可调整
转换模式
display：block；
display：inline；
display：inline——block；
tips：让文字居中，让文字行高等于文字高度。
五、CSS背景
| 背景颜色 | 默认透明 transparent 半透明 background:rgba(0,0,0,0.3)(最后一个值在0，1之间) |
|---|---|
| 背景图片 | background-image:url() |
| 背景平铺 | background-repeat:repeat|no-repeat|repeat-x|repeat-y| |
| 背景位置 | background-position：top；则顶端x居中，right；则右端ｙ居中 ：xx;xx 直接用方位则跟前后无关；如果带了单位，前面是x,后面是y；只说了一个数值，则一定x； |
| 混合单位 | background-position: 20px center 前x后y |
| 背景图像固定 | background-attachment:scroll|fixed |
背景简写：颜色 地址 平铺 滚动 位置
六、CSS特性
层叠性：就近原则
继承性：继承跟文字相关的样式
body{
font:12px/1.5 Microsoft Yahei;
}
/*继承行高时，单位可要可不要，无单位是指当前文字的1.5倍；
优先级
相同属性就近，不同属性则看选择器权重，复合选择器权重会增加，但不进位/
| 选择器 | 权重 |
|---|---|
| 继承或者* | 0000 |
| 元素选择器 | 0001 |
| 类选择器，伪类选择器 | 0010 |
| ID选择器 | 0100 |
| 行内样式style= | 1000 |
| ！important | 无穷大 |
1389
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
