前端随心记---------HTML5+CSS系列3.0

表单

表单的作用:用来收集用户的信息的;

表单框 :

表单
?表单的作用:用来收集用户的信息的;
表单框 :
<form name="表单名称" method="post/get" action="提交地址"> </form>
<input type="text" value="默认值"/>   文本框
<input type="password" />           密码框
<input type="submit" value="按钮内容" />  提交按钮
<input type="reset" value="按钮内容" />     重置按钮
<input name="‘" type="button" value=“按钮内容” />  按钮

(button和submit的区别是 ,submit是提交按钮 起到提交信息的作用,button只起到跳转的作用,不进行提交。) 

css介绍 

  CSS(cascading style sheets) 汉译为层叠样式表,是用于控制网页样式

Css层叠性

CSS层叠性是指CSS样式在针对同一元素设置同一属性时,依据层叠规则(权重)来处理冲突,选择应用权重高的CSS选择器所指定的属性,一般也被描述为权重高的覆盖权重低的,因此也称作层叠它的上级标签的样式会自动继承到其所有下级标签

Css样式表的创建及分类

1.行内样式表(行间样式,内联样式,嵌入式样式)

语法:<标签 style=“属性:属性值;属性:属性值;”></标签>

例如:<p style=”color:red;”>这是内容</p>

实际工作中不用,出错调式的时候用

2、内部样式表(嵌套到页面中)

创建语法:

<style type="text/css">

css语法  例如:div {width:200px;}

</style>

注:使用style标记创建样式时,最好将该标记写在<head></head>之间;

用的比较少,不方便维护,写小的案例效果的时候比较适用

3、引用外部样式表

 (1)  引用写法:

<link href="目标文件路径"  rel="stylesheet" type="text/css"  />

说明:

      写在<head>与</head>之间。

      rel:用于定义文档关联,表示关联样式表;

      type:定义文档类型;

外部链接最常用并且可以多用,结构清晰,方便后期维护修改

  (2)、导入写法

<style type="text/css">

@import url("目标文件的路径及文件名全称");

</style>

注:@和import之间没有空格 url和小括号之间也没有空格;必须结尾以分号结束; 

四、样式表的作用域

行内样式的作用域是当前标签,内部样式的作用域 是当前文件,外部样式表的作用域是有关联的所有文件。

五、样式表的优先级

行内样式表的优先级别最高

内部样式表与外部样式表的优先级和书写的顺序有关,后书写的优先级别高。

CSS基础语法

CSS语法由两部分组成:选择器(选择符)、声明

选择器 {属性: 属性值; } 

CSS语法说明:

  • 每个CSS样式由两部分组成,即选择符和声明,声明又分为属性和属性值;
  • 属性必须放在花括号中,属性与属性值用冒号连接。
  • 每条声明用分号结束。
  • 当一个属性有多个属性值的时候,属性与属性值不分先后顺序。
  • 在书写样式过程中,空格、换行等操作不影响属性显示

css选择器定义

选择器(符)的定义

选择符表示要定义样式的对象,可以是元素(标签)本身,也可以是一类元素或者制定名称的元素.

(1)标签选择器(类型选择器/元素选择器):

标签选择符是根据html语言中的标记来直接定义

语法:标签名称 {属性:属性值;}

  实例:    div { width: 30px;}

说明:

a)元素选择符就是以文档语言对象类型作为选择符,即使用结构中元素名称作为选择符。例如body、div、p,img,em,strong,span......等。

b)所有的页面元素都可以作为选择符

用法:

当统一文档某个元素的显示效果时,可以使用标记(类型)选择符;

