前端与CSS

这是我参与第五届青训营伴学笔记创作活动的第1天。

课程重点

css的定义及基本使用
css中的继承与优先级
css的布局

详细知识点

CSS的定义及基本使用?

css是用来定义页面的样式：字体和颜色、位置和大小、动画效果。

在页面中使用css的三种方式：外联、嵌入、内联。

css是如何工作的？ css中的选择器：找出页面中的元素，以便给它们设置样式

通配选择器

<h1>This is heading</h1>
<p>this is some paragraph.</p>
<style>
* {
  color: red;
  font-size: 20px;
}
</style>

标签选择器

<h1>This is heading</h1>
<p>this is some paragraph.</p>
<style>
h1{
 color: red;
 font-size: 20px;
}
p{
  color:blue;
  font-size:15px
}
</style>

类选择器

<h2>Todo List</h2>
<ul>
<li class="done">Learn HTML</li>
<li class="done">Learn CSS</li>
<li>Learn JavaScript</li>
</ul>
<style>
.done {
color: gray;
text-decoration: line-through;
}
</style>

属性选择器

<label>用户名：</label>
<input value="zhao" disabled />

<label>密码：</label>
<input value="123456" type="password" />

<style>
 [disabled] {
   background: #eee;
   color: #999;
 }
</style>

标签+属性方式：

<p>
 <label>密码：</label>
 <input type="password" value="123456" />
</p>
<style>
 input[type="password"] {
   border-color: red;
   color: red;
 }
</style>

标签+属性+正则匹配属性值方式：

<p><a href="#top">回到顶部</a></p>
<p><a href="a.jpg">查看图片</a></p>

<style>
  a[href^="#"] {
    color: #f54767;
    background: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
    padding-left: 1.1em;
  }
  a[href$=".jpg"] {
    color: deepskyblue;
    background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
    padding-left: 1.2em;
  }
</style>

id选择器

<p><a href="#top">回到顶部</a></p>
<p><a href="a.jpg">查看图片</a></p>
<style>
 a[href^="#"] {
   color: #f54767;
   background: 0 center/1em url(https://assets.codepen.io/59477/arrow-up.png) no-repeat;
   padding-left: 1.1em;
 }
 a[href$=".jpg"] {
   color: deepskyblue;
   background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
   padding-left: 1.2em;
 }
</style>

6.伪类选择器：不基于标签和属性定位元素，两种伪类：状态伪类、结构性伪类。

1.状态伪类：

<a href="http://example.com">
  example.com
</a>
<label>
  用户名：
  <input type="text">
</label>
<style>
//对于链接的四种状态伪类
a:link {
  color: black;
}
a:visited {
  color: gray;
}
a:hover {
  color: orange;
}
a:active {
  color: red;
}
:focus {//获取焦点，常用于input
  outline: 2px solid orange;
}
</style>

2.结构伪类：根据该dom节点在dom树中的位置决定是否选择该元素。

<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>星球大战：原力觉醒</li>
  <li>复仇者联盟 3</li>
  <li>侏罗纪世界</li>
</ol>
<style>
li {
  list-style-position: inside;
  border-bottom: 1px solid;
  padding: 0.5em
}

li:first-child {
  color: coral
}

li:last-child {
  border-bottom: none;
}
</style>

选择器的组合方式：

<article>
  <h1>拉森火山国家公园</h1>
  <p>拉森火山国家公园是位于...</p>
  <section>
    <h2>气候</h2>
    <p>因为拉森火山国家公园...</p>
    <p>高于这个高度，气候非常寒冷...</p>
  </section>
</article>
<style>
  article p {
    color: black;
  }
  article > p {
    color: blue;
  }
  h2 + p {
    color: red; 
  }
</style>

选择器组：用逗号分割所选中的元素选择器

颜色 RGB HSL alpha：透明度(0~1),0全透明，1不透明字体使用Web Fonts

<h1>Web fonts are awesome!</h1>
<style>
  @font-face {
    font-family: "Megrim";
    src: url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2) format('woff2');
  }
  h1 {
    font-family: Megrim, Cursive;
  }
</style>

