css学习笔记

web学习.第二天

1，div，css初始及特点介绍
div：division区块，分割，在页面中用来划分区块
css：层叠样式表，用来控制网页样式（相当于表格的作用）
加快页面加载速度，便于维护管理
2，css行内样式和嵌入样式

<h1 style="color: gray; font-size:50px ;">学习使我快乐！</h1>
style后color用来改汉字的颜色，font-size用来设置文字的大小
p{我爱学习}*8——table键，快捷方式，会生成八个P标签

<style type="text/css"> 这个style是写在head标签里的
p{
color: green;
font-size: 30px;
}
</style>
3，css引入样式和导入样式
新建一个css文件，直接在css文件里写，主义css文件不需要加style文件
此时css文件和html文件相互独立，在html文件head标签里加上link，使两个文件相连

<link rel="stylesheet" type="text/css" href="demo.css"/>
/* css之间的文件导入 */
再创建一个css文件，使用html文件导入css文件1，css文件1导入css文件2
写在html里的内容
<link rel="stylesheet" type="text/css" href="demo.css"/>
<link rel="stylesheet" type="text/css" href="demo2.css"/>
写在css文件1里的内容
@import url("demo2.css");
4，标签选择器，id选择器，class选择器
选择元素的方法
快捷方式p{谦虚$}*8--table 会有序号出现<p>谦虚1</p> <p>谦虚2</p>
标签选择器，直接在head文件中设置标签属性，选中你想要的标签（p）

选择标签为P的元素
<style type="text/css">
p{
color: blue;
font-size: 13px;
}
</style>
/* id选择器 */
选择id为three的元素
在body里写上id的数，在head里写上#数，id要保证唯一性，一个页面中不能出现两个一样的id
<p id="three">谦虚3</p>
<style type="text/css">
#three{
color: green;
font-size: 30px;
}
</style>
/* class选择器，类选择器*/
选择class值为hd的元素
在body里写上想要修改的标签类，类可以有很多个，在head文件里写.类名（hd)
<p class="hd">谦虚4</p>
<p class="hd">谦虚6</p>
<style type="text/css">
.hd{
color: green;
font-size: 30px;
}
</style>
5，子选择器，交叉选择器，群组选择器，通用选择器
/* 交叉选择器 */
用两个条件来限制选择结果 .代表类
例如：选择名为P，class为hd
<style type="text/css">
p.hd{
color: green;
font-size: 30px;
}
</style>

选择p标签里的span标签进行设置 p span 空格在选择器中表示父子干洗
<p class="hd"><span>你好</span>谦虚4 </p>
<style type="text/css">
p span{
color: green;
font-size: 30px;
}
</style>

把想要选择的元素集合起来
选择标签名span 或者class值是hd或者id值为three的元素，满足一个就会被选出

<style type="text/css">
span,.hd,#three{
color: pink;
font-size: 15px;
}
</style>

选择页面中所有的元素
<style type="text/css">
*{
color: green;
font-size: 30px;
}
</style>

<style type="text/css">
#top .left .title a .link span{
color: blue;
font-size: 10px;
}
</style>
对应的代码文件为
<div id="top">
<div class="left">
<h4 class="title">
<a href=""class="link">
<span>学习</span>
</a>
</h4>
</div>
</div>
6，伪类选择器
选择同一个元素不同的状态
<style type="text/css">
/* 被选中过的a标签的状态 */
a:visited{
color: purple;
}
/* 选中的是鼠标悬停状态下的a标签 */
a:hover{
color: blue;
font-size: 20px;
}
/* 鼠标正在点击状态下的a标签的状态 */
a:active{
color: red;
}
</style>
7，css继承性和叠加性
叠加性：不同选择器给同一个元素叠加的不同样式，会同时生效
<h1 id="titlt">学习使人进步</h1>
h1{
font-size: 20px;
}
#titlt{
color: black;
}

