2017/5/10 freeCodeCamp 前端部分-html+css-总结

HTML即Hyper Text Markup Language(超文本标记语言)。

<h1>Hello</h1>

开始标签,结束标签。中间为显示文本。标签属性在开始标签中。

基本标签结构:

<html>  <!-- 根标签-->

<head>

<title><title>

</head>

<body>

</body>

<html>

<!- -- -> 增加/删除注释

通过在开始标签中修改属性,从而修改显示文本的属性。

<h2 style="color: blue">CatPhotoApp</h2>

用css的方式修改如下:

<style>
  选择器 {属性名称: 属性值;}
  h2 {color: red;}
</style>

用css声明类选择器:

<style>
  .blue-text {
    color: blue;
  }
</style>

然后在标签上应用:

<h2 class=‘blue-text‘>我家的猫咪</h2>

段落字号,字体修改:

p {
font-size: 16px;
font-family: Monospace;
}

引入字体:

<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css"> <!--以谷歌Lobster字体为例-->

图片添加

<img src="https://www.your-image-source.com/your-image.jpg"> <!-- 图片大小格式修改与字体修改方式一致-->

<style>
  .larger-image {
    width: 500px;
  }
</style>

然后用class继承。

初次写博,想换一种方式。

时间: 2024-08-01 02:23:42

2017/5/10 freeCodeCamp 前端部分-html+css-总结的相关文章

前端基础之css复习

!/usr/bin/env python# -*- coding: utf-8 -*-#前端基础之CSS#CSS 语法#CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明.''' selector { #选择器 property: value; #属性:值 property: value; ... property: value } '''#例如:#h1 {color:red; font-size:14px;}# css的四种引入方式#1.行内式# 行内式是在标记的style属性中设定

作为一个前端工程师,CSS是最基本的入门课,你都能做出来吗?

CSS在很多程序员看来那只不过是雕虫小技, 实际上CSS3发展到今天已经强大到超乎你的想象, 当然对于低端浏览器使用者来说,还是以前那样——囧 有时候搞CSS开发确实需要很多想象力,下面一组纯CSS3特效足以描述这一点 以下内容转载自[http://design.yesky.com/show/466/11497966_3.shtml] 设计欣赏:纯CSS3「绘制」的图形图标 IE 标志 作者: Andreas Jacob 在 Firefox 3.6+ 以及Safari 5 上显示最佳.使用了圆角

前端开发之CSS基础知识02

重要: 行内元素中只能容纳文本或其他的行内元素 a标签例外 文字类型的块标签,不要放其他块元素 如 P H1 CSS规范: .demo {} 空格 font-size: 12px; 空格 .a1, .a2, .a3 {} 空格 后代选择器或子代选择器最好不要超过三层 文字分为 顶线 中线 基线 底线 CSS特性: 层叠行:若冲突,按照最后的为准 CSS权重(重要): 标签 0.0.0.1 类选择器 0.0.1.0 id选择器 0.1.0.0 内联样式 1.0.0.0 !important 无穷大

web前端篇:CSS使用,样式表特征,选择器

目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 CSS :Cascading Style Sheet 层叠样式表 作用 :修饰和美化页面元素,实现网页排版布局 2.CSS使用 1行内样式/内联样式 特点 :在具体的标签中使用style属性,引入CSS样式代码 语法: CSS 样式声明 / 语句: 对当前元素添加样式 语法:CSS 属

前端深入之css篇|你真的了解“权重”吗?

原文:前端深入之css篇|你真的了解"权重"吗? 写在前面 权重这个概念,相信对许多进行过前端开发的小伙伴来说肯定并不陌生,有时候一个样式添加不上,我们就会一个 !important 怼上去,一切就好像迎刃而解了.但还有的时候,!important也并不能解决我们的问题,下面请跟随我来详细了解一下css的权重吧! 探索权重 指某一因素或指标相对于某一事物的重要程度,其不同于一般的比重,体现的不仅仅是某一因素或指标所占的百分比,强调的是因素或指标的相对重要程度,倾向于贡献度或重要性. 以

前端深入之css篇丨2020年前,彻底掌握css动画【transition】

原文:前端深入之css篇丨2020年前,彻底掌握css动画[transition] 写在前面 马上就2020年了,不知道小伙伴们今年学习了css3动画了吗? 说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了许多程序员比较排斥来学习css动画(至少我是),但是一个不懂css动画的前端工程师不能称之为掌握css3,其实当你真正学习css动画之后,你会被它的魅力所吸引的,它可以减少代码量.提高性能. 话不多说,马上

前端技术之CSS实现图片垂直居中

前端技术之CSS实现图片垂直居中技术 maybe yes 发表于2015-03-14 18:52 原文链接 : http://blog.lmlphp.com/archives/86/The_front-end_technology_pure_CSS_to_achieve_image_vertically  来自 : LMLPHP后院 让 图片实现水平居中比较简单,只需要在父级容器中添加属性 text-align 为 center 即可.使用纯 CSS 实现图片的垂直居中,可以将图片包裹容器的 d

前端开发:css基础知识之盒模型以及浮动布局。

前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把它写到我的博客中,想知道自己过来翻就好啦 ^_^  下面楼主把当前的自己对css的基础认知一一给大家道来...... 盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们

第一期周二航拍视频分享 2017/07/10

2017/07/10 分享方式:1.讲解航拍镜头语言 2.以一个经典视频为例讲解其中所用到的航拍语言  3.最后再看一个视频,同时大脑应思考视频中出现的镜头语言 1.讲解航拍镜头语言 航拍基本动作 直飞 1.直线向前飞,镜头向前: 这是最常用的手法之一,一般拍摄海岸线.沙漠.山脊.笔直的道路等等也多用这种手法. 画面中镜头向前移动,也可从地面慢慢抬头望向远处,镜头一气呵成. 2.直线向前飞,镜头俯瞰: 正俯的镜头常用于拍摄城市.森林,特别是一条笔直的路.一排整齐的车辆,树,房子等等. 直线向前飞