CSS基本样式
一 回顾作业：
tee台在线
二 div css
2007年以前 作业面 table
2008年以后 web2.0思想 ---》 div css去搭建页面
div 本身 html中的一个标签
2012 智能手机 移动端设备
web 3.0 html5 + css3 移动端排版
1 div css 相关的标签：
行内元素：可以同行排列
a img span
块元素：独占一行
table form div ul li ol dl dt dd hn br p
<div></div>
列表元素：
无序列表
<ul type="disc实心圈 circle圆圈 square 方块">
<li>1</li>
<li>1</li>
<li>1</li>
.....
</ul>
有序列表
<ol type="1 数字 a 小写字母 A i 希腊数字 I希腊数字">
<li>1</li>
<li>1</li>
<li>1</li>
</ol>
自定义列表：
span
<hn> 标题标记 n 1，2，3，4，5，6 从大到小
<h1>标题</h1>
css 层叠样式表：修饰html div 标签的
web2.0思想下 6中常见选择器（选择符）
1. 标记中嵌入式
<标记名称 style="样式名称:样式值;样式名称:样式值;.....">
2.页面嵌入style
</head>
<style type="text/css">
选择器{
样式
}
</style>
<body>
3. 外部调用：引入样式文件 *****
<link type="text/css" rel="stylesheet" href="样式文件文件名称">
注意：起到了 结构(div p table from标记类)和
表现分离(宽 高 边框 颜色...样式) 便于代码的维护
选择器作用：定位页面元素的（查找页面元素的）
常见的选择器有那些：
选择器｛
样式
｝
* 通配符 选择页面的所有元素
*{
}
注意：使用* html body 这两个元素的边框也会存在****
安装 google（chrome）浏览器
#id{ 利用元素的id=“value”添加样式的 选择的是单个元素
}
.className{ 样式相同的元素（元素可以不相同） 选择多个元素
}
标记选择器{ 为相同元素 指定样式 选择多个元素
}
派生选择器： 嵌套关系的元素
外层元素 内层元素
注意：内外元素可以是 #id .class 标记
群组选择器： 利用以上所有的选择器来选中元素
#id,.class，标记名称 ,派生
选择器优先级：面试题
#id > class
行内样式 style >ID选择器 > 类选择器 > 标签 > 通配符 > 继承(派生)
优先级的权值：
内联样式表的权值为 1000 style=“样式”
ID 选择器的权值为 100
Class 类选择器的权值为 10
HTML 标签选择器的权值为 1
样式列表中： 绿色样式 浏览器都支持
蓝色红色的 以后浏览器会支持
注意：样式和 html div标记无关 ，样式可以修饰所有的标记
字体 Font
color: 颜色
font : font-style || font-variant || font-weight || font-size || line-height || font-family
组合样式，可以指定 后边的所有样式
font样式经测试，已经不管用了
font-size: 文字的大小
font-size: 12px;
em rem px
1em=16px 2em 32px
rem html默认字体大小
pt
1px＝0.75pt
https://www.cnblogs.com/leejersey/p/3662612.html
em rem px 区别：？？？？
文本样式：
text-align left center right
边框：
border: 粗细 线条样式 颜色 //四边的样式
上下左右四个边框可以单独制定：
border-top 上 粗细 线条样式 颜色
border-right 右 粗细 线条样式 颜色
border-bottom 下 粗细 线条样式 颜色
border-left 左 粗细 线条样式 颜色
border-color 颜色 border-style 线条样式 border-width 粗细
元素的宽高
width:
height:
背景： 分清楚网页上 app上 那些是图片 那些不是图片
网页或app上的文字： 可以选中的 蓝色
写在图片上的文字，文字是不能单独选中的，文字属于图片的一部分
background-color 背景色： *****
background-image 背景图： 路径：
当图片的宽 高 < 元素的 宽 高，图片将平铺
当图片的宽 高 >元素的宽 高，左上角开始 切与元素相等的图作为背景图
注意：
背景色 执行的时候最快 单一的颜色 就搞成背景色
背景图：当导航是渐变色（左右 上下） 必须是背景图
边框默认情况下 会根据屏幕的大小 调整宽****
为边框添加固定的宽高 解决
左右渐变的背景，只能ui提供一张 1190的图片 5.16k
上下渐变： 608字节 截取下图 平铺 *****
background-position ：左右 上下 调整图片位置的
图片移动：负左 正右 负上 正下
图片1次行加载，后边重复使用 ***
background-repeat:控制图片重复 repeat-x repeat-y no-repeat
background-attachment : scroll（跟随） | fixed（固定） 背景图是否固定
background : background-color || background-image || background-repeat || background-attachment || background-position
定位 ：？？？？？？？？？
布局： ？？？？？？？
内补丁（内边距） 父子元素 之间的距离
padding:上 右 下 左 内边距会改变父元素的宽高****
1 上 左边的优先级 > 右边 和 下边
padding-top: 单独指定上
padding-right：右边
padding-bottom:下
padding-left 左边
padding: 10px; 上 右 下 左 都是10
padding：上下 左右;
margin: 上 右 下 左 ****
margin-top: 单独指定上
margin-right：右边
margin-bottom:下
margin-left 左边
margin: 10px; 上 右 下 左 都是10
margin：上下 左右;
margin:auto 自动调整 居中 margin:auto 10px margin:10px auto
布局 Layout
float 浮动 left左浮动 right右浮动
clear 清除浮动 left |right | both 清除两边浮动的影响
以下元素 都有默认的外边距：
body form table ul li 块元素
内边距：
京东的导航：
列表项目 ul ol dl 列表
list-style:none; 取消项目符 ****
list-style-image:url(demo/imgs/2.jpg); *****项目符号可以用图片
list-style-position : outside外 | inside **** 内 项目符号的位置
list-style-type ： disc | circle | square 指定项目符号默认形态的
list-style : list-style-image || list-style-position || list-style-type
<a id="a1" class="a1">
#a1{}
.a1{}
超链接4中状态：
刷新页面（默认） #a1:link{样式} -link在有些浏览器下没用-> #a1{}
鼠标移动上去 : hover { 样式 }
点击 :active { 样式 }
点击后 :visited { 样式 }
伪类：修饰有变化状态的元素
display: 隐藏
display:none; 在页面上不可见 位置也没有了 主要是和js配合做效果
display : block | inline
面试： block inline inline-block区别：
block : 行内元素转化成块元素 span-->div
inline： 块元素转换成行内元素 div-->span
inline-block对一个对象指定inline-block属性，
可以将对象呈递为内联对象，但是对象的内容作为块对象呈递。
行内块元素：内联元素默认 宽高无效，变成行内块元素，宽高有效
一 样式：
我对postion的理解是这样的
position：定位元素：元素在页面上的位置
static | absolute | fixed | relative
position:static;元素在页面上的默认位置（css默认）
position:absolute: 绝对定位，相对于具有relative属性的父级元素的定位
position:relative ;相对定位，相对于该元素的默认位置的偏移
position:fixed; 固定定位 了解 相对于窗口圆点进行的偏移
注意：position 和 left 距离左边的距离 top 距离顶部的距离
属性联合使用的
position:relative; left 和 tao 有效 ，对于后边的元素没有影响
position:absolute;
1>如果父元素 没有position:relative属性，该元素相对于body定位
对于后边的元素有影响
2>如果父元素有position:relative属性,该元素相对于服元素左上角定位
对于后边的元素有影响
position:fixed;
常用在：跨界的元素：
这就是我对postion的理解
面试题： 谈谈对position的理解
cursor: 鼠标状态：pointer 手形
opacity: 控制元素的透明度的
ie filter:alpha(opacity=value) value 0---100 10 50
其他：opacity:value value 0--1 0.1 0.5
overflow :溢出管理：
hidden;溢出的部分删掉
scroll：元素区域内添加滚动条
z-index: 垂直分布屏幕的元素的高度
0--1000 超过1000 都是1000
浙公网安备 33010602011771号