CSS的简单入门
-
CSS基础
什么是 css
css 即cascading style sheet（级联（层叠）样式表）
css 为网页提供表现的形式，即按照w3c的建议，实现一个比较好的网页设计，应该按照如下的规则：
√ 网页的结构与数据，应该写在.html文件里
√ 网页的表现形式，应该写在.css 文件里
√ 网页的行为，应该写在.js 文件里
√ 这样做的原因是，将网页的数据、表现、行为分离，方便代码的维护css 选择器
- 标记（签）选择器(简单选择器、元素选择器)
标记的名称{
属性名：属性值 ;
... ;
}
- class类选择器
第一种形式 匿名的class 选择器 （.）
.选择器的名称{
属性名：属性值 ;
... ;
}
注：标记的class 属性值要与选择器的名称相等
第二种形式 有名的class 选择器
标记的名称.选择器的名称{
属性名：属性值 ;
... ;
}
注：除了标记的class属性值不选择器的名称相等以外，还要求标记名称匹配
- id选择器
标记的名称.选择器的名称{
属性名：属性值 ;
... ;
}
注：除了标记的class属性值不选择器的名称相等以外，还要求标记的名称匹配
- 选择器的分组 （分组选择器）
使用逗号","隔开，表示所有的元素的按照该样式显示
h1,h2,h3{
color:green;
}
对以","隔开的选择器施加相同的样式
- 选择器的派生 （包含选择器，子类选择器）
使用 “ ”(空格)分隔
#d2 p{
font-size :120px;
}
表示id为d2的标记内部的所有p标记的字体为120px
- 案例：五种选择器
style.css
body {
color: red;
font-size: 30px;
}
p {
color: blue;
}
div.s1 {
font-style: italic;
font-size: 60px;
}
#d1 {
width: 200px;
height: 100px;
background-color: #ff88ee;
}
h1,
h2,
h3 {
color: green;
}
#d2 p {
font-size: 120px;
}
demo01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title>测试五种选择器</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
hello world<br/>
<p>hello kitty</p>
<p>hello jerry
最低0.47元/天 解锁文章
4325
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
