CSS样式精要-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_24395625/article/details/101384890

CSS概述

一言以蔽之，html元素定义了网页的内容，比如按钮、输入框等待，而CSS定义了这些元素的排布方式，包括颜色、字体、大小、间距等等。

基本语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {
  property1: value1;
  property2: value2;
}

选择器可以是需要定义样式的HTML元素，比如h1,h2,p等等，除此之外还有class选择器、id选择器。

选择器

1、基本元素选择器

以html元素作为选择器,html代码如下

<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h1>This is h1.</h1>
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

CSS代码如下，指定p标签内的文字为红色，字体大小为15px，还可将多个标签分为一组，设置相同的样式。还可以定义派生选择器（h2 strong）

p {
	color: red;
	front-size: 15px;
}
h1,h2 {
	color: #ff0000;
	font-family: "sans serif";
}
h2 strong {
...
}

2、id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式，id 选择器以 “#” 来定义。

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

#red {color:red;}
#green {color:green;}

在现代布局中，id 选择器常常用于建立派生选择器。

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}

3、class选择器

在 CSS 中，类选择器以一个点号显示：

<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>

.center {text-align: center}

样式表位置

样式可以和html放在同一文件，也可以单独存为.css文件

外部样式表，在html文件中通过 link 标签链接，外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。

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

内部样式表，在html文件中用style标签

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

内联样式表，在html元素内通过style属性指定

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>