一、CSS 介绍什么是CSS
CSS 指的是层叠样式表(Cascading StyleSheet)。在网页制作时采用层叠样式表技术,
可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
CSS 的基础语法
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
h1{
color:red;
font-size:14px;
}
属性大于 1 个之后,属性之间用分号隔开。这行代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素。
css 高级语法
1.选择器的分组
h1,h2,h3,h4,h5,h6{
color:red;
}
2.继承
根据 CSS,子元素从父元素继承属性
body{
color:green;
}
通过 CSS 继承,子元素将继承最高级元素(在本例中是 body)所拥有的属性(这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd)。
派生选择器
派生选择器 通过依据元素在其位置的上下文关系来定义样式,可以使标记更加简洁。
比方说,你希望列表中的 strong 元素变为红色,而不是通常的黑色,可以这样定义一个派生选择器:
li strong{
color: red;
}
<p><strong>我是黑色,因为我不在列表当中,所以这个规则对我不起作用</strong></p> <u1> <li><strong>我是红色。这是因为 strong 元素位于 li 元素内。</li> </u1>
id 选择器
1.id 选择器: id 选择器可以为标有 id 的 HTML 元素指定特定的样式 id 选择器以“#”来定义
2.id 选择器和派生选择器: 目前比较常用的方式是 id 选择器常常用于建立派生选择器
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="MyCss.css" type="text/css" rel="stylesheet"> </head> <body> <p id="pid">hello css<a href="www.shiyanlou.com">shiyanlou</a></p> <div id="divid">this is a div</div> </body> </html>
#pid a{
color:#00755f;
}
#divid {
color: red;
MyCss.cs文件
类选择器
(1)在 CSS 中,类选择器以一个点号显示
.divclass {
color: red;
}
下面的 html 代码中,div 元素含有 divclass 类,意味着它要遵守.divclass
的规则。
<div class="divclass"> hello div </div>
(2)和 id 一样,class 也可被用作派生选择器:
.pclass a{
color: green;
属性选择器
对带有指定属性的 HTML 元素设置样式。
(1)下面的例子为带有 title 属性的所有元素设置样式:
<style> [title] {color:red;} </style>
属性和值选择器
<style> [title=te]{ color: red; } </style>