web前端从0开始--1
博主以前没接触过web前端,最近刚开始学习。
在学习的同时,希望能不断整理总结。于是便有了此博客。
博主技术浅薄,并且第一次写此类博客,希望各位大牛能多多保函。
好了废话不多说了,开始正文。
web前端开发最基础的就是标签。
比如<html> <head> <body> <p> <h1>-<h6>。
通常标签中我们可以定义该标签的属性、事件、名字等
比如<input type=”submit” value=”确定” name=”submit”>就定义了一个名为submit值为确定的提交按钮。
HTML+CSS所实现的网页都是静态的。给我的感觉就是跟学英语的感觉差不多就是,就是去记住英语单词有几个意思(对应标签的使用方法)。
这是一个积累的过程,在学习的同时最好能不停的动手实践。哪怕用个写字板我们都可以自己去个页面出来来试试它的效果。
一般我们在HTML调用CSS有三种:内联式、嵌入式、外部式。
内联式:<p stlye=”color:red,font-size=14px”></p>。
嵌入式:我们把CSS样式单独写出来。下面是设置span标签内的内容颜色为蓝色。一般嵌入式的CSS样式写在<head>标签内。
<style type="text/css">
{
span{
color:red;
}
}
</style>
外部式:一般我们会在<head>标签内写一个<link>用来调用外部的CSS文件。
<link href=”style.css”rel=”stylesheet”type=”text/css”>
通常我们调用外部样式的时候rel=”stylesheet”和type=”text/css”这个是固定不变的,具体rel的其它用法请参考W3School。
三种方式的优先级书序(权值相同情况下):内联式 > 嵌入式 > 外部式
嵌入式大于外部式的前提是嵌入式的代码外部式的后面。
关于权值的,等下再说。
每个css样式定义由两部分组成,形式如下:
选择器{样式;} 例 body{color:red;font-size:12px}
标签选择器
就是利用标签的名字设置该标签的样式。
例:p{font-size:12px;line-height:1.6em;}
类选择器
用法—>.类选器名称{css样式代码} (注意前面是有个英文圆点)
例:<style tpye=”text/css”>.stress{color:red}</style>
<p class=”stress”></p>
类选择器,可以调用调用多个类的样式class=”类1 类2“。中间用空格分开
ID选择器
需要先给标签设置ID,通过ID对标签定义样式
例: <span id=”setGreen”>11</span>
<style tpye=”text/css”>.#setGreen{color:red;}</style>
ID选择器与类不同,在一个 HTML 文档中,ID 选择器会使用一次,而且仅一次。(多次使用依然会有效果,但是到后面我们使用JS的时候会出现冲突,并且一般我们不使用ID选择器而是使用类选择器)
子选择器和后代选择器
子选择器用>,后代选择器用空格。例: h1>span 和 h1 span
关于子选择器和后代选择器,博主的理解是子选择作用于选择器的第一代标签。后代选择器作用于选择器的所有后代。也就是说,如果把选择器当成是第一代,那么子选择器只作用在第二代。而后代选择器则会作用于第二代,第三代,第四代等等。
通用选择器
*{color:red;}作用于所有标签。
伪类选择器
a:hover{color:red;}
继承
某些标签具有继承性,其实继承这个应该很好理解,相信大家都有编程的经验。继承就是子标签继承父标签的属性。、
权值
在简单说完选择器后,我们来看下权值。
标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。例如下面的代码:
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
注意:还有一个权值比较特殊--继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低、
CSS样式执行权值最高的样式。
我们还以通过提添加!important来强制使用样式。例:p{color:red!important;} 注意:!important要添加在分号前面。
常用基本属性
font-size | font-family | lette-spacing | background |
font-style | text-decoration | text-align | height |
color | font-weight | border | margin |
text-indent | position | padding | |
line-height | overflow | width |
元素分类
大体被分为三中不同的类型:块状元素、内联元素、内敛块状元素。
常用的块状元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有:
<img>、<input>
CSS三种基本布局模型:流动型,浮动型,层模型。
web前端从0开始--1的更多相关文章
- Web前端3.0时代,“程序猿”如何“渡劫升仙”
Web前端入行门槛低,很多人在成为前端工程师后很容易进入工作的舒适区,认为该熟悉的业务已熟悉了,然后就是重复用轮子,这样很容易让自己的成长处于原地打转以及低水平重复的状态. 想要不被行业抛弃,就要努力 ...
- web前端3.0时代,“程序猿”如何“渡劫升仙”?
世界上目前已经有超过18亿的网站.其中只有不到2亿的网站是活跃的.且每天都有几千个新网站不断被创造出来. 2017年成果显著,网络上出现了像Vue这样的新JavaScript框架:基于用户体验流程的开 ...
- web前端绘制0.5像素的几种方法
最近完成了公司安排的移动web触屏开发,期间涉及到在移动设备上显示线条,最开始采用PC常用的css board属性来显示1个像素的线条,但是发现在移动设备上并不美观,参考淘宝.京东的触屏发现它们均是采 ...
- Web前端开发神器--WebStorm(JavaScript 开发工具) 8.0.3 中文汉化破解版
WebStorm(JavaScript 开发工具) 8.0.3 中文汉化破解版 http://www.jb51.net/softs/171905.html WebStorm 是jetbrains公司旗 ...
- Web前端三大框架_angular.js 6.0(二)
Web前端三大框架_angular.js 6.0(一) 需要视频教程,看头像昵称处 一.Angular 6.0 1.1样式 html中引入样式:内嵌式,外链式,行内式. ng6中组件引入样式的方式也 ...
- Web前端开发的应用和前景——web 1.0到web 3.0
Web前端开发的应用和前景--web 1.0到web 3.0 Web1.0:(只读时代) 以静态.单向阅读为主,网站内信息可以直接和其他网站信息进行交互,能通过第三方信息平台同时对多家网站信息进行整合 ...
- 在一个空ASP.NET Web项目上创建一个ASP.NET Web API 2.0应用
由于ASP.NET Web API具有与ASP.NET MVC类似的编程方式,再加上目前市面上专门介绍ASP.NET Web API 的书籍少之又少(我们看到的相关内容往往是某本介绍ASP.NET M ...
- Web前端温故知新-CSS基础
一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...
- 也许你需要点实用的-Web前端笔试题
之前发的一篇博客里没有附上答案,现在有空整理了下发出来,希望能帮助到正在找工作的你,还是那句话:技术只有自己真正理解了才是自己的东西,共勉. Web前端笔试题 Html+css 1.对WEB标准以及w ...
随机推荐
- 最新榜单!消金企业TOP10,数据、风控、催收服务方TOP5
最新榜单!消金企业TOP10,数据.风控.催收服务方TOP5 布谷TIME2016-12-15 17:47:59消费 风控阅读(164)评论(0) 声明:本文由入驻搜狐公众平台的作者撰写,除搜狐官方账 ...
- java第一天
今天完成的事情: [主线] 1.什么是接口??? 接口(interface)是类与类之间的一种约定,一般而言,实现某个接口,意味着该类必须实现接口中的所有方法. 2.接口的特性. ...
- plist基本操作
重要概念:某些路径下“只能读,不能写”的原因 iPhone.ipad真机上 Resouces文件夹:是只读的,无法写入. document 和temp文件夹:可读,可写. 一.工程结构
- Oracle分页查询=======之伪列的使用
========伪列========== 在Oracle数据库中,伪列不存在表中,但是可以从表中查询到 例如:SELECT ROWID 伪列,tname 教师姓名 FROM teacher; ==== ...
- 模拟微信上传图片(带预览,支持预览gif)
一.Html <style type="text/css"> #previewDiv{width:50px;height:50px;overflow:hidden;po ...
- Mysql导入导出非常慢解决办法
MySQL导出的SQL语句在导入时有可能会非常非常慢,经历过导入仅45万条记录,竟用了近3个小时.在导出时合理使用几个参数,可以大大加快导入的速度. -e 使用包括几个VALUES列表的多行INSER ...
- PHP加速处理插件 Zend Optimizer,Zend Guard Loader 和 Zend Opcache 区别
PHP 5.3.X 以前版本 为 Zend Optimizer PHP 5.3.X 之后 更名为 Zend Guard Loader 可以帮助php执行加密后的php代码 安装实例以Ubu ...
- HTML5新增标签
section标签 <section>标签,定义文档中的节.比如章节.页眉.页脚或文档中的其它部分.一般用于成节的内容,会在文档流中开始一个新的节.它用来表现普通的文档内容或应用区块,通 ...
- 关于 XMLHttpRequest对象的onreadyStateChange方法
最近做了一个Ajax的demo,前台用HTML+javascript,后台用一个servlet来响应,流程如下: 页面点击链接事件,由js捕获,生成一个请求到后台,servlet处理后给出响应信息,并 ...
- mybatis 对于基本类型数据传值的问题
最近在开发的时候,遇到一个小问题: Caused by: org.apache.ibatis.reflection.ReflectionException: There is no getter fo ...