zoukankan      html  css  js  c++  java
  • 01-css的引入方式和常用选择器

    一、css介绍

    现在的互联网前端分三层:

    • HTML:超文本标记语言。从语义的角度描述页面结构。
    • CSS:层叠样式表。从审美的角度负责页面样式。
    • JS:JavaScript 。从交互的角度描述页面行为

    CSS:Cascading Style Sheet,层叠样式表。
    CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果。
    简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能。

    css的最新版本是css3,我们目前学习的是css2.1

    接下来我们要讲一下为什么要使用CSS。

    HTML的缺陷:

    • 不能够适应多种设备
    • 要求浏览器必须智能化足够庞大
    • 数据和显示没有分开
    • 功能不够强大

    CSS 优点:

    • 使数据和显示分开
    • 降低网络流量
    • 使整个网站视觉效果一致
    • 使开发效率提高了(耦合性降低,一个人负责写html,一个人负责写css)

    比如说,有一个样式需要在一百个页面上显示,如果是html来实现,那要写一百遍,现在有了css,只要写一遍。

    现在,html只提供数据和一些控件,完全交给css提供各种各样的样式。

    二、引入方式

    1. 行内样式
    2. 内接样式
    3. 外接样式

         3.1 链接式
         3.2 导入式

    1、行内样式

    <div>
    <p style="color:blue">这是一个段落</p>
    </div>

    2、内接样式

    <style type="text/css"> 
    span{
    color: yellow;
    }
    </style>

    3、外接样式-链接式

    <link rel="stylesheet" href="./index.css">

    4、外接样式-导入式

    <style type="text/css">
    @import url('./index.css');
    </style>

    三、css的常用选择器

    css的常用选择器:1.基本选择器 2.高级选择器 3.属性选择器

    1、基本选择器包含:

    • 标签选择器
    • id选择器
    • 类选择器

    1.1、标签选择器

    标签选择器可以选中所有的标签元素,比如div,ul,li ,p等等,不管标签藏的多深,都能选中,选中的是所有的,而不是某一个,所以说 "共性" 而不是 ”特性“

    /*标签选择器*/
    body{
        color:gray;
        font-size: 12px;
    }
    p{
        color: red;
    font-size: 20px;
    }
    span{
        color: yellow;
    }

    1.2、id选择器

    通过井号# 选中id

    同一个页面中id不能重复。
    任何的标签都可以设置id
    id命名规范:要以字母开头,可以有数字、下划线、 -、大小写严格区分,aa和AA是两个不一样的属性值

    #box{
         background:green;
     }
                 
     #s1{
         color: red;
     }
     
     #s2{
         font-size: 30px;
     }

    1.3、类选择器

    所谓类:就是class。 class与id非常相似,任何的标签都可以加类,但是类是可以重复,属于归类的概念。同一个标签中可以携带多个类,用空格隔开

    类的使用,能够决定前端工程师的css水平到底有多牛逼?
    玩类了,一定要有”公共类“的概念。

    .lv{
         color: green;
     }
     .big{
         font-size: 40px;
     }
     .line{
        text-decoration: underline;
    
      }
    
     <!-- 公共类    共有的属性 -->
         <div>
             <p class="lv big">段落1</p>
             <p class="lv line">段落2</p>
             <p class="line big">段落3</p>
         </div>

    总结:

    不要去试图用一个类将我们的页面写完。这个标签要携带多个类,共同设置样式
    每个类要尽可能的小,有公共的概念,能够让更多的标签使用

    到底使用id还是用class?

    答案:尽可能的用class。除非一些特殊情况可以用id
    原因:id一般是用在js的。也就是说js是通过id来获取到标签

    2、高级选择器包含:

    • 后代选择器
    • 子代选择器
    • 并集选择器
    • 交集选择器

    2.1、后代选择器

    使用空格表示后代选择器。顾名思义,父元素的后代(包括儿子,孙子,重孙子)

     .container p{
         color: red;        
     }
     .container .item p{
         color: yellow;
     }

    2.2、子代选择器

    使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。

     .container>p{
         color: yellowgreen;
     }

    2.3、并集选择器

    多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素,可以使用并集选择器

     /*并集选择器*/
     h3,a{
         color: #008000;
         text-decoration: none;
                     
     }
     .logo a, .logo p{
         font-size: 50px;
     }
    
    比如像百度首页使用并集选择器。
     body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
          margin: 0;
          padding: 0
       }
    /*使用此并集选择器选中页面中所有的标签,页面布局的时候会使用*/

    2.4、交集选择器

    使用.表示交集选择器。第一个标签必须是标签选择器,第二个标签必须是类选择器 语法:div.active

    比如有一个<h4 class='active'></h4>这样的标签。

    h4{
          100px;
         font-size: 14px;
     }
     .active{
         color: red;
         text-decoration: underline;
     }
     /* 交集选择器 */
     h4.active{
         background: #00BFFF;
     }
    
    它表示两者选中之后元素共有的特性。

    3、属性选择器

    属性选择器,字面意思就是根据标签中的属性,选中当前的标签。

    语法:

    根据属性查找
    [for]{
     color: red;
    }
    
    找到for属性等于username的元素 字体颜色设为红色
    [for='username']{
     color: yellow;
    }
    
    以...开头  ^ 
    [for^='user']{
     color: #008000;
    }
    
    以...结尾   $
    [for$='vvip']{
     color: red;
    }
    
    包含某元素的标签
    [for*="vip"]{
     color: #00BFFF;
    }
    
    指定单词的属性
    label[for='user1']{
     color: red;
    }
    
    input[type='text']{
     background: red;
    }
  • 相关阅读:
    Linux 下Firefox无法打开在'.domain'之前带有中划线的域名
    [Shell] 简单的自动检查ssh代理是否正常的脚本
    linux日志自动分割shell
    2014年学习计划
    [genome shell]标题栏优化
    什么样才叫解决问题?
    [mysql]清除单表大量数据方法(需保留部分数据)
    用linux c求最大公约数
    解决64位debian下无法安装ia32库的问题
    postfix邮箱服务器修改附件大小限制遇到的问题与解决
  • 原文地址:https://www.cnblogs.com/dxnui119/p/10242467.html
Copyright © 2011-2022 走看看