css第一个元素

Less基础

你说的曾经没有我的故事 提交于 2019-12-16 10:42:18
维护css的弊端 css是一门非程序式语言,没有变量,函数,SCOPE(作用域)等概念 1、css需要书写大量看似没有逻辑的代码,css的冗余度是比较高的; 2、不方便维护以及进行拓展,不利于复用; 3、css没有很好的计算能力 Less介绍 Less(leaner style sheets)的·缩写是一门css扩展语言,也成为css预处理器,作为css的一种形式扩展语言,它并没有减少css的功能,而是在现有的css的语法基础上,为css加入程序式语言特性。 它在css的语言基础上,引入了变量,Mixin(混入),运算以及函数功能,大大简化了css的缩写,并且降低了css的维护成本,就像它的名称一样,less可以让我们用更少的代码实现更多的事情。 less的中文网址 ;http://lesscss.cn/ 常见的css预处理器:Sass、Less、Stylus 一句话总结: Less是一门css预处理语言,它扩展了css的动态特性 在使用less之前需要进行less的安装,但是less的安装之前还需要安装nodejs,在node环境中安装less 一、less的安装 安装nodejs, 目前最新版本(12.13.1)安装网址: http://nodejs.cn/download/ 检查是否安装成功,使用cmd命令(window10是 window+r打开 运行输入cmd)---输入

css高级特性

点点圈 提交于 2019-12-15 19:07:48
1.CSS复合选择器:复合选择器是由两个或多个基础选择器通过不同的方式组合而成的 标签指定式选择器:又称交集选择器,由两个选择器构成,其中第一个选择器为标记选择器,第二个为class选择器或id选择器。两个选择器之间不能有空格。 后代选择器:后代选择器用来选择元素或元素组的后代,其写法就是把外层标记写在前面,内层标记写在后面,中间用空格分隔。 并集选择器:并集选择器是各个选择其通过逗号连接而成的,任何形式的选择器(包括标记选择器、class类选择器、id选择器等),都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同,或部分相同,都可以利用并集选择器为他们定义相同的CSS样式。 2.CSS层叠性和继承性 层叠性:就是将多种属性叠加起来。 继承性:就是给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承。 官方解释,继承是一种规则,它允许样式不仅应用于特定的html标签元素,而且应用于其后代元素。 有继承性的属性 字体系列属性 ​ font:组合字体 ​ font-family:规定元素的字体系列 ​ font-weight:设置字体的粗细 ​ font-size:设置字体的尺寸 ​ font-style:定义字体的风格 ​ font-variant:设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写

css高级形式

 ̄綄美尐妖づ 提交于 2019-12-15 18:52:48
一CSS层叠性和继承性 1.层叠性 层叠性指多种CSS样式的叠加。 2.继承性 继承性指书写CSS样式表时,子标记会继承父标记的某种样式。 注:并不是所有CSS属性都可以继承,如 边框属性,外边距属性,内边距属性,背景记属性,定位属性,布局属性,元素宽高属性 二、.CSS优先级 其中,标记选择器具有权重1,类选择器具有权重10,id选择器具有100. 特殊情况: 1.继承式的权重为0 2.行内样式优先 3.权重相同时,遵循就近原则 4.CSS定义了一个 !important命令,该命令被赋予最大的优先级 图像示例: 三、1.标签指定式选择器 标签指定式选择器又称交集选择器,由两个选择器构成,其中第一个为标记选择器,第二个为class选择器或id选择器,两个选择器之间不能有空格。 2.后代选择器 后代选择器用来选择元素或元素组的后代,其写法就是把外层标记写在前面,内层标记写在后边,中间用空格分隔。当标记发生嵌套时,内层标记就成为外层标记的后代。 3.并集选择器 并集选择器是各个选择器通过逗号连接而成的,任何形式的选择器都可以并集选择器的一部分。如果某些选择器定义的样式完全相同或部分相同,就可以利用并集选择器来实现。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>新浪</title> <style type=

css高级特性

