zoukankan      html  css  js  c++  java
  • css一

      css是层叠样式表(Cascading Style Sheets)的简称,它用于定义HTML元素的显示形式,是一种格式化网页内容的技术。

    CSS样式由样式规则组成,所有的样式规则都遵循基本的格式

        选择器{属性1:值1; 属性2:值2; ...属性N:值N}
        p{color:green}这里p就是选择器,color就是属性,green就是值。 

    css样式按位置的不同可以分为行内样式、内部样式、外部样式。下面我们以基本的颜色来看一下他们的区别。

    行内样式,表示样式的内容直接写在标记内部,执行级别最高。
        <p style="color:red">行内样式,这里面字会显示红色</p>
    内部样式,将表示的样式写在html文件的头部,执行顺序比外部样式高,比行内样式低。
        <head>
           <style type="text/css"> #y{color:blue} 
           </style>
        </head>
        <body><div><p id="y">内联样式,这里的字会显示蓝色</p><div></body>
    外部样式,单独把样式文件写到一个CSS文件中,然后在使用的地方将样式引用进来。首先,我们必须在html头文件中标明引入的路径。
        <head>
           <link rel="stylesheet" href="../CSS/first.css">
           <!--这里必须标明外部css文件的路径-->
           </style>
        </head>
        <body><p>外部样式,这里的字会根据外部样式发生变化</p></body>

    ## 常见选择器 ##
    在定义样式规则时,常用选择器最优先执行的是与元素最接近的样式,加了!important除外。

    元素选择器 p{p元素执行样式};

    类选择器 .text{text类执行样式};

    ID选择器 #userName{ID为userName的元素执行样式};

    群组选择器 .A,.B{A类和B类执行样式};

    包含和子对象选择器 div p{div元素内的p元素都执行样式};div>p{div的直接子元素p执行样式};div+p{与div同级别且紧跟着的p元素执行样式};

    通配符选择器 *{全部元素执行样式};

    伪元素和伪类选择器,通常是链接使用
        <a href="javascript:;">在本页面跳转的链接</a>   
        a:link{点击前的样式}
        a:visited{点击后的样式}
        a:hover{鼠标放上去之后的样式}
        a:active{在点击的瞬间的样式}

  • 相关阅读:
    OCP 062【中文】考试题库(cuug内部资料)第29题
    413. 等差数列划分 力扣(中等) 找规律,细节
    264. 丑数 II 力扣(中等) 动态规划,不会
    313. 超级丑数 力扣(中等) 动态规划,不会做
    5840. 使字符串平衡的最小交换次数 力扣(中等) 第255场oppo周赛 猜出来的
    手写一个仿微信登录的Nodejs程序
    你不知道的CSS国际化
    React实现类似淘宝tab居中切换效果
    原来 CSS 这样写是会让 App 崩溃的
    css中class和id之间有什么区别?
  • 原文地址:https://www.cnblogs.com/quanby/p/5547783.html
Copyright © 2011-2022 走看看