css学习笔记
今天是我参加青训营的第二天
1、css是什么
css全称Cascading Style Sheets
- 用来定义页面元素的样式
- 设置位置和大小
- 添加动画效果
2、css是怎么工作的
3、css使用方法
a、外链
b、嵌入
c、内联
hello world
4、css选择器
a、元素选择器
选择器（标签）
{
属性1 : 取值1;
……
属性n : 取值n;
}
例子:
b、类选择器
class名前面必须要加上前缀英句号（.），否则该选择器无法生效。类名前面加上英文句号，表明这是一个class选择器。
d、
（1）后代选择器
语法 A（空格） B
选择元素内部中所有的某一种元素，就是满足该选择器条件的子元素才使用该样式。
满足id=one的标签下的div子标签，或者满足class=blue的标签下的div子标签才使用样式。
（2）直接组合选择器
语法AB
.one{
color；bluel
}
input.one{/*元素同时要满足ipnut标签和使用了类one才能使用该样式*/
font-size:2px;
}（3）亲子组合
语法A>B
B是A的直接子元素
section>p{
line-height:1.5;
}(4)兄弟选择器
语法：A~B
B在A后面，且和A同级
p~h2{
color:yellow;
}相邻选择器
语法 A+B
B必须进跟在A后面
h2+p{
color:blue;
}
e、群组选择器
同时对几个选择器进行相同的操作，两个选择器之间必须要用英文逗号（,）隔开。
h3, div, span {color:red;}f、属性选择器
根据标签里已经有的属性进行筛选，满足条件的使用该样式。
复杂一点的
其中^=是以什么什么开头的模糊查询，$=是以什么什么结尾的模糊查询。g、
5常见伪类
a、超链接伪类
| a:link | 定义a元素未访问时的样式 |
| a:visited | 定义a元素访问后的样式 |
| a:hover | 定义鼠标经过a元素时的样式 |
| a:active | 定义鼠标点击激活时的样式 |
b、:focus
:focus表示获得焦点的元素（如表单输入）。当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发。
input:focus{
color:yellow;}c、列表不同位置选项的css设置
li{
font-size:10px;
}
li:first-child{
color:red
}
li:last-child{
color:yellow;
}
li:nth-child(1){/*和第二个css样式效果一样*/
color:red;
}更多伪类：伪类 - CSS（层叠样式表） | MDN (mozilla.org)
6字体设置
| font-family | 字体类型 |
| font-size | 字体大小 |
| font-weight | 字体粗细 |
| font-style | 字体风格 |
| color | 字体颜色 |
a、font-family:字体一，字体...；
如果我们不定义font-family，浏览器默认字体类型一般是“宋体”。
b、font-style
| normal | 正常（默认值） |
| italic | 斜体 |
| oblique | 斜体 |
有些字体有斜体italic属性，但有些字体却没有italic属性。oblique是让没有italic属性的字体也能够有斜体效果。
c、font-weight
| normal | 正常（默认值） |
| lighter | 较细 |
| bold | 较粗 |
| bolder | 很粗（其实效果跟bold差不多） |
7、文本样式
| text-indent | 首行缩进 |
| text-align | 水平对齐 |
| text-decoration | 文本修饰 |
| text-transform | 大小写转换 |
| line-height | 行高 |
| letter-spacing | 字母间距 |
| word-spacing | 词间距 |
a、text-indent
p
{
font-size:14px;
text-indent:28px;
}
b、text-align
c、text-decoration
| none | 去除所有的划线效果（默认值） |
| underline | 下划线 |
| line-through | 中划线 |
| overline | 顶划线 |
d、text-transform
| none | 无转换（默认值） |
| uppercase | 转换为大写 |
| lowercase | 转换为小写 |
| capitalize | 只将每个英文单词首字母转换为大写 |
c、line-height
#p1{line-height:15px;}d、letter-spacing(字母间距)
letter-spacing: 像素值;
e、word-spacing(单词间距）
word-sapcing:像素值；
8边框样式
| border-width | 边框的宽度 |
| border-style | 边框的外观 |
| border-color | 边框的颜色 |
border:1px sold silver ;
border-top: 2px solid red; /*上边框样式*/
border-right: 2px solid yellow; 9列表
a、无序
| disc | 实心圆●（默认值） |
| circle | 空心圆○ |
| square | 正方形■ |
b、有序
| decimal | 阿拉伯数字：1、2、3…（默认值） |
| lower-roman | 小写罗马数字：i、ii、iii… |
| upper-roman | 大写罗马数字：I、II、III… |
| lower-alpha | 小写英文字母：a、b、c… |
| upper-alpha | 大写英文字母：A、B、C… |
list-style-type: 取值;/*可以取none*/
list-style-image: url(图片路径);10、表格
a、caption-side(表格标题）
| top | 标题在顶部（默认值） |
| bottom | 标题在底部 |
b、border-collapse
border-collapse:collapse(表格之间取消间距）
border-collapse:separate（表格之间有间隙，默认）
c、border-spacing:像素值
11、图片
a、高宽
width: 像素值; height: 像素值;
b、边框
border：1px solid silver;
c、对齐
text-align属性取值有3个，如下表所示。
| 属性值 | 说明 |
|---|---|
| left | 左对齐（默认值） |
| center | 居中对齐 |
| right | 右对齐 |
vertical-align:
| baseline | 默认。元素放置在父元素的基线上。 |
| sub | 垂直对齐文本的下标。 |
| super | 垂直对齐文本的上标 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| text-top | 把元素的顶端与父元素字体的顶端对齐 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐。 |
| text-bottom | 把元素的底端与父元素字体的底端对齐。 |
d、环绕效果（用浮动实现)
float:left;
| 属性值 | 说明 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
12背景设置
a、背景颜色设置
backround-color:颜色；b、背景图片设置
div
{
width:250px;
height:170px;
background-image: url();
}注意图片作为div的背景时，一定要设置div的大小，不然都默认大小为0.
c、设置背景的重复性
background-repeate:
| repeat | 在水平方向和垂直方向上同时平铺（默认值） |
| repeat-x | 只在水平方向（x轴）上平铺 |
| repeat-y | 只在垂直方向（y轴）上平铺 |
| no-repeat | 不平铺 |
d、背景位置设置
background-position:水平距离 垂直距离；
background-position:10px 21px;
background-position:top center;
e、背景图片固定
background-attachment:
| 属性值 | 说明 |
|---|---|
| scroll | 随元素一起滚动（默认值） |
| fixed | 固定不动 |
13、鼠标样式
cursor:
14、盒子模型
元素的宽度（width）和高度（height）是针对内容区而言的，块元素有height和width，行内元素没有
padding:20px表示4个方向的内边距都是20px。
padding:20px 40px表示padding-top和padding-bottom为20px，padding-right和padding-left为40px。
padding:20px 40px 60px 80px表示padding-top为20px，padding-right为40px，padding-bottom为60px，padding-left为80px。大家按照顺时针方向记忆就可以了。
详情见:内边距：padding - CSS | 绿叶学习网 (lvyestudy.com)
外边距：margin - CSS | 绿叶学习网 (lvyestudy.com)
15、浮动布局
a、float:
| 属性值 | 说明 |
|---|---|
| left | 元素向左浮动 |
| right | 元素向右浮动 |
浏览器是先加载正常文档流，在加载脱离文档流。
float,absolute属于脱离文档流。
b、clear:
浮动会影响周围元素，并且还会引发很多预想不到的问题。在CSS中，我们可以使用clear属性来清除浮动带来的影响。
| left | 清除左浮动 |
| right | 清除右浮动 |
| both | 同时清除左浮动和右浮动 |
16、定位布局
a、position:fixed:
在CSS中，我们可以使用“position:fixed;”来实现固定定位。所谓的固定定位，指的是被固定的元素不会随着滚动条的拖动而改变位置，一般只会用到其中两个属性。
position: fixed;
top: 像素值;
bottom: 像素值;
left: 像素值;
right: 像素值;b、position:relative:
position:relative;”来实现相对定位。所谓的相对定位，指的是该元素的位置是相对于它的原始位置计算而来的。
position:relative;
top:20px;
left:40px;
c、position：absolute：
“position:absolute;”来实现绝对定位。绝对定位在几种定位方式中使用最为广泛，因为它能够很精确地把元素定位到任意你想要的位置。
一个元素变成了绝对定位元素，这个元素就完全脱离文档流了，绝对定位元素的前面或后面的元素会认为这个元素并不存在，此时这个元素浮于其他元素上面，已经完全独立出来了。
按照先加载正常文档流，后加载脱离文档流的顺序，也会影响该元素的父元素。
绝对定位：absolute - CSS | 绿叶学习网 (lvyestudy.com)
position:absolute; top:20px; right:40px;
d、position:static：
元素没有指定position属性时，这个元素就是静态定位的。也就是说，元素position属性的默认值是static。
补充：
继承：
冲突：
大小：
颜色：
水平居中:
垂直居中：
外边距的折叠：
display和visibility
清楚默认样式：
