• 技术文章 >web前端 >css教程

    关于css前端的知识点总结

    不言不言2018-06-11 14:35:27原创772
    下面为大家带来一篇css前端知识点总结。内容挺不错的,现在就分享给大家,也给大家做个参考。

    1、css的概念:(CascadingStyleSheet级联样式表)

    优点:1.内容与表现分离。(用网页的内容xhtml就可以与表象分开)

    2.表象统一

    3.丰富的样式

    4.减少网页代码

    5.运用独立于网页的css

    2.选择器

    1.标签选择器

    标签名{属性:属性值;}

    2.类选择器

    .类名{属性:属性值;}

    <标签名 class=”类名”>标签内容</标签名>

    3、id选择器

    #ID名称{属性:属性值;}

    4.并集选择器

    标签名,.类名,#ID名称{属性:属性值;}

    5.后代选择器

    后代选择器的写法是把外层的标签写在前面,内层的标签写在后面,之间用空格分开。当标签发生嵌套时,内层的标签就成为外层标签的后代。

    P span{ 属性:属性值;}

    <p>标签内嵌套<span>标签。

    <span标签是><p>标签的后代,两者之间用空格隔开

    6.交集选择器(注意:交集选择器之间没有空格)这种可以确定是某一个标签

    标签名.类名{}

    7.全局选择器

    *{样式;}

    Css中的注释只能是 /* 注释 */形式;

    3.在HTML中引入css样式的方法

    1.行内式,

    <h1 style=”font-size:18px”></h1>

    2.嵌入式,

    将样式写在head中

    <style type=”text/css”>
    H1{font-size:18px;}
    </style>

    3.导入式与链接式,(外部css样式)

    链接式:

    <link href=”style.css” rel=”stylelensheet” type=”text/css”/>

    导入式:

    <style type=”text/css”> @import”style.css”;</style>

    两者的区别是:链接是先加载样式后加载页面,导入是反之

    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;转换为块级元素;

    以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

    以上就是关于css前端的知识点总结的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css
    上一篇:如何使用CSS实现圈人效果(CSS Sprites) 下一篇:关于CSS文本超出div或者span时用省略号代替的代码
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• css3怎样实现不是直角的菱形效果• css样式中有文字描边吗• 12个值得收藏的 CSS 技巧!!• css3怎样实现翻转2次效果• css中圆角属性值能用百分比吗
    1/1

    PHP中文网