CSS 学习
感觉自己css很烂，学习下，目标写出漂亮的界面
资料
尚硅谷CSS3：
MDN:https://developer.mozilla.org/zh-CN/
CSS3参考手册：http://caibaojian.com/
选择器游戏：http://flukeout.github.io/#
HTML
转义字符
在HTML中有些时候，我们不能直接书写一些特殊符号
比如：多个连续的空格，比如字母两侧的大于和小于号
空格 > 大于号 < 小于号 © 版权符号
mete标签
- charset 指定网页的字符集
- name 指定的数据的名称
- content 指定的数据的内容
- keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>
description 用于指定网站的描述
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/> 网站的描述会显示在搜索引擎的搜索的结果中
title标签的内容会作为搜索结果的超链接上的文字显示
元素类型
块元素（block element）
在网页中一般通过块元素来对页面进行布局
行内元素（inline element）
行内元素主要用来包裹文字
一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
块元素中基本上什么都能放
p元素中不能放任何的块元素
css引入方式
- 链接式
<link href="../css/main.css" />
- 行内样式
<div style="height: 200px;">2333</div>
- 内联式
<style> div{ border: aqua solid 2px; } </style>
选择器
MDN官方文档：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps/How_CSS_is_structured
基础选择器
元素选择器
div{ border: aqua solid 2px; }
类选择器
.demo01{ border: aqua solid 0.3125rem; }
ID选择器
#demo01{ border: aqua solid 0.3125rem; }
属性选择器
官方文档https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
/* 选择有type属性的元素 */ [type] { color: #00FFFF; } /* 选择type属性是hello的元素 */ [type="hello"] { color: cornflowerblue; } /* 选择title属性包含hello的元素 */ [title*="hello"] { color: cornflowerblue; } /* 选择title属性是hello开头的元素 */ [title^="hello"] { color: cornflowerblue; } /* 选择title属性是hello结尾的元素 */ [title$="hello"] { color: cornflowerblue; }
通配选择器选择所有元素
*{ color: #00FFFF; }
交集选择器
选中既是div又class为red的元素
div.red{ color: royalblue; }
- 交集选择器如果有元素选择器，必须元素选择器在开头
并集选择器
作用：同时选择多个选择器对应的元素
语法：选择器1,选择器2,选择器3,选择器n{}
span,a{ color: skyblue; }
关系选择器
- 父元素
- 直接包含子元素的元素叫做父元素
- 子元素
- 直接被父元素包含的元素是子元素
- 祖先元素
- 直接或间接包含后代元素的元素叫做祖先元素
- 一个元素的父元素也是它的祖先元素、
- 后代元素
- 直接或间接被祖先元素包含的元素叫做后代元素
- 子元素也是后代元素
- 兄弟元素
- 拥有相同父元素的元素是兄弟元素
<body> <div>我是div <p> 我是p元素 <span>我是p元素中span元素</span> </p> <span>我是span元素</span> </div> </body>
子元素选择器
直接被父元素包含的元素是子元素
选择div中span子元素
div > span { color: slateblue; }
后代元素选择器
直接或间接被祖先元素包含的元素叫做后代元素
子元素也是后代元素
div span{ color: steelblue; }
兄弟选择器
拥有相同父元素的元素是兄弟元素
选择下一个兄弟
<body> <div>我是div <p> 我是p元素 <span>我是p元素中span元素</span> </p> <span>我是span元素</span> <span>我是span元素</span> <span>我是span元素</span> </div> </body> p + span{ color: tan; }
选择所有兄弟
p ~ span{ color: tan; }
伪类选择器
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
伪类（不存在的类，特殊的类）
- 伪类用来描述一个元素的特殊状态 比如：第一个子元素、被点击的元素、鼠标移入的元素... - 伪类一般情况下都是使用`:`开头 `:first-child` 第一个子元素 `:last-child` 最后一个子元素 `:nth-child()` 选中第n个子元素 特殊值： n 第n个 n的范围0到正无穷 2n 或 `even 表示选中偶数`位的元素 2n+1 或 `odd 表示选中奇数`位的元素 - 以上这些伪类都是根据所有的子元素进行排序 `:first-of-type` 选择器匹配元素其父级是特定类型的第一个子元素 `:last-of-type`选择器匹配元素其父级是特定类型的最后一个子元素。 `:nth-of-type()`选择器匹配元素其父级是特定类型的第n个子元素。 - 这几个伪类的功能和上述的类似，不通点是他们是在同类型元素中进行排序 - :not() 否定伪类 - 将符合条件的元素从选择器中去除 `:link` 用来表示没访问过的链接（正常的链接） a:link{ color: red; }
:visited 用来表示访问过的链接
由于隐私的原因，所以visited这个伪类只能修改链接的颜色
a:visited{ color: orange; /* font-size: 50px; */ }
:hover 用来表示鼠标移入的状态
a:hover{ color: aqua; font-size: 50px; }
:active 用来表示鼠标点击
a:active{ color: yellowgreen; }
伪元素选择器
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
/*
伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）
伪元素使用 :: 开头
::first-letter 表示第一个字母 ::first-line 表示第一行 ::selection 表示选中的内容 ::before 元素的开始 ::after 元素的最后 - before 和 after 必须结合content属性来使用 */ 选择第一个字母
```css
p::first-letter{
font-size: 50px;
}
```
选择第一行
p::first-line{ background-color: yellow; }
选中内容的样式
p::selection{ background-color: greenyellow; } 元素的开始 div::before{ content: 'abc'; color: red; } 元素的最后 div::after{ content: 'haha'; color: blue; }
选择器权重
样式的冲突
当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。
发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定
选择器的权重
内联样式 1,0,0,0
id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
通配选择器 0,0,0,0
继承的样式 没有优先级
比较优先级时，需要将所有的选择器的优先级进行相加计算，最后优先级越高，则越优先显示**（分组选择器是单独计算的）**,
选择器的累加不会超过其最大的数量级，类选择器在高也不会超过 ``id选择器 如果优先级计算后相同，此时则优先使用靠下的样式
可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式，
注意：在开发中这个玩意一定要慎用！
## 练习 > 选择器在线游戏：http://m.zhaojishun.cn/cssgame/ # 样式的继承
样式的继承，我们
为一个元素设置的样式同时也会应用到它的后代元素上
继承是发生在祖先后后代之间的
继承的设计是为了方便我们的开发，
利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，
这样只需设置一次即可让所有的元素都具有该样式
注意：并不是所有的样式都会被继承：
比如 背景相关的，布局相关等的这些样式都不会被继承。
<p> 我是一个p元素 <span>我是p元素中的span</span> </p>
<span>我是p元素外的span</span> <div> 我是div <span> 我是div中的span <em>我是span中的em</em> </span> </div>
p{ color: red; background-color: orange; }
div{ color: yellowgreen }
div{ color: yellowgreen }
# 单位 ## 长度 ### 像素
### 百分比
百分比
- 也可以将属性值设置为相对于其父元素属性的百分比
- 设置百分比可以使子元素跟随父元素的改变而改变
### em
em
- em是相对于元素的字体大小来计算的
- em会根据字体大小的改变而改变
### rem
rem
- rem是相对于根元素的字体大小来计算
## 颜色
/* 颜色单位： 在CSS中可以直接使用颜色名来设置各种颜色 比如：red、orange、yellow、blue、green ... ... 但是在css中直接使用颜色名是非常的不方便 RGB值： - RGB通过三种颜色的不同浓度来调配出不同的颜色 - R red，G green ，B blue - 每一种颜色的范围在 0 - 255 (0% - 100%) 之间 - 语法：RGB(红色,绿色,蓝色) RGBA: - 就是在rgb的基础上增加了一个a表示不透明度 - 需要四个值，前三个和rgb一样，第四个表示不透明度 1表示完全不透明 0表示完全透明 .5半透明 十六进制的RGB值： - 语法：#红色绿色蓝色 - 颜色浓度通过 00-ff - 如果颜色两位两位重复可以进行简写 #aabbcc --> #abc HSL值 HSLA值 H 色相(0 - 360) S 饱和度，颜色的浓度 0% - 100% L 亮度，颜色的亮度 0% - 100% */
## 角度 ### deg > **度（Degress）。一个圆共360度**
transform:rotate(2deg);
### turn > **转、圈（Turns）。一个圆共1圈**
transform:rotate(.5turn);
# 文档流 文档流（normal flow）
- 网页是一个多层的结构，一层摞着一层 - 通过CSS可以分别为每一层来设置样式 - 作为用户来讲只能看到最顶上一层 - 这些层中，最底下的一层称为文档流，文档流是网页的基础（可以理解为ps中的图层） 我们所创建的元素默认都是在文档流中进行排列 - 对于我们来元素主要有两个状态 在文档流中 不在文档流中（脱离文档流） - 元素在文档流中有什么特点： - 块元素 - 块元素会在页面中独占一行(自上向下垂直排列) - 默认宽度是父元素的全部（会把父元素撑满） - 默认高度是被内容撑开（子元素）
- 行内元素 - 行内元素不会独占页面的一行，只占自身的大小 - 行内元素在页面中左向右水平排列，如果一行之中不能容纳下所有的行内元素 则元素会换到第二行继续自左向右排列（书写习惯一致） - 行内元素的默认宽度和高度都是被内容撑开
元素脱离文档流后特点
元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发生变化
- 块元素：
- 块元素不在独占页面的一行
- 脱离文档流以后，块元素的宽度和高度默认都被内容撑开
- 行内元素：
- 行内元素脱离文档流以后会变成块元素，特点和块元素一样
- 脱离文档流以后，不需要再区分块和行内了
盒子模型
盒模型、盒子模型、框模型（box model）
CSS将页面中的所有元素都设置为了一个矩形的盒子
将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置
每一个盒子都由一下几个部分组成：
内容区（content）
内边距（padding）
边框（border）
外边距（margin）
content内容区
内容区（content），元素中的所有的子元素和文本内容都在内容区中排列
内容区的大小由width 和 height两个属性来设置，行内元素无法设置宽高，其大小被内容撑开
width 设置内容区的宽度
height 设置内容区的高度
border 边框
**边框** 边框的宽度 border-width 边框的颜色 border-color 边框的样式 border-style
border-width: 10px;
`默认值`，一般都是 `3个像素` border-width可以用来指定四个方向的边框的宽度 值的情况 四个值：上 右 下 左 三个值：上 左右 下 两个值：上下 左右 一个值：上下左右
除了border-width还有一组 border-xxx-width
xxx可以是 top right bottom left
用来单独指定某一个边的宽度
border-width: 10px;
border-top-width: 10px;
border-left-width: 30px;
color: red;
border-color: 用来指定边框的颜色，同样可以分别指定四个边的边框规则和border-width一样
border-color :也可以省略不写，如果省略了则自动使用color的颜色值
border-color : orange red yellow green;
border-color : orange;
border-style ：指定边框的样式
solid ：表示实线
dotted ：点状虚线
dashed :虚线
double :双线
border-style的默认值是none 表示没有边框
border-style: solid dotted dashed double;
border-style: solid;
border-width: 10px; border-color: orange; border-style: solid;
/* border简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求 除了border以外还有四个 border-xxx border-top border-right border-bottom border-left border: solid 10px orange; border-top: 10px solid red; border-left: 10px solid red; border-bottom: 10px solid red; border: 10px red solid; border-right: none;
## `padding`内边距 > 内容区和边框之间的距离是内边距 > > 一共有四个方向的内边距： > > 内边距的设置会影响到盒子的大小 > 背景颜色会延伸到内边距上 > > 一共盒子的可见框的大小，由内容区 内边距 和 边框共同决定， > 所以在计算盒子大小时，需要将这三个区域加到一起计算
padding-top: 100px; padding-left: 100px; padding-right: 100px; padding-bottom: 100px; padding 内边距的简写属性，可以同时指定四个方向的内边距，规则和border-width 一样 padding: 10px 20px 30px 40px; padding: 10px 20px 30px ; padding: 10px 20px ; padding: 10px ;
## `margin`外边距 - 外边距不会影响盒子可见框的大小 - 但是外边距会影响盒子的位置 - 一共有四个方向的外边距： - `margin-top` 上外边距，设置一个正值，元素会向下移动 - `margin-right`默认情况下设置margin-right不会产生任何效果 - `margin-bottom`下外边距，设置一个正值，其下边的元素会向下移动 - `margin-left`左外边距，设置一个正值，元素会向右移动 - margin也可以设置负值，如果是负值则元素会向相反的方向移动 - 元素在页面中是按照自左向右的顺序排列的，所以默认情况下如果我们 `设置的左和上外边距会移动元素自身` 而 `设置下和右外边距会移动其他元素` margin的简写属性 margin 可以同时设置四个方向的外边距 ，用法和padding一样 margin会影响到盒子实际占用空间
/* margin-top: 100px; margin-left: 100px; margin-bottom: 100px; */ /* margin-bottom: 100px; */ /* margin-top: -100px; */ /* margin-left: -100px; */ /* margin-bottom: -100px; */ /* margin-right: 0px; */ margin: 100px;
