第六周笔记

最新推荐文章于 2023-12-09 07:30:00 发布

Ascssy

最新推荐文章于 2023-12-09 07:30:00 发布

阅读量55

点赞数

本文链接：https://blog.csdn.net/weixin_48999849/article/details/115877256

版权

CSS 语法

CSS 规则由两个主要的部分构成：
选择器，以及一条或多条声明。
选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。例如：selector {property: value}

下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。h1 {color:red; font-size:14px;}

值的不同写法和单位

颜色除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000：p { color: #ff0000; }。
还可以通过两种方法使用 RGB 值：p { color: rgb(255,0,0); }。
如果值为若干单词，则要给值加引号：p {font-family: "sans serif";}
提示：如果要定义不止一个声明，则需要用分号将每个声明分开。最后一条规则是不需要加分号的。然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么的好处是，当你从现有的规则中增减声明时，会尽可能的减少出错的可能性。就像这样：p {text-align:center; color:red;}

空格和大小写

是否包含空格不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。

CSS选择器

(1)选择器的分组
你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。
h1,h2,h3,h4,h5,h6 {color: green;}

(2)继承及其问题
根据 CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。
body {font-family: Verdana, sans-serif;}

根据上面这条规则，站点的 body 元素将使用 Verdana 字体（假如访问者的系统中存在该字体的话）。
通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的。

(3)CSS 派生选择器
比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

li strong
{
	font-style: italic;
	font-weight: normal;
}

<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
<ol><li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li></ol>

在上面的例子中，只有 li 元素中的 strong 元素的样式为斜体字，无需为 strong 元素定义特别的 class 或 id。
有关派生选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。例如，如果写作 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，而不论 em 的嵌套层次多深。

(4)CSS 子元素选择器
如果不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。例如，如果希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：<h1 > strong {color:red;}

这个规则会把第一个 h1 下面的 strong 元素变为红色，但是第二个 strong 不受影响：

<h1>正常样式 <strong>变红色 </strong>正常样式 </h1>
<h1>正常样式 <em>斜体样式 <strong>不变红色 </strong></em>正常样式 </h1>

结合后代选择器和子选择器，请看下面这个选择器：table.company td > p。这个选择器会选择作为 td 元素子元素的所有 p 元素，这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性。

(5)CSS 相邻兄弟选择器
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。
例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：h1 + p {background:red;}。
这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。例如：h1 + p {background:red;}

<body>
<h1>黑色
</h1>
<p>变红色
</p>
<p>黑色
</p>
<p>黑色
</p>
</body>

(6)CSS 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>

(7)CSS 类选择器
在 CSS 中，类选择器以一个点号显示：.center {text-align: center}。在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。在下面的 HTML 代码中，h1元素有 center 类。这意味着h1元素将遵守 “.center” 选择器中的规则。

<h1 class="center">中央显示</h1> <p>正常显示</p>

元素也可以基于它们的类而被选择：td.fancy {color: #f60;background: #666;}。在上面的例子中，类名为 fancy 的表格单元将是带有灰色背景的橙色。
CSS 多类选择器，例如：<h1 class="important warning">含有几个类的标签。下面的三个选择器都可以选择到它：
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

(8)CSS 属性选择器
下面的例子为带有 title 属性的所有元素设置样式：[title] { color:red; }

下面的例子为 title=“title” 的所有元素设置样式：[title="title"] { border:5px solid blue; }

下面的例子为包含指定值的title属性的所有元素设置样式。适用于title属性值含有hello单词的所有元素(由空格分隔)：[title~="hello"] { color:red; }

下面的例子为带有包含指定值的lang属性的所有元素设置样式。适用于lang属性值含有en的所有元素(由连字符分隔)：[lang|=“en”] { color:red; }。还有类似规则如下：
[abc^=“def”] 选择 abc 属性值以 “def” 开头的所有元素
[abc$=“def”] 选择 abc 属性值以 “def” 结尾的所有元素
[abc*=“def”] 选择 abc 属性值中包含子串 “def” 的所有元素
可以只对有 href 属性的a元素应用样式：a[href] {color:red;}
还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：a[href][title] {color:red;}
可以对所有带有alt属性的图像应用样式，从而突出显示这些有效的图像：img[alt] {border: 5px;}

(9)CSS 伪类 (Pseudo-classes)
CSS 伪类用于向某些选择器添加特殊的效果。伪类的语法：selector : pseudo-class {property: value}。
CSS 类也可与伪类搭配使用：selector.class : pseudo-class {property: value}。
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。例如：

　　a:link {color: #FF0000}		/* 未访问的链接 */
　　a:visited {color: #00FF00}	/* 已访问的链接 */
　　a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

如何创建 CSS

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

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

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：

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

(2)内部样式表
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 style 标签在文档头部定义内部样式表，就像这样:

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

(3)内联样式
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p style="color: sienna; margin-left: 20px">使用内联样式</p>

CSS 背景

(1)背景色
可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。
这条规则把元素的背景设置为灰色：p {background-color: gray;}
如果希望背景色从元素中的文本向外少有延伸，只需增加一些内边距：p {background-color: gray; padding: 20px;}

(2)背景图像
要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：
body {background-image: url(http://www.baidu.com/img/bdlogo.gif);}

大多数背景都应用到 body 元素，不过并不仅限于此。下面例子为一个段落应用了一个背景，而不会对文档的其他部分应用背景：p.flower{background-image: url(http://www.baidu.com/img/bdlogo.gif);}

您甚至可以为行内元素设置背景图像，下面的例子为一个链接设置了背景图像：a.radio {background-image: url(http://www.baidu.com/img/bdlogo.gif);}

理论上讲，甚至可以向 textareas 和 select 等替换元素的背景应用图像，不过并不是所有用户代理都能很好地处理这种情况。另外还要补充一点，background-image 也不能继承。事实上，所有背景属性都不能继承。

(3)背景重复
如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。默认地，背景图像将从一个元素的左上角开始。例如：

body
{ 
	background-image: url(http://www.baidu.com/img/bdlogo.gif);
	background-repeat: repeat-y
}

(4)背景定位
可以利用 background-position 属性改变图像在背景中的位置。下面的例子在 body 元素中将一个背景图像居中放置：

body
{ 
	background-image:url('http://www.baidu.com/img/bdlogo.gif');
	background-repeat:no-repeat;
	background-position:center;
}

为 background-position 属性提供值有很多方法。
首先，可以使用一些关键字：top、bottom、left、right 和 center。
通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。
不同类型的值对于背景图像的放置稍有差异。

图像放置关键字最容易理解，其作用如其名称所表明的。

(5)背景关联(防止背景图滚动)
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：

body 
{
	background-image:url(http://www.baidu.com/img/bdlogo.gif);
	background-repeat:no-repeat;
	background-attachment:fixed
}

(6)CSS 背景属性

属性	描述
background	简写属性，作用是将背景属性设置在一个声明中
background-attachment	背景图像是否固定或者随着页面的其余部分滚动
background-color	设置元素的背景颜色
background-image	把图像设置为背景
background-position	设置背景图像的起始位置
background-repeat	设置背景图像是否及如何重复