寒假学习笔记(4)

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

选择器的分组
h1,h2,h3,h4,h5,h6 {
color: green;
}

派生选择器
通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。
li strong {
font-style: italic;
font-weight: normal;
}
影响:
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>

id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
#red {color:red;}
<p id="red">这个段落是红色。</p>

CSS 类选择器
在 CSS 中,类选择器以一个点号显示:
.center {text-align: center}
<h1 class="center">
This heading will be center-aligned
</h1>

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

<style type="text/css">
[title]
{
color:red;
}
</style>
<h2 title="Hello world">Hello world</h2>

包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值:
[title~=hello] { color:red; }
包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值:
[lang|=en] { color:red; }

插入css的三种方式:

<!-- 添加css样式的三种方式 -->
    <!-- 1.在style标签@import -->
    <!-- 2.直接写入div的style属性 -->
    <!-- 3.".ceshi {font-size:14px; color:#FF0000;}"写在style里 
                注意!1.3.方法会冲突! -->
    <!-- 4.使用link标签(最常用,最好用) -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="zTree_v3/Wcss.css" type="text/css" />
<style>
@import url(zTree_v3/Wcss.css);

.ceshi {font-size:14px; color:#FF0000;}
</style>
</head>
<body>
    <div class="ceshi1">我是div css测试内容www.divcss5.com支持</div>
    <div class="ceshi">我是div css测试内容www.divcss5.com支持</div>
    <div style="font-size:14px; color:#FF0000;">我是div css测试内容www.divcss5.com支持</div> 
</body>
</html>
原文地址:https://www.cnblogs.com/jmdd/p/12261047.html