css学习总结 - 码农教程

CSS:层叠样式表（cascading Style Sheets 通俗的讲：就是给HTML化妆的）
样式定义如何显示HTML元素
样式通常存储在样式表中
css使用的三种样式：
一、内联样式
直接在元素中声明
二、内部样式（注意：在内部样式中的注释，只能这样写/**/，写成回导致后边代码出错）
在<head></head>中声明
如：<style type="text/css">h1{color:red;}</style>
三、外部样式
在外部新建file中声明，并在<head></head>中使用<link>指向该声明
如：（1）h2{color=red}
（2）<link rel="stylesheet" type="text/css href="../Css/Sytle.Css">
//样式表样式类型外部样式路径
css语法规范：
h1{color:red;font-size:14px;}
选择器{声明1；声明2；.....}
css语法特性：
一、继承性：
子元素继承父元素的样式（如：body和h、p的关系继承）
二、层叠性：
对于同一个元素，能同时多次给出不同的样式，且都能应用
三、优先级：
给同一个元素加多个样式，优先级由高到低依次为：内联样式、内部样式和外部样式（这两种采取就近原则即：最后的样式为准）、浏览器默认样式。
选择器：（注意：在选择选择器时，如果考虑到某个元素样式的多变性，选用class选择器，后边可以通过改变className方法，转换样式）
一、class选择器
给具有相同操作的元素命名同一个class名字，将class名字作为选择器操作
格式：.classname{color:red;} .aaa{color:red;}
如：<h2 class="aaa">二级标题</h2>
<h3 class="aaa">三级标题</h3>
二、id选择器（注意：此id不能为数字命名）
仅作用于id属性的值
格式：#id{}
HTML代码：<div id="d1">分区</div>
CSS代码：#d1{color:red;}
三、选择器组
用于将所有有标记（包括id、class命名的）的元素，同时进行操作
格式： x1,x2,x3{}
如： .aaa,#abc{color:red;background-color:#ccc;}
四、派生选择器
派生选择器用来选择子元素
（1）后代选择器：选择某元素的所有后代（子孙）元素
语法：#p1 b{color:red;} (此处的p1是此段落的id,b是段落中对某文字的加粗）
（2）子元素选择器：选择某元素的所有子元素
语法：#p1>b{font-size:30px;}
五、伪类选择器
通过不同的状态来获取元素
常用伪类：（冒号前边为元素操作对象，即id或者class名字。注意：冒号不能省略）
:link:向未被访问的超链接添加样式
:visited：向已被访问的超链接添加样式
:active：向被激活的元素添加样式
:hover：当鼠标悬停至元素上方时，向该元素添加样式
:focus: 当元素获取焦点时，向该元素添加样式
六、选择器优先级
id选择器最高
声明：
一、border
border属性：用来设置元素的边框 //solid:实线、dashed:虚线
四边设置：border：width值 style值 color值;
单边设置：
border-left:width值 style值 color值;
border-right:width值 style值 color值;
border-top:width值 style值 color值;
border-bottom:width值 style值 color值;
样式大小单位：
%：屏幕百分比
px：像素
em:当前字体尺寸
样式颜色：//rgb三原色：都为0——黑色；都为255——白色；相同——灰色
#rrggbb:十六进制 ,如#ff0000 #后六位中2位一组分别表示红、绿、蓝
简写的#rgb:十六进制，如#f00
内容溢出时的处理：（推荐使用overflow：auto）
overflow：visible 显示
overflow：hidden 隐藏
overflow：scroll 无论是否溢出都加滚动条，供查看
overflow：auto 自动（即：溢出加滚动条，供查看；不溢出时不加滚动条）
二、box
对边框操作
（1）对边框一次性整体操作
如：
.d1{
padding:20px 30px 20px 30px; //内边距依次为上、右、下、左。
margin:20px 30px 20px 30px; //外边距依次为上、右、下、左。
border:1px dashed red; //边框属性
}
（2）对边框部分操作
如：
.d1{
//内边框操作 //外边框操作
padding-top:20px; margin-top:2opx;
padding-right:20px; margin-right:2opx;
padding-bottom:20px; margin-bottom:2opx;
padding-left:20px; margin-left:2opx;
}
（3）对边设置
/*对边设置*/
#d5{
padding:20px 30px;
margin:30px auto; //实现边框在屏幕正中央，把margin的左右边距设置为auto即可。
}
（4）合并相邻边框
border-collapse:separate/collapse;
三、背景
背景色：background-color:#ccc;
背景图片：background-image:url("../images/1.jpg");
图片平铺方式：
background-repeat:repeat 在垂直方向和水平方向平铺
background-repeat:repeat-x 在水平方向平铺
background-repeat:repeat-y 在垂直方向平铺
background-repeat:no-repeat 仅显示一次
图片方位：
background-position：right/top/left/bottom/center
设置图片是否随页面滚动：
background-attachment:scroll/fixed;
四、控制文本
指定字体：font-family：value1，value2;
字体大小：font-size：value;
字体加粗：font-weight：normal/bold;
文本排列： text-align :center/left/right;
字体颜色：color：red;
文字修饰：text-decoration：none/underline;
行高： line-height:value（1.6em）； //为了使表格内字体居中，让表格行高等于文本行高
首行文本缩进：text-indent：value（2em）；
字符间距：letter-spacing 单位：像素
五、定位
父级必须有相对定位，子级才能有绝对定位
流定位
默认的自上而下自左而右
浮动定位
1.div{float:right;}
将图片并排放置在父元素的左边或右边（浮动元素依旧在父元素内）
2.消除浮动对某元素带来的影响
元素p{clear:none/left/right/both;}
相对定位
元素{position：relative; left:20px;top:30px;}
以方位原点为参照物，改变另一个相关元素的位置。
绝对定位（只有对此元素的父类元素定位之后，才能对该元素绝对定位）
元素{position：absolute; left:20px;top:30px;}
相对定位是相对于自身产生位移。
绝对定位是特殊的相对定位、是相对父元素而言的。
固定定位（相对于整个页面而言）
position：fixed;
定位属性：
z-index:元素的堆叠顺序。序号越大，越在上层。

