【第二部分 | CSS】2：点缀一下html元素

最新推荐文章于 2024-10-18 11:46:13 发布
最新推荐文章于 2024-10-18 11:46:13 发布
阅读量500 收藏 1
点赞数 1
分类专栏： 【前端】HTML CSS JS 基础 文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57265007/article/details/127152928
版权

目录

| 前言

| CSS字体属性

设置字体样式 font-family

设置字体大小 font-size

设置字体粗细 font-weight

设置字体风格 font-style （斜体）

上述四个属性合起来写

| CSS文本属性

设置字体颜色 color

设置水平对齐方式 text-align

设置文本装饰 text-decoration

设置文本缩进 text-indent

设置行间距 line-height

文本属性总结

| CSS背景

背景颜色

背景图片 · 基础

背景图片 · 平铺

背景图片 · 位置 及 坐标

背景图片 · 固定 or 滚动

上述 5 种属性连写 的语法格式

背景透明、填充

总结

| CSS 的引入方式

内部样式表（嵌入式）

行内样式表（行内式）

外部样式表（链接式）

引入方式总结

| 前言

在本专栏中的【第一部分 | HTML】中，我们学习了HTML的基本用法。

默认的HTML自带部分CSS样式，但是那太丑了，我们本节学习一下给HTML内的元素加个皮肤。


| CSS字体属性

设置字体样式 font-family

  • 在style中使用   font-family   设置字体的样式 如 “宋体、雅黑”

  • 若在 font-family 中定义了多个字体，则按照 从左到右，找到第一个找得到的字体样式 进行展示

  • 该样式理论上是在 style 标签中定义，但是实际开发的时候 我们也可以选择把 <body> 标签定义上字体样式

     

 

设置字体大小 font-size

  • 不要忘记 size大小的单位为像素（px）

  • 特例：标题标签比较特殊，需要特别指定大小

 

 

设置字体粗细 font-weight

 

 

设置字体风格 font-style （斜体）

注意： 平时我们很少给文字加斜体，反而要给斜体标签（em，i）改为不倾斜字体。

 

上述四个属性合起来写

目前学过的所有字体属性 小结

 

| CSS文本属性

字体属性：文字的样式、大小、粗细、风格等……

文本属性：文字的颜色、对齐方式、装饰文本、文本缩进、行间距等……

设置字体颜色 color

 

 

 

设置水平对齐方式 text-align

只能实现水平的对齐方式。

 

设置文本装饰 text-decoration

 

 

设置文本缩进 text-indent

文本缩进有两种单位：px（像素）和em（相对单位）

 


设置行间距 line-height

语法

 

 

文本属性总结


| CSS背景

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等

背景颜色

语法 （默认颜色值为透明：transparent）

 

背景图片 · 基础

基本语法

background-image 属性描述了元素的背景图像。

实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置. (精灵图也是一种运用场景)

 

背景图片 · 平铺

基本语法

background-repeat 属性规定了当 “图片大小” 小于 “容器大小” 的时候，图片平铺的方式（以何种方式重复）

 

 

背景图片 · 位置 及 坐标

基本语法

 


坐标位置 x y 的坐标值

  • 第一类坐标值：方位名词 top center bottom left right

    • 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left top 和 top left 效果一致

    • 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

  • 第二类坐标值：百分数，由浮点数字和单位标识符组成的长度值 如以图片左上角为原点，距离左侧、右侧 20px 50px

    • 如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标

    • 如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中

背景图片 · 固定 or 滚动

背景图片固定的话，可以制作 视差滚动效果

 

上述 5 种属性连写 的语法格式

相较于 []，背景的连写没有特定的属性书写顺序，但一般约定顺序为：

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

 

 

背景透明、填充

语法: rgba( 3个rgb坐标 ，透明度 )        alpha数值越小越透明

注意:background: rgba( x1, x2, x3, x4, alpha透明度)   不能和  background-color 同用

 

总结

 

| CSS 的引入方式

内部样式表（嵌入式）

内部样式表（内嵌样式表）是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中

 

行内样式表（行内式）

行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式

 

外部样式表（链接式）

实际开发都是外部样式表. 适合于样式比较多的情况. 核心是:样式单独写到CSS 文件中，之后把CSS文件引入 到 HTML 页面中使用.

引入外部样式 的步骤

  1. 新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。

  2. 在 HTML 页面中，使用 标签引入这个文件。 《 link rel="stylesheet" href="css文件路径" 》

示例

<!--Html文件中写上 linke rel="stylesheet" href="url" 引入样式表，url为当前html文件的相对路径-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/6.外部样式表.css">
</head>
<body>
    <p id="id01">使用外部样式表引入css文件</p>
</body>
</html>

 

/*css内的所有内容 等价于原先写在 <style> 标签中的内容*/
#id01{
    color: pink;
}

 

