• CSS(一)基础


    HTML CSS Javascript 三者关系

    -HTML是网页内容的载体;

    -CSS样式是表现(外观控制);

    -Javascript是行为,是用来实现网页特效效果,如轮播图;

    什么是CSS

    • -CSS 是层叠样式表
    • -用于定义HTML内容在浏览器中的显示样式

    CSS的作用

    • -CSS简化HTML相关标签,网页体积小下载快
    • -解决内容与表现分离的问题
    • -更好的维护网页 提高工作效率

    CSS内容:

    -CSS基础语法

    •   1:CSS 规则由两部分构成,选择器+声明。如 : .h1   { color:red; }
    •   2:CSS引用:写在<head></head>标签内 : <style type="text/css"> CSS样式。。。 </style>
    •   3:相同样式的 可以用逗号隔开,只写一次。如: p,h1,h2,h3,h4 { color:red}

    -CSS使用方法

    •   1:行内样式(内联样式) 如: <p style="color:red;"></p>
    •   2:内部样式表(嵌入样式) 把CSS样式写在 <style type="text/CSS"> CSS样式。。。</style>内,同时 style标签要放在head标签内
    •   3:外部样式表  存在    .css文件内
    •       引入外部文件  <link href="XX.css" rel="stylesheet" type="text/css"   />  同时注意 放到head标签内
    •   4:导入式(尽量不要用 存在慢和兼容性问题)  @import  引入外部CSS样式   如 @import url(XX.css)  或者 @import "XX.css"            要放在样式代码的最开始处

    -CSS选择器

    •   。标签选择器
    •   。类选择器     1:为HTML标签添加 class属性      注意要用   .style
    •          2:可对不同类型元素的同一个名称的类选择器设置不同的样式规则;如   p.red {font-size:50px;}            h1.red { font-size:10px;}
    •           3:多个样式 用空格 隔开即开
    •   。ID选择器       1: 为HTML标签添加id属性  如 <p id="p1"></p>    通过id选择器来为具有此ID的元素设置CSS规则  : #p1{ color : red}
    •           2:id是唯一的
    •   。全局选择器  1:所有标签设置样式 通配符 *{ color:blue}
    •   。群组选择器   1:集体统一设置样式  用逗号隔开
    •       
    •   。后代选择器    1:使用后代选择器设置时,之间用 空格隔开  如: p em{ color ;blue;}

              

    •   。伪类  

        -伪类选择器定义特殊状态下的样式

        -无法用标签,id,class及其他属性实现、

            -链接伪类 :

                    链接中的四种状态  :(:link 激活状态)》(:visited 已访问状态)》(:hover 未访问状态)》(:active 和鼠标悬停状态)

    -CSS继承和层叠

    -CSS优先级

    •     行内样式 > 内部样式  > 外部样式  ;
    •    
    •     内部样式 和 link 外部样式表的优先级 取决于 谁 离要显示的地方近,就是所谓的就近原则;  

       

    -CSS命名规范

  • 相关阅读:
    canvas实现音乐中的歌词播放效果
    canvas调节视频颜色
    clip API实现遮罩
    总有那么几款发型 是经典不过时的
    很多人喜欢露脚踝你觉得时尚吗?
    王者荣耀花木兰攻略解析
    十位王者给出的单排心得
    IntelliJ IDEA2017 + tomcat 即改即生效 实现热部署
    IntelliJ IDEA2017 + tomcat 即改即生效 实现热部署
    jqGrid分页查询出错
  • 原文地址:https://www.cnblogs.com/thinkinpakho/p/9604254.html
Copyright © 2020-2023  润新知