二、CSS
2018-08-27 本文已影响15人
圣贤与无赖
一、CSS概述
什么是CSS：
Cascading Style Sheets 层叠样式表.
CSS的作用：
CSS主要用来修饰HTML的显示.代码复用.将页面元素与样式进行分离.
CSS的使用：
语法：
选择器{属性1:属性值;属性2:属性值;..}
<style>
h2{
color:red;
font-size:100px;
}
</style>
【CSS的引入方式】
- 行内样式：
直接在html的元素上使用style的属性编写CSS：
<span style="color:#00FF00 ;font-size: 100px;">你好</span> - 内部样式：
在html的<head>标签中使用<style>标签来定义CSS
<style>
span{
color:blue;
font-size: 200px;
}
</style>
- 外部样式：
将CSS定义成一个.css的文件，在html中将该文件引入到html中
<link href="style.css" rel="stylesheet" type="text/css"/>
二、CSS的选择器
CSS的选择器为了更能精确的找个某个元素来设计的
- 元素选择器：
div{
color: red;
}
- id选择器：
id通常都是唯一的.
<style>
#d1{
color: red;
}
</style>
<div id="d1">王凤</div>
- 类选择器：
HTML:
<div class="d1">王守义</div>
<div>王凤</div>
<div class="d1">王如花</div>
CSS:
<style>
.d1{
color: green;
}
</style>
- 属性选择器
选中带有某个属性的元素：
<style>
input[type="text"]{
background-color: yellow;
}
input[type="password"]{
background-color: green;
}
</style>
- 层次选择器：
父选择器 子孙选择器 { }
<style>
#d1 div{
color: red;
}
</style>
- 伪类选择器：
主要用来描述超链接
<style>
a:link{
color:blue;
font-size: 40px;
}
a:visited{
color: red;
font-size: 40px;
}
a:hover{
color: green;
font-size: 100px;
}
a:active{
color: brown;
font-size: 200px;
}
</style>
三、CSS的盒子模型
CSS的盒子模型.png
设置盒子的外边距：margin
- Margin-top
- Margin-right
- Margin-bottom
- Margin-left
设置盒子的内边距：padding
- Padding-top
- Padding-right
- Padding-bottom
- Padding-left
四、CSS的属性
【悬浮属性】
CSS的float属性：
-
float属性中常用取值:
Left :悬浮到左边
Right :悬浮到右边 -
使用clear属性清除浮动：
Left ：清除左侧浮动
Right ：清除右侧浮动
Both ：清除两侧的浮动
【列表属性】
ul li{
list-style-image: url(../img/reg4.gif);
}
【颜色取值】
英文取值：
color：red
十六进制数：
color：#ff0000
Rgb方式：
color：rgb(255,0,0)
