CSS入门基础

目录:

  • CSS的语法
  • id和class选择器
    • id选择器
      • 错误案例
      • 错误原因
    • class选择器
        • 允许元素引用class
    • 通用选择器
  • CSS的创建
    • 插入样式的三种方法:
      • 多重样式优先级别
      • 外部样式表(External style sheet)
        • 在head标签定义
        • 建立一个.css结尾的文件(我建立的是red.css)
        • 代码实现:
      • 内部样式表(Internal style sheet)
        • 利用style标签在head 标签内定义
      • 内联样式(Inline style)
        • 利用style属性在标签内定义

CSS的语法

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:
CSS入门基础_第1张图片

id和class选择器

id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
以下的样式规则应用于元素属性 id="para1":
id选择器作为唯一标识,用于一种特殊的格式(ID选择器只能被一个元素引
用)

注意虽然id可以给多个标签定义个样式,浏览器也允许这种错误但是,在写的时候不能这样写。首先… 多个 ID 定义,同一页面当中会bai令到 DOM 的判别出错
另外绝对du不符合国际 W3C 组织的网页标准

错误案例

CSS入门基础_第2张图片
错误代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS入门</title>
	<style>
	#WordRed{
		color:red;
	}

	</style>
</head>
<body>
<p id="WordRed">HELLO WORLD</p>
<p id="WordRed">你好!</p>
<h1 id="WordRed">我很好</h1>

</body>
</html>

错误原因

id作为唯一标识不能被多个标签引用

class选择器

class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,
class可以在多个元素中使用。
class 选择器在HTML中以class属性表示,  CSS 中,类选择器以一个
"."号显示:
在以下的例子中,所有拥有 center 类的 HTML 元素均为居中。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>class</title> 
<style>
.center
{
	text-align:center;
}
</style>
</head>

<body>

<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p> 
</body>
</html>

允许元素引用class

语法:
元素.(名字){
定义样式
}

你也可以指定特定的HTML元素使用class。
在以下实例中, 所有的 p 元素使用 class=“center” 让该元素的文本居中:
CSS入门基础_第3张图片
代码实现:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>class</title> 
<style>
p.center
{
	text-align:center;
}
</style>
</head>

<body>
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p> 
</body>
</html>

通用选择器

通用选择器是功能最强大的选择器,它使用一个(*)号指定,它的作用是匹配
html中所有标签元素,

如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色字体20px:

* {color:red;font-size:20px;}

CSS的创建

插入样式的三种方法:

多重样式优先级别

内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式

外部样式表(External style sheet)

在head标签定义

<head>
<link rel="stylesheet" type="text/css" href="red.css">
</head>

建立一个.css结尾的文件(我建立的是red.css)

在里面写上CSS样式:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

代码实现:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>class</title> 
<link rel="stylesheet" href="red.css">
</head>

<body>
<h1 >这个标题不受影响</h1>
<p >这个段落居中对齐。</p> 
</body>
</html>

内部样式表(Internal style sheet)

利用style标签在head 标签内定义

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式(Inline style)

利用style属性在标签内定义

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

你可能感兴趣的:(CSS,css)