不经一番寒彻骨,怎得梅花扑鼻香。
css的作用
层叠(级联)式样式表
cascade style sheet
美化html 网页的
颜色相关的样式
前景色
color: 单词
rgb(红色, 绿色, 蓝色) 范围从 0~255
16进制值 格式 `#红绿蓝` 范围从 0~FF
rgba(红色, 绿色, 蓝色, 0.0~1.0)
特殊取值
白色 rgb(255,255,255)
黑色 rgb(0,0,0)
背景色
background-color:颜色
背景图
background-image:url(图片地址)
background-repeat: no-repeat(不重复) repeat-x repeat-y 在哪个轴上重复
盒子模型
margin 外间距
margin-left
…
border 边框
border-left 边框宽度 边框线类型 边框颜色
…
padding 内间距
padding-left 左
padding-right 右
padding-top 上
padding-bottom 下
定位方式
div
position: absolute; /绝对定位/
坐标的原点在左上角
left: x 轴的坐标
top: y 轴的坐标
z-index z 轴坐标 取值越大,越靠上
width: 宽度
height: 高度
字体相关
font-size : 字体大小
font-family: 字体种类 (电脑上事先需要有这个字体)
font-style:italic; 倾斜
font-weight: bold; 加粗
text-decoration: line-through 贯穿线
text-decoration: underline 下划线
显示隐藏
display: none; 隐藏
display: block; 显示
样式表
1. 类选择器
.名字
之后使用标签的 class=“名字引用”
2. ID选择器
根据标签的id属性来进行匹配
#id值
之后使用标签的 id=“id值”
3. 元素选择器
根据标签的名字进行匹配
优先级: 如果不同的选择器匹配到了同一个元素,
- style属性定义的样式最高,id选择器优先级次之,类选择器次之,元素选择器最低,
- 同级选择器,后定义的优先
- 可以用 !important 改变优先级,可以把优先级提升到最高
4. 父子选择器
/* 找到一个p标签,并且它的父标签必须是div */
div>p {color:red;}
格式
父标签>子标签
5. 祖先后代选择器
格式
祖先标签 后代标签
6. 伪类选择器
按钮 鼠标移入改变样式,鼠标移除还原
:hover 移入
:first 匹配选中的第一个
:last 匹配选中的最后一个
:focus 获取焦点时