<!-- 整体说明: 1.CSS的三种引入方式 (1)行内样式 (2)内接样式 (3)外接样式 2.CSS的基本选择器 (1)id选择器 (引用方式:#id) (2)标签选择器(引用方式:标签名字) (3)类选择器(引用方式:.类名) 3.CSS的高级选择器 (1)后代选择器 (2)子代选择器 (3)组合选择器 <div> <p> <span></span> </p> </div> (4)交集选择器 --> <!DO…
HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包裹的由 ! 开头 转义字符:   空格 &lt : < &gt : > 页面模板 <!doctype html> <!--页面开始--> <html> <!--头--> <head> <!--字符编码--> &…
<!-- (1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 权重: 优先级高 权重大 谁在页面谁的权重大 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - 外接样式 (3)基本选择器 id选择器 # 选中的是特性 唯一的,不能重复 (与js有关系) 标签选择器 选中的是页面中共性的标签 类选择器 . 选中的也是页面中共性的标签,类名可以有多个 通配符选择器 通常是对页面进行重置样式表 border: 1px solid #e0e0e0 设置input的边框颜…
一.昨日内容回顾 div:分割整个网站,很多块 (1)排版标签 (2)块级标签 独占一行 可以设置高和宽,如果不设置宽高,默认是父盒子的宽 span: (1) 小区域 (2)文本标签 (3)在一行内显示,不能放置容器类(块)的盒子 (4)宽高不能设置 (5)宽高跟span的内容相关 a: (1)文本级标签 (2)不能设置高和宽 (3)超链接href:连接资源 title 鼠标的悬浮时的标题 跳转顶部top: <div id= 'top'> <div> ....... <a h…
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式:书写在代码块写在全局事件属性中 <div id="box" onclick="this.style.backgroundColor = 'red'; "></div> (2)内联式:书写在body最下方 <div id="temp…
CSS的引入方式共有三种:行内样式.内部样式表.外部样式表. 一.行内样式 使用style属性引入CSS样式. 示例:<h1 style="color:red;">style属性的应用</h1><p  style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>实际在写页面时不提倡使用,在测试的时候可以使用. 例如: <!DOCTYPE> <html&…
1.标签 <style>定义样式         <link> 资源的引用(某些css的样式) 2.属性 rel=”stylessheet” 外部样式表  (rel为定义当前文档和目标文档的关系) type=”text/css”  引入文档的类型 margin-left        边距 三种样式表插入方法 1.外部样式表 <link rel=”stylesheet” type=”text/css” href=”XXX.css”> 2.内部样式表 <style…
第一.html文件中如何使用css html文件中使用css有3种方式:链接式.嵌入式.行内式,推荐使用程度依次递减:1.链接式:在html文件通过<link />标签引入,rel属性值必须为stylesheet. <link rel="stylesheet" href="test.css"/> rel是relation的简称,stylesheet表示引入的文件是当前文件的样式表,href指定了具体的文件,一般用相对路径(不以/开始). 2.…
我们为什么需要CSS? 使用css的目的就是让网页具有美观一致的页面,另外一个最重要的原因是内容与格式分离 在没有CSS之前,我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性,当HTML内容非常多时,就会定义很多重复的样式属性,并且修改的时候需要逐个修改,费心费力.是时候做出改变了,所以CSS就出现了. CSS的出现解决了下面两个问题: 将HTML页面的内容与样式分离. 提高web开发的工作效率. 什么是CSS? CSS是指层叠样式表(Cascading Style Shee…
基础选择器 选择器:css 选择 html 标签的一个工具,是将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 选择器其实就是给 html 标签起名字 标签选择器 作用:根据指定的标签名称,在当前界面中找到所有该名称的标签,然后设置属性 格式: 标签名称 { 属性: 值; } 注意点: 标签选择器选中的是当前界面中所有的标签,而不能单独选中某一个标签 标签选择器无论标签藏得多深都能选中 id选择器 作用:根据指定的 id 名称找到对应的标签,然后设置属性 格式: #…
CSS三种引入方式 行内样式 内接样式 外部样式 链接式 导入式 行内样式 就是在标签加上style属性设置样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta na…
CSS三种引入方式 一.三种方式的书写规范 1.行间式 <div style="width: 100px; height: 100px; background-color: red"></div> 2.内联式 <head> <style> div { width: 100px; height: 100px; background-color: red; } </style> </head> 3.外联式 file:…
一:css三种引入方式 三种方式为:行间式 | 内联式 | 外联式 行间式   1.在标签头部的style属性内  2.属性值满足的是css语法  3.属性值用key:value形式赋值,value具有单位  4.属性值之间用;隔开 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三种引入方式</title&g…
css 三种引入方式 方式一:行间式 ​ 1.在标签头部的style属性内 ​ 2.属性值满足css语法 ​ 3.属性值用key:value形式赋值,value具有单位 ​ 4.属性值之间用 分号 : 隔开 方式二:内联式 在style标签内(style标签一般为head的子标签 属性值满足的是css语法 属性值用key:value形式赋值,value具有单位 属性值之间用 分号 : 隔开 方式三:外联式 ​ 1.在外部的css文件中 ​ 2.属性值满足css语法 ​ 3.属性值用key:val…
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例 每个CSS样式由两个组成部分:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束. CSS注释 /*这是注释*/ CSS的几种引入方式 行内样式 行内式是在标记的style属性中设定CSS样式.不推荐大规模使用. <p style="c…
感谢原文:https://blog.csdn.net/abc5382334/article/details/24260817 感谢原文:https://blog.csdn.net/jiaqingge/article/details/52564348 Html CSS的三种链接方式 css文本的链接方式有三种:分别是内联定义.链入内部css.和链入外部css 1.代码为: <html> <head> <title>内联定义</title> </head&…
网页设计基础--CSS的四种引入方式详解     一.行内式:   规则: 1. 行内式是所有样式方法中最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中.   格式: <html> <head> <title>页面标题</title> </head> <body> <p style="color:#FF0000; font-size:66px">使用行内样式引入CS…
第一:css的四种引入方式 1.行内样式 最直接最简单的一种,直接对HTML标签使用style="",例如: <p style="color:#F00; "></p> 缺点:HTML页面不纯净,文件体积大,不利于蜘蛛爬行,后期维护不方便. 2.内嵌样式 内嵌样式就是将CSS代码写在<head></head>之间,并且用<style></style>进行声明,例如: <style type=…
1,css有几种引入方式 使用HTML标签的STYLE属性 将STYLE属性直接加在单个的HTML元素标签上,控制HTML标签的表现样式.这种引入CSS的方式是分散灵活方便,但缺乏整体性和规划性,不利于后期的修改和维护,当需要修改网站的样式时,一个相同的修改可能涉及多个地方,维护成本高.使用STYLE属性的样式效果最强,会覆盖掉其它几种引入方式的相同样式效果. <div style="color:red"></div>   将样式代码写在页面<STYLE&…
内联样式表 <p style="font-size:50px; color:blue">css内联样式表</p> 内部样式表 <style type="text/css"> p{ font-size: 100px; color: red; } </style> <p>css内部样式表</p> 外部样式表 创建一个cssTest.css的css文件 p{ font-size: 50px; colo…
CSS的引入方式共有三种:行内样式.内部样式表.外部样式表. 一.行内样式 使用style属性引入CSS样式. 示例:<h1 style="color:red;">style属性的应用</h1><p  style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>实际在写页面时不提倡使用,在测试的时候可以使用. 例如: <!DOCTYPE> <html&…
转自:https://blog.csdn.net/qq_38689666/article/details/79039392 一:行内式 <p style="color:red">宝剑锋从磨砺出,梅花香自苦寒来</p> 二:内嵌式,在HTML头部中写css样式 <style> p{ color:red}</style>三:导入式,style.css为样式文件,当HTML页面过大时,会浏览器表现为先加载HTML文档然后在加载css样式,表现出…
1.内联CSS 内联CSS也可称为行内CSS或者行级CSS,它直接在标签内部引入,显著的优点是十分的便捷.高效:但是同时也造成了不能够重用样式的缺点,如果代码行数到达一定长度不建议采用.通常内联CSS作为测试使用,可以查找代码中bug. <body> <div style="width: 65px;height: 20px;border: 1px solid;">测试元素</div> </body> 2.页级CSS 页级CSS也可称为内部…
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type"…
**CSS语法** CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明.选择器通常是您需要改变样式的 HTML 元素. selector {declaration1; declaration2; ... declarationN } 每条声明由一个属性和一个值组成.属性(property)是样式属性(style attribute).每个属性有一个值.属性和值被冒号分开. selector {property: value} 例如下面这行代码的作用是将 h1 元素内的文字颜色定义为红色…
1.使用link标签引入css文件: <head> <link rel="stylesheet" type="text/css" href="assets/css/index.css"> </head> 2.使用style标签: <head> <style> #info-bar{ background-color: #23499E; /* 设置大小为0,从而实现从小到大的动画 */ op…
一.内联样式 <p style="color: sienna; margin-left: 20px"> This is a paragraph </p> 二.内部样式 <head> <style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif&q…
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; background: #000; } </style> </head> <body> <…
三中的使用方法的简单实例如下: 行内样式: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>css行内样式</title> </head> <body> <div style="width:100px;height:100px;background:red;"></div>&g…
1.overflow 溢出隐藏 overflow:hidden 2.display 隐藏不占据原来的文档,即会让出空间 display:black  显示 display:none  隐藏 3.visibility 隐藏占据原来的文档,不会让出原来所占的空间. visibility:hidden 隐藏 visibility:visible 显示…