与世无争的帅哥 提交于 2019-12-15 18:49:30
css复合选择器 1、标签指定式选择器 标记指定式选择器又称交集选择器,由两个选择器构成,其中第一个为标记选择器,第二个为class选择器或id选择器 两个选择器之间 不能有空格 。 2、后代选择器 后代选择器用来选择元素或元素的后代, 其写法就是把外层标记写在前边,内层标记下载后面,中间用空格分隔。 当发生嵌套时,内标记就成为外标记的后代。 3、并集选择器 并集选择器是各个选择器通过逗号连接组成 ,任何形式的选择器(包括标记选择器、class选择器、id选择器等),都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为他们定义相同的css样式。 css层叠性和继承性 1、层叠性 所谓层叠性是指多种css样式的重叠。例如,当使用内嵌式css样式表定义p标记字号大小为12像素,链入式定义p标记颜色为红色, 那么段落文本将显示为12像素红色,及两种样式产生了重叠。 2、继承性 所谓继承性是指书写css样式表时,子标记会继承父的表记的某些样式,如文本颜色和字号。例如,定义主体元素 body的文本颜色 为黑色,那么页面中所有的文本都将显示为黑色,这是因为其他标记都嵌套在body标记中,是body标记的子标记。 恰当地使用继承可以简化代码,降低css样式的复杂度 但以下属性不具有继承性 变宽属性 外边距属性 内边距属性 背景属性 定义属性 布局属性

CSS: 让编写更高效的选择器

