前端基础之《CSS3样式设计（1）》

一、html嵌套css样式
1、外部
优先推荐
2、内部
3、内联
不推荐

二、样式表写法
img{
    background:#ccc;
    border-radius:256px;
}

三、css优先级
1、内联style
2、id选择器
3、class选择器
4、标签

四、css长度单位
1、px：像素
2、em：倍数
em常用于文字，因为文字的最小单位是14px，1em意思是14*1，2em意思是14*2

五、css颜色单位
1、red
2、#FF0000
3、#F00
4、rgb(255, 255, 255)

六、css选择器
1、常用选择器
2、基本选择器
3、层级选择器
4、伪类选择器
5、属性选择器

七、常用选择器
1、标签
span{...}
2、id
#imgid{...}
3、类
.imgcls{...}
4、关联选择器
.div2 .imgcls{...}
class为div2标签里面的class名称是imgcls的标签，用空格表示谁里面的谁
5、组合选择器
样式共用
.div1 .imgcls,.div2 .imgcls{...}
div1和div2里面的imgcls共用一个样式，用逗号分隔

八、基本选择器
1、:first-child
img:first-child{...}
img标签的第一个元素
2、:first-letter
p:first-letter{font-size:50px;}
p标签第一个字符改成50px
3、:first-line
p:first-line{font-size:50px;}
p标签第一个行改成50px
4、:last-child
img:last-child{...}
img标签的最后一个元素
5、nth-child(2)
img:nth-child(2){...}
img标签的第几个元素

九、层级选择器
1、a b
.div1 h1{...}
找到div1中的后代h1标签（包括子节点、孙子节点等）
2、a>b
.div1>h1{...}
找到div1中子元素的h1标签（只有子节点）
3、a+b
.div1+h1{...}
找到div1标签后面的一个h1标签（同一层级的）

十、伪类选择器
带有一定js特效的。
1、:hover
img:hover{...}
当鼠标移到img标签上方的时候
2、:focus
.username:focus{...}
当username文本框获得鼠标焦点的时候，就是有光标在闪的时候
3、::selection
被选择的时候
p::selection{...}
p标签里面文字被选中的时候，把文字背景变成红色

十一、属性选择器
用的很少。
1、[id]
2、[id=user1]
input[name=username]{...}
找到input标签下name等于username的那个input标签
3、[name*=us]
name包含us字符的
4、[name^=en]
name以en开头的
5、[name$=en]
name以en结束的

十二、常见的样式属性和值
1、字体和颜色
2、背景属性
3、文本属性
4、边框属性
5、鼠标光标属性
6、列表样式
7、定位属性
8、内外边距
9、浮动和清除浮动
10、滚动条
11、显示和隐藏

十三、字体

font-family	字体类型	字体名称：宋体，楷体，黑体
font-size	字体大小	30px
font-style	字体样式	normal、italic
font-weight	字体粗细	bold

十四、文本

letter-spacing	字间距
word-spacing	词间距
text-decoration	下划线	none || underline || overline || line-through none用来把a标签的下划线去掉
text-align	对齐	left、center、right 只能文本居中，块标签居中，margin:0 auto;
text-indent	缩进	p标签段落的首行缩进
line-height	行高
color	颜色
word-break	折行	自动换行，组合使用： word-break:break-all; overflow:auto; 自动折行，一旦溢出则出现滚动条

十五、背景

background-color	背景颜色
background-image	背景图片	背景图片层级，在文字和背景颜色之间
background-repeat	图片重复	no-repeat不重复
background-attachment	图片滚动	scroll、fixed
background-position	图片位置	水平：left、center、right 垂直：top、center、bottom 50px 50px -50px -50px 50% 50%

background可以缩写：
background:#ccc url('xs.png') no-repeat fixed 50% 50%;

十六、边框

border-style	边框样式	none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-width	边框宽度	30px
border-color	边框颜色	#F00

border可以缩写：
border:2px solid #F00;

边框可以分为上下左右：

border-bottom:2px solid #F00;
border-left:2px solid #F00;
border-right:2px solid #00F;
border-top:2px outset #00F;

十七、鼠标

cursor属性
crosshair	十字形状
pointer	小手形状
text	文本形状
wait	等待形状
default	默认形状
help	帮助形状

