zoukankan      html  css  js  c++  java
  • CSS级联样式表-css选择器

    CSS概念

      Cascading Style sheet 级联样式表

      表现HTMl或XHTML文件样式的计算机语言

        包括对字体,颜色,边距,高度,宽度,背景图片,网页定位等设定

    建议:把表示样式的代码从html中分离出来,并且创建一种规则来定义html标签要显示成什么样子。

    选择器:

      类型选择器:不带尖括号的标签名。    如给段落标签加下划线     p{text-decoration:underline;} 可以设置多个属性

      派生选择器:作用在某些标签的子标签上。 如只给ul 中的li标签加20px的字号 ul li{ font-size:20px;}

      伪类选择器:在原有选择器的基础上添加一个限定的条件,当某种情况发生时在选择这个标签。如给超链接加上鼠标悬浮改变红色 ,下划线 a:hover{ color:red;         text-decoration:underline;}

      :first-child:缩小标签的选择范围。如给ul中的第一个li标签加上红色   ul li:first-child{ color:red;}  只选择第一个li标签。

     1  <style type="text/css">
     2         /*超链接取消下划线,改变颜色为红色*/
     3         a{
     4             text-decoration: none;
     5             color:red;
     6         }
     7         /*当鼠标移动到a上显示下划线,改变颜色为绿色*/
     8         a:hover{
     9             text-decoration: underline;
    10             color:green;
    11         }
    12         /*给li标签改变内链模式*/
    13         ul li{
    14             display: inline;
    15         }
    16     </style>
    View Code

    其中a标签还有其他的伪类选择器:

      a:link{ } 为访问的链接,和a{}相同并且同时存在时会覆盖a{}。

      a:hover{} 鼠标移动到超链接上时。

      a:active{},被选定的超链接。

      a:visited{} 已访问的超链接。

    类选择器:给HTMl标签增加一个class属性,然后给class属性填写一个值,这个值叫做类型。(在类名前面加“.”)

     

    <body>
    <ul class="shihua">
        <li>中国需要你</li>
        <li>美国需要你</li>
        <li>世界需要你</li>
    </ul>
    <ul>
        <li>世界美好</li>
        <li>中国美好</li>
        <li>美国美好</li>
        <li>全都美好</li>
    </ul>
    
    <!--这里我把上面的ul加上了类,下面的没加,这样使用使用类选择器的时候下面的ulstyle不会改变-->
    .shihua{
        text-decoration: none;
        color: #FF0000;
    
    }
    .shihua li{
        display: inline;
    }

      

  • 相关阅读:
    微信小程序使用场景及取名“潜”规则
    微信小程序入门——Mustache语法学习
    微信小程序开发需要注意的29个坑
    微信小程序入门——怎么建多个项目?(导入官方Demo程序进行学习)
    精进:如何成为一个很厉害的人---书摘
    软件项目如何控制需求蔓延
    给现有MVC 项目添加 WebAPI
    Web API与国际化
    基于Attribute的Web API路由设置
    NuGet学习笔记1——初识NuGet及快速安装使用
  • 原文地址:https://www.cnblogs.com/xiaowie/p/9693261.html
Copyright © 2011-2022 走看看