<style>
  @font-face {
    font-family: f1;
    src: url("//s2.ssl.qhimg.com/static/ff00cb8151eeecd2.woff2") format("woff2");
  }
  @font-face {
    font-family: f2;
    src: url("//s3.ssl.qhimg.com/static/a59a90c9e8f21898.woff2") format("woff2");
  }
  @font-face {
    font-family: f3;
    src: url("//s2.ssl.qhimg.com/static/58324737c4cb53a5.woff2") format("woff2");
  }
  h1 {
    font-size: 50px;
  }
</style>
<h1 style="font-family: f1, serif">落霞与孤鹜齐飞，秋水共长天一色。</h1>
<h1 style="font-family: f2, serif">落霞与孤鹜齐飞，秋水共长天一色。</h1>
<h1 style="font-family: f3, serif">落霞与孤鹜齐飞，秋水共长天一色。</h1>

spacing:字体间距：letter-spacing字母间间距、word-spacing:单词间间距。 white-space属性支持的值：

pre : 文本支持所有的换行和空格
pre-line : 文本支持换行，且会忽略掉多余的空格
pre-wrap : 文本仅在必要的时候或者行的结尾换行，与pre的区别在于他增加了额外的换行符，防止文本溢出元素的框

<style>
    p.p-pre{
            white-space:pre;
    }
    p.p-preline {
       white-space: pre-line;
    }
    p.p-prewrap {
       white-space: pre-wrap;
    }
</style>
<p class='normal'>
这一段 文本将 为你展示不适用 属性   
是如何 在网页中      显示的
做对比！
</p>
<p class='p-pre'>
文本支持所有 的    空格和
换行。
</p>
<p class="p-preline"> 
文本支持换行
但是  会 忽略掉 多余    空格
</p>
<p class="p-prewrap"> 
文本只在 必要的时候      或者说行的结尾
换行
</p>

CSS的继承与优先级

优先级选择器的特异度越高，优先级越高。

Inline style（内联样式） > Internal style sheet（内部样式） > External style sheet（外部样式）！important > 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配选择器

各项示例:

内联样式：写在标签属性style的样式，如 <p style="color=red">
ID选择器，如#id{…}
类选择器，如 .class{…}
属性选择器，如 input[type="email"]{…}
伪类选择器，如a:hover{…}
伪元素选择器，如 p::before{…}
标签选择器，如 input{…}
通配选择器，如 *{…}

权重的4个等级的定义如下：

第一等级：代表内联样式，如style=""，权值为 1000
第二等级：代表id选择器，如#content，权值为100
第三等级：代表类，伪类和属性选择器，如.content，权值为10
第四等级：代表标签选择器和伪元素选择器，如div p，权值为1
注意：通用选择器（*），子选择器（>），和相邻同胞选择器（+）并不在这个等级中，所以他们的权值为0。

行内样式（1000）>ID选择器（100）>类选择器（10）>标签选择器（1）>通用选择器（0）

示例

<style>
    //定义了第一个和第二个H2的样式
    #content div #main-content h2 {
        color: red;
    }
    //定义了第一个H2的样式
    #content #main-content>h2 {
        color: blue;
    }
    //定义了第一个和第二个H2的样式
    body #content div[id="main-content"] h2 {
        color: green;
    }
    //定义了第二个H2的样式
    #main-content div .paragraph h2 {
        color: orange;
    }
    //定义了第二个H2的样式
    #main-content [class="paragraph"] h2 {
        color: yellow;
    }
    //定义了第二个H2的样式
    div #main-content div .paragraph h2 .first {
        color: pink;
    }
</style>
<div id="content">
    <div id="main-content">
        <h2>CSS简介</h2>
        <p>CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。</p>
        <div class="paragraph">
            <h2 class="first">使用CSS布局的优点</h2>
            <p>1、表现和内容相分离 2、提高页面浏览速度 3、易于维护和改版 4、使用CSS布局更符合现在的W3C标准.</p>
        </div>
    </div>
</div>

第一个特殊性的值=2*100+2*1=202
第二个特殊性的值=2*100+1=201
第三个特殊性的值=1*100+1*10+3*1=113
第四个特殊性的值=1*100+1*10+2*1=112
第五个特殊性的值=1*100+1*10+1*1=111
第六个特殊性的值=1*100+2*10+3*1=123

继承

