css选择器 | 易学教程

JavaWeb_02_CSS学习

阅读更多关于 JavaWeb_02_CSS学习

CSS简介 Cascading Style Sheets (CSS)层叠样式表: en.wikipedia.org 层叠：一层一层的叠加样式样式表：提供更多属性和属性值实现更多样式变化 css将显示样式和网页内容分离 CSS和HTML的结合方式（四种结合方式）（1）在每个 html 标签上面都有一个属性 style ,把 css 和 html 结合在一起 <div style="background-color:red; color:green;"> （2）使用 html 的一个标签实现 <style> 标签，写在 head 里面 <style type="text/css"> css代码; </style> <style type="text/css"> div { background-color: blue; color: red; } </style> （3）在style标签里面使用语句（在某些浏览器下不起作用） @import url(css文件的路径); - 第一步，创建一个css文件 <style type="text/css"> @import url(div.css); </style> （4）使用头标签link，引入外部css文件第一步，创建一个css文件 <link rel="stylesheet" type="text/css" href=

寒假自学阶段（2）

阅读更多关于寒假自学阶段（2）

javaWeb学习（1）——CSS的使用一.html与css结合的四种方式 1.在需要引用的标签上直接进行使用 <div style="">天行有常，不为舜存，不为桀亡</div> 2.通过在头文件中规定<style>标签，从而改变样式 <style type="text/css"> div{ background-color:blue; } </style> 3.通过在头文件中引入css文件来实现（1）用<link></link>标签来引入 <head> <link rel="stylesheet" type="text/css" href="CSS文件的地址"/> </head> （2）用@import来引入首先在Mac上就不能用，所以排除 <style type="text/css"> @import url("文件地址"); </style> 二.CSS优先级 1.CSS从左向右，从前往后依次加载。以后加载的为主三.CSS基本选择器 1.class选择器 div.text{ background-color: yellow; } 之后使用class=“text”来访问 2.id选择器 div#text{ background-color: yellow; } 与之类似，只不过中间的.用#来替换 3.标签选择器 div{ background-color:

CSS（一）什么是CSS？选择器、美化网页元素

阅读更多关于 CSS（一）什么是CSS？选择器、美化网页元素

一、了解CSS 1.1 什么是CSS？ Cascading Style Sheet （层叠级联样式表） CSS作用：美化网页（字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动….） 1.2、发展史 CSS1.0 CSS2.0 DIV（块） + CSS，HTML 与 CSS 结构分离的思想，网页变得简单，SEO CSS2.1 浮动，定位 CSS3.0 圆角，阴影，动画…. 浏览器兼容性~ （旧的版本有的浏览器不支持，新版本大多数有名的浏览器都支持）因为我是学Java的，idea也能写css，所以我也用它写。用idea写css的基本格式： css代码写到css文件夹里 css的优势： 1、内容和表现分离 2、网页结构表现统一，可以实现复用 3、样式十分的丰富 4、建议使用独立于html的css文件 5、利用SEO，容易被搜索引擎收录！ 1.3、CSS的3种导入方式先创建一个html，然后创建一个css,问题来了，说了css是用来美化网页的，也就是对html做不到的地方进行加工，所以我们怎么把他们连接起来呢? 内部样式：style标签 <!DOCTYPE html> < html lang = " en " > < head > < meta charset = " UTF-8 " > < title > Title </ title > <!--规范，<style>

Jquery

阅读更多关于 Jquery

了解Jquery 什么是JQuery jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQueryJavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。简单来说，Jquery是简化版的JS Jquery的优点：因为jq是轻量级别的框架，大小不大30kb 它有强大的选择器，出色的DOM操作封装有可靠的事件处理机制完善的ajax 出色的浏览器兼容性支持链式操作，隐式迭代行为层(功能)和结构层(页面元素) 的分离，还支持丰富的插件 Jquery的使用引入Jquery库：在使用jquery之前，必须要引入jquery库 <script src = "jquery-3.4.1.min.js"></script>"· 声明Jquery变量： [^$ 声明该变量是jq变量同时$也是JQuery的简写] var $ 变量名 = 赋值内容; 例如： var $ a = 10 ; jq中顶级对象是 $ 或者jQuery关键字注意： jQuery中的 $ 和 jQuery关键字本身同为一个对象 Jquery变量与Dom变量的转换： Dom变量转Jquery变量： var oDiv = document

jQuery入门

阅读更多关于 jQuery入门

简介 What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. jQuery是一个快轻量丰富的JavaScript库，主要封装了四块内容，分别是：html遍历操作，事件，动画和Ajax. 并且使用简单，丰富和易于扩展。官网：www.jQuery.com www.bootcdn.cn 下载jQuery jQuery的基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>

CSS3学习笔记大全

阅读更多关于 CSS3学习笔记大全