8，选择器的优先级
继承的样式<浏览器给的默认模式<通用选择器<标签选择器<类选择器<id选择器<子代选择器<行内样式
选择的越精准优先级越高
9，行级元素，块级元素，行内块级元素
块级元素：能设置宽高，自己要霸占一行，不和其他元素默认排在一行
常见的块级标签：div p h1-h6 ul ol li dl dt dd
行级元素：不能设置宽高，可以和其他行级元素排列在一行
常见的行级元素：a span strong u em
行内块级元素：能设置宽高，可以待在同一行
常见的行级元素：img 表单
10，文字字体与文字大小设置
文字字体：谷歌浏览器默认微软雅黑
设置字体使用font-family
<style type="text/css">
h1{
/* 回退机制 */
font-family:宋体,幼圆,黑体 ;
}
</style>
字体大小：一般来讲，浏览器默认的文字大小为16px
字体大小设置使用font-size
p{
60px;
border: 3px solid pink;
/* 1em就相当于浏览器默认大小的16像素 */
font-size: 1.5em;
}
11，文字水平位置和文字行高
文字水平位置设置使用text-align
text-align: center;文字居中
文字行高设置使用：line-height
line-height: 35px;
line-height: 2em;/* em是参照于当前文字的实际字体大小 */
用来调整两行之间的行间距
12，首行缩进，文字斜体，文字粗细，文字划线，字符间距
首行缩进：使用text-indent
文字粗细：使用font-weight
font-weight: bold;加粗
font-weight: normal;正常显示
没有单位，取值100~900 正常粗细一般400，加粗一般为700
文字倾斜：使用font-style
font-style:italic;倾斜
font-style:nomal;正常显示
文字划线：使用text-decoration
text-decoration:overline ;上划线
text-decoration: underline;下划线
text-decoration: line-through;删除线
text-decoration: none;去除文本修饰风格
字符间距：letter-spacing
letter-spacing: 5px;常用单位像素px
13，Photoshop测量尺寸的方法
使用矩形选框工具截取一个矩形点击窗口--信息（修改标尺单位为像素）
14，span标签的用法
套用在p标签里使用，调用时格式 p span
15，盒子模型，内边距
盒子模型：css基础之一，把页面中所有的元素都理解为一个四四方方的元素（类比快递盒子）
width属性只是设置内容的宽度，如果有内边距会将盒子撑大
内边距：有上下左右四个方向
padding-top: 20px; 内容顶部矩上边框
padding-left: 20px; 内容左边距左边框
16，padding属性详解
如果padding属性只有一个参数，表示四个方向都是这么大的内边距
当padding有两个参数时，第一个参数表示上下内边距，第二个参数表示左右内边距
当padding有三个参数时，第一个表示上方向，第二个参数表示左右方向，第三个参数表示下方向
当padding有四个参数时，第一个上，第二个右，第三个下，第四个左
17，外边距详解
盒子和盒子之间的距离，也有上下左右四个方向
margin-right: 100px; 右边加上100px的距离
左右外边距会叠加，上下外边距取最大值
margin后跟一，二，三，四个元素和内边距同理
18，全局reset元素宽高特点，块级元素水平居中
全局reset（全局代码重置）
*{内外边距设置为0（0px）
padding: 0;
margin: 0;
}
块级元素默认宽度为100%（和父级元素一样宽）
行级元素的宽度根据内容的宽度需要来决定，内容多宽，行级元素多宽
无论行级元素块级元素，高度根据需要来占用
块级元素居中：margin：0 auto；//让块级元素居中
19，display属性详解
块级元素转成行级元素
display: inline ; 只是转换宽高属性
行级元素转换为块级元素
display: block;
转成行内块级元素
display:inline-block
让元素隐藏
display: none;
20,overflow属性详解
在创建的div区域里加入文字过多时，文字会溢出
overflow: hidden;溢出隐藏
overflow: scroll;滚动条,不管需不需要都会加上
overflow: auto;需要的时候自动加上滚动条
21，boder边框详解
border控制上右下左四个方向
border-color: green;边框颜色样式
border- 5px;边框粗细
border-style: solid;边框样式
也可以单独控制某一个方向的边框
border-top: 3px dashed red;控制顶部边框粗细为3px，虚线，红色
22，float浮动属性
可以让块级元素排列在同一行，且不影响宽高属性
float: left;跑到盒子所在位置的最左边，从上一行的右边出现
float: right;跑到盒子所在位置的最右边，从上一行的左边出现
23，浮动元素和正常元素的排列特点
如果浮动元素的上一行是正常元素，那么浮动元素是跑不上去的
正常元素在排列自己位置的时候，会忽略它前面的浮动元素
24，文字环绕效果
利用浮动来设置图片在文字周围的位置
25，父级元素宽度对浮动元素的影响
如果浮动元素的父级元素宽度不足以放下这几个浮动元素，那么会从最后一个元素依次被挤到下一行
沿着前面一个元素的下边缘
如果父级元素的子元素都是浮动元素，那么这些子元素是撑不开父级元素的高度的
解决方法：给父级元素加一个overflow:hidden;属性
26，相对定位和绝对定位
主要实现块里面细节性的操作，脱离文档流，自由定义位置
相对定位： position: relative;
完全脱离文档流，在文档流中的位置还会被保留，相对于原来的位置进行位置变化，右下为正方向，左上为负方向
绝对定位： position:absolute;
完全脱离文档流，元素在文档流中的位置不再被保留，元素参照与离他最近的有定位属性的父级元素进行定位
27，z-index层级
只有有定位属性的元素才有层级；如果不给元素加层级，默认层级值为0；如果层级值一样，后来者居上。
层级值越高，就在上面。使用z-index调整层级的大小。
只有亲兄弟才能比层级（找兄弟元素，而不是直接找正在设置的元素）
28，背景设置
背景颜色：background-color: 直接写颜色单词，使用十六进制表示颜色，三基色RGB（red green blue）
background-color:red; background-color:rgb(225,244,244);
背景图片：使用background-image: url();
background-image: url(prince.jpg);
设置背景图平铺
background-repeat:repeat-x; 横向重复平铺
background-repeat: repeat-y; 纵向重复平铺
设置背景图位置：background-position:
background-position: 100 px 50px;
综合写法：
参数顺序，背景颜色背景图平铺方式水平方向位置垂直方向位置
如果不需要设置哪个参数，直接不写
29，背景精灵
在一个有限大小的元素内，只显示一张大背景图的一部分内容
别名:css雪碧、css sprite
30，background-attachment背景图固定
一般用于整个body，在单个的div中无效
body{
background-attachment: fixed;
}
31，visibility cursor 透明度 css命名规范
透明度 0完全透明 1 完全不透明 0.6 百分之60的不透明
opacity：0.6
解决IE浏览器的不支持问题：filter：alpha(opacity=60);
visibility 元素隐藏
visibility :hidden;只让内容隐藏，元素的位置还在
display: none;元素位置也被改变
list-style:none ; 取消li标签默认小圆点,写在li 里
鼠标样式：
cursor:hand 手型
poniter也是手型，不过可以在多种浏览器下使用
crosshair 十字型
text 移动到文本上的那种效果
wait 等待的那种效果
default 默认效果
help 问号
css命名规范：
唯一性，结构性的使用id选择器
其他的使用class选择器
使用小写字母，名字要有意义，有父子包含关系时，应通过命名出现
可以存在下划线，要有合理的注释