[UI] 01 - CSS - 爱码网

前言

一、认识

From: http://www.runoob.com/css/css-tutorial.html

CSS 指层叠样式表 (Cascading Style Sheets)

解决内容与表现分离的问题。

二、结构

形式：属性-值

[UI] 01 - CSS

class 选择器

<style>
body {background-color:tan;}
h1   {color:maroon;font-size:20pt;}
hr   {color:navy;}
p    {font-size:11pt;margin-left:15px;}
a:link    {color:green;}
a:visited {color:yellow;}
a:hover   {color:black;}
a:active  {color:blue;}
</style>

id 选择器

<style>
#para1
{
    text-align:center;
    color:red;
} 
</style>
</head>

<body>
<p >Hello World!</p>
</body>

分组选择器

为了尽量减少代码，你可以使用分组选择器。

h1
{
    color:green;
}
h2
{
    color:green;
}
p
{
    color:green;
}
----------------> 简写为如下
h1,h2,p
{
    color:green;
}

嵌套选择器

<!DOCTYPE html>
<html>
<head>
　　<meta charset="utf-8"> 
　　<title>菜鸟教程(runoob.com)</title> 

　　<style>
　　p
　　{
　　    color:blue;
　　    text-align:center;
　　}
　　.marked
　　{
　　    background-color:red;
　　}
　　.marked p
　　{
　　    color:white;
　　}
　　p.marked{
　　    text-decoration:underline;
　　}
　　</style>

</head>

<body>
　　<p>这个段落是蓝色文本，居中对齐。</p>
　　<div class="marked">
　　　　<p>这个段落不是蓝色文本。</p>
　　</div>
　　<p>所有 class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。</p>
    
　　<p class="marked">带下划线的 p 段落。</p>
</body>
</html>

p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class="marked" 的元素指定一个样式。
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

设置了三个样式