本文介绍了CSS的基础知识，包括CSS的作用、选择器类型、样式的继承与优先级、display和position属性的用法，以及浮动和链接的伪样式。通过示例展示了如何使用这些概念来控制网页元素的布局和表现。
-
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</p>
<div class="s1">hello java</div>
<div class="s1">hello c</div>
<p class="s1">hello vb</p> <span>hello zs</span> <span>hello lg</span>
<a href="">点我</a>
<a href="">点你</a> <br/>
<div id="d1" class="s1">哈哈</div>
<h1>test1</h1>
<h2>test2</h2>
<h3>test3</h3>
<div id="d2">
<p>hehe</p>
</div>
</body>
</html>
demo01 演示效果
- ##样式的继承
子标记会继承父标记的样式，如图所示段落标记<p>为<body>的子标记
-
样式的优先级
默认样式： 浏览器默认的样式
外部样式： 样式写在一个.css 文件里
内部样式： 样式写在html文件里
内联样式： 样式写在标记里
注意：从上到下，优先级越来越高 -
两个关键属性
- display 显示方式
display 的4个值
√ none : 不显示该标记
√ block : 按块标记的方式显示<div>
√ inline : 按行内标记的方式来显示<span>
√ inline-block : 按行内块标记的方式来显示 - position 位置
position 的4个值
√ static(缺省值)： 浏览器在默认情况下，会按从左到右，从上到下来依次摆放各个标记
√ absolute（绝对定位）： 相对父标记偏移
√ relative（相对定位）： 先按照默认的方式摆放，然后再偏移
√ fixed： 自适应定位
案例：display属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#d1 {
width: 100px;
height: 100px;
background-color: red;
display: inline;
}
#d2 {
width: 100px;
height: 100px;
background-color: yellow;
display: inline;
}
</style>
</head>
<body>
<div id="d1">hello</div>
<div id="d2">hello2</div>
</body>
</html>
案例效果展示
案例：position属性
<html>
<!--position属性-->
<head>
<style>
#d1 {
width: 200px;
height: 200px;
background-color: red;
}
#d1_1 {
left: 30px;
top: 50px;
width: 80px;
height: 80px;
background-color: yellow;
position: absolute;
}
#d2 {
left: 30px;
top: 50px;
width: 100px;
height: 100px;
background-color: blue;
position: relative;
}
</style>
</head>
<body>
<div id="d1">
<div id="d1_1"></div>
</div>
<div id="d2"> </div>
</body>
</html>
效果展示
- 块标记（另起一行）
常见的都块标记：
- div
- p
- form
- table
- h1…h6
- ul
- li
- 行内标记（不用另起一行）
font-size:30px; // 字体大小
font-family:"宋体" // 字体
font-style:italic/normal // 风格
font-weight:100; // 粗细 100~900
text-align:center; // 对齐方式：left，right，center
text-decoration:underline; // 加下划线
cursor:pointer; // 光标的形状 wait
background-color:red; // 背景颜色
background-image:url(images/a.jpg); // 背景图片
background-repeat:no-repeat; // 平铺方式 repeat-x repeat-y
background-position:20px 10px; // 位置
background-attachment:fixed; // 依附方式 scroll(缺省)
也可以简化为:
background: 背景颜色 背景图片 平铺方式 依附方式 水平位置 垂直位置
border:1px solid red; // 宽度 风格 颜色
border-left:
border-right:
border-bottom:
border-top:
width:100px;
height:200px;
margin: // 外边框
margin-left:20px;
margin-top:30px;
margin-right:40px;
margin-bottom:50px;
也可以简化为：
margin:30px 40px 50px 20px; // 顶 右 底 左
还有一些这样的形式：
margin:0px;
margin:20px auto; // 上下各20px，左右平均分配。一般用于居中
“混杂模式”：
在一个html文档中，如果没有添加文档类型声明，ie浏览器魔人会打开"混杂模式"，即将浏览器的级别降低，以兼容老的网页。如果添加了文档类型声明，则ie会打开"标准模式"。
padding: // 内边框
padding-left:20px;
padding-top:30px;
padding-right:40px;
padding-bottom:50px;
可以简化为：
padding:30px;40px;50px;20px; // 顶 右 底 左
还可以：
padding:0px;
注意:子标记会将父标记撑开
- 案例
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title></title>
<style>
#d1{
width :100px;
height :50px;
border :1px solid red;
}
#d2 {
width: 150px;
height: 125px;
border: 1px solid blue;
margin-top: 15px;
}
#d3 {
width: 200px;
height: 125px;
border: 1px solid black;
margin: 15px auto;
}
#d4 {
width: 150px;
height: 150px;
border: 1px solid black;
padding-left: 80px;
padding-top: 15px;
}
#d5 {
width: 50px;
height: 50px;
background-color: blue;
}
</style>
</head>
<body>
<div id="d1"> </div>
<div id="d2"> </div>
<div id="d3"> </div>
<div id="d4">content</div>
<div id="d5"> </div>
</body>
</html>
效果展示
list-style-type:none; //取消列表的选项的符号
浮动，即取消标记的独占一行的特性，浮动之后，其位置可以被其他标记使用
float:left; // 浮动 right
clear:both; // 取消浮动的影响，指的是告诉浏览器
// 虽然浮动的标记让出了位置，但不能够使用
- 案例
<!DOCTYPE html>
<html>
<head>
<meta charset="gbk">
<title></title>
<style>
#d1 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
#d2 {
width: 100px;
height: 100px;
background-color: green;
float: left;
}
#d3 {
width: 100px;
height: 200px;
background-color: yellow;
clear: both;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
</html>
效果展示
a :link{color :red} // 没有访问时
a :visited{color :blue} // 访问后
a :active{color :yellow} // 鼠标点击但还没有放开时
a :hover{color :aqua} // 鼠标指向时
扫一扫
2036
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