类选择器( class选择器

  • 类选择器使用必须要通过引用才能生效

语法:.class名称{属性:属性值;}

说明:

  • 当我们使用类选择符时,应先为每个元素定义一个类名称,
  • 类选择符的语法格式是:"如:<div class="top"></div>"
  • 用法:class选择符更适合定义一类样式;

一个标记可以设置多个class名  语法:<标记 class="名称1 名称2" ></标记>

(3)id 选择器

语法: #id名{属性:属性值;}

说明:当我们使用id选择符时,应该为每个元素定义一个id属性;

如:<div id="top"></div>

起名时要取英文名,不能用关键字:(所有的标记和属性都是关键字)

(1)可以给每个元素使用id选择符,但id是元素的唯一标识符,不可出现重复的id名;

(2) 最大的用处:创建网页的外围结构。

(4) 通配符:*

      语法:* {属性:属性值;( padding:0; margin:0;)}

用法:常用来重置样式。

 

(5)伪类选择器

a:link {color: #FF0000;}          /* 超链接的初始状态 */

a:visited {color: #00FF00;} /* 超链接被访问后的状态*/

a:hover {color: #FF00FF;}     /* 鼠标划过超链接时的状态*/

a:active {color: #0000FF;} /* 鼠标按下时超链接的状态 */

注意:

按照以上顺序编写都可正常显示样式,否则部分效果失效

(6)群组选择器(集合选择器)

语法:选择器1……,选择器5 {属性:属性值;}

说明:当有多个选择器应用相同的样式时,可以将每个选择器用“,”分隔的方式,合并为一组。

实例:.div, #div, p{width:100px;}

(7) 包含选择器(后代选择器)

语法:  选择器1  选择器2{属性:属性值;}

说明:选择器1和选择器2用空格隔开,含义就是选择器1中包含的所有子选择器2;

实例: div   ul  li { height:200px; }

(8) 属性选择器

语法:  [class=“box”]{属性:属性值;}

说明:元素中必须包含此属性

实例: [ class=”box”] { height:200px; }

扩展:

*link和import导入外部样式的区别:

差别1:老祖宗的差别:link属于XHTML标签,而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS。

差别2:加载顺序的差别:当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式。

差别3:兼容性的差别。:@import是CSS2.1提出的,所以老的浏览器不支持,@import只在IE5以上的才能识识别,而link标签无此问题。

差别4:使用dom控制样式时的差别:当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的.

原文地址:https://www.cnblogs.com/hudunyu/p/11409916.html

时间: 2024-10-10 06:27:35

前端随心记---------HTML5+CSS系列3.0的相关文章

前端随心记---------HTML5+CSS系列4.0

盒模型 一. 盒模型的概念和组成 盒子模型是CSS的基石,指定标签如何显示以及元素间相互关系:  页面上的每个元素都被当成一个矩形盒子,占据一定的页面空间,这个盒子由内容(content).内边距(补白,填充,padding).边框(border)和外边界(margin)组成: 1) padding内填充 padding区域在border与content之间: 背景色和背景图像会覆盖padding和content组成的区域: padding的使用方法 padding,在设定页面中一个元素内容到元

前端随心记---------HTML5+CSS系列2.0

超链接的应用: 语法:    <a href="连接地址" title="提示信息" target=”属性值”> 链接文本/图片</a> 属性(名):target:页面打开方式 默认属性值:_self. I当前窗口 属性值:_blank 新窗口打开  <a href="#">空链接</a>  HTML标记的语法是 1.双标记: <标记(签)名称 属性1名="属性1值" 属性

前端随心记---------vuejs基础学习3.0

watch ch 和cpmpute的区别: 1.watch 表示监听某个模型变量的状态变化.watch监视的东西多一些,computed所依赖的东西都写在一个函数里. 2.特殊场景:如果业务出现了异步操作(回调函数)则这个时候computed是存在返回值,不能在使用,但是watch里面的没有返回值的概念,可以进行异步代码的调用. 小案例代码: <script type="text/javascript"> var vm = new Vue({ el: '#box', dat

前端随心记---------Javascript系列(第八节.BOM)

BOM: browser object model 浏览器对象模型 window 对象的子对象,也是属性 window document:浏览器是代表html的文档对象. history location: url对象 screen navigator window对象的常见属性和方法: 三个弹出框(内置方法,特点: 都会阻塞浏览器代码执行); alert( ); 弹出框 confirm( ); 确认框 prompt( ); 输入框 两个定时器; setInterval( ); setTimeo

前端随心记---------Javascript系列(第九节.DOM)

DOM document object model 对象: 属性 .事件 .方法节点: html : 是dom模型的根节点 所有的html标签都叫 元素节点 nodeType=1 所有的标签的属性叫做 属性节点 nodeType=2 所有的标签内容叫做 文本节点 nodeType=3 注:: 8表示的注释节点 9表示的根节点 一切都是节点 tagName 标签名称 nodeName 节点名称 nodeType 节点类型 nodeValue 节点对象的文本内容,是一个字符串. 节点关系 obj.o

前端随心记---------Javascript系列(第十一节.事件event)

事件对象(event) 事件 : 对某个元素的某种操作 事件对象: 当触发某个事件,产生的对象.就是事件对象,event使用的前提,必须有事件操作 var e=e || event ; 坐标属性:pageX /pageY 相对于文档顶部和左侧的坐标 ie8为undefined;clientX /clientY 相对于document窗口的顶部和左侧的坐标,如果出现滚动条,pageY=clienY+页面滚动的距离offsetX /offsetY 相对于操作的元素内部偏移量 var disx=e.o

前端随心记---------RPA系列(一)

RPA Robotic Process Automation 机器流程自动化 简而言之:就是虚拟劳动力 概念: RPA是智能化软件,可以理解为自动化机器人.只要预先设计好使用规则,RPA就可以模拟人工,进行复制.粘贴.点击.输入等行为,协助人类完成大量“规则较为固定.重复性较高.附加值较低”的事情. RPA产品形态: 当下的市场上存在三种RPA产品形态: 第一种是企业定制化的独立RPA软件,打开电脑点击即可使用: 第二种是应用于财会.金融等行业场景的平台化RPA产品,客户端包括图形化设计器.执行

前端随心记---------vuejs流行的UI框架

一:Element element ui框架的按钮组件,这款由饿了么前端开源的UI框架,一经面世,就收获大量程序员的芳心.在github 上更是高达29.8k的star早已说明一切.用于开发PC端的页面还是绰绰有余的.如果说你是用vue开发者,却没用过element UI,那你肯定不是合格的vue开发者. 文档地址:http://element-ui.cn 二:iview iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品.使用单文件的 Vue 组件化

前端随心记---------前海面试汇总

react里面:state和prop的区别?setState为什么是异步的?组件传值有几种方式? 答:1.prop用于定义外部接口,state用于记录内部状态.2.prop的赋值在外部使用组件时,state的赋值在组建内部.3.组件不应该改变prop的值,但是state的存在目的是让组件来改变. 2.setState异步更新状态使得并发更新组件成为可能. 资料:https://segmentfault.com/a/1190000013040438?utm_source=tag-newest 3.