HTML详解连载(4)

这篇具有很好参考价值的文章主要介绍了HTML详解连载(4)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

专栏链接 link

下面进行专栏介绍

本专栏是自己学前端的征程,纯手敲的代码,自己跟着黑马课程学习的,并加入一些自己的理解,对代码和笔记
进行适当修改。希望能对大家能有所帮助,同时也是请大家对我进行监督,对我写的代码进行建议,互相学习。

开始喽

HTML详解连载(4),前端,html,前端

CSS定义

层叠样式表,是一种样式表语言,用来描述HTLML文档的呈现(美化内容)。

书写位置

title标签下方添加style双标签,style标签里书写CSS代码。

示例

<title>CSS初体验</title>
<style>
/*选择器{}*/
p{
/*CSS属性*/
   color:red;
}
</style>

注意

属性名和属性值成对出现->键值对

CSS引入方式

内部样式表:学习使用

CSS代码写在style标签里面

外部演示表:开发使用

CSS代码写在单独的CSS文件中(.css)
在HTML使用link标签引入

代码示例

<link rel=”stylesheet href=”./my.css>

行内样式

配合javaScript使用
CSS写在标签的style属性值里

代码示例

<div style=”color=red;font-size:20px;”>这是div标签</div>

选择器

作用

查找标签,设置样式

基础选择器

标签选择器
类选择器
id选择器
通配符选择器

标签选择器

使用标签名作为选择器->选中同名标签设置相同的样式。

举例

p,h1,div,a,img…

特点

选中同名标签设置相同的样式,无法差异化同名标签的样式

类选择器

作用

查找标签,差异化设置标签的显示效果

步骤

定义类选择器-> .类名
使用类选择器->标签添加class=”类名”

<style>
/*定义类选择器*/
.red{
color:red;
}
</style>

<!--使用类选择器-->
<div class=”red”>这是div标签</div>
强调

一个类选择器可以给多个标签使用
一个标签可以有多个类名,class属性值写多个类名,类名间用空格隔开
HTML详解连载(4),前端,html,前端

注意

类名自定义,不能纯数字或中文,尽量用英文命名

开发习惯

类名见名知意,多个单侧可以用-连接,例如news-hd

id选择器

作用

查找标签,差异化设置标签的显示效果

场景

id选择器一般配合JavaScript使用,很少用来设置CSS格式

步骤

定义id选择器->#id名
使用id选择器->标签添加id=”id名”

规则

同一个id选择器再一个页面只能使用一次

通配符选择器

作用

查找页面所有标签,设置相同样式

  :  * ,不需要调用,浏览器自动查找页面所有标签,设置相同的样式
范例
*{
color:red;
}

新属性

属性名 作用
width 宽度
height 高度
background-color 背景色

字体大小

属性名

font-size

属性值

文字尺寸,PC端网页最常用的单位px

示例

p{
	font-size:30px;
}

HTML详解连载(4),前端,html,前端

字体粗细

属性名

font-weight

属性值

数字(开发使用)
正常400 加粗700

关键字

正常normal 加粗 bold

字体样式(是否倾斜)

作用

清楚文字默认的倾斜效果

属性名

font-style

属性值

正常(不倾斜):normal
倾斜:italic

HTML详解连载(4),前端,html,前端文章来源地址https://www.toymoban.com/news/detail-647190.html

