关于css3:Week-2-Introduce-to-CSS-Part-1

首先在 HTML 体系结构外面，CSS 款式的地位
1. 写在 <style> 外面

<style>
p{

}
</style>

对于下面这种写法，这种样式表对所有的 <p> 组件都会失效。

2. 除了把款式放在 <style> 外面之外，还能够抉择把所有的款式都写在一个.css 文件外面，应用 <link> 组件援用
<link href="mycss.css"></link>
这就相似于微信小程序把 css 文件与 xml 文件离开了

3. 还能够指定特定标签的款式，即把款式写在标签的 style 属性外面
<p style="width:100px" ></p>
上面说说一些 CSS 的选择器：

.classname{

}

  <p class="classname"></p>

组件外面的定义 class，属性值为 classname，那么只有类名为 classname 的组件才会失效

div.main{

}

<div class="main"></div>
<p class="main"></p>

应用selector.class, 只有特定的类名为 class 的 selector 才会失效，如上为 <div> 失效,<p> 不失效

<div>
  <p>I am feeling blue</p>
</div>
<section>
  <p>I just want to be left alone!</p>
</section>

div > p {color: blue;}

从右往左读 selector1>selector2, 只有当 selector2 是 selector1 的间接子元素时，才会失效，如果非间接子元素，然而 selector1 是 selector2 的先人，则这样写
selector1 selector2
两头留空格

<div>
  <div>
    <div class="makeMeBlue">
      <p>I am feeling blue</p>
    </div>
  </div>
  <section class="makeMeBlue">
    <p>I just want to be left alone!</p>
  </section>
</div>

div p {color: blue;}

如上所示，所有的 <p> 都会变成蓝色

罕用伪类：

:hover
:link
:visited
:active
:nth-child(..)

link 和 visited 是针对链接的，前者是链接尚未点击前的款式，后者是点击链接后的款式
hover 是当用户鼠标悬停在上方时触发的款式
active 是当用户按下鼠标但还未齐全开释的款式，在本视频中不做辨别。

a:link, a:visited {
  text-decoration: none;             // 勾销默认下划线
  background-color: green;
  border: 1px solid blue;
  color: black;
  display: block;
  width: 200px;
  text-align: center;          // 在程度方向居中
  margin-bottom: 1px;
}

a:hover, a:active {
  background-color: red;
  color: purple;
}

nth-child()十分弱小，能够指定特定的子元素的款式，具体应用形式如下，能够指定第三个子元素，odd：奇数个，或者第四个子元素，那么你所指定的子元素就会出现你所冀望的款式。

header li:nth-child(3) {font-size: 24px;}

section div:nth-child(odd) {background-color: gray;}