十八、列表（ul标签）

list-style-type属性
disc	小圆点，实心圆
circle	空心圆
square	实心方块
decimal	数字
lower-roman	小写罗马数字
upper-roman	大写罗马数字
lower-alpha	小写字母
upper-alpha	大写字母
none	把列表前的选项图标取消

十九、文本框

textarea属性
resize	none，文本框不能拖动
width	500px
height	300px

二十、样式继承
文字有关的样式会继承下去。父亲的样式会继承给孩子，font开头的样式。
p{
  font-family: 微软雅黑;
}
<p><span>linux</span></p>
p样式里字体涵盖了p标签和span标签。
F12里span会看到Inherited from p，就是从p标签继承过来的。

二十一、表格

border-collapse	表格边框是否合并	collapse
border-spacing	表格边框之间的距离

二十二、定位
页面上所有元素默认都是从上而下，从左往右来布局。

position属性
absolute	绝对定位，脱离文档流，原来的位置会释放。没有给定坐标的时候，它的坐标是原来自己的位置
relative	相对定位，脱离文档流，原来的位置不会释放。相对它原来位置的偏移
--------------	-------------------------------------------------------------------------------------
top属性	离上面的距离，y轴坐标
left属性	离左边的距离，x轴坐标

绝对定位和相对定位：
1、相同点：
1）都脱离了文档流，都在文档流的上方
2、不同点：
1）坐标系不同，绝对的坐标系在浏览器的左上角，相对的坐标系在自己的左上角
2）占不占位，绝对不占位，相对占位

Z轴坐标z-index定位的高度：
img{
  position:absolute;
  left:100px;
  top:100px;
}
.img1{
  z-index:1;
}
<img src="bk.png" class="img1">
<img src="wq.png" class="img2">

实现绝对居中方法：
父div：position:relative
子div：position:absolute
父相对子绝对，父div的坐标系是它自己，子div的坐标系是父div的左上角

二十三、外边距

margin-top	顶部外边距
margin-bottom	下部外边距
margin-left	左部外边距
margin-right	右部外边距
margin	后面只有一个值，就是作用在上下左右 后面写四个值，按照上-右-下-左的顺序作用于四边

二十四、内边距

padding-top	顶部内边距
padding-bottom	下部内边距
padding-left	左部内边距
padding-right	右部内边距
padding	写四个值，和margin一样

二十五、浮动和清除浮动

float	只有左浮动和右浮动。加了修饰的标签会浮动起来，left左侧浮动，把块标签右侧释放
<div style='clear:both'></div>	清除浮动

浮动也会脱离文档流。一个块标签一旦浮动，它就会脱离文档流，一旦脱离文档流它就失去了独占一行的特点。

清除浮动
1、clear:left
浮动之后左侧不能有人
2、clear:right
浮动之后右侧不能有人
3、clear:both
浮动之后左右都不能有人
可以有效防止盒子回缩
可以解决div不漂浮，内部内容却漂浮，在div最后放一个<div style='clear:both'></div>

二十六、滚动条

overflow属性
hidden	超出了也不显示滚动条
auto	自动判断滚动条

二十七、显示和隐藏

display属性
none	隐藏，不占位
block	显示，以块标签显示，一个人独占一块
inline	显示，以行标签显示，一个人独占一行
-------------------------	----------------------------------------------------------------
visibility属性
hidden	隐藏，但是占位
visible	显示，但是占位

二十八、边框样式

border-radius	圆角，圆的直径是里面的值
border-radius: 5px	这个5px是四个角角上的圆
border-radius: 128px	四个角上的圆叠到一起了，就看到了一个圆
border-radius: 20px 50px	对角线的圆直径
border-radius: 20px 50px 100px 128px	四个角顺时针一圈
---------------------------------	--------------------------------------------------
box-shadow: 5px 5px 5px 5px #F00	第一个值x偏移，第二个值y偏移，第三个值是阴影模糊值，第四个值是阴影外延值
---------------------------------	--------------------------------------------------
border-image	边框背景图
border-image-source	所在边框的图片的路径
border-image-slice	图片边框向内偏移
border-image-width	图片边框的宽度
border-image-outset	边框图片区域超出边框的量
border-image-repeat	图片边框是否应平铺、铺满或拉伸