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语法、CSS四种引入方式、CSS选择器、CSS属性操作

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

css四种基本选择器

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

CSS四种定位及应用

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

css四种定位

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

Css四种样式

1. 2 3 4 5 6.

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

#CSS 装饰器引入

&lt ...

CSS实现和选择器

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

CSS 引入方式 选择器

---恢复内容开始--- CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 步骤: A.找到标签 B.操作标签 ...

css的基本操作学习--css样式,选择器,hover,文字属性,文本属性,背景

什么是css? 通配符选择器

/* *通配符选择器 匹配任何元素 */ *{ margin: 0; padding: 0; } css样式有三种 ...

随机推荐

如何搞定IE+google双内核的360浏览器表单自动回填兼容问题

最近开发中碰到一个关于表单问题,在用户提交表单时候浏览器会提示是否保存帐号 如果点击保存,在退出帐号切换其他帐号时,浏览器会自动为表单填充数据,为了解决这个自动填充问题时, 主要分2个思路来解决,一个 ...

Linux(Ubuntu) Mysql的安装配置例子以及常用命令

1.安装配置例子 有空再写 2.注意事项 (1)启动mysql 在/etc/mysql 目录下 service mysql start  新版本是(service mysqld start  ) (2 ...

深入理解SELinux SEAndroid

参考文章: 一. http://blog.csdn.net/innost/article/details/19299937 二. http://blog.csdn.net/innost/article ...

Bootstrap系列 -- 21. 表单提示信息

平常在制作表单验证时,要提供不同的提示信息.在Bootstrap框架中也提供了这样的效果.使用了一个"help-block"样式,将提示信息以块状显示,并且显示在控件底部. &lt ...

使用ASP.NET web API创建REST服务(三)

本文档来源于:http://www.cnblogs.com/madyina/p/3390773.html Creating a REST service using ASP.NET Web API A ...

SQL Server Compact免安装部署

原文:SQL Server Compact免安装部署 情况 应用程序中的EF使用了SQL Server Compact,打包部署到客户机器上后提示数据库连接异常,信息类似”配置节“.”Provider ...

C#中如何使用IComparable<T>与IComparer<T>接口(转载)

本分步指南描述如何使用两个接口: IComparer和IComparable.在同一篇文章中讨论这些接口有两个原因.经常在一起,使用这些接口和接口类似 (并且有相似的名称),尽管它们用于不同用途. 如 ...

python服务器环境搭建(3)——参数配置

前面我们已安装好了python服务器运行所需要的相关软件,而最重要最繁琐的就是参数配置,写这篇就踩了好多坑,花了好多时间,遇到了各种各样的问题.好了费话少说,直接进入本篇话题. PS:本人不是专业的运 ...

分页查询最好加排序(order by)

昨天,与外部化系统对接时,发现有一个数据一直咩有集成到,双方各自排查了自己系统的代码,都觉得逻辑非常简单,无法就是一个分页查询而已. 问题就出在这个分页查询上. 为了说明当时问题发生的情景,我模拟了一 ...

html四种选择器的特点,css四种选择器总结相关推荐

  1. CSS 类选择器详解——CSS 多类选择器

    类选择器允许以一种独立于文档元素的方式来指定样式. CSS 类选择器 类选择器允许以一种独立于文档元素的方式来指定样式. 该选择器可以单独使用,也可以与其他元素结合使用. 提示:只有适当地标记文档后, ...

  2. CSS选择器优先级及CSS的高级选择器

    一.CSS选择器优先级 发现ID选择器 > 类选择器 > 元素选择器 如果引入样式的改变会有影响吗?那需不需要遵循就近原则呢?  所以可以得到:无论哪种引入样式(内部样式,行内样式,外部样 ...

  3. 什么是css选择器?css3中5种常见的基本选择器-web前端教程

    本章我们给大家讲解一下什么是css选择器?css3中5种常见的基本选择器.有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一:什么是css选择器? CSS是一种用于屏幕上渲染html, ...

  4. html5通用兄第选择器,css 通用兄弟选择器( ~ )

    stylus设置兄弟元素样式: 鼠标浮动在 .video-li 元素上时,.video-li 兄弟中 .video-info 下的 .word 显示. .video-li &:hover ~ ...

  5. css伪元素选择器,first-letter、first-line

    全栈工程师开发手册 (作者:栾鹏) css系列教程1-选择器全解 css伪元素选择器 伪元素选择器,用于选择元素内的局部,包括first-letter.first-line等 代码如下: p:firs ...

  6. css伪类选择器,:link、:visited、:focus、:hover、:active、:first-child

    全栈工程师开发手册 (作者:栾鹏) css系列教程1-选择器全解 css伪类选择器 伪类选择器用于表达在某种状态下的元素. 包括:link.:visited.:focus.:hover.:active ...

  7. 简述css属性选择器的几种定义方式_css的四种使用方式 css规则按选择器类型分为那四种...

    HTML中嵌入CSS的四种方式及优先级,如何选择 1. 行内样式行内样式就是把 CSS 样式直接放在代码行内的标签中,一般都是放入标签的style属性中,由于行内样式直接插入标签中,故是最直接的一种方 ...

  8. (Java高级教程)第四章必备前端基础知识-第二节1:CSS概述和选择器

    文章目录 一:CSS概述 (1)概述 (2)语法规范 (3)CSS引入方式 二:选择器 (1)基础选择器 ①:标签选择器 ②:类选择器 ③:id选择器 ④:通配符选择器 总结 (2)复合选择器 ①:后 ...

  9. Web学习第四天——CSS简介、选择器,常用(文本、字体、列表、背景、超链接)样式

    Web学习第四天--CSS简介.选择器,常用(文本.字体.列表.背景.超链接)样式 一.CSS简介 (一).什么是CSS? (二).CSS能够干什么? (三).CSS语法结构 (四).CSS的使用方式 ...

最新文章

  1. 如何实现控制台清屏?(借鉴)
  2. MyBatis:lazy loading
  3. part.write java_小白向:web中利用request.getPart()上传文件到服务器
  4. highscore软件_软件|标准物质PDF卡片查找HighScore
  5. android webview capturepicture,android webView截图的4种方法
  6. qt连接mysql创建表_用Qt访问数据库写一个 表格
  7. 微型计算机中AGP指,2011江苏省计算机等级考试二级理论考试试题及答案
  8. DevExpress控件介绍
  9. 检索召回 技术综述!
  10. MVC ---- 如何扩展方法
  11. nginx http重定向https 无效_Golang设置https访问,以及http如何重定向到https
  12. 搭建微商城平台,新商云提供源码部署只需3分钟
  13. C# 海康人脸识别设备初开发(一)
  14. c语言代码混淆器,代码混淆
  15. 图片加载异常兜底方案
  16. 【设计模式】七大原则之“依赖倒转原则”
  17. 张赐荣: C#ADO.NET 操作Mysql 详细教程
  18. miui 10 android 9.0,小米基于安卓9.0的MIUI10稳定版来了,你的手机可以更新吗?
  19. MIKE与SMS网格的区别
  20. python制作一个网易音乐下载器

热门文章

  1. 第七章 在网页中嵌入多媒体内容
  2. 大数据开发之Sqoop详细介绍
  3. 软件开源,航芯方案分享 | 全自动咖啡机设计方案
  4. C++中cout后面输出时加endl和不加endl的区别
  5. 119 李元翼 梧里 徒死無益
  6. 芯片前沿 | 云端芯片功耗问题日益严重
  7. 10年资深DBA老郭(门下已出多位DBA学生)老男孩MySQL DBA标杆班实战视频教程
  8. 浅析为什么没有朝代在武汉建都?
  9. 深入理解Windows域概念
  10. CDN加速的作用以及APP被渗透入侵的解决方案