【Learn】CSS定义

CSS基础语法

本文用于介绍CSS相关的知识，用于记录自己的学习笔记。由于我已经熟悉了部分的HTML，所以相关的概念也不在这里进行描述了，直接写自己的一些心得感悟。

1.CSS规则

CSS是由两个主要的部分组成

• 选择器
• 一条或者多条的声明
  • 声明由属性和值组成

h1 {color:red; font-size:14px;}

1.1 值的不同写法

p {color: #ff0000;}
p {color:#f00}
p {color: rgb(255,0,0)}
p {color: rgb(100%,0%,0%)}

1.2 选择器的分组

选择器分组，可以让被分组的选择器有相同的声明。

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

1.3 继承及其问题

2. 选择器

2.1 派生选择器

可以对某一个标记内的另外一个标记进行特殊格式设定

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

2.2 id选择器

id选择器以#来定义，可以用来定义id等于特定值时显示不同的状态

#red {color:red;}
#green {color:green;}

id选择器作用效果为：

<p id="red">这个段落是红色</p>
<p id="green">这个段落是绿色</p>

id选择器可以和派生选择器结合，生成特定id下的特殊样式

#sidebar p{
    font-style:italic;
    text-align:right;
    margin-top:0.5em;
}

2.3 CSS类选择器

类选择器同id选择器类似，可以针对特定的样式类来进行渲染

.center {text-align:center}

实际应用场景为

<h1 class="center">This heading will be center-aligned</h1>

2.4 属性选择器

2.4.1 单个的属性选择器

CSS定义

[title]
{ color:red }

HTML映射

<h2 title="Hello">Hello,World!</h2>

2.4.2 属性和值选择器

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

2.4.3 属性和值选择器-多个值

[title~=hello]{color:red;}

实际应用中，只要title带有hello字眼都可以实施渲染

<h2 title="world hello">Hello1 world</h2>

CSS常用标记

背景

p {background-color:gray;}
p {background-color:gray;padding:20px;}

背景图片

body {background-image:url(/i/eg_bg.gif);}

来自为知笔记(Wiz)