CSS
2020-02-18 本文已影响0人
Plenari
0.基础
-
title属性
当鼠标放在元素上时显示提示 -
盒子模型
内容content包裹一层padding
然后是border外办再包裹一层margin -
配置背景图片
background : red url() no-repeat center right 10%;
2.组合选择器
1. id 选择器
#para 选择id=para
2. class 选择器
.center 选择class=center
p.center选择 <p class=center>
3. 后代选择器(以空格分隔)
div p 选取所有 <p> 元素插入到 <div> 元素
4. 子元素选择器(以大于号分隔）
div>p 选择了<div>元素中所有直接子元素 <p>
5. 相邻兄弟选择器（以加号分隔）
div+p 选取了所有位于 <div> 元素后的第一个 <p> 元素,紧挨着
6 后续兄弟选择器（以破折号分隔）
div~p 选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :
7. 属性选择器
7.1. [title] 所有包含标题title的所有元素
7.2. [title=abc] 属性和值选择器
7.3 attribute 属性以 value 开头
[attribute^=value] 属性的前几个字母是 value 就可以
7.4. attribute 属性中包含 value
[attribute|=value] 属性中必须是完整且唯一的单词，或者以 - 分隔
[attribute~=value] 属性中包含独立的单词为 value
[attribute*=value]`属性中做字符串拆分，只要能拆出来 value 这个词就行
7.6 attribute 属性以 value 结尾
-
[attribute$=value]属性的后几个字母是 value 就可以
7.7 class 多个属性
- 两个属性中间有空格就是后代
- 没有空格就是子代
- 正则表达式
// id=sections 后代div 的id以s开头的所有元素背景设置为红色；
#sections div[id^='s'] {
color: red;
}
4. 高级
1. 文本
| 名称 | 注释 |
|---|---|
| strong | 强调 |
| small | xiaohao |
| i | 斜体 |
| b | 粗体 |
| cite | 斜体引用 |
| q | 加引号，有bug |
| blockquote | 块引用 |
| sup | 2 上标 |
| del | <del>删除</del> |
| ins | <ins> love </ins> 插入，下划线 |
| code | <code>hello </code> |
| pre | 不删除任何空格 |
2. 继承
并不是所有样式都可以继承
字体会被继承
所有背景相关都不会被继承
每一个属性都有是否可以继承的默认值
3. position
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
| 值 | 描述 |
|---|---|
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。离他最近的开启了定位（position 不等于static）的祖先元素进行定位。如果都没有定位元素，则相对于浏览器窗口。绝对定位开启后会使元素提升一个层级。 |
| fixed | 相对于浏览器窗口进行定位元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。不随着滚动条滚动。可以盯着一个地方看到。 |
| relative | 相对于其正常位置进行定位。"left:20" 会向元素的 LEFT 位置添加 20 像素。使元素提升一个层级 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit | 规定应该从父元素继承 position 属性的值。难道宽度和高度也可以自己获得吗？ |
absolute
4. display
| 名称 | 理解 |
|---|---|
| block | 行级块元素，相当于自动换行 |
| inline | 行内元素 |
| flex | 水平平均排列 |
5. background
| 名称 | 理解 |
|---|---|
| background-color | 颜色 |
| background-image | 图片 |
| background-repeat | 重复 |
| background-position | 位置 |
| background | 可以一次全写，没有顺序和数量要求 |
6. 表格
| 名称 | 理解 |
|---|---|
| colspan | 横向合并单元格，在td里设置 |
| rowspan | 向合并单元格 |
| border-spacing | 边框直接的距离 |
| border-collapse | 边框合并，合并之后设置边框距离就失效了。 |
| thead | 表头，然后砸中间设置tr |
| tbody | 主题 |
| tfoot | 脚 |
7. input
| 名称 | 理解 |
|---|---|
| name | 提交给服务器的时候的变量变量 |
| type | text,data,....buttom |
| value | 默认值 |
| checked | checked 默认选择 |
| radio | 单选 |
| checkbox | 多选 |
| select | 下拉列表 |
| option | 单选， |
| optgroup | 分组，label分组标签 |
| textaera | 文本域 |
| label | for 指定表单input的id |
| fieldset | 给不同的输入分组 |
| legend | 表单注释 |
8. iframeset
不能和body同时出现在页面中。
| 名称 | 理解 |
|---|---|
| frameset | cols, rows |
| frame | src |
3.其他选择器
3.1 伪类
| 名称 | 理解 |
|---|---|
| :link | 没访问过的 |
| :visited | 访问过 |
| :hover | 鼠标移入 |
| :active | 已经选中 |
| :focus | 获取焦点 input |
| ::selection | 选中的元素,两个冒号为p中选中的文字设置样式 |
| ::-moz-selection | 火狐专用选中文字 |
- 注意: a标签的伪类顺序lvha
3.2 伪元素 选择器
| 名称 | 注释 |
|---|---|
| :first-child | 这是是父类的第一个子元素 |
| :first-letter | 第一个子单词 |
| :first-line | 第一行 |
| :before | 在指定元素开始标签之后的时候添加内容，使用content指定插入内容 |
| :after | 指定元素结束标签之前添加内容 |
| :nth-child(even) | 偶数个子元素 |
| :first-of-type | 该类的的一个 |
| :nth-of-type | 该类的的一个 |
| :not(选择器) | 不要选择个选择器 |
-
选择器优先级
选择器优先级
当包含多个选择器时，要先将选择器优先级加起来，然后在比较。
多个相同的选择器相加不会超过他的数量级。
优先级相同的用后边的。
当给样式添加!important 超过内联样式，尽量避免使用，js也不能修改。
