CSS样式表详解-优快云博客

本文链接：https://blog.youkuaiyun.com/diyuzhiwaicc/article/details/103145620

CSS（Cascading Style Sheets）是指层叠样式表,是为了解决HTML中内容与表现分离的问题，可以极大的提高工作效率。外部样式表通常存储在CSS文件中，多个样式定义可层叠为一个。

 <p style="color: blue;background-color: red;text-align: left;font-size: 20px">段落</p>

样式表定义如何显示HTML元素，将HTML中的字体标签和颜色属性等抽离出来，保存到外部的.css文件中，我们只需要编辑一个简单的CSS文档就可以改变所有页面的布局和外观。

1.基本语法

CSS语句通常由两部分组成：选择器以及若干条声明。选择器通常是需要进行改变样式的HTML元素，如下面的元素p；声明总是以大括号{}括起来，每条声明都是有一个属性和一个值组成，属性和值用冒号分开。

/*注释内容*/
p {color:red;font-size:12px;text-align:center;}

为了提高CSS的可读性，一般每行只描述一个属性。CSS的注释用"/*…*/"进行表示。

2.id和class选择器

在HTML元素中设置CSS样式，需要在元素中设置"id"或者"class"选择器。

2.1 id选择器

id选择器可以为标有特定id的HTML元素指定特有的样式，CSS中id选择器以"#"来定义，注意id属性不要以数字开头。以下的样式规则应用于元素属性id=“para1”：

#para1
{
    text-align:center;
    color:red;
}

2.2 class选择器

class选择器用来描述一组元素的样式，class选择器和id选择器的不同在于，class可以在多个元素中使用。class选择器在HTML中以class属性表示，在CSS中，类选择器以一个点"."号显示。以下所有center类的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,以下实例中，所有p元素使用class="center"让该元素的文本居中。

p.center {text-align:center;}

3.分组选择器和嵌套选择器

3.1分组选择器

在样式表中有很多相同样式的元素，为了尽量减少代码，我们可以选择使用分组选择器，每个选择器之间用逗号分隔。

<style>
h1,h2,p
{
	color:green;
}

3.2嵌套选择器

嵌套选择器可能比较适用于选择器内部的选择器的样式，如下面的几个样式：

p{ }：为所有p元素指定一个样式
.marked{ }：为所有class="marked"的元素指定一个样式
.marked p{ }：为所有class="marked"元素内的p元素指定一个样式
p.marked{ }：为所有class="marked"的p元素指定一个样式

4.插入样式表

向HTML文档中插入样式表的方法有三种：

外部样式表（External style sheet）
内部样式表（Internal style sheet）
内联样式表（Inline style）

4.1外部样式表

当样式需要应用于很多页面时，外部样式表将是最理想的选择。页面使用<link>标签链接到样式表，<link>标签在文档的头部：

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

浏览器会从文件mystyle.css中读取到样式声明，并根据它来格式化文档。

4.2内部样式表

当单个文档需要特殊样式时，就使用内部样式表，可以直接使用<style>标签在文档头部定义内部样式表：

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

4.3内联样式

由于要将表现和内容混杂在一起，会损失样式表的很多优势，所以慎用该方法。

<p style="color:red;margin-left:20px">段落。</p>

在同一个HTML文档内部可以引用多个外部样式表，一般情况下，优先级如下：
内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式