CSS样式：
简介
HTML
如何展现数据
CSS
进行美化
JS
实现数据动态化
动态站的实现
概要
Cascading Style Sheets(层叠样式表)
作用
实现内容显示跟样式分离
方便项目维护
实现重用
是个元素用到同一个样式
heigtht =120 width=100
如何使用
三种方式
在元素中使用style属性
不推荐使用
<p style="height: 100px">11111</p>
在head标签中使用style标签
<head>
<style type="text/css">
</style></head>
通过外部文件引入
第一步在工程根目录下新建css文件夹
第二歩在css文件中创建.css文件
右键--->new---> StyleSheet
第三步在需要的html文件中的head标签中使用link标签引入.css文件
<link rel="stylesheet" href="css/index.css">
分类
内联样式
第一种
内部样式
第二种
外部样式
第三种
语法格式
选择器 {属性:值; 属性:值;....}
说明
css样式由 选择器和声明组成
声明使用大括号{}
在大括号中使用 属性:值的方式
多个属性:值用分号隔开
最后一个属性可以省略分号
示例代码
p { height: "100px"}
选择器
作用
当我们要设置元素样式的时候,通常要先找到要设置样式的元素
基本选择器
ID选择器
在html的元素中设置id属性
在css代码中使用#id的方式去选择
class选择器
html的元素中使用class属性
css代码中使用 . 类名
元素选择器(标签选择器)
对html指定标签起作用
html
css
p{}
*
匹配所有元素
子类选择器
选择器标签的子类元素
语法格式
选择器 > 选择器 > ..
后代选择器
语法格式
匹配子类还有孙子类,依次类推
伪类
选择器:hover
盒子模型
前期准备知识
块级元素
特点
独占一行
div p h ul ol dl li table tr form
可以设置宽高
内联元素
特点
不独占一行
不能设置宽高
元素
a span lable
内联块
特点
不独占一行
可以设置宽高
元素
img input
四个属性
内容
width
取值
数字+单位
100px
百分比
参照父类容器的宽度
50%
heigth
取值
数字+单位
100px
百分比
参照父类容器的高度
50%
边框
border
语法格式
border:边框的大小,样式,颜色
取值
边框大小
1px
百分比
样式
solid
颜色
字母
red
white
16进制
#FFFFFF
常用
border
四个方向设置相同
border-left: 1px solid blue;
border-right: ;
border-bottom: ;
border-top: ;
内边距
padding
语法格式
padding:10px;
四个方向设置一样
两个值
三个值
四个值
注意
pading设置多个值,方向顺时针,从上->右-->下-->左
外边距
margin
注意事项
块级元素上下的边距取大值而不是相加,内联元素或者内联块 左右的外边距相加
内联元素无法设置margin-top margin-bottom 但是设置left和right
margin可以设置负值,如果设置成负值朝相反的方向移动
浮动
文档流
浏览器对元素的排版,从左右至右,从上至下的摆放元素
作用
打破正常的文档(脱离文档流)
概念
浮动就是元素可以向右向左移动,直到浮动的元素外边缘碰到包含框或者另外一个浮动元素就会停止
语法格式
float
子主题 1
可选值
left
right
注意事项
当我们使用了浮动,内联元素就会变成块级元素
不足
会造成父类容器高度塌陷
解决方案
清除浮动
固定套路
.clear {zoom: 1;}
.clear:after { content: ""; display: block; width: 0; height: 0; visibility: hidden; clear: both;}
使用原则
在子元素上使用浮动,.在父类容器中清除
元素类型转化
display
子主题 1
可选值
block
将其他元素转化成块级元素
inline
将其他类型的元素转化成内联元素
inline-block
将其他类型的元素转化内联块元素
XMind: ZEN - Trial Version
