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要添加在分号前面。

(未完待续)

时间: 2024-10-14 03:44:41

web前端从0开始--1的相关文章

web前端介绍

web前端内容介绍 标签(空格分隔): web前端 web1.0时代的网页制作 网页制作是web1.0时代的产物,那个时候的网页主要是静态网页,所谓的静态网页就是没有与用户进行交互而仅仅供读者浏览的网页,我们当时称为"牛皮癣"网页.例如一篇QQ日志.一篇博文等展示性文章.在web1.0时代,用户能做的唯一事情就是浏览这个网站的文字图片内容,这时用户也不能像现在在大多数网站都可以评论交流(缺乏交互性).相信可能大多数人都听过"网页三剑客 Dreamweaver+Firework

Web前端开发神器--WebStorm(JavaScript 开发工具) 8.0.3 中文汉化破解版

WebStorm(JavaScript 开发工具) 8.0.3 中文汉化破解版 http://www.jb51.net/softs/171905.html WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为“Web前端开发神器”.“最强大的HTML5编辑器”.“最智能的JavaScript IDE”等.与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能.

WEB前端目录架构-v1.0

============================================================================== 前端目录架构-v1.0(项目级)============================================================================== Project/ ├── css/ │  ├── icon/ │  ├── page/ │ ├── base.css │  ├── reset.css

Web前端三大框架_angular.js 6.0(二)

Web前端三大框架_angular.js 6.0(一)点击阅读angular第一天昵称,领取全套angular视频教程一.Angular 6.0 1.1样式html中引入样式:内嵌式,外链式,行内式. ng6中组件引入样式的方式也有三种: 外链式 ng6中,已经将css预编译语言配置出来了,因此我们可以直接使用他们 在组件注解类中,通过styleUrls引入样式文件,是一个数组,可以引入多个文件 如果引入的是.css文件,就是css语法 如果引入的是.less文件,就是less语法 如果引入的是

从0开始学web前端

什么是web前端   所谓web前端,就是web给用户展示的东西. 在国内,web前端开发是一个全新的行业,所以国内大学内并没有成熟的课程体系,所以很多学习的人无非是通过自学,以及培训这两种方式.但是自学是很难的,而且现在网上很多的视频以及学习资料都是过期的. 网页制作是计算机专业同学在大学期间都会接触到的一门课程,而学习网页制作所用的第一个集成开发环境(IDE)想必大多是Dreamweaver,这种所见即所得的"吊炸天"IDE为我们制作网页带来了极大的方便.入门快.见效快让我们在不知

Web前端面试题目及答案汇总

前端新人在面试前都比较焦虑,担心回答不上面试官的问题,也担心自己紧张,其实这都是心理没底的表现,今天和大家分享web前端开发常见面试题及答案,希望可以帮助即将面试的前端同学顺利通过面试. HTML/CSS部分 1.什么是盒子模型? 在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分.这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区域或

Web 前端开发学习之路(入门篇)

字数1374 阅读4622 评论0 喜欢49 以前学习过一段时间的web前端开发,整理了一些我看过的/我认为比较好的学习资料(网站.书籍).不要问我为啥没有进阶版,我只是一条产品汪而已,求轻喷.== 以下引用知乎 @李路 的话. 以我的经验,大部分技术,熟读下列四类书籍即可. 入门,用浅显的语言和方式讲述正确的道理和方法,如head first系列全面,巨细无遗地探讨每个细节,遇到疑难问题时往往可以在这里得到理论解答,如Definitive Guide/Programming xx系列实践,结合

web前端笔记1

web1.0时代:(联合) web2.0时代:(互动) 互联网没有崩溃,比以往更加重要.更加注重用户的交互作用. web3.0时代:(技术革新.统一通信协议) 语义化实现.(发展阶段) web4.0(AI人工智能) web前端工程师: 侠义:html.css.js 实习生要求:

腾讯web前端开发工程师笔试题及答案

1. 如何实现事件委托? 首先要知道什么是事件委托. 考虑一个列表,在li的数量非常少的时候,为每一个li添加事件侦听当然不会存在太多性能方面的问题,但是当列表非常的长,长到上百上千甚至上万的时候(当然只是一个解释,实际工作中很少遇到这么多li的情况),为每个li添加事件侦听就会对页面性能产生很大的影响. 就像下面这段代码: <!DOCTYPE HTML><html><head><meta charset="utf-8" /><ti