引入方式总结

 

Graskli
关注
专栏目录
CSS-Diff：Chrome扩展程序，可轻松比较两个HTML元素CSS
01-30
选中后，CSS Diff将在“最后检查”部分中显示它。 点击“比较”按钮，为另一个元素重复整个过程。 一旦选择了两个HTML元素，CSS Diff将显示它们之间的所有CSS差异。 错误和功能 如果您发现错误或有功能请求，请在...
在html中怎样加圆点,css伪类-小圆点
weixin_28740299的博客
05-30 6499
项目需求：在每个单元格的前面加一个小圆点，效果图如下：效果图.jpg搜了一大堆文章，加小圆点的方法无非就是设置width、height、border-raduis。可是来来回回试了好多遍，就是样式加不上，汗颜~偶然间看一大神说必须加上display:inline-block;才会生效，我的天呐，不会是真的吧。对，就是这个样子滴，附上完整的代码，可随意ctrl c+v美句子哈哈山有木兮木有枝，心悦君...
HTML中的点缀--伪类
weixin_44543763的博客
03-29 640
**伪类的定义：**伪类这个叫法源于它们跟类相似,但实际上并没有类会附加到标记中的标签上。 伪类分为两种（以及新增的伪类选择器）：（主讲UI伪类）！ 一。UI伪类：会在HTML元素处于某种状态时(例如:鼠标指针位于链接上),为该元素应用CSS样式。 a.Selector:link ：匹配Selector选择器且未被访问前的元素(通常只能是超链接)。 b.Selector:visited ：匹配Se...
使用CSS3滤镜开发模糊背景（毛玻璃）效果
热门推荐
CF西西的专栏
03-06 1万+
功能说明： 在平时的开发中我们时常需要弹出某些对话框，同时希望用户能够忽略背景把注意力集中到弹框上，这时候从用户 体验的角度出发，我们可以选择将弹框背景模糊化，用以增强用户的实际体验效果。 实现步骤： 1、背景div使用两个class：bg和bg-blur。 2、bg设置原始背景样式，需写明初始的滤镜blur值 filter:blur(0px)。
css背景属性_背景重复（CSS属性）
culh2177的博客
08-13 1135
css背景属性 描述 (Description) The background-repeat property controls whether or not a background-image is repeated (tiled), and if it is repeated, the property defines along which of the specified axes (x...
css实现背景透明，文字不透明效果
weixin_34232363的博客
10-08 538
今天在开发一个漂浮在背景图上方的模态动画，之前只记得opacity和rgba可以实现透明度设置，但是在实现“背景透明，文字不透明”的效果中却不是都可行的，下面我们就来实际测试一下。css实现透明效果的方法一般有以下3种方式，以下是不透明度都为50%的写法css3的opacity:x，x 的取值从 0 到 1，如opacity: 0.5css3的rgba(red, green, blue...
HTML5&CSS3网页制作：伪元素选择器.pptx
06-01
CSS3 的一个重要特性是引入了伪元素选择器，这使得我们可以对元素的特定部分进行更精细的控制，无需额外的 HTML 标签。在本节中，我们将深入探讨 `:before` 和 `:after` 两个伪元素选择器。 伪元素选择器不是实际的...
CSS :befor :after 伪元素的巧妙用法
12-12
CSS中的:befor、:after都会创建一个伪元素，其中:befor创建的伪元素是所选元素的第一个子元素，:after创建的伪元素是所选元素的最后一个子元素。 :befor、:after创建的伪元素默认样式为内联样式。 1.2 语法 /* CSS3...
Start2impact-HTML-CSS:Sito网站
03-19
- **HTML标签**：HTML由一系列的元素组成，每个元素都由标签定义。例如`<html>`是文档的根元素，`<head>`包含元数据，`<body>`则包含可见内容。 - **文本元素**：如`<h1>`到`<h6>`用于标题，`<p>`用于段落，`<a>`...
炫酷多彩的粒子效果——canvas实现前端页面背景点缀
ice_teas的博客
06-03 762
想直接感受动态效果的可以直接访问我的个人主页：http://bingchacha.top/ 这里就直接上图吧~ 如果想使用的话非常简单，加载我写好的js文件引入就行了，具体代码和操作可以访问项目的github，readme文档我都写得非常清晰了：https://github.com/Chacha-Bing/rainbow-particles 瞅一眼可配置项： new Rainbow({ max_age : 粒子可达的最长寿命，也就是粒子的最大历程，此值越大，粒子的平均路径越长, .
【CSS】纯CSS Loading动画组件
weixin_45274678的博客
10-18 118
【代码】【CSS】纯CSS Loading动画组件。
【网页设计】CSS 盒子模型
Akiiiira的博客
10-15 981
1. 布局为啥用不同盒子,我只想用div？标签都是有语义的, 合理的地方用合理的标签。比如产品标题 就用 h, 大量文字段落就用p2. 为啥用辣么多类名？类名就是给每个盒子起了一个名字,可以更好的找到这个盒子, 选取盒子更容易,后期维护也方便。3. 到底用 margin 还是 padding？大部分情况两个可以混用，两者各有优缺点，但是根据实际情况，总是有更简单的方法实现。4. 自己做没有思路？布局有很多种实现方式，同学们可以开始先模仿老师的写法，然后再做出自己的风格。
【css-在一个元素中设置font-size和实际渲染字体大小不一致】
最新发布
weixin_47416539的博客
10-18 118
首先，这个不是bug，是Chromium内核提高移动端文本可读性的一个特性，叫做这个特性被称做「Text Autosizer」，又称「Font Boosting」、「Font Inflation」 css-在一个元素中设置font-size和实际渲染字体大小不一致
深入解析CSS中的!important规则
ning的博客
10-15 409
用户可能会通过浏览器扩展或自定义CSS来改变网站的外观。在这种情况下，开发者可以使用!important来确保某些样式声明不被用户自定义样式覆盖，从而尊重用户的视觉偏好。!important是CSS中一个强大的工具，但应该谨慎使用。它应该被视为解决特定样式冲突的最后手段，而不是常规做法。在可能的情况下，通过优化选择器的特异性和结构来避免使用!important会是更好的选择。记住，良好的代码习惯和结构化的设计往往比依赖于!important更能带来长期的维护性和可扩展性。版权声明。
CSS高级技巧
探索软件工程的奥秘
10-09 1316
CSS 精灵，也叫CSS Sprites，是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中，再background-position精确的定位出背景图片的位置。优点：减少服务器被请求次数，减轻服务器的压力，提高页面加载速度。作用：可以为一个元素在不同状态之间切换的时候添加过渡效果。（2）作用：在网页中添加简单的、颜色单一的小图标。作用：设置整个元素的透明度（包含背景和内容）（1）字体图标：展示的是图标，本质是字体。属性：transition（复合属性）属性值：过渡的属性 花费时间（s）
uniapp实现页面开发中
CSDN_Admin0的博客
10-11 430
【代码】uniapp实现页面开发中。
前端入门学习之css盒子原则
qq_61715584的博客
10-15 673
所以，到这里，我们可以把网页中的所有元素都看作是一个盒子，也就是长方形矩形，一个网页里面就是通过不同的盒子组建搭在一起的，也就是说，就好像搭建俄罗斯方块一样，我们可以以这样的思路去搭建一个网站。当一个html标签元素展示方式为 block，也就是它的 display 属性为 block，那么我们可以想象它像一个长方形盒子一样，这种展示方式也叫做块级元素。边框，顾名思义，也就是我们盒子的边框设置，在p标签中，默认是没有边框的，但是我们可以加上去。外边距，顾名思义，盒子一和盒子二之间的距离就是外边距。
CSS常见选择器
westdjjdjdk的博客
10-15 381
在刚刚学习CSS时我们会了解标签之间的父子关系，例如 u1 li{ color: red}在这里如果li是u1的后代成立，那么在u1下的li标签将会变成红色，在这里只要是后代就可以儿子可以儿子的儿子也可以。使用类选择器是需要再标签中写入class属性这样的操作也可以理解为在指定的标签做上记号以进行操作，需要特别注意的是class在可以在不同的标签中重复使用，一旦重复使用那么对该类进行样式的改变时会全部生效，先声明一个id属性 但是与类选择器不同的是这的id是唯一的，不能对个标签使用。
Web前端-CSS的元素显示模式
2301_79188932的博客
10-15 471
在行内元素中有几个特殊的标签—— <img />、<input />、<td>，它们同时具有块元素和行内元素的特点。常见的行内元素有<a>、<strong>、<b>、、<i>、<del>、<s>、<ins>、<u>、<span>等，其中。常见的块<em>元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>标签是最典型的块元素。特殊情况下，我们需要元素模式的转换，简单理解:一个模式的元素需要另外一种模式的特性，比如想要增加链接<a>的触发范围。标签是最典型的行内元素。
使用css,给下面的html 加上-|||-背景色:蓝色blue-|||-字体大小设置为:16px-|||-宽度:100px-|||-高度:100px-|||-代码如下: ​〈div class=“school”〉培黎职业学院〈／div〉
03-28
要给上述HTML代码添加CSS样式，可以使用以下代码： ```css <style> .school { background-color: blue; font-size: 16px; width: 100px; height: 100px; } </style> ``` 这段CSS代码将会给class为"school"的div元素添加背景色为蓝色（blue），字体大小为16像素（16px），宽度为100像素（100px），高度为100像素（100px）的样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Graskli

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值