zoukankan      html  css  js  c++  java
  • css学习_写法规范、选择器

    1、css(层叠样式表)样式主要目的(让页面更好看些)

    css尽量不要写内联样式,保证结构和样式分离原则;

    html专门负责结构,css专门负责样式。

    2、css写法规范

    选择器  { 属性 :值 ; }

    内联样式  写在标签里   style=“”属性:值“”

    内部样式  写在head标签里的style标签里  

    外部样式   通过链接导入样式表  link

    3、font-size(字号大小)

    4、浏览器默认字体font-family 微软雅黑 ,字体大小一般默认为16px

     一般不想写中文是可以用uncode字体,并且尽量只写宋体和微软雅黑

    5、*  指的是选择所有标签

    * {

    color:red;

    }

    6、font-weight : nomal(相当于400)、bold(700)、bolder、lighter、100-900(100的整数倍)

    7、字体综合设定(有顺序不能乱写)

    8、用谷歌调试工具检查css样式

    按f12   或者 审查元素

    找到html的css样式定位问题

    9、选择器(从n多元素中选择某个元素或某类元素)

    标签(元素)选择器  :标签名。

    id选择器: #id     标签( 元素)的id  。

    通配符选择器:* (选择所有的元素)------一般很少使用,使用时也是用来清楚标签默认样式的。

    类选择器:   .类名  (点 类名--》申明类样式)     class = '类名' (调用类名)

    【类名命名规则:比较长的名称最好用-(横杆) eg:  c-orange 尽量用下划线 ,当然也有和js搭配时使用的类名取的是下划线。

    尽量不用下划线一是因为下划线可能有兼容性问题 二是因为js中变量可以可用下划线  所以css中尽量不要下划线

    不要用纯数字和纯中文命名,一般命名原则是见名知意】。

            多类名 class=“font20 pink fontWeight”   

            

    10、id选择器和类选择器最大的区别:

    类选择器可以重复多次使用,但id只能使用一次。(界面id的唯一性)

    11、伪类选择器

    a、链接伪类选择器(主要针对于a标签)

    a:link{}

    a:visited{}(一般很少用)

    a:hover{}

    a:active{}(鼠标放上去不松开,一般不用)

    b、结构(位置)伪类选择器(css3,有一定的兼容性)

     目的:选出第几个孩子

    ul>li:first-child{}

    ul>li:nth-child(n){}--选所有子元素li

    ul>li:nth-child(odd){}   ---选下标(从1开始数)为奇数li

    ul>li:nth-child(even){}  --选下标(从1开始数)为奇o u数li

    ul>li:nth-child(2n){}    ---选下标为2n的li  (n从0开始)

    ul>li:nth-child(2n+1){}    ---选下标为2n+1的li  (n从0开始)

    c、目标伪类选择器

    :target{color:red}

    当前谁被选中(a的锚点)谁字体就是红色

  • 相关阅读:
    《我也能做CTO之程序员职业规划》之十五: 智商
    《.Net 软件设计新思维:像搭积木一样搭建软件》成书背后的故事
    测试有道:微软测试技术心得
    GTUG 推荐这本书给大家
    测试有道:微软测试技术心得
    独具匠心的好书:评《构建高性能Web站点》
    敏捷软件开发模型SCRUM
    JSP和Servlet性能优化
    软件项目管理的圣经人月神话(中)
    探讨JAR文件无限可能性
  • 原文地址:https://www.cnblogs.com/yangyutian/p/10441187.html
Copyright © 2011-2022 走看看