CSS

最新推荐文章于 2024-06-09 17:43:42 发布

原创最新推荐文章于 2024-06-09 17:43:42 发布 · 77 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #浏览器 #HTML

CSS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了CSS的基本概念及其作用，包括层叠样式表的定义、不同类型的样式表应用方式、选择器的使用方法，以及如何通过CSS控制HTML元素的样式。

CSS是什么？

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

样式定义如何显示HTML元素，样式通常存储在样式表中，也可以内嵌到HTML中，也可以内联到标签中。

CSS的作用？

同时控制多重网页的样式和布局。

样式通常保存在外部的.css文件中。通过仅仅编辑一个简单的CSS文档，外部样式表便会同时改变站点中所有页面的布局和外观。

如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。

当同一个 HTML 元素被不止一个样式定义时，会按以下顺序使用样式表：

内联样式（在 HTML 元素内部）
内部样式表（位于 <head> 标签内部）
外部样式表
浏览器缺省设置

CSS语法
CSS规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }

选择器通常是您需要改变样式的HTM 元素：selector
每条声明由一个或多个属性和值对儿组成：declaration1、declaration2...

普通选择器：

h1 {color:red; font-size:14px;}

作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。

在这个例子中 h1 是选择器，color 和 font-size 是属性，blue 和 14px 是值。

派生选择器：
li strong {
font-style: italic;
font-weight: normal;
}
只有li标签中的strong元素是以上样式。其他标签中的strong元素不适合以上样式。
strong是派生在li标签里的

id 选择器：

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：
#red {color:red;}
#green {color:green;}
下面的HTML代码中，id属性为red的p元素显示为红色，而id属性为green的p元素显示为绿色。
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

id 选择器和派生选择器：
在现代布局中，id 选择器常常用于建立派生选择器。
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。

类选择器：
类选择器以一个点号显示
.center {text-align: center}
在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。
例如：
<h1 class="center">
<p class="center">

class用作派生选择器：
.fancy td {
color: #f60;
background: #666;
}
在上面这个例子中，类名为fancy的更大的元素内部的表格单元<td>都会以灰色背景显示橙色文字。

td.fancy {
color: #f60;
background: #666;
}
在上面的例子中，类名为fancy的表格单元将是带有灰色背景的橙色。
<td class="fancy">

样式表分类：
外部样式表
内部样式表
内联样式

插入外部样式表：
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

内部样式表：
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>

内联样式：
要使用内联样式，你需要在相关的标签内使用样式（style）属性
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

CSS语法的常用属性值：

背景色：{background-color: gray;}
背景图像：{background-image: url(/i/eg_bg_04.gif);}
背景定位：{background-position:center;}
缩进文本：{text-indent: 5em;}
字间隔：{word-spacing: 30px;}
字符转换：{text-transform: uppercase}
字体：{font-family: sans-serif;}
字体系列：{font-family: Georgia;}
列表类型：{list-style-type : square}

摘自：www.w3cschool.cn