六、列表
li属性：
（1）无序列表前符号
list-style:none;：
none:无标记
disc:实心圆，为默认值
circle:空心圆
square:实心方块
（2）有序列表前符号：
none: 无标记
decimal:数字，为默认值
lower-roman：小写罗马数字
upper-roman: 大写罗马数字
（3）自定义符号
元素{list-style-image:url("");}

1.cursor
cursor定义鼠标指针的光标形状
cursor:pointer(手型)/default/pointer/crosshair/text/wait/help/;

2.
块元素 <h1>、<p>、<div>从上到下，可以设置宽高
行内元素<span>、<a>从左向右排序，不能设置宽高
行内块<input>、<img>从左至右排序，可以设置宽高
3.display
用于改变元素的显示方式
引用样式示例：元素{display：block;}
display:none：不显示该元素，释放其占用位置
display:block: 将元素设置为块，如可以将行内元素<a>转换为块元素
如：当鼠标放置在a标签所在图标区域，需要将a标签的背景扩大并更换背景：
a{display:block;widht:100px;height:50px;}
a:hover{color:white;background:url(./images/nav_on.jpg);}
display:inline: 将元素显示方式设置为行内，如可以将元素<p>转换成行内元素
display:inline-block: 将元素显示方式设置为行内块，如可以将行内元素<span>转换为行内块元素
4.利用行高控制文字居中
将文字部分元素转化为块元素：display:block
设置行高 line-height:(该元素宽度即 height)
5.IE浏览器兼容问题
IE下真正的bug
1 盒模型bug，解决方案使用严格doctype声明
2 双倍margin bug _display:inline此时只影响IE浏览器，左浮元素，左margin是定义的2倍
3 不认识a:link，解决方案只定义a
4 3像素margin bug，解决方案规范浮动与清楚浮动
6.色彩的表示
RGB在0-255之间表示
1.用16进制组合[0-255]-->[00,FF],#234567
2.用10进制组合，如rgb(34,45,65);
3.直接用颜色名表示：orange，pink.purple
4.#EEEEEE等于#EEE
7.尺寸的表示
1.像素表示
2.百分比表示
3.em表示，1个em相当于父元素的font-size的大小，3em相当于3个父元素的font-size
8.css画圆角
目前主流浏览器都支持
div{border-radius:5px;}
画圆：border-radius:div的宽高一半
9.相对定位与绝对定位
相对定位，相对于自身原位置定位，原本的位置别人抢不走；
绝对定位，是相对于最近的一个具有position属性的父元素来定位，
不抢占父元素的位置，相当于飘在父元素空中，z-index可调节浮在上空的层级

用绝对定位时，父元素要求有position属性(此处如果父元素没必要移动位置
则可以设置将position设置为relative，不设置移动值)，否则将依据父父，父父的父...
一直到有position属性那个父元素，如果都没有，则相对于body定位，
不占用父元素其他元素位置
10.overflow溢出处理
overflow:visible(默认)/auto(自动加滚动条)/heidden/scroll(强制加滚动条)
11.框架集开发，frameset结合frame

转载自：https://blog.csdn.net/m0_38025207/article/details/80723332