css 在网页开发中扮演着重要的角色,被誉为网页开发的三剑客,如果说html是人的外在器官部分,那css无疑是各个器官组成在一起然后表现出来,css又称样式重叠在网页排版布局中的地位举足轻重。

  做为后端开发者来说,学好css样式也是快速入门各类框架的基础,也是做为一名全栈工程师必备的知 识,下面来说说css中重要的选择器,

      在css中常见的选择器有四种常见,说到选择器就不得不说css引入文件的常见的三种方法,1,内联文件,2,外部文件,3.内嵌文件 ,其中三种常规的例子如下

1,借助link标签来引入“外部文件“,href 则代表其路径文件属性

2,中则是"内嵌文件" 在html /head 标签下面 style之内

3.内联在html代码中被称为"内联文件"。

   之所以讲三种引入样式文件方法,是因为他们与选择器息息相关,

  总结:1,不管哪一种方式,都得先找到 对应元素,对应id,对应class,或是全局通配,才能赋予其css样式。

             2,三种方式存在着优先级,内联>内嵌>外部。

             3,目前较为流行的是外部样式。

1,在html代码中标有 id=“***“时就是 id 选择器,在css样式中则用#号获取该id

      ps; 以#号做开始标志选中赋予其背景颜色黄色 说明#id具有唯一性,

1,在html代码中标有 class=“***“时就是 class 选择器,在css样式中则用.号获取该id

 3,元素选择器中 没有class ,id 只有标签的称为元素 h1-6标签  p 或 div span等 就是个元素

ps:元素之间可以相互找下级元素以逗分割;如下

这个样式包含h1与div元素 都会被显示黄色背景,h1与div之外的不会显示

4,通配*用来做全局的适配常用来初始化:如下:

ps:全部设置背景颜色黄色

总结;在网页排版中可以灵活运用以上四种常见的选择器,繁衍出高级的选择器。

css四种选择器总结的更多相关文章

  1. 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作

    一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...

  2. CSS 四种引入样式表优缺点分析

    CSS 四种引入样式表 CSS 有四种方式引入样式表,如下: 外部样式表 内部样式表 行内样式表 导入样式表 外部样式表优缺点 优点 实现了结构与表现的代码完全分离 方便复用及维护 因为分离到各自独立 ...

  3. CSS 四种样式表 六种规则选择器 五种常用样式属性

    新的html程序要在VS中编写了,在vs中安装ASP.NET和Web开发,并用ASP.NET Web 应用程序(.NETFramework)创建一个网页程序.添加一个html页 后面的代码都是在htm ...

  4. css四种基本选择器

    css选择器是什么? 要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器. HTML页面中的元素就是通过CSS选择器进行控制的. CSS选择器:就是指定CS ...

  5. CSS四种定位及应用

    定位(position) 如果,说浮动, 关键在一个 “浮” 字上面, 那么 我们的定位,关键在于一个 “位” 上. PS: 定位是我们CSS算是数一数二难点的了,但是,你务必要学好它,我们CSS离不 ...

  6. css四种定位

    概述:元素定位属性主要包括的模式和边偏移两部分,也就是说以后定位要和边偏移量搭配使用.边偏移加定位定位模式才能构成一个完整的定义方式. 偏移量说明: 边偏移属性 描述 top: 顶端偏移,定义元素相对 ...

  7. Css四种样式

    1. 2 3 4 5 6.

  8. CSS 简介、 选择器、组合选择器

    #CSS 装饰器引入<!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  9. CSS实现和选择器

    CSS实现和选择器 本课内容: 一.实现CSS四种方式 1,每个html标签中都有一个style样式属性,该属性的值就是css代码.(针对一个标签)2,使用style标签的方式. 一般都定义在head ...

随机推荐

  1. Windows游戏找不到了怎么办?

         大家有的时候,可能是不慎操作,或是某些新装的Windows,会发现那些经典的游戏不见了,那它们去哪了呢?是长腿跑了?还是Windows偷工减料?都不是,让巩固来教你们把他们找出来! 1.在开 ...

  2. python小练习--函数调用函数,让对象具有能动性

    class Box:#定义一个类名为Box,类名后不必有括号,类包含类属性和类方法,这个类没有定义类属性 '''这是一个计算体积的类'''#这是这个类的__doc__属性,执行类后就可以在交互界面输入 ...

  3. 解决Error creating bean with name 'huayuanjingguanDaoimp' defined in file [D:\apache-tomcat-7.0.52\webapps\landscapings\WEB-INF\classes\com\itheima\landscaping\dao\imp\huayuanjingguanDaoimp.class]: Invo

    问题描述: 10:23:13,585 ERROR ContextLoader:307 - Context initialization failedorg.springframework.beans. ...

  4. Shell编程-07-Shell中的case语句

    目录 基本语法 case示例 case语句总结     case语句相当于多分支的if/elif/else语句,而在使用case会让脚本看起来更简单工整.在case语句中,程序会将获取到的值与case ...

  5. MySQL Yum存储库 安装、升级、集群

    添加MySQL Yum存储库 首先,将MySQL Yum存储库添加到系统的存储库列表中.按着这些次序: 在http://dev.mysql.com/downloads/repo/yum/上转到MySQ ...

  6. Codeforces777B Game of Credit Cards 2017-05-04 17:19 29人阅读 评论(0) 收藏

    B. Game of Credit Cards time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  7. hdu 5039 线段树+dfs序

    http://acm.hdu.edu.cn/showproblem.php?pid=5039 给定一棵树,边权为0/1.m个操作支持翻转一条边的权值或者询问树上有多少条路径的边权和为奇数. 用树形df ...

  8. 磁盘配额(Quota)的应用与实践

    1>什么是Quota      在Linux中,由于是多用户,多任务的环境,所以会有多用户共同使用一个硬盘空间的情况发生,如果其中有少数几个用户大量占用掉了硬盘空间的话,那肯定影响其他用户的使 ...

  9. 动态载入DLL所需要的三个函数详解(LoadLibrary,GetProcAddress,FreeLibrary)

    动态载入 DLL 动态载入方式是指在编译之前并不知道将会调用哪些 DLL 函数, 完全是在运行过程中根据需要决定应调用哪些函数. 方法是:用 LoadLibrary 函数加载动态链接库到内存,用 Ge ...

  10. Android-普通菜单Menu

    第一种方式,使用Java方式 第二种方式,使用menu.xml package liudeli.activity; import android.app.Activity; import androi ...