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>.