CSS
CSS简介
- Cascading Style Sheets
- 层叠样式表
- 可以在同一个区域中设置不同的样式效果,可以实现效果的层叠
使用CSS
- CSS不是独立存在的,必须与HTML一起使用
- 行内写法 <p style="background: #00FFFF;height: 20px;"> </p>
- 块写法 <style type="text/css">
- p{
- background: #FF0000;
- color: cadetblue;
- height: 30px;
- width: 50px;
- }</style>
- 使用@import url(CSS资源) -- 暂不支持
-
- 导入CSS文件
<link rel="stylesheet" type="text/css" href="路径"/>
CSS中的选择器
- 选择器是指使用CSS的操作方式
- 标签选择器
- 以次标签命名的样式
- 设置次标签的样式,不管在页面出现多少次标签,都会使用该样式
- 类选择器
- 在HTML标签中有class属性 <p class="我是定义的类名"></p>
- <style type="text/css">
- .class{
- background: aqua;
- ID选择器 在html标签中有id属性使用#
- </style>
- <style type="text/css">
- #myp{
- background: blue;
- }</style>
CSS中的扩展选择器
- 关联选择器
- 选择器之间可以嵌套
- 组合选择器
- 对多个不同选择器进行相同样式的设置,用逗号隔开
- 伪元素(伪类)选择器
- 在HTML中已经预定义了一些样式或选择器,可以直接使用 <style type="text/css">
- a:link{/*原始状态*/ background-color:bisque ; }
- a:hover{/*悬停状态*/ background-color: #FFE4C4; }
- a:active{/*点击状态*/ background-color: #0000FF; }
- a:visited{/*点击后状态*/ background-color: #00FFFF; }
- </style>
CSS的盒子模式
- 在进行布局钱,需要将数据封装到区块中
- 参数信息
- 边框 :border <style type="text/css">
- div{
- border-top: #00FFFF;
- border-bottom: #FFE4C4;
- border-right: #0000FF;
- border-left:#5F9EA0 ;
- border: 2px solid red;/*线宽,线类型,线颜色*/
- } </style>
- 内边距: padding
- 内边距是盒子内,内容和盒子边框的距离
- 设置区块中的标签元素与区块的距离 <style type="text/css"> div{ padding: 20px; } </style>
- 外边距:margin <style type="text/css"> div{ margin: 20px; } </style>
- 浮动
- 将某一区域“上浮” <style type="text/css"> div{ float: left; /*取消浮动*/ clear: both; } </style>
如有问题,请发送邮件至buxiaqingcheng@163.com或者buxiaqingcheng@dingtalk.com