1.Css 层叠样式表

　　Html：网页骨架

　　css ：用来修饰美化页面

2.怎么添加样式？（三种添加样式的方式）

l行内样式：
　　把样式写在标签里，格式：
<h1 style="color: red; font-size:46px; ">我的标题</h1>
　　style=“属性名称：属性值；属性名称2：属性值;…”
　　注意：最后一个;可以省略，建议不要省略
内部样式：
　　在head标签里添加style标签
　　<head>
     <style type="text/css">
　　　　h2{
　　　　　　color: red;
　　　　　　}
     </style>
   </head>
外部样式：
　　新建一个后缀名为css的文件
　　在css文件编写样式
　　在html文件通过link引入css文件
<link rel="stylesheet" type="text/css" href="demo3.css">

3.三种样式的优先级？

　　!important>行内>内部>外部

4.一些常用的样式

color  颜色
font-size:字体大小
width  宽
height   高
border  边框
1px        solid    red
线的粗细   线的类型   线的颜色
font-family: "楷体"; 设置字体类型
font-weight: bolder; 设置字体加粗
font-style: italic; 设置字体斜体
text-decoration: underline;设置下滑线

5.div和span

　　div 块级标签，表示一块区域，用来布局

　　span 行级标签，范围标签

　　注意:块级标签若没有设置width,会占满一行

6.样式的继承

子元素会继承父元素的样式，比如：
<h2>
　　初相遇
　　<span>文/席慕容</span>
</h2>
对h2设置color为红色，span的颜色也为红色。
span是h2的子元素，红色是继承h2的。
继承的样式的优先级是比较低的。

7.css选择器

标签选择器
　　标签名{
   　　属性名：属性值；…
　　}
比如：
　　p{
　　　　color:red;
　　 }
对页面上所有的p设置了颜色。
id选择器
　　#id名{属性名：属性值;}
id是唯一的,在一个页面中不要出现相同的id名
比如：
　　#my{}  只对id名为my的元素设置样式
类选择器
　　.class名{属性名：属性值;..}  
类名是可以重复的
比如：
　　.cla{}  
会对页面上所有设置了class为cla的元素设置样式
子代选择器
　　<div id="my">
　　　　　　111111
　　  　<div>
　　　　　　<span>孙代span</span>
　　　　</div>
　　　　<span>子代span</span>
　　</div>
　　#my>span{   } 对#my中子代的span设置样式
　中间用>连接
后代选择器
　　#my span{   } 对#my里面所有的span设置样式
中间用空格间隔
群组选择器（组合选择器）
　　#myP,div,.cla {
　　　　color: red;
　　}
Id为myP,所有的div,
所有class为cla的元素都设置了颜色为红色
多个选择器的组合，每个选择器匹配到的元素都设置相同的样式
伪类选择器
　　选择器:hover {  }
鼠标悬浮状态下的样式
相邻选择器
选择器+选择器{}
　　#myDiv+p{}   匹配与myDiv相邻的p元素
注意：只能匹配到myDiv后的p。myDiv前的p不匹配
通配符选择器
　　*{   }
匹配页面中所有的元素，也包含body

　优先级：

　　Id选择器>类选择器>标签选择器

8.命名规范

　　名字中由数字，字母，_   ；
　　不能以数字开头
　　名字尽量取得有意义
　　驼峰命名法  myDiv  userName  
　　　　my_div   user_name

9. 一些常用样式

text-decoration
underline  下划线
overline  上划线
line-through  删除线
text-align  设置文本水平位置
center  水平居中
left  左
right 右
text-indent  设置文本缩进
font-weight: 设置加粗
bold  加粗
normal  不加粗
line-height  行高 ,行高设置成height的值，垂直居中
background-color: red;  设置背景颜色
border:边框
1px solid red; 
border-left:
vertical-align  设置对齐方式（一般设置在行内块元素）
middle 中对齐
top 顶部对齐
bottom  底部对齐

边框圆角 border-radius

css动画转换：transform 过渡: transition

10.背景样式

background-color：背景颜色
background-image: 背景图片
background-repeat ： 平铺方式
repeat-x  在x轴上平铺
repeat-y   在y轴上平铺
no-repeat  不平铺
background-position:背景图片位置（背景偏移）
background-position: -100px 50px;
第一个值是水平方向的位置
     +：向右
     -:  向左
第二个值是垂直方向的位置
     +：向下
     -：向上
background-size:设置背景尺寸
cursor: pointer 设置手型

11.盒子模型

margin:外边距
  本区域（设置了margin的区域）与其他区域之间的距离
margin-left  左外边距
margin-right 右外边距
margin-top    上…
margin-bottom  下…
margin:10px;  上下左右  都是10px
margin:10px 20px 30px 40px;
上   右   下   左
margin:10px   20px;
   上下   左右
margin:0px auto;    可设置区域水平居中
padding：内边距
  本区域边框与本区域内容之间的距离
 设置padding会撑大区域。
标准文档流：
页面元素是从左到右，从上到下排列

12.浮动

左浮动  float:left;
右浮动  float:right;
浮动的元素是脱离了标准文档流

13.隐藏显示

display  
  block 显示
  none  隐藏，不保留位置
visibility
  visible  显示
  hidden   隐藏，会保留位置

14.行级元素、块级元素、行内块的转换

转块级：display:block
转行级：display:inline
转行内块：display:inline-block

15.定位position

默认定位： position:static
默认就是，不需要设置
固定定位： position:fixed
固定定位，固定在窗口的某个位置
相对定位： position:relative
相对于自身原来的位置定位，后面的元素位置不会受到影响
绝对定位： position: absolute
后面的元素位置会受到影响
　　相对于设置了position（除了默认定位）的父元素定位，
　　如果父元素没有设置position,继续找爷爷元素，看爷爷元素是否设置position,如果设置了，
　　就相对于爷爷元素定位，依次类推，如果所有的父元素都没有设置position,那就相对于body定位。

16.清除浮动

clear:left  清除左浮动
clear:right  清除右浮动
clear:both   清除左右浮动

17.溢出处理 overflow

overflow:hidden  隐藏溢出部分
特殊用法：可以用来撑开区域
overflow:scroll  加滚动条
overflow:auto  自动，有溢出加滚动条，没溢出不加

1.Css 层叠样式表

2.怎么添加样式？（三种添加样式的方式）

3.三种样式的优先级？

4.一些常用的样式

5.div和span

6.样式的继承

7.css选择器

8.命名规范

9. 一些常用样式

边框圆角 border-radius

css动画 转换：transform 过渡: transition

10.背景样式

11.盒子模型

12.浮动

13.隐藏显示

14.行级元素、块级元素、行内块的转换

15.定位position

16.清除浮动

17.溢出处理 overflow

相关推荐

css动画转换：transform 过渡: transition