此片文章是CSS3学习，如果要学习CSS基础，点击 CSS基础入门学习笔记目录：新增选择器属性选择器结构伪类选择器兄弟伪类目标伪类伪元素选择器盒模型颜色 RGBA HSLA 渐变线性渐变径向渐变重复渐变边框边框圆角边框阴影边框图片背景背景属性背景缩放多背景过渡 transform2D transform3D 透规(pespective) backface-visibility 动画animation Flex伸缩布局(CSS3) 容器的属性项目的属性参考手册解读指南： [] 表示可选项 | 表示或者 || 表示多选一？ 0个或1个 *表示0个或多个 {} 表示范围新增选择器属性选择器选取标签带有某些特殊属性的选择器 /* 获取到拥有该属性的元素 */ div[class^=font] { /* class^=font 表示 font 开始位置就行了 */ color : pink ; } div[class$=footer] { /* class$=footer 表示 footer 结束位置就行了 */ color : skyblue ; } div[class*=tao] { /* class*=tao *= 表示tao 在任意位置都可以 */ color : green ; } 结构伪类选择器结构伪类选择器功能描述

CSS快速入门（2020.02.04）

阅读更多关于 CSS快速入门（2020.02.04）

文章目录 CSS 概念规则形式外部样式表内部样式表内联样式多重样式概念层叠规则选择 tag #id_val .class_val [property] tag tag #id_val tag .class_val tag tag.class_val 修饰概念 content 长度单位文本字体 background padding border margin 补充 CSS常用颜色名参考 CSS 概念 CSS (Cascading Style Sheets 层叠样式表) ：用于定义 HTML 元素显示的样式。规则一条CSS规则的基本组成：选择器可以是tag、id、class、property等。选择器可分组，即有多个，用“逗号”隔开。值如果是多个单词要用“双引号”括起来。多个声明之间用“分号”隔开。子元素会继承父元素的规则，单独对子元素创建规则可摆脱父元素的规则。形式外部样式表 mystyle.css body { background-color : yellow ; } p { margin-left : 20px ; /* 左边外边框宽度设置为20像素 */ background-color : blue ; /* 背景色设置为蓝色 */ } hr { color : sienna ; } mydoc1.html <!DOCTYPE

css优先级计算规则

阅读更多关于 css优先级计算规则

最近面试了一些求职者，我问css优先级计算规则是怎样的？答曰ID优先级>class>元素选择器，外联样式优先级低于内联样式，内联样式优先级低于行间样式，然后就没有然后了……，ID选择器的优先级确实>class选择器的优先级>元素选择器的优先级，但是外联样式优先级并不一定低于内联样式优先级。做为一个合格的前端工程师，让我们彻底搞清楚css优先级计算规则吧！特殊性 css继承是从一个元素向其后代元素传递属性值所采用的机制。确定应当向一个元素应用哪些值时，浏览器不仅要考虑继承，还要考虑声明的特殊性，另外需要考虑声明本身的来源。这个过程就称为层叠。——《css权威指南》上面这句话有两个词需要稍作解释，“声明”和“ 特殊性 ”。如下图，css规则由选择器和声明块组成，写在选择器后面大括号里的就叫声明。实际上，同一个元素可以使用多个规则来指定它的字体颜色，每个规则都有自己的选择器。显然最终只有一个规则起作用（不可能一个字既是红色又是绿色），那么该规则的特殊性最高，特殊性即css优先级。很多同学仅仅知道选择器优先级ID>class>元素选择器，而不知道ID的优先级为什么大于class的优先级。那么css优先级到底是怎么计算的呢？选择器的特殊性值表述为4个部分，用0,0,0,0表示。 ID选择器的特殊性值，加0,1,0,0 。类选择器、属性选择器或伪类，加0,0,1,0 。元素和伪元素

CSS选择器权重计算规则

阅读更多关于 CSS选择器权重计算规则

1.第一等：代表内嵌样式；如：style=" ",权重值为10000. 2.第二等：代表ID选择器；如：#content,权重值为0100. 3.第三等：代表类，伪类和属性选择器；如：.content,权重值为0010. 4.第四等：代表元素和伪元素选择器；如：div p,权重值为0001. 5.第五等：代表通配符，子元素选择器和相邻兄弟选择器等；如：*、>、+，权重值为0000. 6.继承的样式没有权重值. 7.!important; 　　!important的作用是提升优先级，换句话说，加了这句的样式的优先级是最高的（比内嵌的优先级还高）。　　来源： https://www.cnblogs.com/xingxing88/p/5937040.html

css选择器及权重的计算

阅读更多关于 css选择器及权重的计算

!important 直接写在样式上行间样式选择器直接写在标签上 id是一对一的 #id 类选择器是多对多的 .test 标签选择器是一对多的 div 属性选择器 [id=“test”] 通配符选择器是 * 其中权重是256进制，并不是10进制后代选择器中间是空格父子选择器中间是> 祖先元素竟然是从右向左找的并列选择器中间没有空格。像这个也可以用div[class="demo"]，这个就是并列选择器。好厉害（标签如div必须放前面，因为可能不知道啊。）权重，一样的话，后面覆盖前面的来源： https://www.cnblogs.com/czk666/p/9354301.html

订阅 css选择器