网页学习(一) 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- 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
原文地址:https://www.cnblogs.com/King-of-Dark/p/14039969.html