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);}