section div:nth-child(4):hover {
  background-color: green;

在 HTML 构造中，执行款式是由上而下的，如果是对同一个 tag 申明的雷同款式，比方
color:red;
那么后申明的会笼罩先申明的

如果一个 <p> 的款式申明是

p{
color:red;
font-size:150%;
}

另一个 <p> 的申明是

p{color:blue;}

那么最初会交融不同的属性，比方最初 <p> 的成果是color:blue,font-size:150%

继承就是对于 DOM 来说，父亲设置的款式，其子类均会继承它，比方

body{background-color:blue;}

那么在 <body> 中的 <p>,<div> 等等，即便我没有特地地去设置它的款式，也会从 <body> 那里继承到 background-color:blue 的个性

Specificity 是具体水平，越具体那么款式会越有优先权, 如何评估具体，能够以评分的模式来判断

style: 当你间接在标签类指定 style，则得 1000 分，
id: 当你给标签指定 id，得 100 分,id 的写法是 id 名前加 #
如：

#myid{color:red;}
<p id="myid"></p>

类与伪类:当标签领有类与伪类时，加 10 分
元素个数: 以后样式表的元素个数，加相应个位上的分数

.style {

font-family: Arial, Helvetica, sans-serif;
字体类型，因为最初是在用户的计算机上显示，取决于该用户是否装置此类字体，因而能够增加多种字体保障可能失常显示
color: #0000ff;
十六进制显示，前两位是红色，两头两位是绿色，最初两位是蓝色，ff 代表最大值
font-style: italic;
设置字体格调，斜体等等
font-weight: bold;
字体粗细
font-size: 24px;
字体大小
text-transform: uppercase;
字体模式，
uppercase是英文字母全副大写，
capitalize是首字母大写，
lowercase英文字母全小写
text-align: right;
文本地位, 程度居中
}

绝对大小单位：em

<style>
body {font-size: 120%;}
</style>
</head>
<body>
<div>Regular text</div>
<div style="font-size: 2em;">2em text
  <div style="font-size: 2em;">4em text
    <div style="font-size: .5em;">2em again!</div>
  </div>
</div>
</body>

em 相当于以后字体类型的倍数，2em 即两倍，而且并非咱们下面讲的笼罩个性 Origin，em 能够叠加，因为我设置 body 的字体大小是原字体 ( 大多数浏览器默认字体大小为 16px)大小的 1.2 倍，那么在第一个 div 的作用下，2em text 会显示为 2.4 倍，而第二个 div 不会笼罩，反而会累加，4em text 显示为 4.8 倍

对于 box 模型，咱们能够给他增加宽度，高度等等，一个 box 蕴含以下属性

一个比拟重要的问题是，width 的值其实是图中的 Content 局部，也就是说当你想要有一个 width 为 300px 的盒子，然而当你增加了 margin,padding,border 之后，他的大小会超过 300px，为了解决这个问题，咱们能够设置
box-sizing:border-box
这样的话你的总的盒子大小就会是 300px，而你再次调整 margin,padding 等值，只会压缩 Content 的空间
当然如果你想让 Content 的值就是 300px，box 被扩充无所谓，就设为
box-sizing:content-box
我的倡议是，你应该总是应用边框大小的盒子来作为你所设置盒子的真正大小

对于 margin
margin 是外边距，须要分两种状况：

当 margin 是左右作用时 ：

正如你所冀望的，第一个盒子的 margin 设置为 40px, 第二个盒子的 margin 设置为 50px，那么他们之间的间隔将会变成 90px
当 margin 是高低作用时 ：

两个盒子之间的 margin 会被大的一方所笼罩。

星型选择器
正如我方才所言，对于每个盒子，都应该设置为 border-box, 然而对于每一个标签，我都要去反复设置一次的话，十分麻烦，能不能利用咱们所说的 inheritance 个性呢？咱们在 <body> 中申明：

body{box-sizing:border-box;}

答案是有效，因为 box-sizing 是不能被继承的个性之一
为此，咱们能够应用start selector, 具体是：

* {box-sizing:border-box;}

start selector 的成果是将所有的 tag 抉择并赋值其中的款式，对于一些浏览器自带的款式，咱们也能够用 start selector 笼罩。

盒子内容溢出

当咱们没有限度盒子的高度时，无论外面蕴含多少内容，盒子都会主动适应将其蕴含在内，然而当咱们既限度了宽度，又限度了高度的，而且内容又十分多的时候，就会产生盒子溢出

想要扭转这种状况，对应的一个属性值是 overflow, 默认是visible, 也就是上图
其余的值是

hidden: 间接剪掉超出盒子的局部
scroll：设置可横向滑动和纵向滑动的滑条
auto: 设置纵向滑条

background 具备很多子属性，比方：

background-color: 背景色彩
background-image:url(“path”) 背景图片
background-repeat: 图片是否反复, 反复的形式
background-position: 背景图片的地位：上下左右
咱们能够繁多地去取某一项来应用，也能够合并着应用，比方

background-color:red;
background: url('yaakov.png') no-repeat top center blue;

全副写在 background 外面，地位不分先后，然而上面的 background 会笼罩下面的 red, 因为申明的先后准则

关于css3:Week-2-Introduce-to-CSS-Part-1

1 .classname

2.selector.class

3.selector>selector

4. 伪类 selector:pseudo-class

4.Cascading Algorithms

1.Origin

2.Merge

3.Inheritance

4.Specificity

5. 文本款式

6.The Box Modal

7.Background 属性