天天看点

MDN网站CSS学习

CSS学习网站

一、什么是CSS?

1、HTML用于定义内容的结构和语义,CSS用于设计风格和布局。

2、CSS语法由一个选择器(selector)开头,它选择了我们将要用来添加样式的HTML元素。

接着输入一对大括号{},括号内部定义一个或多个形式的属性(property):值(value)。

二、CSS学习之旅

1、向HTML文本中添加CSS

(1)在HTML文档的相同目录创建一个文件,保存并命名为styles.css。

在HTML文档中< head>语句模块第一行加上下面代码:

< link rel=“stylesheet” href=“styles.css”>

< link>里面用属性rel让浏览器知道css文档存在(stylesheet即CSS里面的SS,样式表),用属性href指定位置。

(2)在CSS文档中添加CSS样式并观察显示的结果。

2、使用类名

给HTML元素加个类名(class),再选中那个类名(选中时在选择器的开头加个西文句点.)。

MDN网站CSS学习

special类型课不局限于列表,它可以应用到各种元素上。并且选择器可以和类一起出现:

MDN网站CSS学习

意思是选中每个special类的li元素。

3、根据元素在文档中的位置确定样式

MDN网站CSS学习

4、根据状态确定样式

没有被访问过的连接颜色变为粉色、访问过的连接变为绿色:

a:link{

color:pink;

}

a:visited{

color:green;

}

5、组合

MDN网站CSS学习

三、如何构建CSS

1、文档中应用CSS的三种方法

(1)外部样式表

外部样式表是指将CSS编写在扩展名为.css的单独文件中,并从HTML< link>元素引用它的情况。

(2)内部样式表

内部样式表是指不使用外部CSS文件,而是将CSS放在HTML文件< head>标签里的< style>标签之中。

(3)内联样式表

内联样式表存在于HTML元素的style属性之中。其特点是每个CSS表只影响一个元素。

MDN网站CSS学习

它难以维护,使代码变得难以阅读,不推荐这样做。

2、CSS的专一性

通常情况下,两个选择器可以选择相同的HTML元素。CSS语言利用级联规则和专用规则判断发生碰撞时哪条规则取胜。

级联规则:

为p选择器定义两个规则,最后段落是蓝色的。即稍后的样式将覆盖以前的样式。

p{

color:red;

}

p{

color:blue;

}

专用规则:

在我们使用类选择器和元素选择器的模块中,类将获胜,即使它出现在前面。一个类被描述为比元素选择器更加具体、有更多的特异性。

3、CSS中的注释以结尾。

4、如果一个浏览器在解析你所书写的CSS规则的过程中遇到了无法理解的属性或者值,它会忽略这些并继续解析下面的CSS声明。

四、层叠与继承

1、优先级

浏览器是根据优先级来决定当多个规则有不同选择器对应相同的元素的时候需要使用哪个规则。它基本上是一个衡量选择器具体选择哪些区域的尺度。

一个元素选择器不是很具体 — 会选择页面上该类型的所有元素 — 所以它的优先级就会低一些。

一个类选择器稍微具体点 — 它会选择该页面中有特定 class 属性值的元素 — 所以它的优先级就要高一点。

2、继承

一些设置在父元素上的css属性是可以被子元素继承的,有些则不能。哪些属性属于默认继承很大程度上是由常识决定的。

举一个例子,如果你设置一个元素的 color 和 font-family ,每个在里面的元素也都会有相同的属性,除非你直接在元素上设置属性。但是设置width就不可以。

3、控制继承

(1)inherit:设置该属性会使子元素属性和父元素相同。

(2)initial:设置属性值和浏览器默认样式相同。如果浏览器默认样式中未设置且该属性是自然继承的,那么会设置为inherit。

(3)unset:将属性重置为自然值。即如果属性是自然继承那么就是inherit,否则和initial一样。

MDN网站CSS学习

4、应用CSS规则

给基本元素定义通用样式,然后给不同的元素创建对应的类。举个例子,在下面的样式中我给2级标题定义了通用样式,然后创建了一些类只修改部分属性的值。最初定义的值应用于所有标题,然后更具体的值通过对应类来实现。

MDN网站CSS学习