HTML详解连载(4)

HTML详解连载(4)

专栏链接 link

下面进行专栏介绍

本专栏是自己学前端的征程,纯手敲的代码,自己跟着黑马课程学习的,并加入一些自己的理解,对代码和笔记

进行适当修改。希望能对大家能有所帮助,同时也是请大家对我进行监督,对我写的代码进行建议,互相学习。

开始喽

CSS定义

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

书写位置

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

示例

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

注意

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

CSS引入方式

内部样式表:学习使用

CSS代码写在style标签里面

外部演示表:开发使用

CSS代码写在单独的CSS文件中(.css)

在HTML使用link标签引入

代码示例

html 复制代码
<link rel="stylesheet href="./my.css>

行内样式

配合javaScript使用

CSS写在标签的style属性值里

代码示例

html 复制代码
<div style="color=red;font-size:20px;">这是div标签</div>

选择器

作用

查找标签,设置样式

基础选择器

标签选择器

类选择器

id选择器

通配符选择器

标签选择器

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

举例

p,h1,div,a,img...

特点

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

类选择器

作用

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

步骤

定义类选择器-> .类名

使用类选择器->标签添加class="类名"

html 复制代码
<style>
/*定义类选择器*/
.red{
color:red;
}
</style>

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

强调

一个类选择器可以给多个标签使用

一个标签可以有多个类名,class属性值写多个类名,类名间用空格隔开

注意

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

开发习惯

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

id选择器

作用

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

场景

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

步骤

定义id选择器->#id名

使用id选择器->标签添加id="id名"

规则

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

通配符选择器

作用

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

复制代码
  :  * ,不需要调用,浏览器自动查找页面所有标签,设置相同的样式

范例

html 复制代码
*{
color:red;
}

新属性

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

字体大小

属性名

font-size

属性值

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

示例

html 复制代码
p{
	font-size:30px;
}

字体粗细

属性名

font-weight

属性值

数字(开发使用)

正常400 加粗700

关键字

正常normal 加粗 bold

字体样式(是否倾斜)

作用

清楚文字默认的倾斜效果

属性名

font-style

属性值

正常(不倾斜):normal

倾斜:italic

相关推荐
海市公约22 分钟前
HTML网页开发从入门到精通:从标签到表单的完整指南
前端·ide·vscode·程序人生·架构·前端框架·html
行云流水6261 小时前
前端树形结构实现勾选,半勾选,取消勾选。
前端·算法
diudiu_331 小时前
web漏洞--认证缺陷
java·前端·网络
阿珊和她的猫2 小时前
<video>` 和 `<audio>` 标签的常用属性解析
前端
LSL666_2 小时前
4 jQuery、JavaScript 作用域、闭包与 DOM 事件绑定
前端·javascript·html
yinuo2 小时前
前端跨页面通讯终极指南⑤:window.name 用法全解析
前端
小飞侠在吗2 小时前
vue computed 和 watch
前端·javascript·vue.js
yinuo2 小时前
前端跨页面通讯终极指南④:MessageChannel 用法全解析
前端
前端布鲁伊3 小时前
聊聊前端容易翻车的“环境管理”
前端·面试
毕设十刻3 小时前
基于Vue的考勤管理系统8n7j8(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js