一、系统学习
1.css编写位置
行内样式
写在所要处理的标签中（style=" "）。
内部样式
写在html 页面内部，将所有的CSS 代码提取出来，单独放在<style>标签中。
<style>
h1{
color: red;
font-size: 40px}
</style>
注意点:<style> 标签理论上可以放在HTML 文档的任何地方，但一般都放在<head>标签中。
问题: 1.并没有实现结构与样式完全分离 2.多个 HTML页面无法复用样式
外部样式
写在单独的.css 文件中，随后在HTML文件中引入使用。 注意:
1.<link>标签要写在<head>标签中（放在其他地方不会报错误）。 2.<link>标签属性 : href:引入的文档来自于哪里。rel:(relation:关系)说明引入的文档与当前文档之间的关系。 3.可触发浏览器的缓存机制，提高访问速度，实现了结构与样式的完全分离。
样式表的优先级
行内样式优先级最高，其他样式都是覆盖（后来者居上）。
2.选择器
1、基本选择器
1.通配选择器：
/* "*"代表全选 */
* {
color: red;
font-size: small;
}
2.元素选择器：
/* 同一元素下不能细分 */
h1 {
color: blue;
font-size: 60px;
}
h2 {
color: red;
font-size: 40px;
}
p {
color: green;
font-size: 80px;
}
img {
width: "200px"
}
3.类选择器（使用频率最高）：
要先建立类（同一元素下不能有相同属性）：
<p class="speak">祝大家：龙年大吉</p> <p class="answer">祝我：龙年大吉</p>
注意：
1.一个标签建立多个类的方法：
<p class="speak size">祝大家：龙年大吉</p>/*不同类之间用空格隔开*/
2.类名不能为纯数字或中文，多个单词用 - 链接 例如：left-menu。
再通过不同的类细处理*：
/*类选择器要加 ”.” */
.speak {
color: red;
}
.answer {
color: blue;
}
.size {
font-size: 40px;
}
注意：处理所有此类的标签，即使是不同种的标签。
4.ID选择器：
像建立类一样建立ID，需要注意的是：
1.ID像身份证一样不能重复。
2.ID选择器加 “#”。
3.ID名开头不能为数字、不能有空格。
<p ID="speak">祝大家：龙年大吉</p>
定义多个ID的方法和类一样，一个标签既可以同时有类和ID。
#speak {
color: red;
}
2、复合选择器
1.交集选择器：
选择同时复合多个条件的元素。
/*选中类名为speak的p的元素*/
p.speak {
color: red;
}
/*类名含有answer和speak的元素*/
.answer.speak {
color: red;
}
注意：1.有标签名，标签名必须写在前面。2.有些交集没有意义（包含ID的交集，因为ID是独一无二的）或有更简洁明了的选择方法。
2.并集选择器：
/*用逗号隔开，但结尾不加*/
.answer，
.speak，
#speak{
color: red;
}
注意：1、并集选择器一般竖着写。2、任何形式的选择器都可以作为并集选择器的一部分。
3.后代选择器：
用空格表示谁的后代是谁（先写祖先再写后代），表示”***中的“。
可以与其他选择器之间灵活结合。
.answer .speak { /*类answer中的speak的元素*/
}
p .answer.speak {
}
ul li a {
}
p .answer，
.speak {
}
4.子代选择器：
用>表示谁的子代是谁。
5.兄弟选择器：
+为符合条件的相邻选择器，~为符合条件的所有选择器。
div+p { /*与div标签相邻兄弟p标签*/
color: red;
}
div~p { /*在div标签之后的兄弟p标签*/
color: red;
}
两种选择器都是选择下面的兄弟。
6.属性选择器：
1.[属性名] 选中具有该属性的元素。 2.[属性名=“值”] 选中包含某个属性，且属性值等于指定值的元素。 3.[属性名^="值"] 选中包含某个属性，且属性值以指定的值开头的元素。 4.[属性名$="值"] 选中包含某个属性，且属性值以指定的值结尾的元素。 5.[属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素。
/*选中具有title属性的元素*/ div[title]{color:red;}
/*选中title属性值为atguigu的元素 */ div[title="atguigu"]{color:red;}
/*选中title属性值以a开头的元素 */ div[title^="a"]{color:red;}
/*选中title属性值以u结尾的元素*/ div[title$="u"]{color:red;}
/*选中title属性值包含g的元素*/ div[title*="g"]{color:red;}
7.伪类选择器
(1) 动态伪类
-
:link 超链接未被访问的状态。
-
:visited 超链接访问过的状态。
-
:hover 鼠标悬停在元素上的状态。
-
:active 元素激活的状态。
-
注意点:遵循 LVHA的顺序，即:link、visited、hover、active.
-
:focus 获取焦点的元素。 表单类元素才能使用:focus 伪类。 当用户:点击元素、触摸元素、或通过键盘的“tab”键等方式，选择元素时，就是获得焦点。
(2) 结构伪类
-
:first-child所有兄弟元素中的第一个。
-
:last-child所有兄弟元素中的最后一个。
-
:nth-child(n)所有兄弟元素中的第n个。
-
:first-of-type所有同类型兄弟元素中的第一个。
-
:last-of-type所有同类型兄弟元素中的最后一个。
-
:nth-of-type(n)所有同类型兄弟元素中的第n个。`
关于n的值: 0或不写:什么都选不中--几乎不用，n:选中所有子元素--几乎不用。
2n 或 even:选中序号为偶数的子元素，2n+1或odd:选中序号为奇数的子元素。 了解即可：
-
:nth-last-child(n)所有兄弟元素中的倒数第n个。
-
:nth-last-of-type(n)所有同类型兄弟元素中的 倒数第n个。
-
:only-child 选择没有兄弟的元素(独生子女)。
-
:only-of-type选择没有同类型兄弟的元素。
-
:root根元素。
-
:empty 内容为空元素(空格也算内容)。
(3) 否定伪类
:not(选择器)
(4) UI伪类
-
:checked 被选中的复选框或单选按钮。(复选框的背景颜色不能变，不能用focus)
-
:enable 可用的表单元素(没有disabled属性).
-
:disabled 不可用的表单元素(有 disabled属性).
(4) 目标伪类（了解）
:target 选中锚点指向的元素。
(5) 语言伪类（了解）
:lang() 根据指定的语言选择元素（看lang属性的值）。
8.伪元素选择器
作用:选中元素中的一些特殊位置。常用伪元素:
-
::first-letter选中元素中的第一个文字。
-
::first-line选中元素中的第一行文字。
-
::selection 选中被鼠标选中的内容。
-
::placeholder选中输入框的提示文字。
-
::before 在元素最开始的位置，创建一个子元素(必须用content属性指定内容)。
-
::after 在元素最后的位置，创建一个子元素(必须用content属性指定内容)。
3、选择器的优先级
!important（尽量不用）>行内>ID>类>元素>通配 >继承的样式
复杂情况：看权重
选择器或权重相同情况下，后来者居上。
1.计算方式:
每个选择器，都可计算出一组权重，格式为:(a,b,c) a:ID选择器的个数。 b:类、伪类、属性选择器的个数。 c:元素、伪元素 选择器的个数。 例如:
atguigu .slogan (1,1,0) atguigu .slogan a (1,1,1) atguigu .slogan a:hover (1,2,1)
并集选择器的每一个部分都是分开算的！
2.比较规则：按照从左到右的顺序，依次比较大小，当前位胜出后，后面的不再对比。
3.盒子模型
盒子模型的结构
CSS 会把所有的 HTML 元素都看成一个盒子，所有的样式也都是基于这个盒子。 1.margin (外边距)：盒子与外界的距离。 2.border(边框)：盒子的边框。 3.padding (内边距)：紧贴内容的补白区域。 4.content(内容)：元素中的文本或后代元素都是它的内容。图示如下:
盒子的大小= content + 左右 padding +左右 border.
注意:外边距margin不会影响盒子的大小，但会影响盒子的位置。
关于默认宽度： 所谓的默认宽度，就是不设置width属性时，元素所呈现出来的宽度。 总宽度=父的 content-自身的左右 margin。 内容区的宽度= 父的content-自身的左右margin-.自身的左右 border-自身的左右 padding。
盒子内边距 (padding) padding-top 上内边距 长度 padding-right 右内边距 长度 padding-bottom 下内边距 长度 padding-left 左内边距 长度 padding 复合属性 长度，可以设置1~4个值 padding 复合属性的使用规则:
-
padding: 18px;四个方向内边距都是10px。
-
padding: 10px 20px; 上10px，左右20px.(上下、左右)
-
padding: 10px 20px 30px;上10px，左右20px，下30px。(上、左右、下)
-
padding: 18px 20px 30px 40px;上10px，右20px，下30px，左40px。(上、右、下、左)
注意点:
1.padding 的值不能为负数。 2.行内元素的左右内边距是没问题的，上下内边距不能完美的设置（会重叠）。 3.块级元素、行内块元素，四个方向内边距都可以完美设置。
盒子的内容区
width 设置内容区域宽度 长度 max-width 设置内容区域的最大宽度 长度 min-width 设置内容区域的最小宽度 长度 height 设置内容区域的高度 长度 max-height 设置内容区域的最大高度 长度 min-height 设置内容区域的最小高度 长度 注意:max-width、min_width一般不与width一起使用。 max-height,min-height一般不与height一起使用。
盒子的边
border-radius是一个很重要的属性。
盒子的外边距
基础同内边距上，只不过将padding改为margin。
margin 注意事项： 1.子元素的 margin，是参考父元素的content 计算的。(因为是父亲的content中承装着子元素) 2.上margin、左margin:影响自己的位置;下margin、右margin:影响后面兄弟元素的位置。 3.块级元素、行内块元素，均可以完美地设置四个方向的margin;但行内元素，左右margin可以完美设置，上下margin设置无效。4.margin的值也可以是 auto，如果给一个块级元素设置左右 margin都为auto（上下不能auto，行内元素不能auto），该块级元素会在父元素中水平居中。 5.margin 的值可以是负值。
4.浮动
特点
1.脱离文档流。
-
不管浮动前是什么元素，浮动后:默认宽与高都是被内容撑开(尽可能小)，而且可以设置宽高。
-
不会独占一行，可以与其他元素共用一行。
-
不会margin合并，也不会margin 塌陷，能够完美的设置四个方向的margin和padding.
-
)不会像行内块一样被当做文本处理(没有行内块的空白问题)。
5.定位
1、相对定位
给元素设置position:relative 。 可以使用 left、right、top、bottom 四个属性调整位置。 相对定位的特点： 1.不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。 2.定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。 默认规则： 1.定位的元素会盖在普通元素之上。
2.都发生定位的两个元素，后写的元素会盖在先写的元素之上。
3.left 不能和 right一起设置，top和bottom不能一起设置。
4.相对定位的元素，也能继续浮动，但不推荐这样做。
5.相对行为的元素，也能通过margin 调整位置，但不推荐这样做。 注意：绝大多数情况下，相对定位，会与绝对定位配合使用。
2、绝对定位
给元素设置 position:absolute。 可以使用 left、right、top、bottom 四个属性调整位置。 1.对于没有脱离文档流的元素:包含块就是父元素; 2对于脱离文档流的元素:包含块是第一个拥有定位属性的祖先元素(如果所有祖先都没定位，那包含块就是整个页面)。
绝对定位元素的特点: 1.脱离文档流，会对后面的兄弟元素、父元素有影响。 2 left 不能和 right 一起设置，top和bottom不能一起设置。 3.绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。 4.绝对定位的元素，也能通过margin调整位置，但不推荐这样做。 5.无论是什么元素(行内、行内块、块级)设置为绝对定位之后，都变成了定位元素。
9447
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
