网页学习（一） css初步

记录目的：形成自己更熟悉的学习笔记，以后用起来可以随时查阅，不用总百度，效率很低，当作一个网络笔记。

内容来自https://developer.mozilla.org/zh-CN/，一个外文网站，我觉得内容是比之前看过的菜鸟教程好的，推荐一下。

1.将已有的html元素样式化：

p, li {
    color: green;
}

，号的作用，相当于把这个条目同时适配于两个。

2.使用class

定义方式：

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

使用方式

<li class="special">项目二</li>

当然可以使用任意的成员

类定义中还可以使用空格定位

li em {
  color: rebeccapurple;
}

 

 

 

该选择器将选择<li>内部的任何<em>元素（<li>的后代）

 

 

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

+号表示紧挨着的

a:link {
  color: pink;
}

a:visited {
  color: green;
}

：表示状态

3.碰撞怎么办？

级联：最后的生效

专用：class被认为是更特性化的

4.css区分大小写

5.css里有简单函数，可以算即时的东西

6.@规则

body {
  background-color: pink;
}

@media (min-width: 30em) {
  body {
    background-color: blue;
  }
}
您将遇到的最常见的 @rules 之一是@media，它允许您使用 媒体查询 来应用CSS，仅当某些条件成立(例如，当屏幕分辨率高于某一数量，或屏幕宽度大于某一宽度时)。
在下面的 CSS中，我们将给 <body> 元素一个粉红色的背景色。但是，我们随后使用@media创建样式表的一个部分，该部分仅适用于视口大于30em的浏览器。如果浏览器的宽度大于30em，则背景色将为蓝色。

7.一些属性，如 font, background, padding, border, and margin 等属性称为速记属性--这是因为它们允许您在一行中设置多个属性值，从而节省时间并使代码更整洁。

8.一些常用的属性

font-family：     https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-family
color：           https://developer.mozilla.org/zh-CN/docs/Web/CSS/color
border-bottom：   https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-bottom
font-weight：     https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-weight
font-size：       https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-size
text-decoration： https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-decoration

 

posted @ 2020-11-25 23:48  Faker_fan  阅读(89)  评论(0)  编辑  收藏  举报