CSS总结

简介

1.层叠样式表（Cascading Style Sheets）
2. 用途：为标签添加样式？

基本语法

1.基础语法：
1、CSS 规则:selector {property: value}；例子：选择器、一条或多条声明
2、声明由属性和属性值组成；例子：例：div{width:50px;} div为选择器，width:属性，50px:属性值
3、多重声明，用分号隔开；例子：例: div{width:50px;height:100px}
4、如果值为若干单词，记得加引号。例子：例：p{ font-family: “sans serif” }
2.高级语法：
1、选择器分组：例子：h1,h2,h3…等，用逗号隔开
2继承：例子：子元素继承父元素属性

引入方式

1.外部样式表：
<1>、写在标签内部，通过link标签导入；
<2>、< link rel=“stylesheet” type=“text/css” href=“style.css” >。
2.内部样式表：写在< head >标签内部
3.内联样式：写在具体标签里< div style=“width” >
优先级: 就近原则,谁离标签最近,就是谁

盒子模型

1.组成部分：width（宽） + height（高） + margin （外边距）+ padding （内边距）+ border（边框）
2.margin外边距/padding内边距

margin/padding属性	含义
top	顶部
bottom	底部
left	左边
right	右边

区别：margin 与 padding？
1、margin兄弟元素之间，而padding父子元素之间；
2、margin可为负值，而padding不可为负值
3、padding增加大自身元素的宽，高，而margin有两种情况：<1>简单情况 <2>复杂情况
margin造成的外边距叠加问题？以及怎解决的?
1、问题：给子元素添加 matgin-top 会传递给父元素
2、解决方法：
<1>、给父元素设置 overflow = hidden；
<2>、给父元素添加边框；
<3>、给父元素添加 padding-top = 1px。

3.border边框：包括（ border-style样式、 border-width边框宽度 、 border-color边框颜色 、border-radius 、border-image）这几个内容。

border-style样式	含义	border-radius 圆角边框	含义
none	默认无边框	border-top-left-radius	定义了左上角的弧度
dotted	定义一个点线框	border-top-right-radius	定义了右上角的弧度
dashed	定义一个虚线框	border-bottom-right-radius	定义了右下角的弧度
solid	定义实线边界	border-bottom-left-radius	定义了左下角的弧度
double	定义两个边界

border-image: 设置所有边框图像的速记属性
border-color: transparent透明边框

选择器

包括：（元素选择器、类选择器、ID选择器、选择器分组、通配符选择器、属性选择器、包含选择器、子元素选择器、相邻兄弟选择器、伪类选择器、伪元素）

伪类选择器	含义	伪元素	含义
first-child	默认无边框	first-line	首行设置样式
last-child	定义一个点线框	first-letter	首字母设置样式
nth-child(n)	定义一个虚线框	::before	内容前插入新内容
		::after	内容后插入新内容

伪类选择器:
锚伪类 -----》link未被访问；visited已访问；hover鼠标移动在链接上；active选定的链接。

常见文本样式以及复合样式

1.文字格式设置
<1>text-indent： 设置文本颜色；
<2>letter-spacing：设置字符间距；
<3>text-decoration：用来设置或删除文本的装饰；----》none：默认，定义标准的文本；underline：定义文本下的一条线；overline：定义文本上的一条线；line-through：定义穿过文本下的一条线。
<4>text-transform： 控制文本的大小写；----》uppercase：仅有大写字母；capitalize：文本中的每个单词以大写字母开头；lowercase：仅有小写字母。
<5>text-shadow：设置文本阴影；------》text-shadow: 水平方向 垂直方向 模糊距离 阴影颜色。
<6>text-align：设置对齐方式；----》left：左对齐；right：右对齐；center：居中对齐；justify：两端对齐。
<7>line-height： 设置行高；
<8>vertical-align：设置元素的垂直对齐；----》top：把元素的顶端与行中最高元素的顶端对齐；middle：把此元素放置在父元素的中部；bottom：把元素的顶端与行中最低的元素的顶端对齐。
<9>white-space：设置元素中空白的处理方式；----》normal：默认,空白会被浏览器忽略；nowrap：文本不会换行，文本会在在同一行上继续，直到遇到 < br > 标签为止。
<10>word-spacing：增加或减少字与字之间的空白，英文单词和单词间距。

2.文字样式设置：
<1>color： 设置文本颜色；
<2>font-size：字体大小；
<3>font-family：字体类型。
3.复合样式背景：
<1>background-color： 设置元素的背景颜色；----》color：指定背景色；transparent：指定背景颜色是透明的。
<2>background-image：把图像设置为背景；
<3>background-repeat：设置背景图像是否及如何重复；
<4>background-position： 设置背景图像的起始位置；----》background-position：x ，y；x：代表水平方向；y：代表垂直方向。
<5>background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动；
<6>background-size：指定背景图片的大小。
background: 简写属性，作用是将背景属性设置在一个声明中

4.列表样式：包括（ list-style、list-style-image、list-style-type)
<1>. list-style属性：none: 标记；disc: 标记是实心圆；cirlce: 标记是空心圆；square: 标记是实心方块。
<2>. list-style-image：将图象设置为列表项标 ----》none：默认。无图形被显示；URL：图像的路径。
<3>. list-style-type：设置列表项标志的类型
5.表格：border-collapse：属性设置表格的边框是否被折叠成一个单一的边框或隔开

改变行，块元素的属性

1.改变成块元素 display:block
2.改变成行元素 display:inline
3.改变成内联块元素 display:inline-block

标签显示与隐藏

1. diplay(不占位) —》属性：none/block/inline/inline-block
2. visibility(占位) —》属性：hidden/visible
3. overflow —》属性：hideen/scroll/auto
4. opacity —》属性：<1>透明度：opacity:0.5；<2>兼容IE：filter:alpha(opacity:40).

浮动

1.none(默认)
2.left（左浮动）
3.right（右浮动）
4.清除浮动：
<1>. 给父标签加height
<2>. 添加一个空标签；例子：< div class=“clearfix”>< div > .clearfix=both 就可以清除浮动了
<3>. 给父标签加overflow:hidden
<4>. 给父标签加伪类

定位

1. absolute 绝对定位
2. relative 相对定位
3. fixed 固定定位

absolute 绝对定位、 relative 相对定位、 fixed 固定定位 相同点：脱离文档流；
不同点：1、relative 相对定位 原来位置保留；2、而absolute 绝对定位、 fixed 固定定位 原来位置彻底消失，后续元素填充空挡，相当于设定了inline-block。3、 fixed 固定定位 保持与浏览器固定的位置
定位的组合使用：
<1>. 子元素为absolute 相对于有定位元素的父级
<2>. 子元素为relative 相对于直接父级

@media query 媒体查询

1. 定义与使用: @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面

2. 语法:

#@media mediaType and|not|only (media feature) { /*CSS-Code;*/ }

3. 媒体类型（mediaType ）

<1>all 用于所有设备
<2>print 用于打印机和打印预览
<3>screen 用于电脑屏幕，平板电脑，智能手机等。（最常用）
<4>speech 应用于屏幕阅读器等发声设备

4. 媒体功能（media feature）

<1>max-width 定义输出设备中的页面最大可见区域宽度
<2>min-width 定义输出设备中的页面最小可见区域宽度
<3>max-height 最大高度
<4>min-height 最小高度

5. 案例:

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

@media screen and (min-width: 300px){
    body {
        background-color:lightblue;
    }
}