显示继承：用inherit: 通过一个容器可以改变容器内所有的属性值

 div{
     box-sizing: inherit;//box-sizing本来是不可继承属性，用inherit关键字可将它变成可继承属性。
    }

初始值 对于不可继承的属性未指定会采用初始值，可继承的属性如果往上一层一层没有继承到的话也会采用初始值。 css中，每个属性都有一个初始值，可以用initial关键字显式重置为初始值,例如:background-color:initial css的求值过程

CSS的布局

布局是确定内容的大小和位置的算法，依据元素、容器、兄弟节点和内容等信息来计算。布局相关技术：常规流；浮动；定位(绝对，相对，黏贴)。

盒模型

overflow 调整溢出部分的显示

取值	作用
visible	默认值，溢出部分可见
hidden	溢出部分隐藏
scroll	强制在水平方向和垂直方向添加滚动条
auto	自动在溢出方向添加滚动条

块级元素与行级元素

Flex Box

flex-direction属性设置主轴的方向

.wrap{
    flex-direction:row | row-reverse | column | column=reverse;
}

flex-wrap属性用于设置当项目在容器中一行无法显示的时候如何处理

.wrap{
    flex-wrap:nowrap | wrap | wrap-reverse;
}

justify-content属性设置项目在容器中主轴上的对齐方式

.wrap{
    justify-content: flex-start | flex-end | center |space-between | space-around
}

align-items属性设置项目在容器中侧轴上的对齐方式

.wrap{
    align-items:flex-start | flex-end | center | baseline | stretch
}

flex-grow属性用来控制当前项目是否放大显示。默认值为0，表示即使容器有剩余空间也不放大显示。如果设置为1，则平均分摊后放大显示。

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>
<style>
  .container {
    display: flex;
  }
  .a, .b, .c {
    width: 100px;
  }
  .a {
    flex-grow: 2;
  }
  .b {
    flex-grow: 1;
  }
</style>

flex-shrink属性表示元素的缩小比例。默认值为1，如果空间不够用时所有的项目同比缩小。如果一个项目的该属性设置为0，则空间不足时该项目也不缩小。

<div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>
<style>
  .container {
    display: flex;
  }
  .a, .b, .c {
    width: 400px;
  }
  .a {
    flex-shrink: 0;
  }
</style>

grid布局

grid-template-columns和grid-template-rows:设置容器划分网格列和行

<style>
    .f{
        display: grid;
        height:400px;
        grid-template-columns: 1fr 2fr 3fr;/*容器划分列的比例*/
        grid-template-rows: 1fr 2fr 3fr;/*容器划分行的比例*/
        grid-gap: 10px;
    }
    .child{
        border: 1px solid blue;
    }
</style>
<body>
    <div class="f">
       <div class="child">01</div>
       <div class="child">02</div>
       <div class="child">03</div>
       <div class="child">04</div>
       <div class="child">05</div>
       <div class="child">06</div>
       <div class="child">07</div>
       <div class="child">08</div>
       <div class="child">09</div>
    </div>
</body>

grid-template-areas：一个区域由单个或多个单元格组成，具体使用需要在项目属性里面设置grid-area

<style>
    .f{
        display: grid;
        height:400px;
        grid-template-columns: 1fr 2fr 3fr;/*容器划分列的比例*/
        grid-template-rows: 1fr 2fr 3fr;/*容器划分行的比例*/
        grid-template-areas: 'a b b'
                             'a c d'
                             'a c d';

    }
    .child{
        padding: 20px;
        border: 2px solid blue;
    }
    .f .child:nth-child(1){
        grid-area: a;
    }
    .f .child:nth-child(2){
        grid-area: b;
    }
    .f .child:nth-child(3){
        grid-area: c;
    }
    .f .child:nth-child(4){
        grid-area: d;
    }
</style>
<body>
    <div class="f">
       <div class="child">01</div>
       <div class="child">02</div>
       <div class="child">03</div>
       <div class="child">04</div>
    </div>
</body>

总结

CSS的学习要持续，因为CSS的新特性在不断地涌现，需充分利用MDN和W3C CSS规范。在此附上学习链接： developer.mozilla.org/en-US/; www.w3.org/Style/CSS/

前端与CSS|青训营笔记