允我心安 提交于 2019-12-13 15:26:22
高效的CSS已经不是一个新的话题了,也不是我一个非得重拾的话题,但它却是我在工作之时,所感兴趣的,关注已久的话题。 有很多人都忘记了,或在简单的说没有意识到,CSS在我们手中,既能很高效,也可以变得很低能。这很容易被忘记,尤其是当你意识到你会的太少,CSS代码效率很低的时候。 下面的规则只真正被应用到那些速度要求很高,有成百上千的DOM元素被绘制在页面上的大型网站。但是,实践出真理,多知道一点总是好的。 CSS 选择器 对我们大多数人来说,CSS选择器并不陌生。最基本的选择器是元素选择器(比如div),ID选择器(比如#header)还有类选择器(比如.tweet)。 一些的不常见的选择器包括伪类选择器(:hover),很多复杂的CSS3和正则选择器,比如:first-child,class ^= “grid-”。 CSS选择器具有高效的继承性, CSS选择器效率从高到低的排序如下: ID选择器 比如#header 类选择器 比如.promo 元素选择器 比如 div 兄弟选择器 比如 h2 + p 子选择器 比如 ul > li 后代选择器 比如 ul a 通用选择器 比如 * 属性选择器 比如 type = “text” 伪类/伪元素选择器 比如 a:hover 我们不得不提的是,纵使ID选择器很快、高效,但是它也仅仅如此。从CSS

如何运用最新的技术提升网页速度和性能----------引用

我是研究僧i 提交于 2019-12-12 13:43:03
1. 性能设计 在我们的项目中,我们每天都会和设计师和产品负责人讨论关于平衡美观和性能的问题。对于我们自己的网站,这样做是很简单的。简言之,我们认为好的用户体验从快速的内容传输开始,也就意味着 性能 > 美观。 好的内容、布局、图片和交互是吸引用户的重要因素。这每个因素都会影响页面的加载时间和终端用户体验。每一步我们都在探讨如何在获得好的用户体验和保证设计美感的同时,最小化对性能的影响。 内容优先 我们想要把核心内容尽快地呈现给用户,意味着我们要处理好基本的 HTML 和 CSS。每个页面都应该达到基本的目的:传递信息。JS、CSS、网页字体、图片、网站分析等优化都是位居于核心内容之下的。 可控性 给理想网站定义了标准后,我们总结出:要想达到预期效果,就要能对网站各方面的控制都游刃有余。我们选择构建自己的静态站点生成器,包括资源传输,并且由我们自己操控。 静态站点生成器 我们用 Node.js 实现了静态站点生成器。它是采用带有简短 JSON 页面描述标签的 Markdown 文件来生成整个网站结构和它所有的资源。为了包括特殊的页面脚本,也可以附带一个 HTML 文件。以下是一个简单化的描述标签和 markdown 文件,用于博客的发布,用它来生成真正的 HTML。 JSON 描述标签: markdown 文件: 图片传输 平均一个 2406kb 的网页中 1535kb 是图片

selenium:css_selector定位详解(css selector和xpath的比较)

℡╲_俬逩灬. 提交于 2019-12-10 15:09:19
selenium:css_selector定位详解(css selector和xpath的比较) 来源:https://www.cnblogs.com/haifeima/p/10138154.html 目录 selenium使用css selector和xpath的比较 selenium提供的定位方式(常用) 推荐的定位方式的优先级 针对css selector和xpath的优先级做一个简单的说明 定位元素的注意事项(划重点) selenium之CSS定位汇总 一:单一属性定位 二:组合属性定位 三:层级定位 回到顶部 selenium使用css selector和xpath的比较 selenium提供的定位方式(常用) ID NAME CLASS CSS SELECTOR XPATH 推荐的定位方式的优先级 优先级最高:ID 优先级其次:name 优先级再次:CSS selector 优先级再次:Xpath 针对css selector和xpath的优先级做一个简单的说明 在项目中我们可能用的最多的是css或者xpath,那么针对这两种,我们优先选择css,原因在哪些? 原因1:css是配合html来工作,它实现的原理是匹配对象的原理,而xpath是配合xml工作的,它实现的原理是遍历的原理,所以两者在设计上,css性能更优秀 原因2:语言简洁,明了,相对xpath 原因3

css-标签选择器

纵饮孤独 提交于 2019-12-10 01:43:34
css-选择器相关 1.选择器是什么?    在html学习当中,我们写完了html页面的时,我靠,感觉不对劲,别人的一个按钮都能花样奇多,我们却只是使用input的type="button"来实现按钮这个显示效果,但并没有美化效果,这时不必惊慌,刚出炉的html代码,就像素颜的她,需要化妆,才能映入眼帘,化妆得一步一步化,先在哪里点眉笔,再在哪里,都是有选择性,但是css它不知道你化哪里,这时候我们就需要对它说先去哪儿给我装饰,再去哪儿.接下来我们看下怎么指定它去化妆(渲染页面) 2.css基础选择器如下4类    id选择器,class选择器(类选择器),标签选择器以及通配符选择器(因为通配符选择器会遍历文档所有元素,在实际开放中,需要酌情使用),在html当中,有4个通用属性,id,class,title,style,通用属性就是在所有标签中都能设置这些属性,id选择器就是在标签的开始当中设置id名,class选择器就是在开始标签中设置class属性以及属性值 1 /* 标签选择器*/ 2 标签名{ 3 属性名:属性值; 4 属性名:属性值; 5 } 6 /*id选择器*/ 7 #id名{ 8 属性名:属性值; 9 属性名:属性值; 10 } 11 /*class选择器*/ 12 .class名{ 13 属性名:属性值; 14 属性名:属性值; 15 } 3.关联选择器   

前端(最新)

北战南征 提交于 2019-12-09 22:59:54
HTML初识 △HTML: 超文本标记语言,是一种用于创建网页的标记语言,不是编程语言,没有逻辑 本质上是浏览器可识别的规则 我们按照规则写网页,浏览器根据规则渲染我们的网页。对于不同的浏览器,对同一个标签可能会有不同的解释。(兼容性问题) 网页文件的扩展名:.html或.htm(没有区别) 网页文件的扩展名:.html或.htm(没有区别) 我们按照规则写网页,浏览器根据规则渲染我们的网页。对于不同的浏览器,对同一个标签可能会有不同的解释。(兼容性问题) 网页文件的扩展名:.html或.htm(没有区别) △css: 层叠样式表是一种用来表现HTML等文件样式(效果)的计算机语言 JavaScript: 简称“JS”,是一种属于网络的脚本语言 常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果 通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的 △jQuery: jQuery是一个快速、简洁的JavaScript框架,它封装JavaScript常用的功能代码 △boodstarp(JQ+css): bootstrap:简洁、直观、强悍的前端开发框架 它在jQuery的基础上进行了更为个性化的完善,形成一套自己独有的网站风格,并兼容大部分jQuery插件。 △B/S (前端/后端) Web服务的本质: 浏览器发请求 --> HTTP协议 -->

web前端入门到实战:CSS起源

…衆ロ難τιáo~ 提交于 2019-12-09 22:45:46
HTML的诞生 HTML是怎么来的? 在1982年的时候,万维网的发明者 Tim Berners-Lee 爵士为了让全世界的物理学家能够方便的进行合作与信息共享,造了 HTML(HyperText Markup Language) 超文本置标语言。 在1991年3月, Tim Berners-Lee 把 HTML 介绍给了给他在 CERN(欧洲核子研究中心) 工作的朋友,当时网页浏览器被其世界各地的成员用来浏览 CERN 庞大的电话薄。 然后在8年之后的1990年,博士发明了世界上第一个浏览器 WorldWideWeb ,也因此推动着互联网高速发展。 在 WorldWideWeb 问世之后的1993年 NCSA 推出了 Mosaic 浏览器并且迅速火了起来,成为第一个世界级应用的浏览器,推动着互联网发展。随后跟着的有当时的两大霸主 Netscape de Netscape 浏览器与 MicroSoft 的 Internet Explorer 浏览器,这两个浏览器在当时掀起了一场互联网浏览器大战。这场战争的结果是以 Internet Explorer 全胜告终。但也因此大大的推动了互联网的发展。 CSS的诞生 CSS是怎么来的? 就在承载 HTML 的浏览器迅猛发展的90年代, CSS (Cascading Style Sheet) 也应运而生。不同的浏览器结合各自 HTML