目录
1、css基础
css：层叠样式表 最新版本是3.0
css语法格式：选择器+声明（属性+属性值）
选择器{
属性1：属性值；
属性2：属性值；
}
选择器的目的是为了找标签用的
2、css基础练习
背景颜色 background-color：属性值；
宽度：width：属性值；
高度：height：属性值；
文字颜色：color：属性值；
文字大小：font-size：属性值；
3、样式表三种写法
样式表的分类：
①、行内样式表（内联样式表）
写法：直接在标签里面写style属性
②、内部样式表
写法：在head里面写style标签
③、外部样式表
写法：需要在css文件夹之下创建一个css文件；
需要在head中通过link引入创建好的css文件。
<link rel=“stylesheet” href=””>
引入外部样式表 rel=”stylesheet”建立关联性
href="" 写css路径
作用域（作用范围）
①、行内样式表：仅限于标签内
②、内部样式表：在整个html文件里面
③、外部样式表：所有引用了这个样式表的html文件
优先级
行内样式表优先级最高>内部和外部（看书写顺序，谁写在最后谁的优先级就高，后面会覆盖前面的）
注意：样式只会覆盖相同的
4、选择器
类选择器
ID选择器
通配符选择器
后代（包含）选择器
群组选择器
伪类选择器
4、类选择器
类名：class=”名字”
在css里面用类名的时候名字前面必须写.
5、ID选择器
id选择器就相当于是身份证号
格式：在标签名字的后面写 id=”名字”
在css里的使用方式：#id名字{ }
特点：id有唯一性，在一个html文件当中只允许出现一次这个名字
命名规则：
①、不要用数学开头 a1(可以) 1a(不可以)
②、名字当中可以出现字母、数字、下划线 a_b
③、不要使用汉字
④、尽量使用英文，英文实在不会写可以使用拼音
⑤、不要使用关键词(标签名字、属性名字)
⑥、起名字要做到见名知意
⑦、不要使用大写
6、通配符选择器
写法：*{ }
可以找到所有的标签
作用：一般是用来清除默认间距的
7、后代（包含）选择器
父子关系——嵌套关系
语法格式：祖先名字 子孙名字{ }
特殊点：
如果祖先名字和子孙名字中间加了> 那就只能找到儿子
8、群组选择器
可以一次性找到多个标签
语法格式：选择器1,选择器2…{ }
9、伪类选择器
语法格式：选择器：状态{ }
a：link{ }
一般情况下伪类选择器是结合超链接使用的比较多
link：这个链接在浏览器中从未访问过的状态(未访问)
visited：已经访问过的状态
hover：鼠标划过的状态
active：鼠标按下的状态
注意：这四个单词如果同时使用顺序一定不能乱写(如果乱写可能会导致有些不生效)
标准的顺序：lvha(爱恨原则 love hate)
10、选择器的权重(优先级)
行内样式表(1000)>id(100)>类(10)>标签(1)>通配符(0)
后代选择器的权重：所有的选择器权重相加之和
11、和文字相关的样式
颜色色值：
- 直接写颜色的英文单词
- 十六进制(取值范围：0-9 a-f) #6位数字或者字母
- rgb(133，240，150)，取值范围在0-255之间
（1）文字大小 font-size
默认情况下浏览器文字大小是16px，最小临界值是10px
（2）文字字体 font-family
font-family: 'Times New Roman', 'Times', serif;
注意：
①电脑上有这个字体库才能生效，没有就生效不了（用的就是默认字体）
②谷歌浏览器默认字体是微软雅黑
③一次可以写多个字体(字体和字体之间通过逗号隔开，如果字体是汉字或者有多个单词组成那必须加引号，如果只有一个单词可以不加引号)
④字体在运行的时候是从左到右依次查找，如果你的电脑上有这个字体，那么就生效，如果没有就依次往后去查找，如果都不生效那么就是默认字体
（3）文字加粗 font-weight
lighter：最细的
normal：正常(默认)
bold：加粗
数值:100-900
100最细
900最粗
400=normal
注意：数值一定不要加单位(px)
（4）文字倾斜 font-style
normal：正常(默认)
italic：倾斜
（5）文字首行缩进 text-indent
text-indent：40px；
注意：首行缩进可以写负数
（6）文字水平对齐方式 text-align
text-align：center；
左：left
右：right
中：center
（7）文字的垂直居中(利用行高来实现) line-height
line-height：100px；
注意：如果要实现单行文字的垂直居中：可将行高设置的和高度一致
如果行高小于高度，靠上
如果行高大于高度，靠下
（8）文字的修饰线 text-decoration
text-decoration：line-through
underline：下划线
overline：上划线
line-through：删除线
none：清除(常用，一般用来清除超链接的下划线)
2、列表相关的样式 list-style
list-style：none
清除列表前面默认的符号
3、边框的样式
border：边框粗细 边框样式 边框颜色(默认四个方向都加)
border-left——只加左边框
border-right——右边框
border-top——上边框
border-bottom——下边框
例：border：1px solid(实线) red；
给一个盒子4个方向都加了1px的红色实线边框
4、浮动
主要作用：让竖着排列的元素横向排列
单词：float
常用值：
left：向左浮动(常用)
right：向右浮动
none：没有浮动(默认值)
浮动的元素会对后面的元素造成的一些影响
- 如果一个元素加了浮动，那么就不会占据原来的位置，后面的元素会自动向前补齐
- 浮动的元素是覆盖不了文字的
如果不想让浮动的元素对后面元素造成影响，我们可以清除浮动
clear：
left——清除前面盒子造成的左浮动影响
right——清除右浮动的影响
both——清除两侧的浮动影响
注意：哪个盒子受到了浮动的影响，就在哪个盒子里面写清除
6、导航条
鼠标小手 cursor：pointer
12、和背景相关的样式
背景颜色：background-color
背景图片：background-image：url（路径）
注意：1、当图片大于盒子的时候默认有平铺效果
2、当图片大于盒子的时候有裁切效果(显示不全)
3、当图片等于盒子大小的时候就完美显示
背景图的平铺：background-repeat
no-repeat 不平铺
repeat 平铺
repeat-x 横向平铺
repeat-y 纵向平铺
背景图的位置：background-position
background-position：x轴 y轴
注意：
写方位名词：left、right、top、bottom、center
第二个值不写默认是center
可以写px单位
水平方向x轴，向右是正值，向左是负
垂直方向y轴，向下是正值，向上是负
背景图片的特点：
背景图不占位置，覆盖不了盒子里面的内容，只是为了起装饰作用
2、背景图的固定(了解) background-attachment
background-attachment：fixed；
scroll——滚动——随着滚动条一起滚走
fixed——固定——不会随着滚动条滚走，一直在页面当中固定显示
3、背景的简写方式 background
color image repeat position
background：颜色 图片的路径 平铺 背景图片的位置；
注意：这个顺序可以随便写
4、边框 border
边框线：默认颜色是黑色
线条的样式：
solid：实线
dashed：虚线
datted：点线
double：双线
清除边框线的时候：none和0
border-right：0
5、圆角 border-radius：50px；
上 右 下 左
border-radius：10px 50px 100px 30px；
6、盒子模型
盒子的组成(构成)：内容 内边距(内间距=padding) 边框线 外间距
内容：width、height
内间距：padding 指内容到边框的距离
边框：border
外间距：margin 指盒子和盒子的距离
注意：①内间距和边框会撑大盒子
②div的宽度默认是和父元素保持同宽
③span的宽度默认由内容撑开
④所有的标签都可以看做是一个盒子
写padding和margin的四种情况
①写一个值：上下左右都加
②写两个值：上下 左右
③写三个值：上 左右 下
④写四个值：上 右 下 左
注意：padding不可以写负数
margin可以写负数
7、清除默认间距
*{
padding：0；
margin：0
}
8、控制盒子居中
auto——自动——自动分配剩余的空间，可以实现盒子的水平居中
margin：0 auto；
13、文本溢出(省略号的做法)
①先控制文字不要自动换行 whilt-space:nowrap;
默认值 normal 多余空白会被浏览器忽略只保留一个
超出部分隐藏 overflow：hidden
visible：默认值,显示
scroll：加滚动条，不管内容有没有超出都会产生滚动条
auto：自动，当内容有超出才会产生滚动条（常用）
hidden：超出隐藏（最常用）
显示省略号：text-overflow:ellipsis;
clip:裁切
ellipsis：省略号
前提条件：一定要给盒子定宽度
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
