CSS学习笔记:基础语法

简介

CSS 指层叠样式表 (Cascading Style Sheets);

语法

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

如:


<html>
<head>
<style>
/*这是个注释*/
p
{
	color:red;
    /*这是个注释*/
	text-align:center;
} 
style>
head>

<body>
<h1>标题不变h1>
<p>Hello World!p>
<p>这个段落采用CSS样式化。p>
body>
html>

CSS学习笔记:基础语法_第2张图片

生效范围

如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器。

id选择器

d 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

以下的样式规则应用于元素属性 id=“para1”:


<html>
<head>
<style>
#para1
{
	text-align:center;
	color:red;
} 
style>
head>

<body>
<p id="para1">Hello World!p>
<p>这个段落不受该样式的影响。p>
body>
html>

CSS学习笔记:基础语法_第3张图片

ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

class选择器

class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示:

  • 在以下的例子中,所有拥有 center 类的 HTML 元素均为居中:

<html>
<head>
<style>
.center
{
	text-align:center;
}
style>
head>

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

CSS学习笔记:基础语法_第4张图片

  • 在以下实例中, 所有的 p 元素使用 class=“center” 让该元素的文本居中:

<html>
<head>
<style>
p.center
{
	text-align:center;
}
style>
head>

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

CSS学习笔记:基础语法_第5张图片

创建

插入样式表的方法有三种:

  • 外部样式表(External style sheet)
  • 内部样式表(Internal style sheet)
  • 内联样式(Inline style)

外部样式表

当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在(文档的)头部:

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

内部样式表

当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用

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

内联样式

由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。

要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距:

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

多重样式优先级

一般情况下,优先级如下:
内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式

你可能感兴趣的:(其他)