css学习总结

时间:2019-03-15
本文章向大家介绍css学习总结,主要包括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

上一页 下一页

原文地址:http://www.manongjc.com/article/72964.html