从html到css进阶之路
文章平均质量分 57
从html+css 基础到实战,进阶之路
学完即可自主搭建静态网页
可期!
前端路上
展开
-
css 字体族 详细讲解
慢慢是一个很好的词 慢慢遇见 慢慢成长 慢慢喜欢 慢慢温柔 所以我们要一起慢慢来 慢慢看世界 慢慢变老字体族说到字体族就要为大家讲讲 图标字体 和 文本的水平垂直对齐方式一.图标字体首先来讲解图标字体:1.本质是字体,但是我们可以改变其属性。2.就是将图片打包成字体导入网页,这样可以减少网页请求。3.具有矢量性,即使放大也可以清晰观看。4.是移动端设备必须的。了解了字体图标,下面来讲讲字体图标的使用方法:1.在使用图标时可以将图标直接设置为字体然后通过 font-face 的形式对字体原创 2021-12-17 19:08:20 · 369 阅读 · 0 评论 -
css 设置段落样式 各种设置方式详细解释
我本来打算告诉你 当你不在我身边的这段日子里 我遇到的所有糟糕事 但最后我只想告诉你 我很想你设置段落样式今天我们详细讲讲设置段落样式的方式:网页的排版离不开对文字段落的设置,这里主要讲述常用的段落样式,包括文字对齐方式,段落首行缩进,首字下沉,行高,单词间距,字符间距和文本大小1.设置文字的对齐方式设置文字对齐方式需要使用 text-align 属性来实现效果。语法:text-align:left | right | center | justify参数:left “左对齐” ,right原创 2021-12-15 21:01:13 · 2221 阅读 · 0 评论 -
使用ccs 制作雪碧图 简单 一看就懂
我不喜欢胖子,但她胖就没事今天我们来制作雪碧图(就是将很多小图标放在一张图片中)一.利用雪碧图有很多优点 :1.可以减小图片的总大小2.一次请求,可减小建立键连接的消耗在这里我们来做一个运动的小人就是将小人的多个动作放在一张图片上,然后利用css动画效果让其运动起来,就能呈现出小人再跑的效果,即也是雪碧图。1.html代码<body><div class="box1"></div></body>先创建一个容器,为了让效果更好,我们索性直原创 2021-12-12 20:03:54 · 782 阅读 · 0 评论 -
css 关于背景设置详细讲解 一看就懂
这次我站在雾里连自己都看不清了,我不怪你,我只怪大雾四起,也不怪大雾四起,只怪你的爱意太浅,连大雾都要遮掩。设置背景背景是css中使用率很高,且非常重要的属性。无论是单元的纯色还是加载的背景图片,都能给整个页面带来丰富的视觉效果主要讲解:1.设置背景颜色2.设置背景图像3.设置背景重复一.设置背景颜色在css中,网页元素的背景颜色使用 background-color 属性来设置,属性值为某种颜色。颜色值的设置方法可以使用 RGB,颜色名称,rgba等。语法:background-colo原创 2021-12-11 12:46:18 · 1627 阅读 · 0 评论 -
【css盒子定位】position属性
今天是满满干货,话不多说上知识定位定位(position)的基本思想很简单,它允许用户定义元素框相对于其正常位置应该出现的位置,这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素生成一个块级框,而不论该元素是什么类型。position属性可以选择4种不同类型的定位模式。position : static | relative | absolute | fixed其中参数哈尼如下:static:静态设定为默认值。为特殊定位,对象遵循HTML定位规则。relati原创 2021-12-03 22:18:08 · 564 阅读 · 0 评论 -
css元素特殊性及元素分类,详细解释。
一.元素特殊性二.元素重要性三.元素分类今天来分别讲讲元素的特殊性,重要性以及元素的分类1.元素的特殊性特殊性描述了不同规则的相对权重,当多个规则应用到同一个元素时,权重越大的样式会优先显示.color{ color:yellow;}p{ color:blue; }应用此样式的结构代码:<div> <p class="color">这里文字显示红色</p></div>由此可见了类选择符的权重大于元素选择符。根据规范:通原创 2021-11-10 17:01:50 · 444 阅读 · 0 评论 -
css超链接的伪类和伪元素
超链接的伪类和伪元素利用超链接的伪类可以为超链接设置访问状态,给用户更带来更好的体验。当然还有适用于全局的伪类,例如鼠标移入,点击,以及获取焦点点击进去的状态。利用超链接的伪元素可以使操作页面内容,在指定位置添加内容,或修改指定位置的样式。使文章内容更加丰富,体验感更好。下面让我们一起来学习吧!1.超链接的伪类只适用于设置超链接的伪劣link;表示没访问过的链接(正常的链接)a:link { color:aqua; }visited表示原创 2021-10-01 10:45:48 · 1319 阅读 · 0 评论 -
DIV+CSS 布局技术
一,DIV+CSS布局技术一,div布局页面的优点传统的html标签中,既有控制结构的标签,又有控制变现的标签,还有本意用于控制结构后来被滥用的标签。页面的整个结构标签与表现标签混合在一起div+css的页面布局不仅仅是设计方式的转变,而且是设计思想的转变,这样为网页设计带来很大的方便1.缩减页面代码,提高页面的浏览速度2.缩短了网站改版时间,设计者只要简单地修改css文件即可轻松改版网页3.字体控制和排版控制,使我们能更好的控制页面布局4.表现和内容分离,减少网页无效的可能5.方便搜索引擎原创 2021-09-27 13:57:48 · 671 阅读 · 0 评论 -
CSS 与 HTML文档的结合方法
CSS 与 HTML文档的结合方法css控制网页内容显示格式的方式是通过许多定义的样式属性(乳字号,段落控制等)实现的,并将多个样式属性定义为一组可供调用的选择符。选择符就是某个样式的名称,称之为选择符的原因是,当HTML文档中某元素要使用该样式时,需利用该名称来选择样式想让浏览器显示出样式就需要让浏览器识别调用。这里介绍4种页面中插入样式表的方法:定义内部样式表,定义行内样式表,链入外部样式表环绕导入外部样式表。1.定义内部样式表内部样式表是指吧样式表到页面的head区内,这些定义的样式就应用到页原创 2021-09-26 22:46:37 · 794 阅读 · 0 评论 -
css属性单位
css的属性单位样式表是由属性和属性值组成的,有些属性值会用到单位。在css中属性值的单位与html中的有所不同一.长度,百分比单位使用css进行排版时,尝尝会在属性值后面加上长度或者百分比的单位1.长度单位长度有相对长度到位和绝对长度单位两种类型。相对长度单位是指以该属性的单位值为基础来完成目前的设置。绝对长度单位将不会随着显示设备的不同而改变。也就是说属性值使用绝对长度单位时,不论在那种设备上,显示效果都是一样。设置属性时,大多数仅能使用正数,只有少数属性可使用正,负数。若属性值设置为负原创 2021-09-26 13:22:13 · 333 阅读 · 0 评论 -
css 选择符介绍
一,css选择符分类css选择符分为很多类,包括:类型选择符,class选择符,id选择符,通用选择符,分组选择符,包含选择符,元素指定选择符,子对象选择符,属性选择符,下面我们来一一讲解1.类型选择符类型选择符是指以文档对象模型(DOM)作为选择符,即选择某个HTML标签为对象,设置其样式规则。类型选择符就是元素本身,定义直接使用元素名称格式:body{css代码}2.类选择符使用类选择符可以吧相同的标签定义为不同的样式。吐过你希望同一种标签在不同的地方使用不同的样式,就可以先定义两个类在应原创 2021-09-24 11:35:45 · 3945 阅读 · 0 评论 -
css简介
css的基概述css样式表,用于增强控制网页样式并将样式信息与网页内容的一种标记性语言,用于美化网页。可通过css控制html样式,是网页更加美观。css不仅可以使用在html中,还可以使用在xml和javascript目前几乎所有网页都是用css,css已成为网页设计不可缺少的编辑软件,强大的css加上你独特的设计风格,会给用户不一样的体验css命名规范必须由英文字母,数字或‘_’组成,必须由字母开头,不能为纯数字。我们需要用有意义的单词或者缩写组合来命名选择符,做到见其名知其意,这样可以节省我原创 2021-09-23 20:05:04 · 200 阅读 · 0 评论 -
第四章 HTML教你如何创建一个选择栏
一个小小的博主每天为大家分享笔记,回顾基础知识大家可以❤点点关注,收藏专栏❤每天温故而知新❀一,首先我们来了解什么是选择框那么如下图的展示就是我们今天要学习的选择框的制作1.首先我们要用到的标签及其格式如下:<select size='' name='' multiple='multiple'> <option value='可选择的内容' selected='selected'>...</option> <option>...</opt原创 2021-09-18 11:21:31 · 2660 阅读 · 0 评论 -
第三章 html列表与表格
一个小小的博主每天为大家分享笔记,回顾基础知识大家可以❤点点关注,收藏专栏❤每天温故而知新❀一,列表列表可分为 有序列表 和 无序列表 下面来了解一下具体使用方法 1.如何创建一个有序列表<ol type='符号类型'> <p>type可设置符号类型,数字,大小写英文,或罗马字母</p> <li>点赞</li> <li>收藏</li> <li>加关注</li>&原创 2021-09-17 10:15:58 · 158 阅读 · 0 评论 -
第二章 html块级标签介绍及使用
一 ,块级标签基本块级标签包括标题标签,段落标签和水平线标签。❤❤下面有我来详细介绍这些标签1.标题标签格式为:<h# align = “left | center | rigth”>标题文字<h#>标题标签中 # 用来指定标题文字大小,#取1~6之间,1最大,6最小。示例展示:<html><head><title>标题示例</title></head><boyd> <h1&原创 2021-09-16 10:36:25 · 1035 阅读 · 0 评论 -
第一章 对html的认识及基本标签介绍
HTML简介 HTML(超文本置标语言) 对普通文件添加标签而达到预期效果的标记语言且遵循W3C下面来了解一下HTML文档结构一,文档结构<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpo原创 2021-09-15 13:22:29 · 5351 阅读 · 5 评论