CSS基础

最新推荐文章于 2024-10-09 19:16:55 发布

zhengdianwei

最新推荐文章于 2024-10-09 19:16:55 发布

阅读量505

点赞数

分类专栏： CSS 文章标签：应用

本文链接：https://blog.csdn.net/zhengdianwei/article/details/9705123

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.CSS 指层叠样式表 (Cascading Style Sheets),是一种用来控制网页样式的一种编辑性语言。

网页主体内容由html控制，网页的格式由CSS控制，这大大减少了网页代码量，提高了效率，减少了访问网页的时间。

2.CSS规则由选择器和若干条声明组成。

格式：选择器 {属性1:属性值1;属性2:属性值2;...}

3.选择器用来标明对网页中的哪些内容进行样式控制，选择器有四种：派生选择器，ID选择器，类选择器和属性选择器。

每个属性和属性值之间用“;"隔开，属性和属性值成为一条声明，用来指定采用什么样式；

声明之间用“；”隔开。

4.派生选择器：利用html文件中不同标签在其位置的上下文关系，来指定样式。

例如若将h1标签定义的内容颜色设为红色，则 h1{color: red;}

若将列表(li)中的strong定义的内容设为斜体字，则 li strong { font-style:italic;}

若将段落(p)定义的内容颜色设为蓝色，则 p{color :blue;}

5.ID选择器：可以为标有特定ID的HTML元素指定特定的样式。ID选择器以#开头，

例如将ID=“red"的元素内容颜色设置成红色，则#red{color:red;}

将ID=“green”的段落内容颜色设置成绿色，则#green{color:green;}

ID选择器用于派生选择器，例如将ID为“sidebar”的段落字体设置成itealic，则 #sidebar p{font-style:itealic;}

6.类选择器：可以为标有特定类名的HTML元素指定特定的样式。类选择器以. 开头。

例如将标有class="center"的标签内容指定中央对齐，则 .class{text-align:center;}

那么<p class="center">的标签的内容对齐方式为中央对齐。

类选择器也可用作派生选择器。例如将类名为 fancy 的元素内部的表格单元都会以灰色背景显示橙色文字，则 td .fancy{color: #f60;

background: #666;

}

<td class="fancy"> //以 fancy 标注的单元格都会是带有灰色背景的橙色。

7.属性选择器：可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

例如为带有 title 属性的所有元素设置样式：[title] //title可以为任何属性的完整便是，例如lang=en

{

color:red;

}

为title中含有Hello单词的元素指定格式，[title~=hello]

{

color:red;

}

为带有包含指定值的 lang 属性的所有元素设置样式

[lang|=en]

{

color:red;}

<h1>可以应用样式：</h1>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>

8.要让网页呈现出所要的格式，就要将样式插入到HTML中去。

插入样式表有三种方法：外部样式表，内部样式表，内联样式。

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

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

.用html连接样式表：html <link rel="stylesheet type="text/css" href="css/golbal.css">; xhtml <link rel="stylesheet type="text/css" href="css/global.css"/>

用css连接样式表：<style type="text/css"> @import url(css/global.css); </style>

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

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
不要在属性值与单位之间留有空格。

②内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:
<head>
<style type="text/css">
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">
This is a paragraph
</p>

9.多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
例如，外部样式表拥有针对 h3 选择器的三个属性：
h3 {
color: red;
text-align: left;
font-size: 8pt;
}
而内部样式表拥有针对 h3 选择器的两个属性：
h3 {
text-align: right;
font-size: 20pt;
}
假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：
color: red;
text-align: right;
font-size: 20pt;
即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。