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. sigint sigterm 有什么区别啊

    SIGHUP     终止进程     终端线路挂断SIGINT     终止进程     中断进程SIGQUIT   建立CORE文件终止进程,并且生成core文件SIGILL   建立CORE文件 ...

  2. KBMMW 4.82.00 发布

    作者最近加紧了更新进度,赞一个. 时间都去哪儿了? 还没好好看4.81, 新版就来了. 这个版本主要是增强日志管理,已经强大到替换delphi 本身的异常处理了. We are happy to an ...

  3. 2018.07.03 HDU Rikka with Phi(线段树)

    Rikka with Phi Time Limit: 16000/8000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) P ...

  4. 删除k8s中一直处于Terminating的资源

    1.将所有的etcd中的key值取到一个keys.yam里面,便于查询 ETCDCTL_API=3 etcdctl get "" --from-key > keys.yaml ...

  5. UVa 11280 Flying to Fredericton (DP + Dijkstra)

    题意:给出n(2<=n<=100)个城市之间的m(0<=m<=1000)条航线以及对应的机票价格,要求回答一些询问,每个询问是给出最大停留次数S,求从其实城市Calgary到终 ...

  6. HDU 2106 decimal system (进制转化求和)

    题意:给你n个r进制数,让你求和. 析:思路就是先转化成十进制,再加和. 代码如下: #include <iostream> #include <cstdio> #includ ...

  7. struts2-core-2.3.20.jar

    核心配置位于该jar struts-default.xml struts-2.3.dtd <?xml version="1.0" encoding="UTF-8&q ...

  8. 2) 下载Maven

    http://maven.apache.org/ http://maven.apache.org/download.cgi Maven 3.3.3 (Binary tar.gz) Maven 3.3. ...

  9. OpenGL ES之GLFW窗口搭建

    概述 本章节主要总结如何使用GLFW来创建Opengl窗口.主要包括如下内容: OpenGl窗口创建介绍 GLFW Window版编译介绍 GLFW简单工程源码介绍 OpenGL窗口创建介绍 能用于O ...

  10. 20155320 2016-2017-2 《Java程序设计》第7周学习总结

    20155320 2016-2017-2 <Java程序设计>第7周学习总结 教材学习内容总结 时间与日期 认识时间与日期 时间的度量 GMT(Greenwich Mean Time)时间 ...