css知识点总结
1、html 控制样式的弊端
1、相同的样式效果，通过不同的属性或标记来完成的<body text=""></body>
2、程序可维护性、可重⽤性不⾼
2、通过 CSS 解决上述问题
可以让各个元素都使⽤统⼀的样式声明从⽽提⾼程序的可重⽤性和可为维护性
3、什么是CSS
CSS ：Cascading Style Sheet ，层叠样式表、级联样式表，简称为样式表
作⽤：为html元素去定义样式。
1) 能够实现内容与表现相分离
2) 提⾼代码的可重⽤性和可维护性
重⽤性：可以让多个元素使⽤相同的样式
维护性：⼀个元素的样式改变，其他元素也可以跟着变
4、HTML 与 CSS 之间的关系：⼀个完整的页⾯ = HTML + CSS
1）HTML 主要负责显⽰内容（搭建⽹页的结构）
2）CSS 主要负责构建HTML样式的定义
HTML属性与CSS样式的使⽤原则：
1）W3C建议尽量使⽤CSS样式取代 HTML 属性
2）HTML中的专有属性，⽆法通过css取代的只能选择html属性(rowspan、colspan)
5、CSS样式表的使⽤
1、使⽤⽅式：
1）内联⽅式，也称为：内联样式、⾏内样式。将样式属性定义在HTML元素中。
特点：只能控制某⼀个元素的显⽰效果
语法:<；标记 ></标记>
常⽤属性： color : ⽂本颜⾊，取值表⽰颜⾊的英⽂单词
2）内部样式表：将“样式规则”放在<style>的元素内。
特点：将所有的样式内容放在<head></head>中的<style></style>元素内。
<style></style>中添加若⼲"样式规则"。
样式规则：对⼀套样式的完整描述，主要包含两部分
1、规范页⾯中哪些标记允许使⽤定义好的样式 - 选择器
2、样式内容 - 若⼲样式声明
样式规则语法：
选择器{
/
/样式声明
样式属性：值;
样式属性：值;
...........
}
选择器：通过标记的名称来表⽰选择器，相当于定义该标记的样式
div{
color:red;
font-size:48px;
}
特点：
1、能够实现内容与表现相分离
2、提升了样式的可重⽤性和可维护性
3、只能在⼀个页⾯中做通⽤样式定义
3）外部样式表
将样式规则保存在独⽴的 css样式⽂件中，由页⾯对样式⽂件进⾏引⽤
特点：
1、实现内容与表现相分离
2、将可重⽤性和可维护性体现的最完美(所有的页⾯都能⽤)
3、可以在整个⽹站乃⾄于互联⽹中做通⽤的样式定义
步骤：
1、创建⼀个样式表⽂件，纯⽂本⽂件，以.css结尾。该⽂件中只能包含样式规则。
2、在html页⾯中对样式表⽂件进⾏引⽤在 <head></head>中增加以下代码：
<link rel="stylesheet" type="text/css" href="链接的css⽂件地址" />
2、CSS语法规范
1、基本语法：样式声明：属性：值; 样式规则：选择器和样式声明
2、CSS样式表特征
1、继承性：⼤部分的CSS样式属性，是可以被继承的。
继承：⼦级不⽤单独定义样式，可以直接使⽤⽗级的东西
2、层叠性：为⼀个元素定义多个样式的时候，样式不冲突时，多个样式表中的样式可以层叠(合并)为⼀个
3、优先级：样式冲突时，按照不同样式规则的优先级来应⽤样式
优先级：
1、浏览器缺省（默认）设置 (User Agent Style) ，级别最低；
2、内部样式表或外部样式表，级别处于中间位置；就近原则（谁靠下，以谁为主）。
3、内联样式 ，级别最⾼
(提⽰错误：
Unknown property name : 样式属性名称写错了；Invalid property value : 样式属性值写错了)
4、!important规则------------> 谨慎使⽤！
可以通过 !important 显⽰调整样式优先级，!important优先级最⾼
语法：样式属性：属性值 !important;
3、选择器作⽤：规范了页⾯中的哪些元素能够使⽤定义好的样式。
1.通⽤选择器作⽤：匹配页⾯中的任何⼀个元素语法：*{样式规则}
2.元素选择器作⽤：匹配页⾯中的指定的元素；语法：元素名称作为选择器 body、p等。
3.类选择器
作⽤：定义公共的样式，由任意⼀个标签进⾏引⽤
语法：.className{ : ; } 例：.red_back{} .red-back{}
引⽤：在标签中，通过class属性对类选择器名称进⾏引⽤
注意：在⼀个元素中，可以同时对多个类选择器进⾏引⽤。多个类选择器之间⽤空格隔开。
4.类选择器-分类选择器
作⽤：将类选择器和元素选择器结合起来使⽤，从⽽实现对某种元素不同样式的细分控制
语法：元素选择器.className { } 例：d_back{}
5.id选择器
作⽤：通过元素的id值，来声明定义元素的相关样式属性语法：#idValue{}
6.组选择器
作⽤：选择器声明，是以 , 隔开的选择器列表
语法： selector1,selector2,{ } 例：div,p,.redback{color:red;}
7.后代、⼦代选择器
只存在⼀级的⽗⼦关系：可以称之为⼦代或者后代
多于⼀级的嵌套关系：只能称之为后代后代语法：selector1 selector2{}
例：div span{} /*匹配出所有div元素中的span元素*/ #content .redBack{}
⼦代作⽤：只能匹配出⽗⼦关系的⼦级元素
⽬的：不希望选择任意的后代元素，⽽是希望缩⼩范围，只选择某个具体的⼦元素时使⽤。语法：selector1>selector2{}
8.伪类选择器
作⽤：匹配元素的不同状态语法： ：作为开始的
分类：
1）链接伪类作⽤：只匹配超链接的状态
:link：适⽤于尚未访问的超链接 :visited：适⽤于访问过后的超链接
2）动态伪类
:hover：适⽤于⿏标悬停在html元素上的状态
:active：适⽤于html元素被激活时
:focus：适⽤于html元素获取焦点时的状态
3）⽬标伪类
4）元素状态伪类
5）结构伪类
6）否定伪类
4、单位
颜⾊单位： #rrggbb : 每⼀位取值 0-9 A-F 例：#012345 :
#rgb : 缩写 #336699 --》 #369 #aabbcc --> #abc #aabcdd --> ⽆缩写
5、尺⼨属性
尺⼨：主要设置的是元素的宽度和⾼度；取值单位：像素或百分⽐
1pt=1/72英；1in=2.45cm。
宽度属性：
Width--->max-width：限定元素宽度最⼤值；min-width：限定元素宽度最⼩值
注意：width 与 max-width、min-width 相冲突
⾼度属性：
Height---> min-height；max-height
注意：
1、页⾯中，⾏内元素绝对不能修改宽和⾼
2、块级元素、html元素本⾝就具备width和height属性的元素允许修改宽和⾼
块级元素:div,p,h1,h2, ... ；本⾝具备width 和 height : table,input,img ...
6、溢出处理
使⽤尺⼨属性控制元素的⼤⼩时，如果内容所需控件⼤⼩元素本⾝的控件，会导致内容溢出
属性: overflow -----> overflow-x : 横向溢出处理； overflow-y : 纵向溢出处理
作⽤：当内容溢出元素时，如何处理
取值： 1)visible : 默认值，溢出可见；2)hidden : 溢出隐藏；3)scroll : 滚动，在元素内部显⽰滚动条，内容溢出，滚动条可⽤，内容不溢出，滚动条不可⽤；4) auto : ⾃动，内容溢出则显⽰滚动条，内容不溢出，不显⽰滚动条
7、边框属性
1、简写⽅式： border:width style color; (四个⽅向)
width：边框宽度；style：边框样式，实线(solid)，虚线(dotted)，虚线(dashed)；color：边框颜⾊，还
可以取 transparent
2、单边定义： border-left/right/top/bottom :width style color;
border-⽅向:width style color;
3、单属性定义： border-color : color; 四个边框的颜⾊
4、单边框单属性定义： border-⽅向-属性：值;
⽅向：top / bottom / left /right；属性：color / width / style
5、边框的组成：
边框是由四个三⾓形(元素宽度和⾼度都为0) 或梯形组成(元素宽度和⾼度不为0)
6、边框倒⾓：边框倒圆⾓，将直⾓转换成圆⾓的操作
属性:border-radius；取值：具体数值或百分⽐数字
取值数量：
1个值：表⽰的是四个⾓圆⾓半径
4个值：从左上⾓开始，顺时针⽅向的四个⾓的圆⾓半径
单独定义:
border-top-left-radius：左上⾓
border-top-right-radius：右上⾓
border-bottom-left-radius：左下⾓
border-bottom-right-radius：右下⾓
7、边框阴影：属性：box-shadow ；取值：多个属性值所组成的列表
h-shadow：阴影的⽔平位置（⽔平位置偏移量），取值为正向右偏移；取值为负向左偏移。
v-shadow：阴影的垂直位置（垂直位置偏移量），取值为正向下偏移；取值为负向上偏移。
了解：1)blur：可选属性，阴影的模糊距离；2)spfread：可选，阴影尺⼨
3)color：可选，阴影颜⾊；4)insert：可选，将外部阴影改为内部阴影
例：box-shadow:h-shadow v-shadow blir color;0px 0px 1px red;
8、轮廓：属性：outline 取值：width style color
单属性：outline-width、 outline-style、 outline-color；常⽤模式：outline:0px;
*******************************************************************************
⼆、框模型
1、框：框就是个容器，⽬的为了承装其他的东西；
html中所有的元素都可以称之为元素框
2、框模型(Box Model) : 也称为盒⼦模型、⽅框属性。
定义了元素框处理元素内容尺⼨、内边距、边框和外边距的⽅式
外边距：cellspacing ；内边距：cellpadding
注意：当框模型(内边距，外边距，边框)介⼊到元素后，元素的内容区域尺⼨是不变的，但是会增加元素框的总尺⼨
元素实际总宽度 = 左右外边距 + 左右边框 + 左右内边距 + width;
元素实际总⾼度 = 上下外边距 + 上下边框 + 上下内边距 + height;
3、外边距
1、什么是外边距：
围绕在元素边框周围的⼀些空⽩区域，这些区域是透明的，默认情况下，是不允许被其他元素所占据的。也可以表⽰为当前元素与其他元素之间的距离
2、语法：margin:value; (四个⽅向的外边距)
单边设置：
margin-top : 上外边距； margin-right：右外边距
margin-bottom：下外边距； margin-left：左外边距
3、取值：
单位: 1) px：具体像素值 margin:10px；2)%：⽗容器的宽和⾼的占⽐；3)auto : ⾃动，只对左右外边距有效，设置元素⽔平居中对齐；4)负值: ⽬的是为了向着相反的⽅向移动元素
margin-left：取负值，为了向左移动元素；margin-top ：取负值，为了向上移动元素
取值为 auto ：由浏览器⾃⼰计算外边距。左右⽅向取值为 auto 时，会呈现出元素⽔平居中对齐显⽰⽅式（仅仅局限于块级元素，⽽且必须要设置宽度属性）
取值数量：
margin:value; 四个⽅向外边距
margin:v1 v2(auto); 上下左右
margin:v1 v2 v3; 上左右下
margin:v1 v2 v3 v4; 上右下左(从上开始顺时针⽅向)
4、默认的外边距
html元素⾥，有些元素默认具备外边距的。
例： h1~h6；p；ul；body； dl、dd
如果程序中，不想使⽤默认的外边距，可以通过css重写的⽅式设置为 0
5、外边距问题
1、(垂直)外边距合并：
当两个垂直外边距相遇时，它们将形成⼀个外边距，称为外边距合并；
合并后的外边距的⾼度值为两个元素中外边距较⼤者的值。
2、外边距溢出：
⽗⼦元素中，如果设置⼦元素的上下外边距时，默认情况会被作⽤到⽗元素的外边距上。
解决⽅式：
1、可以为⽗元素增加边框，主要是上边框，解决⼦元素的上边距溢出问题。
2、增加⽗元素的 padding-top、最好将⽗元素的⾼度相应的减少⼀部分数值。
4、内边距
1、什么是内边距：
内容区域与边框之间的空间距离，注意：内边距会将元素边框撑⼤。
2、属性：padding : value;
单⽅向： padding-top: padding-bottom: padding-right: padding-left:
3、取值：
单位： px 、%
数量：
padding:value ; 上下左右
padding:v1 v2 ; 上下左右
padding:v1 v2 v3；上左右下
padding:v1 v2 v3 v4；上右下左
特殊使⽤场合：想扩⼤⾏内元素的宽度和⾼度的话，可以通过内边距来实现。
三、背景
1、背景颜⾊
属性：background-color
取值：可设置为合法的颜⾊单位值或 transparent
注意：默认情况下，背景(颜⾊、图像)是从边框位置处就开始填充
2、背景图⽚
属性：background-image
取值：url("图像URL")
cssclass属性
background-image:url("xxxx/xxx.jpg");
background-image:url('xxxx/xxx.jpg');
background-image:url(xxxx/xxx.jpg);
3、背景平铺（重复）
属性：background-repeat
取值：repeat : 即⽔平⽅向⼜垂直⽅向平铺(默认值)
no-repeat : 没有平铺
repeat-x : 仅⽔平⽅向平铺
repeat-y : 仅垂直⽅向平铺
4、背景图⽚尺⼨
属性：background-size
取值：value1 value2 : 宽度⾼度
value1% value2% : 当前元素的宽和⾼的占⽐
cover : 覆盖，将背景图像扩展⾄⾜够⼤，直到背景图已经覆盖了元素的所有区域。有可能导致背景图不能完整的显⽰在元素中
contain: 包含，将背景图扩⼤，直到背景图已经碰都某⼀个边缘位置（右、下），背景图能够完完整整的显⽰在元素中，不⼀定能覆盖到所有的区域
5、背景图⽚固定
默认情况，背景图⽚会随着滚动条⽽发⽣滚动，可以通过背景图⽚固定的⽅式解决此问题，让背景图保持在⽹页的可视化窗⼝的某个固定为⽌处不随着滚动条发⽣位置变化。
注意：尽量将背景图⽚加给body元素属性：background-attachment
取值：scroll ：背景会随滚动条发⽣滚动（默认值）；
fixed : 固定，背景不会随着内容⽽发⽣滚动。
6、背景定位
改变背景图⽚在元素中的位置
属性：background-position
取值：x y : x⽔平偏移位置，值为正向右移动，值为负，向左移动
y垂直偏移位置，值为正向下移动，值为负，向上移动
x% y% : 左上⾓ : 0% 0%；右下⾓ : 100% 100%；居中显⽰ : 50% 50%
关键字： x : left,center,right ； y : top,center,bottom
CSS Sprite : 将多个背景图合并到⼀张⾥⾯去，根据需求情况，通过背景定位对背景图⽚进⾏偏移，从⽽到要显⽰的图像
⽬的：减少对服务器的请求次数
操作步骤：
1.根据想要看的图像，在页⾯创建⼀个与它⼀模⼀样⼤⼩的元素
2.通过background-position对⼤图进⾏位置的移动，正好将想要看到的⼩图放到创建好的元素中
7、背景属性
将以上⼏个属性全部综合到⼀起，通过⼀个属性描述所有的值
属性:background
取值：color url() repeat attachment position;
常⽤值：background:url() repeat position;
常⽤⽅式：background:url(Images/user.png) no-repeat -120px -240px;
四、渐变
1、渐变语法：
渐变：指的是两种或多种颜⾊之间的平滑过渡
属性：background-image
取值：
linear-gradient() -- 线性渐变 repeating-linear-gradient() -- 重复线性渐变
radial-gradient() -- 径向渐变 repeating-radial-gradient() -- 重复径向渐变
例：background-image:linear-gradient(); -- 显⽰线性渐变颜⾊
*2、线性渐变
属性：background-image
取值:linear-gradient(angle,color-point1,color-point2,...)
angle：指定渐变的⽅向(⾓度)
to top : 向上 --> 0deg to right : 向右 --> 90deg
to bottom : 向下 --> 180deg to left : 向左 --> 270deg
color-point ：表⽰颜⾊的数值和位置例：red 0% 、red 10px；
background-image:linear-gradient(to top,red 0%,green 50%,blue 100%);
3、径向渐变
属性：background-image
取值: radial-gradient();
radial-gradient([size at position],color-point1,color-point2,....);
size at postion ：可以省略不写
size : 标识的圆的半径以 px 为单位
position : 圆⼼的位置：top,left,right,bottom,center、具体数值、百分⽐
4、重复渐变
repeating-linear-gradient(angle,color-point); repeating-radial-gradient();
color-point: 位置取具体的数值或者不到100%的数字
5、浏览器兼容性
对于不⽀持的浏览器版本，需要添加不同的浏览器前缀来解决渐变的问题
Firefox ： -moz- ； chrome和Safari ： -webkit- ； opera ： -o-
例：#d1{background-image:-moz-linear-gradient(to top,red 0%,green 50%,blue 100%);}
五、⽂本格式化
1、字体属性
1、指定字体(⾮重要)
font-family:value1,; 例：font-family:"微软雅⿊","宋体","Arial";
2、字体⼤⼩(重要)
font-size: 16px; 取值：px或pt作为单位的值
3、字体加粗(⾮重要)
相当于 : <b></b> font-weight:normal/bold/⽆单位数字(400-900);
⽆单位数字：400 - normal 900 - bold
4、字体样式(⾮重要)
相当于：<i></i> 功能：斜体显⽰⽂字 font-style : normal / italic;
5、⼩型⼤写字母(⾮重要) font-variant:normal/small-caps;
6、字体属性 font:font-style font-variant font-weight font-size font-family;
常⽤设置⽅式：
font:12px "微软雅⿊","Arial"; font:12px/24px(⾏⾼) "microsoft yahei";
2、⽂本属性
1、⽂本颜⾊ (重要) color:value;
2、⽂本⽔平排列⽅式(重要) 相当于：html 属性中的 align
text-align:left / right / center/justify（两边对齐）
功能：能够控制当前元素内所有的⽂本、⾏内元素、⾏内块、⽔平对齐⽅式。
3、⽂字线条修饰属性：text-decoration
取值：none ⽆线条(重要)、underline 下划线(重要)、overline 上划线(⾮重点)
line-through 删除线(⾮重点) --> <s></s>
4、⾏⾼(重要)：⼀⾏⽂本所占据的⾼度是多少
如果⾏⾼⼤于⽂本⼤⼩的话，那么这⾏⽂字将呈现出垂直居中的显⽰⽅式
属性：line-height 取值：以 px 为单位的值
5、⾸⾏⽂本缩进(⾮重要) 属性：text-indent 取值：以 px 为单位的值
6、⽂本阴影(⾮重要) text-shadow:h-shadow v-shadow blur color;
h-shadow:⽔平投射距离、v-shadow：垂直投射距离、blur：模糊距离、color：颜⾊
六、表格属性
1、表格常⽤属性(重点)：1、内边距 : padding；
2、尺⼨属性：width,height；
3、⽂本属性 : font-* , text-*；
4、背景属性 : background-*；
5、边框 : border /*只给表格设置边框，单元格没有*/ table{ border:1px solid red; }； /*单元格边框，与表格⽆关*/ td {border:1px solid red; }；
6、vertical-align(垂直对齐⽅式 td的)，功能：控制单元格内容的垂直对齐⽅式；取值：top / middle / bottom
2、表格特有属性
注意：该组属性只能在 table 中使⽤
1、边框合并(重要) 属性：border-collapse 功能：合并两个相邻的边框
取值：separate : 默认值，分离边框 collapse : 边框合并
2、边框边距(⾮重点) 相当于td的外边距，两个边框间的上下和左右的距离。
注意：只有在 border-collapse:separate；即边框分离时才有效；该属性加在table中。
属性：border-spacing
取值：取⼀个值：每两个单元格之间的垂直和⽔平间距是⼀致的。
取两个值：第⼀个值，指定的是⽔平间距，第⼆个值，指定的是垂直间距。两个值⽤空格隔开
3、显⽰规则(⾮重点)：如何布局、显⽰、解析⼀个table，定义加载表格的算法。
属性：table-layout
取值： auto : 列宽度由单元格的内容来决定，默认值。⾃动表格布局
fixed: 列宽度由设置的值（即表格宽和列宽⼀起）来决定。固定表格布局
⾃动表格布局：单元格的⼤⼩会适应内容的⼤⼩；加载时较慢；适⽤于不确定每列⼤⼩时使⽤

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。