自学——一个月入门前端①

自学一个月入门前端

---

每天更新！！！坚持1个月！！！

今天的主要内容是css。看mdn文档学习

css入门

css可以直接使用< style >标签来在里面编写，也可以新建一个css文件使用link来导入。<link rel="stylesheet" href="styles.css" />

改变样式的默认格式。

h1 {
  color: red;
}
p {
  color: green;
}
p,
li {
  color: green;
}

使用类名

<ul>
  <li>项目一</li>
  <li class="special">项目二</li>
  <li>项目 <em>三</em></li>
</ul>
<style>
.special {
  color: orange;
  font-weight: bold;
}
</style>

当然也可以做给li特别的class加上这个样式

li.special {
  color: orange;
  font-weight: bold;
}

可以使用em来对其中的某个内容进行变化，在li中使用em

<li>Item <em>three</em></li>

li em {
    color: rebeccapurple;
}

那么，这个ul中的li中的这个three就会变成这个颜色。

---

使用+来设置某个之后的某个元素是什么样的格式，例如：

h1 + p {
  font-size: 200%;
}

这样就可以让h1之后的p放大一倍。
如果h1 + p + p ，那么就是让h1之后紧跟着的第二个p放大一倍。测试之后发现只有严格的标签顺序才会触发这个格式。

---

根据状态来设置样式：

a:link {
  color: pink;
}

a:visited {
  color: green;
}

改变了链接被鼠标悬停的样式：

a:hover {
  text-decoration: underline dotted;
}

---

可以同时使用选择器和选择符

body h1 + p .special {
  color: yellow;
  background-color: black;
  padding: 5px;
}

上面的代码为以下元素建立样式：在 < body > 之内，紧接在 < h1 > 后面的 < p > 元素的内部，类名为 special的会变成这个样式。

css的组成

外部样式表

单独设置一个css文件来做样式表，然后使用link来链接使用。

内部样式表

 	<style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }
      p {
        color: red;
      }
    </style>

我觉得使用这个的场景就是和之前的场景有所不同的一个单独的界面

内联样式

直接在一个标签中加上style<h1 style="color: blue;background-color: yellow;border: 1px solid black;">
尽量避免这种情况的使用。

选择器

h1
a:link
.manythings
#onething
*
.box p
.box p:first-child
h1, h2, .intro

之后再仔细看选择器的内容，选择器主要是为了找到需要修改样式的地方。

优先级

.special {
  color: red;
}

p {
  color: blue;
}

对于一个既有p又是special 类的文本而言，他们的优先级是更加具体的优先级更高。也就是类选择器的更高，这个文本应该是红色的。

属性和值

属性是人类可以读的标识符，表示想要修改的样式例如：front-size, width, background-color

值表示每个属性都有一个值，比如颜色就是blue。
一个属性对一个值。

如果属性和值不匹配，也就是这个属性中的值没有这个值，那么这个错误会被css忽略，变成一个无效的样式

函数

大多数的值都是相对简单的关键字或值，还有一些值是以函数的形式出现的。例如calc

<div class="outer"><div class="box">内部盒子的宽度为 90% - 30px。</div></div>

.outer {
  border: 5px solid black;
}

.box {
  padding: 10px;
  width: calc(90% - 30px);
  background-color: rebeccapurple;
  color: white;
}

表示这个box 的宽度是90% - 30px计算出来的结果作为静态值输入。
Transform函数：

<div class="box"></div>

.box {
  margin: 30px;
  width: 100px;
  height: 100px;
  background-color: rebeccapurple;
  transform: rotate(0.8turn);
}

使用了rotate，旋转了0.8turn

规则

使用@import 来将一个样式表的导入到另外一个css样式表中。

一个常见的规则是@media，被用作创建媒体查询。媒体查询使用条件逻辑来应用css样式。

body {
  background-color: pink;
}

@media (min-width: 30em) {
  body {
    background-color: blue;
  }
}

简写属性

/* 在像 padding 和 margin 这样的 4 值简写语法中，
   数值的应用顺序是上、右、下、左（从顶部顺时针方向）。
   也有其他的简写类型，例如 2 值简写，
   它为顶部/底部设置 padding/margin，然后是左侧/右侧 */
padding: 10px 15px 15px 5px;

不需要写上下左右了，默认的是上右下左。

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-attachment: fixed;

这几行是等价的。

css是如何运行的

html转化成dom，css装载编译之后来修饰dom。