小白学习HTML和CSS基础3

最新推荐文章于 2022-10-10 15:02:34 发布

coderWWH

最新推荐文章于 2022-10-10 15:02:34 发布

阅读量138

点赞数

文章标签：小白

本文链接：https://blog.csdn.net/weixin_44215654/article/details/88581838

版权

学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

微动学习190315

本笔记于在W3C学习所记

0.如何创建 CSS

外部样式表（主）/内部样式和内联样式

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

多重样式
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

1.CSS语法

CSS 指层叠样式表 (Cascading Style Sheets)
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
来源W3C
如果值为若干单词，则要给值加引号：

p {font-family: "sans serif";}

2.CSS高级语法

选择器的分组

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

继承及其问题
根据 CSS，子元素从父元素继承属性。

body {
     font-family: Verdana, sans-serif;
     }

创建一个针对 p 的特殊规则，这样它就会摆脱父元素的规则：

body  {
     font-family: Verdana, sans-serif;
     }

p  {
     font-family: Times, "Times New Roman", serif;
     }

3.简单选择器

CSS 派生选择器
通过依据元素在其位置的上下文关系来定义样式

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

CSS id 选择器
CSS 类选择器，和 id 一样，class 也可被用作派生选择器
（之前有介绍）

.fancy td {
	color: #f60;
	background: #666;
	}
/*类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。
（名为 fancy 的更大的元素可能是一个表格或者一个 div）*/

元素也可以基于它们的类而被选择

td.fancy {
	color: #f60;
	background: #666;
	}
/*类名为 fancy 的表格单元将是带有灰色背景的橙色。*/

CSS 属性选择器
对带有指定属性的 HTML 元素设置样式

[title]
{
color:red;
}

属性和值选择器
下面的例子为 title=“W3School” 的所有元素设置样式

[title=W3School]
{
border:5px solid blue;
}

属性和值选择器 - 多个值
下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：

<html>
<head>
<style type="text/css">
[title~=hello]
{
color:red;
} 
</style>
</head>

<body>
<h1>可以应用样式：</h1>
<h2 title="hello world">Hello world</h2>
<p title="student hello">Hello W3School students!</h1>
<hr />

<h1>无法应用样式：</h1>
<h2 title="world">Hello world</h2>
<p title="student">Hello W3School students!</p>
</body>
</html>