您现在的位置是:网站首页> 编程资料编程资料
css前端知识点总结(必看篇)_心得技巧_网页制作_
                     2021-09-11
                915人已围观
                
                2021-09-11
                915人已围观
            
简介 下面小编就为大家带来一篇css前端知识点总结(必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
1、css的概念:(CascadingStyleSheet级联样式表)
优点:1.内容与表现分离。(用网页的内容xhtml就可以与表象分开)
2.表象统一
3.丰富的样式
4.减少网页代码
5.运用独立于网页的css
2.选择器
1.标签选择器
标签名{属性:属性值;}
2.类选择器
.类名{属性:属性值;}
<标签名 class=”类名”>标签内容标签名>
3、id选择器
#ID名称{属性:属性值;}
4.并集选择器
标签名,.类名,#ID名称{属性:属性值;}
5.后代选择器
后代选择器的写法是把外层的标签写在前面,内层的标签写在后面,之间用空格分开。当标签发生嵌套时,内层的标签就成为外层标签的后代。
P span{ 属性:属性值;}
标签内嵌套标签。
标签的后代,两者之间用空格隔开 6.交集选择器(注意:交集选择器之间没有空格)这种可以确定是某一个标签 标签名.类名{} 7.全局选择器 *{样式;} Css中的注释只能是 /* 注释 */形式; 3.在HTML中引入css样式的方法 1.行内式,
2.嵌入式,
将样式写在head中
H1{font-size:18px;}
3.导入式与链接式,(外部css样式)
链接式:
导入式:
两者的区别是:链接是先加载样式后加载页面,导入是反之
4.样式的优先级
基本选择器之间:ID选择器>类选择器>标签选择器
样式表之间:行内样式>内嵌样式>外部样式
Css样式之间:在同一个选择器中,两条相同的声明,后一条声明会覆盖前一条声明,
5、盒子模型
盒子模型总尺寸=border-width-padding+margin+内容尺寸(宽度或高度)
6、浮动属性
Float:值(left,right,none,inherit(IE不支持不推荐使用))
与float属性结合使用的另一个属性clear,用于确定元素的那一侧不允许其他浮动元素,clear属性的值有5个,如下所示:
Left在左侧不允许浮动元素
Right:在右侧不允许浮动元素
Both:在左右侧均不允许浮动元素
None默认值,允许浮动元素出现在两侧
Inherit:规定应该从父元素继承clear属性的值,IE浏览器不支持,不推推荐使用。一般用于清除浮动时,使用both属性值的情况较多,即:
Clear:both;
7、定位属性:
1.绝对定位
position:absolute; z-index:2;(堆叠次序)
background-color:背景色。Transparent表示透明的背景色
background-attachment:确定背景图片是否跟随类容滚动,设置为fixed为固定的,scroll为滚动;
2.相对定位:position:relative;
8、控制元素显示方式
1.显示方式 display:值
2.处理盒子中的溢出:overflow:值
3.设置光标的形状:cursor:pointer(小手)
4.超链接样式:
a:link{color:#ff0000;} //未访问的链接
a:visited{color:#00CC00}//已访问的链接
a:hover{color:#000FF}//鼠标指针移动到链接上
a:active{color:#FF00FF}//选定的链接
定义样式必须是:linkàvisitedàhoveràactive
经验:内联标签可以包含于块级标签中,成为它的子元素,而反过来则不成立。
display:block;转换为块级元素;
以上这篇css前端知识点总结(必看篇)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
原文地址:http://www.cnblogs.com/izhongwei/archive/2016/06/09/5572443.html
相关内容
- 符合w3c标准的html标准需要注意的地方详解_心得技巧_网页制作_
- 深入理解HTML5在移动开发方面的发展现状_心得技巧_网页制作_
- 浅谈HTML5与HTML4的10个关键区别_心得技巧_网页制作_
- 网站前端性能优化之javascript和css篇_心得技巧_网页制作_
- 关于服务器返回的十四种常见HTTP状态码详解_心得技巧_网页制作_
- 如何在网页制作中给网页字体文件增加矢量图标_心得技巧_网页制作_
- z-index为负值的元素无法点击到的解决方法_心得技巧_网页制作_
- The Complete List of MIME Types(比较完整的MIME类型一览表)_心得技巧_网页制作_
- 什么是 MIME TYPE MIME-Types类型集合_心得技巧_网页制作_
- .html 、.htm 、 .shtml 以及 .shtm 四种扩展名的文件区别_心得技巧_网页制作_
 
                                
                                                         
                                
                                                         
                                
                                                         
 
    