技术分析
HTML的块标签:
div标签: 默认占一行,自动换行
span标签: 内容显示在同一行
CSS概述:
Cascading Style Sheets : 层叠样式表
主要用作用:
用来美化我们的HTML页面的
HTML 决定网页的骨架 ,CSS 化妆
将页面的HTML和美化进行分离
CSS的简单语法:
在一个style标签中,去编写CSS内容,最好将style标签写在这个head标签中
<style>
选择器{
属性名称:属性的值;
属性名称2: 属性的值2;
}
</style>
CSS选择器
帮助我们找到我们要修饰的标签或者元素
元素选择
元素的名称{
属性名称:属性的值;
属性名称:属性的值;
}
ID选择器
以#号开头 ID在整个页面中必须是唯一的s
#ID的名称{
属性名称:属性的值;
属性名称:属性的值;
}
类选择器
以 . 开头
.类的名称{
属性名称:属性的值;
属性名称:属性的值;
}
CSS中的其它选择器
-
选择器分组: 选择器1,选择器2{ 属性的名称:属性的值}
-
属性选择器:
a[title] a[titile='aaa'] a[href][title] a[href][title='aaa']
-
后代选择器: 爷爷选择器 孙子选择器 找出所有的后代
-
子元素选择器: 父选择器 > 儿子选择器
-
伪类选择器: 通常都是用在A标签上
CSS的引入方式
- 外部样式: 通过link标签引入一个外部的css文件
- 内部样式: 直接在style标签内编写CSS代码
- 行内样式: 直接在标签中添加一个style属性, 编写CSS样式
扩展
- CSS的优先级 按照选择器搜索精确度来编写: 行内样式 > ID选择器 > 类选择器 > 元素选择器 就近原则: 哪个离得近,就选用哪个的样式 CSS: 层叠样式表 主要作用:
- 美化页面
- 将页面美化和HTML代码进行分离,提高代码的服用型
-
选择器:
- 元素选择器: 标签的名称{}
- 类选择器: 以. 开头 .类的名称
- ID选择器: 以#开头 , #ID的名称 (ID必须是页面上面唯一)
-
CSS浮动:
-
float : left, right 不再占有正常文档流中的空间 , 流式布局
-
clear : both left right
-
CSS的盒子模型
- 万物皆盒子
内边距
padding-top: padding-right: padding-bottom: padding-left:
padding:10px; 上下左右都是10px
padding:10px 20px; 上下是10px 左右是20px
padding: 10px 20px 30px; 上 10px 右20px 下30px 左20px
padding: 10px 20px 30px 40px; 上右下左, 顺时针的方向
外边距
margin-top: margin-right: margin-bottom: margin-left:
CSS绝对定位
position: absolute top: 控制距离顶部的位置 left: 控制距离左边的位置
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!终于完工,回去睡觉