CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。 ---- 引入CSS样式表(书写位置) CSS可以写到那个位置?...---- 内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下: CSS">...type:定义所链接文档的类型,在这里需要指定为“text/CSS”,表示链接的外部文件为CSS样式表。...CSS亦如此,要想熟练地使用CSS对网页进行修饰,首先需要了解CSS样式规则,具体格式如下: image.png 在上面的样式规则中: 1.选择器用于指定CSS样式作用的HTML对象,花括号内是对该对象设置的具体样式...类选择器最大的优势是可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签 长名称或词组可以使用中横线来为选择器命名。 不建议使用“_”下划线来命名CSS选择器。
(time[2])>7)){ currentTimeHtml ="中-...style=social&logo=cakephp' title='距离百年老店也就差不到一百年~'>" + time[0] + ' YEAR ' + time[1]...='https://hexo.io')= 'Hexo' span.footer-separator | span= _p('footer.theme') + ' '...5px rgb(20, 120, 210) to box-shadow 0 0 2px rgb(20, 120, 210) 修改_config.butterfly.yml, 添加 CDN 链接...: CDN: # main main_css: /css/index.css jquery: https://cdn.jsdelivr.net/npm/jquery@latest
猫头虎 分享:如何在服务器中Ping特定的端口号? 网络调试的实用技巧,学会这些工具,你将成为运维与开发中的“Ping”王!...在日常开发和运维中,我们经常需要检查目标主机上的某个端口是否开启,并确定网络连通性。...使用 Telnet Ping 端口 Telnet 是检查端口连通性的经典工具,虽然简单,但功能强大。...使用 nc(Netcat)Ping 端口 Netcat 是一款更强大的网络工具,可以替代 Telnet。...使用 nmap Ping 端口 Nmap 是一款专业的网络扫描工具,适合批量测试。
css是网页制作必不可少的部分,我会用三篇博客为大家展示css的基本使用方法。 关于css+div的总体结构图总结例如以下: 本篇博客主要介绍css的基础知识。...是用于控制网页样式并同意将样式信息与网页内容分离的一种标记性语言。 二、使用css控制页面方法 css控制页面的方法共同拥有四种,行内样式、内嵌式、链接式、导入式。...c、链接式 ps:链接式是使用频率最高也是最有用的方法。 d、导入式 ps:导入式最大的优点就是能够让一个HTML文件导入多个css样式表。...e、四种页面控制方法的优先级:行内样式>链接式>内嵌式>导入式 三、css选择器 选择器是css中的重要概念,全部的HTML语言中的标记都是通过不同的选择器进行控制的。 a、标记选择器。...:18px;"> cursor:se-resize;/* 变幻鼠标形状 */span> cursor属性定制了好多鼠标特效大家能够參照这张表 九、滤镜 css中的滤镜仅仅能在IE浏览器中使用,我们以后要做的软件尽量还是要对绝大部分浏览器都支持的
CSS以HTML为基础,提供了丰富的功能,如字体、颜色、背景的控制及整体排版等,而且还可以针对不同的浏览器设置不同的样式。 ?...1.3.2、内部样式表(内嵌样式表) 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,这种也**只适用于学习或者是小型的项目,一般不推荐使用。...1.3.3、外部样式表(外链式) 外链式是将所有的样式放在一个或多个以**.CSS**为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中,基本用法: 链接文档的类型,在这里需要指定为“text/CSS”,表示链接的外部文件为CSS样式表。...CSS的继承性指的是子标签会继承父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。 恰当地使用继承可以简化代码,降低CSS样式的复杂性。
初学CSS,可先用内嵌式样式进行学习,位置为之间,标记:css” >样式写在这里 CSS语法格式 CSS规则由两个主要的部分构成...--注释的内容,在页面中是不显示的--> CSS注释:/*注释内容*/,不管是单行还是多行只有这一种办法。 ?...然而,对于js而言,它只会选择具有相同id名字元素中的第一个。出于一个好的编程习惯,同一个id不要在页面中出现第二次。 语法:以”#”开头 使用方法:的名称”> <!...通配符选择器 针对当前页面所用的标签应用同样的样式(对标签的初始化) *{CSS规则} 如:*{margin:0;padding:0;border:0;} 标签和类结合 如:p.test{color:red...如: A:link链接的政策状态 A:visited鼠标单击过的链接状态 A:hover鼠标放在链接上面的(悬停)状态 A:active当前正在访问的链接状态
正文 相关概念-HTML CSS JS HTML: 内容层---表示某个标签在页面中是什么角色 CSS: 样式层---表示某个标签在页面中该呈现什么样式 JavaScript: 行为层---页面与用户的交互行为...更准确的说,是在 HTML 文档中该如何使用 CSS,因为 HTML 文档是互联网的基础,一个个网页就是一份份HTML 文档,既然 HTML 文档是基础,那么就是要明确在 HTML 文档中该如何使用 CSS...剩余两种方式,都是集中将所有的 CSS 样式管理存放,因此如果需要作用到具体元素上,要借助选择器来实现,选择器后面再说,先看这两种方式的使用: style 标签内嵌方式 css 代码内嵌在 HTML 文档中,一种是直接引用外部 css 文件。...而 HTML 文档使用 js 的方式是通过 标签来实现,如: 内嵌 console.log("hello world") 引用外部 js
通过使用CSS可以实现表现和内容的分离,同时提高了页面浏览的速度,也更加的易于维护和改版 CSS选择器 CSS 两个主要的部分构成:选择器,以及一条或多条声明。 选择器{声明1;......样式表书写位置 内嵌式 css”> 样式表写法 外链式(写在head里) css"> 行内样式表 hello ◆三种写法特点: ★内嵌式写法...行内元素 典型代表 span ,a, ,strong , em, del, ins 特点: ★在一行上显示 ★不能直接设置宽高 ★元素的宽和高就是内容撑开的宽高。...链接默认状态 a:visited{属性:值;} 链接访问之后的状态 a:hover{属性:值;} 鼠标放到链接上显示的状态 a:active{属性:值;} 链接激活的状态
CSS提供了丰富的功能,如字体、颜色、背景的控制及整体排版等。...–CSS3 是 CSS 的最新版本,该版本提供了更加丰富且实用的规范,如:列表模块、超链接、语言模块、背景和边框、颜色、文字特效、多栏布局、动画等等,这些规范的使用会在后面的单元中将依次讲解。...如何在HTML中引入样式表 •行内式 –任何HTML标签都拥有style属性,用来设置行内样式,其基本语法如下所示: 内容 •内嵌式 内嵌式是将CSS代码集中写在HTML文档的头部标签中,并且用标签定义,其基本语法如下所示: 选择器 {属性1:属性值...ütype:定义所链接的文档类型,“text/css”表示链接的外部文件为CSS样式表。
尽量不要跨职责范围使用,有点“SRP单一职责”的意思,如字体大小应该是CSS控制的,就不应该使用HTML标签完成,如果CSS能解决的问题尽量不要用JavaScript完成。 ?...如果打开时右边全是空白,请右键->"属性"—>“解除锁定” 点击下载帮助文档,上课示例的“文档”文件夹中也包含了两个关键的CSS文档 二、选择器 在使用CSS时我们首先要做的事情是找到元素,在写相应的样式...,在CSS2.1中最常使用的是三种选择器: a)、ID选择器:以#开始,引用时使用id,如id="div1" #div1 { color:red; } b)、类选择器:以.开始,使用class...在CSS3中新增了很多的选择器,如果大家会jQuery,jQuery中多数选择器在CSS3中都可以直接使用。...d)、具体 > 泛化的,特殊性即css优先级 e)、近的 > 远的 (内嵌样式 > 内部样式表 > 外联样式表) 内嵌样式:内嵌在元素中,span style="color:red">spanspan
, 2 2月 2021 作者 847954981@qq.com 前端学习, 我的编程之路 CSS选择器 在之前的文章中,我们知道对于繁杂的网页内容,我们可以通过引用内部样式来完成集体修改。...如: 小虫 当然,一个标签可以属于多个类,不同类之间用空格隔开,且层叠性(优先级)是依据CSS中类的前后而不是标签的类定义前后。...如: #fireinsect { font-size:20px } 高级选择器 在网页制作中,我们常常会遇到各种标签的嵌套的嵌套,此时我们不免就会需要特点标签内引入样式,因而我们就需要高级选择器...后代选择器: 标签内嵌套标签时使用,如: 测试 时我们可以在CSS中以 |”父级”+空格+”子级”| 方式来选择 如: li p { font-size:20px } 交集选择器...与p标签相邻span> 并集选择器: 如果给不同标签,或者不同类名的标签引入同一样式,可以使用并集选择器 即不同标签之间用 ","隔开 如: .box,p,h3,.phone{} 选择器的优先级
2、css的作用 3、css的引入方式和书写规范 (1) 内嵌样式 (2) 内部样式 (3) 外部样式...-------------------------------------- 3、css的引入方式和书写规范 (1) 内嵌样式 是把css的代码直接嵌入到... 语法: (1) 使用style属性将样式嵌入到html标签中 (2) 属性的写法:属性:属性值...(1) 创建.css文件,将css属性写在.css文件中,如:div{color:red;font-size:100px;} (2) 在head标签中使用link标签进行引入...span> 注意: span> 在CSS定义中属于一个行内元素,在行内定义一个区域,也就是一行内可以被
一共有三种方式: 内嵌样式 使用 HTML 元素的全局属性 style 声明,仅影响一个元素,除非工作环境受限,比如只允许编辑 HTML 的 body,否则强烈不推荐这种方式。...外部样式表 将 CSS 保存在一个独立的扩展名为 .css 的文件中,并在 HTML 的 里使用 元素中引用它,这种方法可以说是最好的,因为你可以使用一个样式表来设置多个文档的样式...在 CSS 中也是可以使用一些内置的方法功能。 伪类选择器 当不是通过 HTML 文档中元素的一些基本性质,比如 id,class,标签名,属性这些基本特征来匹配这些元素时,就可以称作伪类选择器。...input元素 :required :optional 根据是否允许使用required属性选取input元素 :link 选取未访问的链接元素 :visited 选取用户已访问的链接元素 :hover...场景1:不同使用方式的优先级 CSS 有三种使用方式,另外浏览器也有默认样式,因此这些构成了一个优先级顺序: 元素内嵌样式(全局属性 style 定义的样式) 文档内嵌样式(style 标签定义的样式)
学习目标 三种样式表的书写位置和优缺点 标签的三种显示模式和转换 复合选择器 背景属性 css的三大特性 样式表的书写位置 样式表可以有三种书写方式,分别分为 内嵌式样式表 外链式样式表 行内式样式表...内嵌式样式表 内嵌式样式表是在html里面嵌套一个style标签,将css语句都写在style标签里面 css语句 外链式样式表 单独创建一个后缀名为.css的文件...较少 控制一个标签(少) 内嵌式样式表 部分结构和样式相分离 没有彻底分离 较多 控制一个页面(中) 外链式样式表 完全实现结构和样式相分离 需要引入 最多,强烈推荐 控制整个站点(多) 标签的三种显示模式...,完成以下任务: 链接 登录 的颜色为红色,同时主导航栏里面的所有的链接改为蓝色 (简单) 主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。...和背景图片的区别: img不需要专门写宽高就能够显示在页面上 而背景图片默认是撑不开容器的 需要专门写宽高 一般产品插入图都推荐使用img 而一些小的icon 或者很少更新的图片 再或者超大的图片推荐使用背景图
前端开发:前端开发人员在很大程度上负责用户所看到的内容(即网站页面),前端开发人员主要使用HTML,CSS和JavaScript。...他们负责数据库系统的实现,确保各种Web服务之间的正确通信,生成后端功能等。 8个流行的后端框架列表 在这个后端框架列表中,我们不想坚持使用单一编程语言。相反,我们希望展示各种语言的后端框架。...CakePHP使用干净的MVC约定,并且具有高度可扩展性,使其成为构建大型和小型应用程序的绝佳选择。...,如MVC和DRY。...许多流行的服务器端和完整堆栈框架都使用Express,如Feathers,KeystoneJS,MEAN,Sails等。
所示,可以看到3个标签分别呈现了不同的对齐方式以及文字大小,而且任何一个class选择器都适合所有的HTML标签,只需要使用HTML标签的class属性设置即可,如示例3.2中的标签同样使用了...很多时候页面中几乎所有的标签都使用相同的样式风格,只有一两个特殊的标签需要使用不同的风格,这时可以使用class选择器与上一节学习的标签选择器来配合使用。如示例3.3所示。 ...如示例3.9使用CSS对超链接进行修饰,包括了对超链接本身,被访问过的超链接、鼠标经过时的样式等等。 ...本节将学习如何使用CSS控制页面,以及其在页面中的应用方式,包含行内样式、内嵌式、链接式。...4:CSS 内嵌样式表 训练技能点 Ø 内嵌样式表的使用 Ø 多种选择器混合使用 Ø 字体样式 Ø 超链接样式 需求说明 新闻标题字体颜色为灰黑色
1、CSS有四种控制方式:行内样式、内嵌式、链接式、导入式(优先级从高到低) 2、CSS选择器有:标记选择器(p、ul、a、li、img、span、input、select、等)、类别选择器(class...的值)、ID选择器(id的值);区别在于标记选择器使用所有,类别选择器适用不同类中相同的样式,ID选择器适用唯一不变样式(比如:div class=“one two”就是既使用.one的定义也使用.two...值是mycss下的li,#idcss li{}意思是id的值是idcss里面的li)注意:p.mycss和p mycss的区别,一个是p中class值为mycss,最后的是p包含的元素中class的值为...mycss 4、CSS继承 CSS一直贯穿整个CSS设计的始终,每个标记都遵守继承 5、段落水平对齐使用text-align(有左对齐,右对齐,两端对齐,居中对齐),垂直对齐使用vertical-align...a标签链接的文字下划线使用text-decoration:none;a:link是正常状态a的样式,a:visited是访问过,a:hover是鼠标经过,a:active是单击时(平时不用这个状态)
特点:和其他元素都在一行上,高、行高及顶和底边距不可改变,宽度就是它的文字或图片的宽度,不可改变 功能:用于加强内容显示,控制细节,例如:加粗、斜体等等 A 块级元素与块级元素平级、内嵌元素与内嵌元素平级...//span是行内元素,p是块级元素,所以这个是错误的嵌套 //对的 B 块元素可以包含内联元素或某些块元素,但内联元素不能包含块元素,它只能包含其它的内联元素 C 有几个特殊的块级元素只能包含内嵌元素...书写规范 使用CSS缩写属性 CSS有些属性是可以缩写的,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读体验。...4.去掉小数点前的“0” 5.连字符CSS选择器命名规范 1.长名称或词组可以使用中横线来为选择器命名。 2.不建议使用“_”下划线来命名CSS选择器,为什么呢?...在xhtml标准中规定了所有标签、属性和值都小写,CSS 书写也应该遵循此约定。 7.选择器 当一个规则包含多个选择器时,每个选择器独占一行。 、+、~、> 选择器的两边各保留一个空格。
CSS有三种方式: (1)元素内嵌 直接将样式写入元素的style属性中。适用于样式没有可复用性的场合。...(3)外部引用 将css内容写入css后缀的样式文件,然后在页面中引用,在head中加入。...将内容放在一个矩形的区块中,会影响布局 (2)span:块 span>span> span只是把一段内容定义成一个整体进行操作,但不影响布局和显示。...标签内的内容使用的样式。...link.css ,同一个项目内共享CSS,所有超链接都一样。
样式表的三种样式: 1.内联 span style="color:#666"> 这是span里的文字 span> 写在标签里面。...3.外部 css.css" rel="stylesheet" type="text/css" /> 写在另外一个文件里,然后再HTML中引用。代码重用性最高,精确度最低。...三种方式中内联优先级最高,内嵌和外部谁写在后面谁优先。 选择器 在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。以下是W3C的选择器举例: ? ? ?...id,每个元素都可以加,id唯一不可以重复,id名可以使用数字和_。... span class="cls1"> 这是span里的文字 span> 在div标签中class=“cls1”的应用该样式 选择器的优先级
领取专属 10元无门槛券
手把手带您无忧上云