CSS选择器

最新推荐文章于 2024-10-16 21:03:59 发布

chuanduo1947

最新推荐文章于 2024-10-16 21:03:59 发布

阅读量104

点赞数

文章标签：嵌入式

原文链接：https://my.oschina.net/u/3836799/blog/1824038

版权

<!DOCTYPE>声明标签：
定义和用法：

声明必须是HTML文档的第一行，位于<html>标签之前。

其声明不是HTML标签，它是指示web浏览器关于页面使用哪个HTML版本进行编写的指令。

在HTML4.01中,<!DOCTYPE>声明引用DTD，因为HTML4.01基于SGML.DTD规定了标记语言的规则，这样浏览器才能正确的呈现内容。

HTML5不基于SGML，所以不需要引用DTD。

HTML5：<!DOCTYPE html> <meta charset=’utf-8’>
HTML4:
<!DOCTYPE HTML PUBLIC ”-//w3c//DTD HTML 4.01Transitional//EN”http://www.w3.org/TR/html4/loose.dtd>
该DTD包含所有HTML元素和属性，包括展示性的和弃用的元素比如(font)，不允许框架集（Framesets）.
<meta http-equiv=Content-Type content=”text/html;charset=utf-8”>
注意规则：
单标记必须闭合如：<br>必须为<br/> <input/>
单属性必须添加属性值：<input type=’radio’ checked>必须写为<input type=’radio’ checked=‘checked’/>
标记和属性必须使用小写：<Body><BODY/> 必须写为<body>
属性的属性值必须使用：在HTML4.01z之前可以使用<body bgcolor=red>,HTML4.01必须写为<body bgcolor=”red”>

使用CSS样式的方式定义：
内联式样式：在单个元素里面写CSS：<body style=”background-color:red;”>

嵌入式样式表里面写CSS：<style type=”text/css”>
Body{
background-color:red;
}
</style>
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS初体验</title>
<link rel="stylesheet" type="text/css" href="FirstStyleCss.css"/>

</head >
<body style="background-color:red">
<h1 style="background-color:white"> 这个字是什么色呢？</h1>
</body>
</html>

引入式样式表引用CSS文件：
<link rel="stylesheet" type="text/css" href="style.css"/>
href里面文件在单独的一个样式表里面。
HTML标记定义（CSS选择器）：
<p></P>对该元素定义：p{属性：属性值；}
Class定义：
<p class=”pp”“></P>对该元素定义：.pp{属性：属性值；}
ID定义: <p id=”pp”“></P>对该元素定义：#pp{属性：属性值；} id选择器是一个唯一选择器。

优先级：ID>Class>HTML。同级时选择离元素最近的一个。
组合选择器（同时控制多个元素）h1,h2,h3,.div{font-size:14px;color:red;}
伪元素选择器：
a:link:正常连接的样式；
a:hover:鼠标放上去的样式；
a:active:选择链接时的样式
a:visited:已经访问过的连接的样式；
例子：
a:link:{color:red;}
a:hover:{color:green;}
a:active:{color:red;}
a:visited:{color:green;}
CSS叠加样式：