CSS
- 定义:层叠(级联)式样式表
- 功能:美化网页
样式:
style
颜色相关样式
-
前景色
color:单词
|RGB(红色,绿色,蓝色 0~255)
|16进制值(#00FF00(十六进制红绿蓝百分比))
|RGBA(红,绿,蓝,0~1(透明度));白色 RGB(255,255,255)
黑色 RGB(0,0,0)
-
背景色
backgroud-color(写法类似于color)
- 背景图片
backgroud-repeat图片是否重复
backgroud-image:url(图片地址);
backgroud-repeat:repeat|no-repeat|repeat-x|repeat-y
盒子模型
margin 外间距
border 边框
- border-left 边框宽度 边框线类型 边框颜色
padding 内间距
- padding-left 左边框
- padding-right 右边框
- padding-top 上
- padding-bottom 下
<div style="background: #9cdcfe;height: 60px;padding-left: 60px;
border: black 2px solid;margin-bottom: 10px">
内容1
</div>
<div style="background: #9cdcfe;height: 60px;padding-left: 60px;
border: black 2px solid">
内容2
</div>
定位方式
div
position:absolute; 绝对定位
左边原点在左上角
left: x坐标
top:y左边
z-index:z坐标 取值越大,越靠近上层
<div style="background-color: rgba(0,255,0,0.5);width: 100px;height: 100px;
position: absolute;left: 0;top: 0;z-index: 30"></div>
<div style="background-color: rgba(255,0,0,1);width: 100px;height: 100px;
position: absolute;left: 10px;top: 0;z-index:20"></div>
字体相关
字体大小:font-size
选择字体:font-family(电脑上必须事先有这个字体)
倾斜:font-style: italic;
加粗:font-weight: bold;
贯穿线:text-decoration: line-through
下划线:text-decoration: underline
<p style="font-style: italic;font-weight: bold">内容</p>
<p style="text-decoration: underline">原价 998</p>
##显示隐藏
display:none 隐藏
block 显示
<p style="display: none">显示信息</p>
样式表
在<head></head>里定义一个有名称的样式表,以后需要用样式的时候使用class=“样式名”
<!--样式表-->
<style>
.c1{color: darkcyan;background-color: #9cdcfe;}
</style>
<p class="c1">段落1</p>
名字的更专业名称叫:选择器(selector)
类选择器
上面的例子使用的就是类选择器
ID选择器
id的取值不能重复,id不能以数字开头
<style>
.c1{color: darkcyan;background-color: #9cdcfe;}
#p1{font-size: larger}
</style>
<p id="p1">段落2</p>
元素选择器
span{background-color: #569cd6}
<span>aaa</span>
<span>bbb</span>
<span>ccc</span>
选择器的优先级
id选择器>class选择器>元素选择器
同级选择器后定义的优先级高;
若样式内部添加了!important,则样式的优先级最高
父子选择器
/*找到一个p标签并且它的父亲是div*/
div>p{background-color: darksalmon}
祖先后代选择器
祖先标签 后代标签
div p {background-color: red}
<div>
<div>
<p>段落1</p>
<p>段落2</p>
</div>
<p>段落3</p>
</div>
<p>段落4</p>
伪类选择器
按钮 鼠标移入改变样式,鼠标移出还原样式
:hover
#btn1:hover{background-color: #9cdcfe}
<input id="btn1" type="button\" value="按钮">
tr:hover{background-color: darkgrey}
<table border="1" width="100%">
<tr>
<td>a</td>
</tr>
<tr>
<td>b</td>
</tr>
<tr>
<td>c</td>
</tr>
</table>
:frist 匹配选中的第一个
:last 匹配选中的最后一个
:focus 聚焦