HTML AND CSS的基本元素介绍

一、HTML5的基本元素:

1.      大部分元素都有一个开始标记和一个结束标记。开始标记和结束标记的唯一区别就是结束标记多了一个/。例如<h1></h1>

2.      标题:<h1> </h1>

h是英文header标题的缩写,h1是主标题(一级标题),h2是副标题(二级标题),h3、h4、h5、h6依次递减字体的大小。

3.     
段落:<p></p>

p是英文paragraph段落的缩写,经常被用来创建一个段落。

4.     
注释:<!—内容-->

5.     
图片:<img  scr=”具体地址”>

6.     
Web开发者通常用lorem ipsum text来做占位符,占位符就是占着位置的一些文字,没有实际意义。

二、属性的设置:

1.内联样式

例如:<h2 style="color: blue">文字</h2>   这里的style="color:
blue"
就是颜色属性,这句话表示给h2元素添加了inline
style(内联样式)。

2.使用层叠样式表CSS(Cascading Style Sheets),更易于维护。

在代码的最顶端,创建一个如下的style元素:

<style>

元素选择器 {属性名称: 属性值;}

</style>

注意:一定要在属性值的后面加上分号;,表示给所有的h2元素都添加了这样的属性。

(1)    
元素选择器(h1、h2、p…)

例如:<style>

h2
{

color:
blue;

}

</style>   //h2便是元素选择的结果

2)类选择器(class):需要在每个类前面加一个点.

例如:<style>

.blue-text {

color: blue;

}

</style>  //在每个元素中只需要添加class=“类名” 就可以了。如果需要添加的有多个属性类,则class=“类名1  类名2” 即可(中间空格号分开)。

三、属性

1.字号:font-size: 30px;

2.字体:font-family:
Sans-serif;

有几种默认的字体是所有浏览器都可用的,包括Monospace、Serif和Sans-Serif。如果该字体1不可用时,则下降到字体2:front-family:字体1,字体2;即可.

3.边框半径属性:border-radius

四、标签

1. link标签:<link
href="https://fonts.gdgdocs.org/css?family=Lobster"
rel="stylesheet" type="text/css"> //代码顶部用link标签来引入谷歌Lobster字体,然后字体属性就可以写为:font-family: Lobster ;则引入了谷歌字体。

//做了个别的基本简介,以后遇到新的知识会及时跟进!

时间: 2024-11-09 00:23:09

HTML AND CSS的基本元素介绍的相关文章

CSS 3动画介绍

原文:A Beginner's Introduction to CSS Animation 译文:一个初学者对CSS动画的介绍 译者:dwqs 现在,越来越多的网站使用了动画,并且形式多样,如GIF.SVG.WebGL.背景视频等等.当在web中恰当使用动画时,它可以给网站注入活力和良好的交互性,给用户提供额外的一层反馈和体验. 在这篇文章,我将向你介绍CSS动画,随着浏览器对动画支持的改善,一种高效率的做事方式变得越来越流行.考虑到基础知识,我将快速建立一个从正方形变成圆形的动画案例. 先看看

与换行相关的css属性简单介绍

与换行相关的css属性简单介绍:在css布局中可能需要人为的进行操作是否换行,如何换行,本章节就就做一下简单介绍.一.word-break属性:此属性用来设定文本如何进行换行.语法结构: word-break:normal | break-all | keep-all 参数解析:1.normal:默认值,原则上规定在断字点换行,通俗的说就是在单词与语单词之间可以进行换行,但是如果单词特别的长,超出了行的长度,可以从单词内部断开进行换行.2.break-all:此属性值能够实现强制将单词从内部截断

CSS后面部分介绍及用法

CSS后面部分介绍及用法一.伪类选择器:(标示是:{冒号})1.a:link(未访问的链接)2.a:visited (已访问过后的效果)3.a:hover (鼠标移动到链接上的效果)4.a:active (点击时的效果) 设置的顺序必须按照: :link  :visited  :hover  :active顺序写 二.伪元素 1.:first-child  选择元素的第一个子元素   2.:focus 获得焦点   3.:first-letter  获得第一个字 三.css样式   背景:背景和

css属性分类介绍

css属性分类介绍 CSS分类目录 文本/字体/颜色 文本相关 字体相关 颜色相关 背景相关 大小/布局 大小属性 margin 外边距 padding 内边距 border 边框 position 定位 列表/表格 多列属性 可伸缩框属性 列表属性 Grid属性 Table属性 动画属性 Animation 动画属性 Transition 过渡属性 CSS属性分类 文本/字体/颜色/背景 字体类 font-family:指定字体 需要考虑客户端机器上是否装有字体 可以排列多个字体,用逗号分隔,

CSS hack是什么?IE6\7\8\9\10浏览器的CSS hack大全介绍

CSS hack由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozillafirefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果. 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果. 这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack!目前IE内核浏览器仍然是国内主流浏览器,占据着PC浏览器的

HTML/CSS基础与介绍

CSS介绍 CSS是指层叠样式表,CSS样式表极大的提高了工作效率 CSS基础语法  1. 首先选择一个属性  2. 选择了属性以后,用大括号括起来  3. 括号里面是对应的属性和属性值,如: selector { property: value; } 举一个实际的例子,就像这样: h1是属性,然后一个大括号,括号中的color是属性,后面跟着对应的属性值red,设置结束后需要用;来分别各个属性 h1 { color: red; font-size: 14px; } 使用CSS样式: 需要在ht

最全的CSS尺寸单位介绍

前端开发过程中,尺寸单位是我们必须用到的,下面我们对css中常见的几种尺寸单位px,em,rem,rpx进行逐一介绍在这之前,需要先对几个概念进行普及介绍 基本概念 (以下概念读起来可能有些晦涩,如果看不懂也没关系) 像素 它不是自然界的物理长度,指基本原色素及其灰度的基本编码. css中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理像素是不同的.?在为桌面浏览器设计的网页中,我们无需对这个津津计较,但在移动设备上,必须弄明白这点.?在早先的移动设备中,屏

CSS速成教程—介绍网页背景——3

1.CSS 背景: css 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果 属性 描述 background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-color 设置元素的背景颜色 background-image 把图片设置为背景 background-position 设置背景图片的起始位置 background-repeat 设置背景图片是否及如何重复 表格中的属性我们将会通过下面两个例子给大家一一讲述. 例子 1:背景颜色 bo

CSS Hack技术介绍及常用的Hack技巧集锦

一.什么是CSS Hack? 不同的浏览器对CSS的解析结果是不同的,因此会导致相同的CSS输出的页面效果不同,这就需要CSS Hack来解决浏览器局部的兼容性问题.而这个针对不同的浏览器写不同的CSS 代码的过程,就叫CSS Hack. CSS Hack常见的有三种形式:CSS属性Hack.CSS选择符Hack以及IE条件注释Hack, Hack主要针对IE浏览器. 1.属性级Hack:比如IE6能识别下划线"_"和星号" * ",IE7能识别星号" *