到了这里,关于HTML详解连载(4)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HTML5+CSS3+移动web 前端开发入门笔记(二)HTML标签详解

    排版标签用于对网页内容进行布局和样式的调整。下面是对常见排版标签的详细介绍: 标题使用至标签进行定义。定义最大的标题,定义最小的标题。具有align属性,属性值可以是:left、center、right。 将给定的HTML代码转换为Markdown格式的标题标签如下所示: 效果演示: H3:

    2024年02月07日
    浏览(65)
  • 原生HTML+CSS+JS制作自己的导航主页(前端大作业,源码+步骤详解)

    链接:https://pan.baidu.com/s/1uaRCJXyIrY56NXabau4wjw?pwd=LDL6 提取码:LDL6 咕咕了好久啦,今天使用原生HTML+CSS+JS做一个很简单的个人定制的导航主页吧! 先看下完整的效果图吧! 接下来的文章将逐步带领大家制作,现在太晚了,就精简了下,删除了部分动画效果,项目整体非常简单!

    2024年01月22日
    浏览(46)
  • 【前端HTML】HTML基础

    HTML,HyperText Markup Language,超文本标记语言。 标签是HTML的基本组成单位。 标签分为: 双标签 和 单标签 . 标签名不区分大小写,但是推荐小写 双标签: 标签名标签体/标签名 单标签: 标签名 用于给标签提供 附加属性 。 可以写在 起始标签 或 单标签 中。 标签名 属性名=“属

    2024年01月24日
    浏览(43)
  • 【web前端基础之HTML】——HTML基本知识

    hn 元素用于HTML文件的标题输出,一行只显示一个(块元素),具有换行输出和加粗的效果。n的值是1~6,代表6个级别标题,1字号最大,随数字增大字号减小。 案例:demo1.html⬇️ 效果图⬇️ br 是个单标签,没有 结束标记,主要功能是让文字换行输出。 案例:demo2.html⬇️ 效

    2023年04月19日
    浏览(51)
  • 前端基础(HTML)——html介绍 & 常用标签 & 几个案例

    html是啥,常见的标签,几个例子 Hyper Text Markup Language (超 文本 标记语言) 简写:HTML,HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件, 通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片

    2024年02月07日
    浏览(47)
  • 【前端】-初始前端以及html的学习

    💖作者:小树苗渴望变成参天大树🎈 🎉作者宣言:认真写好每一篇博客💤 🎊作者gitee:gitee✨ 💞作者专栏:C语言,数据结构初阶,Linux,C++ 动态规划算法🎄 如 果 你 喜 欢 作 者 的 文 章 ,就 给 作 者 点 点 关 注 吧! 今天博主来介绍关于前端相关的知识,博主之前将的都是

    2024年03月12日
    浏览(43)
  • 【前端|HTML系列第2篇】HTML零基础入门之标签元素

    大家好,欢迎来到前端入门系列的第二篇博客。在这个系列中,我们将一起学习前端开发的基础知识,从零开始构建网页和Web应用程序。本篇博客将为大家介绍HTML(超文本标记语言)常用标签元素,帮助零基础小白快速入门。 掌握html常用表情的使用、基础特性以及用途。

    2024年02月11日
    浏览(67)
  • 前端三剑客 HTML+CSS+JavaScript ② HTML相关概念

    他们这样形容我 是暴雨浇不灭的火                                                       —— 24.4.18 学习目标         理解                 HTML的概念                 HTML的分类                 HTML的关系                 HTML的语义化         应用

    2024年04月23日
    浏览(55)
  • 【前端|HTML系列第1篇】HTML的基础介绍与初次尝试

    大家好,欢迎来到前端入门系列的第一篇博客。在这个系列中,我们将一起学习前端开发的基础知识,从零开始构建网页和Web应用程序。本篇博客将为大家介绍HTML(超文本标记语言)的基础概念和标签,帮助你快速入门。 本期学期目标是: 了解什么是HTML 学习了解一个完整

    2024年02月11日
    浏览(41)
  • 前端 | ( 十)HTML5简介及相关新增属性 | 尚硅谷前端html+css零基础教程2023最新

    学习来源 :尚硅谷前端html+css零基础教程,2023最新前端开发html5+css3视频 系列笔记 : 【HTML4】(一)前端简介 【HTML4】(二)各种各样的常用标签 【HTML4】(三)表单及HTML4收尾 【CSS2】(四)CSS基础及CSS选择器 【CSS2】(五)CSS三大特性及常用属性 【CSS2】(六)CSS盒子模型

    2024年02月16日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包