css基础

一.引入css的三种方式:

 1.内联属性(Inline style attribute)的使用方法是,对于想要设置样式的HTML元素,直接修改他的style属性,将css代码直接写在style属性里。

比如:

<html>
<body>
<h1 style="font-size: 12px;">我的字号被修改了</h1>
</body>
</html>

 2.直接写在style标签里.

例:

<html>
<head>
<style>
h1 {font-size: 12px;}
</style>
</head>
<body>
<h1>我的字号被修改了</h1>
</body>
</html>

 3.使用link标签引入外部css文件(一般写在head标签里面).如:<link rel="stylesheet" href="styles.css" />

根据自己的需要,设置相应的属性.

二.语法规则由两个主要的部分构成:SS选择器(selector),以及一条或多条声明(declaration).

 1.selector {declaration1; declaration2; ... declarationN }

选择器标明了我们要操作的HTML元素。 每个声明用分号隔开,最后一个声明不用。

而每一个声明由一个属性名和一个值组成。属性名和值被冒号分开。

如下:selector(选择器) {property(属性): value(值)}

 2.元素选择器就是以HTML标签(又叫HTML元素)作为目标的选择器。 这种选择器的目的,是改变某类元素的默认样式。

例如:div{ color:red}.

则<div>与</div>之间的元素都有div里面的属性,如果要里面的元素都有属性则 [标签名 里面标签名{}.]

 3.类选择器(Class Selector)是一种独立于HTML元素来指定样式的选择器.

例子:.warning{ color:red;} <h1 class="warning">我是警告标题</h1>.

通过class属性,将这个类与html元素关联在一起.类选择器还可以与其他选择器搭配使用h1.warning{color: red;}这样就只有hi里面的color样式改成了red.

 4.通配选择器:*.warning{ color: red;}这样的类选择器适用于所有元素。除了最开始没有用到的地方。

 5.ID选择器:前面加一个#,一般不写*.

例:#warning-title {font-weight: bold;} <h1 id="warning-title">这是一个警告标题</h1>.

相关推荐