首先在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的选择器：

1 .classname

.classname{}  <p class="classname"></p>

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

2.selector.class

div.main{}<div class="main"></div><p class="main"></p>

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

3.selector>selector

<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>都会变成蓝色

4.伪类selector:pseudo-class

罕用伪类：

: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;

4.Cascading Algorithms

1.Origin

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

2.Merge

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

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

另一个<p>的申明是

p{color:blue;}

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

3.Inheritance


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

body{background-color:blue;}

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

4.Specificity


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

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

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

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

5.文本款式

.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倍

6.The Box Modal

对于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:设置纵向滑条

7.Background属性

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,因为申明的先后准则